Client:OAuth2: add translations keys

2023-11-10 16:05:55 +03:00 · 2023-11-10 16:05:55 +03:00 · 6ce021dd3a
commit 6ce021dd3a
parent 97e3c2769d
21 changed files with 111 additions and 93 deletions
--- a/packages/client/public/locales/en/OAuth.json
+++ b/packages/client/public/locales/en/OAuth.json
@ -1,8 +1,42 @@
 {
+  "Access": "Access",
+  "AppName": "App name",
+  "Apps": "Applications",
+  "AppIcon": "App icon",
+  "AuthButton": "Auth button",
+  "AccessGranted": "Access granted",
+  "AllowedOrigins": "Allowed origins",
+  "AllowedOriginsHelpButton": "Allowed origin help",
+  "Creator": "Creator",
  "OAuth": "OAuth",
  "NoOAuthAppHeader": "No OAuth applications",
-  "NoOAuthAppDescription": "OAuth applications are used to access the ONLYOFFICE DocSpace API",
+  "OAuthAppDescription": "OAuth applications are used to access the ONLYOFFICE DocSpace API",
  "RegisterNewApp": "Register a new application",
+  "Read": "Read",
+  "Write": "Write",
  "NewApp": "New application",
-  "EditApp": "Edit application"
+  "EditApp": "Edit application",
+  "SignIn": "Sign in with DocSpace",
+  "Secret": "Secret",
+  "Reset": "Reset",
+  "RedirectsURLS": "Redirects URLS",
+  "RedirectsURLSHelpButton": "Redirect uris help button",
+  "OAuthHeaderBlock": "OAuth urls",
+  "SupportAndLegalInfo": "Support & Legal info",
+  "PrivacyPolicy": "Privacy policy",
+  "TermsOfService": "Terms of Service",
+  "LastModified": "Last modified",
+  "Scopes": "Scopes",
+  "WebsiteUrl": "Website URL",
+  "EnterURL": "Enter URL",
+  "EnterDescription": "Enter description",
+  "ID": "ID",
+  "IconDescription": "JPG, PNG or SVG, 32x32",
+  "Client": "Client",
+  "ProfileDescription": "Here you can check the apps info to which you have granted the auth access, and revoke consent if needed.",
+  "ClientHelpButton": "Credentials for using OAth 2.0 as your Authentication type. Note: Any enterprise admin who knows the app's client ID will be able to retrieve information about the app including app name, authentication type, app scopes and redirect URI.",
+  "TermsOfServiceURL": "Terms of Service URL",
+  "TermsOfServiceURLHelpButton": "Terms of service help",
+  "PrivacyPolicyURL": "Privacy policy URL",
+  "PrivacyPolicyURLHelpButton": "Provide a URL link to your Privacy Policy that must comply with applicable laws and regulations and that make clear how you collect, use, share, retain and otherwise process personal information."
 }
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/BasicBlock.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/BasicBlock.tsx
@ -63,33 +63,33 @@ const BasicBlock = ({
      <BlockHeader header={"Basic info"} />
      <StyledInputBlock>
        <InputGroup
-          label={"App name"}
+          label={t("AppName")}
          name={"name"}
-          placeholder={"Enter name"}
+          placeholder={t("EnterName")}
          value={nameValue}
          error={error.name}
          onChange={onChange}
        />
        <InputGroup
-          label={"Website URL"}
+          label={t("WebsiteUrl")}
          name={"website_url"}
-          placeholder={"Enter URL"}
+          placeholder={t("EnterURL")}
          value={websiteUrlValue}
          error={error.websiteUrl}
          onChange={onChange}
          disabled={isEdit}
        />
        <SelectGroup
-          label={"App icon"}
+          label={t("AppIcon")}
          value={logoValue}
          selectLabel={"Select new image"}
-          description={"JPG, PNG or SVG, 32x32"}
+          description={t("IconDescription")}
          onSelect={onSelect}
        />
        <TextAreaGroup
-          label={"Description"}
+          label={t("Common:Description")}
          name={"description"}
-          placeholder={"Enter description"}
+          placeholder={t("EnterDescription")}
          value={descriptionValue}
          error={error.description}
          onChange={onChange}
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ClientBlock.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ClientBlock.tsx
@ -33,13 +33,12 @@ const ClientBlock = ({
  return (
    <StyledBlock>
      <BlockHeader
-        header={"Client"}
-        helpButtonText="Credentials for using OAth 2.0 as your Authentication type.
-Note: Any enterprise admin who knows the app's client ID will be able to retrieve information about the app including app name, authentication type, app scopes and redirect URI."
+        header={t("Client")}
+        helpButtonText={t("ClientHelpButton")}
      />
      <StyledInputBlock>
        <InputGroup
-          label={"ID"}
+          label={t("ID")}
          name={""}
          placeholder={""}
          value={value.id}
@ -48,7 +47,7 @@ Note: Any enterprise admin who knows the app's client ID will be able to retriev
          withCopy
        />
        <InputGroup
-          label={"Secret"}
+          label={t("Secret")}
          name={""}
          placeholder={""}
          value={value.secret}
@ -56,7 +55,7 @@ Note: Any enterprise admin who knows the app's client ID will be able to retriev
          onChange={onChange}
          withCopy
          isPassword
-          buttonLabel={"Reset"}
+          buttonLabel={t("Reset")}
          onButtonClick={onResetClick}
        />
      </StyledInputBlock>
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/OAuthBlock.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/OAuthBlock.tsx
@ -26,24 +26,24 @@ const OAuthBlock = ({
 }: OAuthBlockProps) => {
  return (
    <StyledBlock>
-      <BlockHeader header={"OAuth URLs"} />
+      <BlockHeader header={t("OAuthHeaderBlock")} />
      <StyledInputBlock>
        <MultiInputGroup
-          label={"Redirect URLs"}
-          placeholder={"Enter URL"}
+          label={t("RedirectsURLS")}
+          placeholder={t("EnterURL")}
          name={"redirect_uris"}
          onAdd={changeValue}
          currentValue={redirectUrisValue}
-          helpButtonText={"Redirect uris"}
+          helpButtonText={t("RedirectsURLSHelpButton")}
          isDisabled={isEdit}
        />
        <MultiInputGroup
-          label={"Allowed origins"}
-          placeholder={"Enter URL"}
+          label={t("AllowedOrigins")}
+          placeholder={t("EnterURL")}
          name={"allowed_origins"}
          onAdd={changeValue}
          currentValue={allowedOriginsValue}
-          helpButtonText={"Allowed origins"}
+          helpButtonText={t("AllowedOriginsHelpButton")}
          isDisabled={isEdit}
        />
      </StyledInputBlock>
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ScopesBlock.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ScopesBlock.tsx
@ -201,7 +201,7 @@ const ScopesBlock = ({
        fontWeight={600}
        lineHeight={"22px"}
      >
-        Read
+        {t("Read")}
      </Text>
      {/* @ts-ignore */}
      <Text
@ -210,7 +210,7 @@ const ScopesBlock = ({
        fontWeight={600}
        lineHeight={"22px"}
      >
-        Write
+        {t("Write")}
      </Text>
      {list.map((item) => item)}
    </StyledScopesContainer>
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/SupportBlock.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/SupportBlock.tsx
@ -37,28 +37,26 @@ const SupportBlock = ({

  return (
    <StyledBlock>
-      <BlockHeader header={"Support & Legal info"} />
+      <BlockHeader header={t("SupportAndLegalInfo")} />
      <StyledInputBlock>
        <InputGroup
-          label={"Privacy policy URL"}
+          label={t("PrivacyPolicyURL")}
          name={"policy_url"}
-          placeholder={"Enter URL"}
+          placeholder={t("EnterURL")}
          value={policyUrlValue}
          error={error.policyUrl}
          onChange={onChange}
-          helpButtonText={
-            "Provide a URL link to your Privacy Policy that must comply with applicable laws and regulations and that make clear how you collect, use, share, retain and otherwise process personal information."
-          }
+          helpButtonText={t("PrivacyPolicyURLHelpButton")}
          disabled={isEdit}
        />
        <InputGroup
-          label={"Terms of Service URL"}
+          label={t("TermsOfServiceURL")}
          name={"terms_url"}
-          placeholder={"Enter URL"}
+          placeholder={t("EnterURL")}
          value={termsUrlValue}
          error={error.termsUrl}
          onChange={onChange}
-          helpButtonText={"Terms of service help"}
+          helpButtonText={t("TermsOfServiceURLHelpButton")}
          disabled={isEdit}
        />
      </StyledInputBlock>
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx
@ -36,7 +36,6 @@ const ClientForm = ({

  currentDeviceType,
 }: ClientFormProps) => {
-  const { t } = useTranslation(["Common"]);
  const navigate = useNavigate();

  const [isLoading, setIsLoading] = React.useState<boolean>(false);
@ -63,6 +62,7 @@ const ClientForm = ({

    scopes: [],
  });
+  const { t } = useTranslation(["OAuth", "Common"]);

  const [clientId, setClientId] = React.useState<string>("");
  const [clientSecret, setClientSecret] = React.useState<string>("");
@ -279,8 +279,8 @@ const ClientForm = ({
            isEdit={isEdit}
          />
          <ButtonsBlock
-            saveLabel={"Save"}
-            cancelLabel={"Cancel"}
+            saveLabel={t("Common:SaveButton")}
+            cancelLabel={t("Common:CancelButton")}
            onSaveClick={onSaveClick}
            onCancelClick={onCancelClick}
            isRequestRunning={isRequestRunning}
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/EmptyScreen/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/EmptyScreen/index.tsx
@ -12,7 +12,7 @@ const OAuthEmptyScreen = ({ t }: EmptyScreenProps) => {
      imageSrc={EmptyScreenOauthSvgUrl}
      imageAlt={"Empty oauth list"}
      headerText={t("NoOAuthAppHeader")}
-      subheadingText={t("NoOAuthAppDescription")}
+      subheadingText={t("OAuthAppDescription")}
      buttons={<RegisterNewButton t={t} />}
    />
  );
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/InfoDialog.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/InfoDialog.tsx
@ -142,7 +142,7 @@ const InfoDialog = ({

  isProfile,
 }: InfoDialogProps) => {
-  const { t } = useTranslation(["Common"]);
+  const { t } = useTranslation(["OAuth", "Common"]);

  const [showDescription, setShowDescription] = React.useState(false);
  const [isRender, setIsRender] = React.useState(false);
@ -212,7 +212,7 @@ const InfoDialog = ({
                noSelect
                truncate
              >
-                Creator
+                {t("Creator")}
              </Text>
              <div className="creator-block">
                <Avatar source={client?.creatorAvatar} size={"min"} />
@ -240,7 +240,7 @@ const InfoDialog = ({
                noSelect
                truncate
              >
-                Description
+                {t("Common:Description")}
              </Text>
              {/* @ts-ignore */}
              <Text
@ -280,7 +280,7 @@ const InfoDialog = ({
            noSelect
            truncate
          >
-            Website
+            {t("Common:Website")}
          </Text>
          {/* @ts-ignore */}
          <Link
@ -303,7 +303,7 @@ const InfoDialog = ({
            noSelect
            truncate
          >
-            Access
+            {t("Access")}
          </Text>
          <ScopeList
            selectedScopes={client?.scopes || []}
@ -321,7 +321,7 @@ const InfoDialog = ({
                noSelect
                truncate
              >
-                Access granted
+                {t("AccessGranted")}
              </Text>
              {/* @ts-ignore */}
              <Text
@ -344,7 +344,7 @@ const InfoDialog = ({
            noSelect
            truncate
          >
-            Support & Legal info
+            {t("SupportAndLegalInfo")}
          </Text>
          {/* @ts-ignore */}
          <Text
@ -365,7 +365,7 @@ const InfoDialog = ({
              type={"action"}
              target={"_blank"}
            >
-              Privacy policy
+              {t("PrivacyPolicy")}
            </Link>
            <span className="separator"></span>
            {/* @ts-ignore */}
@ -378,7 +378,7 @@ const InfoDialog = ({
              type={"action"}
              target={"_blank"}
            >
-              Terms of Service
+              {t("Terms of Service")}
            </Link>
          </Text>
          {!isProfile && (
@ -392,7 +392,7 @@ const InfoDialog = ({
                noSelect
                truncate
              >
-                Last modified
+                {t("LastModified")}
              </Text>
              {/* @ts-ignore */}
              <Text
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx
@ -19,7 +19,7 @@ export const OAuthRow = (props: RowProps) => {
  } = props;
  const navigate = useNavigate();

-  const { t } = useTranslation(["Common"]);
+  const { t } = useTranslation(["OAuth", "Common", "Files"]);

  const editClient = () => {
    navigate(`${item.clientId}`);
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.tsx
@ -4,8 +4,6 @@ import Text from "@docspace/components/text";

 import ToggleButton from "@docspace/components/toggle-button";

-import { isMobileOnly } from "react-device-detect";
-
 import {
  StyledRowContent,
  ContentWrapper,
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx
@ -1,6 +1,5 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
-import { isMobile } from "react-device-detect";

 //@ts-ignore
 import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.tsx
@ -7,7 +7,7 @@ import { HeaderProps } from "./TableView.types";

 const Header = (props: HeaderProps) => {
  const { sectionWidth, tableRef, columnStorageName, tagRef } = props;
-  const { t } = useTranslation(["Common"]);
+  const { t } = useTranslation(["Oauth", "Files", "Webhooks", "Common"]);

  const defaultColumns: {
    [key: string]:
@ -27,21 +27,21 @@ const Header = (props: HeaderProps) => {
    },
    {
      key: "Creator",
-      title: "Creator",
+      title: t("Creator"),
      resizable: true,
      enable: true,
      minWidth: 150,
    },
    {
      key: "Modified",
-      title: "Modified",
+      title: t("Files:ByLastModified"),
      resizable: true,
      enable: true,
      minWidth: 150,
    },
    {
      key: "Scopes",
-      title: "Scopes",
+      title: t("Scopes"),
      resizable: true,
      enable: true,
      withTagRef: true,
@ -49,7 +49,7 @@ const Header = (props: HeaderProps) => {
    },
    {
      key: "State",
-      title: "State",
+      title: t("Webhooks:State"),
      enable: true,
      resizable: false,
      defaultSize: 64,
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx
@ -30,7 +30,7 @@ const Row = (props: RowProps) => {
  } = props;
  const navigate = useNavigate();

-  const { t } = useTranslation(["Common"]);
+  const { t } = useTranslation(["OAuth", "Common", "Files"]);

  const editClient = () => {
    navigate(`${item.clientId}`);
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/index.tsx
@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { useTranslation } from "react-i18next";

 //@ts-ignore
 import { ClientProps } from "@docspace/common/utils/oauth/interfaces";
@ -42,22 +43,11 @@ interface ListProps {
  viewAs: ViewAsType;
 }

-const List = ({ t, clients, viewAs }: ListProps) => {
+const List = ({ clients, viewAs }: ListProps) => {
+  const { t } = useTranslation(["OAuth", "Common"]);
+
  return (
    <StyledContainer>
-      <Text
-        fontSize={"16px"}
-        fontWeight={700}
-        lineHeight={"22px"}
-        title={"OAuth applications"}
-        tag={""}
-        as={"p"}
-        color={""}
-        textAlign={""}
-        className="header"
-      >
-        {"OAuth applications"}
-      </Text>
      <Text
        fontSize={"12px"}
        fontWeight={400}
@ -69,7 +59,7 @@ const List = ({ t, clients, viewAs }: ListProps) => {
        textAlign={""}
        className="description"
      >
-        {"OAuth description"}
+        {t("OAuthAppDescription")}
      </Text>
      <RegisterNewButton t={t} />
      <Consumer>
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx
@ -157,6 +157,8 @@ const PreviewDialog = ({
  client,
  theme,
 }: PreviewDialogProps) => {
+  const { t } = useTranslation(["OAuth"]);
+
  const onClose = () => setPreviewDialogVisible?.(false);

  const icon = theme.isBase ? OnlyofficeLight : OnlyofficeDark;
@ -193,7 +195,7 @@ const PreviewDialog = ({
          <StyledPreviewContainer>
            <SocialButton
              className={"social-button"}
-              label={"Sign in with DocSpace"}
+              label={t("SignIn")}
              IconComponent={icon}
              onClick={() => {
                window.open(link, "login", linkParams);
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/index.tsx
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/index.tsx
@ -1,5 +1,6 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
+import { useTranslation } from "react-i18next";

 import { IClientProps } from "@docspace/common/utils/oauth/interfaces";
 import { useViewEffect } from "@docspace/common/hooks";
@ -41,6 +42,8 @@ const AuthorizedApps = ({
  infoDialogVisible,
  fetchScopes,
 }: AuthorizedAppsProps) => {
+  const { t } = useTranslation(["OAuth"]);
+
  const getConsentList = React.useCallback(async () => {
    fetchScopes?.();
    await fetchConsents?.();
@ -62,8 +65,7 @@ const AuthorizedApps = ({
    <StyledContainer>
      {/* @ts-ignore */}
      <Text fontSize={"12px"} fontWeight={"400"} lineHeight={"16px"}>
-        Here you can check the apps info to which you have granted the auth
-        access, and revoke consent if needed.
+        {t("ProfileDescription")}
      </Text>
      <Consumer>
        {(context: { sectionWidth: number; sectionHeight: number }) => (
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/RowView/Row.tsx
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/RowView/Row.tsx
@ -19,11 +19,7 @@ export const OAuthRow = (props: RowProps) => {
  } = props;
  const navigate = useNavigate();

-  const { t } = useTranslation(["Common"]);
-
-  const editClient = () => {
-    navigate(`${item.clientId}`);
-  };
+  const { t } = useTranslation(["OAuth", "Common", "Files"]);

  const contextOptions =
    getContextMenuItems && getContextMenuItems(t, item, false, false);
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/TableView/Header.tsx
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/TableView/Header.tsx
@ -7,7 +7,7 @@ import { HeaderProps } from "./TableView.types";

 const Header = (props: HeaderProps) => {
  const { sectionWidth, tableRef, columnStorageName, tagRef } = props;
-  const { t } = useTranslation(["Common"]);
+  const { t } = useTranslation(["Common", "OAuth"]);

  const defaultColumns: {
    [key: string]:
@ -18,7 +18,7 @@ const Header = (props: HeaderProps) => {
  }[] = [
    {
      key: "App",
-      title: "Applications",
+      title: t("Apps"),
      resizable: true,
      enable: true,
      default: true,
@ -27,14 +27,14 @@ const Header = (props: HeaderProps) => {
    },
    {
      key: "Website",
-      title: "Website",
+      title: t("Website"),
      resizable: true,
      enable: true,
      minWidth: 150,
    },
    {
      key: "Access granted",
-      title: "Access granted",
+      title: t("AccessGranted"),
      resizable: true,
      enable: true,
      minWidth: 150,
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/TableView/Row.tsx
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/TableView/Row.tsx
@ -26,7 +26,7 @@ const Row = (props: RowProps) => {
    setSelection,
  } = props;

-  const { t } = useTranslation(["Common"]);
+  const { t } = useTranslation(["OAuth", "Common", "Files"]);

  const contextOptions =
    getContextMenuItems && getContextMenuItems(t, item, false, false);
--- a/packages/client/src/store/OAuthStore.ts
+++ b/packages/client/src/store/OAuthStore.ts
@ -385,7 +385,7 @@ class OAuthStore implements OAuthStoreProps {
    const openOption = {
      key: "open",
      icon: ExternalLinkReactSvgUrl,
-      label: "Open",
+      label: t("Files:Open"),
      onClick: () => window.open(item.websiteUrl, "_blank"),
      isDisabled: isInfo,
    };
@ -393,7 +393,7 @@ class OAuthStore implements OAuthStoreProps {
    const infoOption = {
      key: "info",
      icon: SettingsIcon,
-      label: "Info",
+      label: t("Common:Info"),
      onClick: onShowInfo,
      isDisabled: isInfo,
    };
@ -455,28 +455,28 @@ class OAuthStore implements OAuthStoreProps {
    const editOption = {
      key: "edit",
      icon: PencilReactSvgUrl,
-      label: t("Edit"),
+      label: t("Common:Edit"),
      onClick: () => this.editClient(clientId),
    };

    const authButtonOption = {
      key: "auth-button",
      icon: CodeReactSvgUrl,
-      label: "Auth button",
+      label: t("AuthButton"),
      onClick: onShowPreview,
    };

    const enableOption = {
      key: "enable",
      icon: EnableReactSvgUrl,
-      label: t("Enable"),
+      label: t("Common:Enable"),
      onClick: () => onEnable(true),
    };

    const disableOption = {
      key: "disable",
      icon: RemoveReactSvgUrl,
-      label: t("Disable"),
+      label: t("Common:Disable"),
      onClick: () => onEnable(false),
    };

@ -487,7 +487,7 @@ class OAuthStore implements OAuthStoreProps {
      },
      {
        key: "delete",
-        label: t("Delete"),
+        label: t("Common:Delete"),
        icon: DeleteIcon,
        onClick: () => onDelete(),
      },