diff --git a/app/hooks/useSettingsConfig.ts b/app/hooks/useSettingsConfig.ts index 6b63596ee..b1553ef25 100644 --- a/app/hooks/useSettingsConfig.ts +++ b/app/hooks/useSettingsConfig.ts @@ -17,6 +17,7 @@ import { import React from "react"; import { useTranslation } from "react-i18next"; import { integrationSettingsPath } from "@shared/utils/routeHelpers"; +import ApiKeys from "~/scenes/Settings/ApiKeys"; import Details from "~/scenes/Settings/Details"; import Export from "~/scenes/Settings/Export"; import Features from "~/scenes/Settings/Features"; @@ -30,7 +31,6 @@ import Profile from "~/scenes/Settings/Profile"; import Security from "~/scenes/Settings/Security"; import SelfHosted from "~/scenes/Settings/SelfHosted"; import Shares from "~/scenes/Settings/Shares"; -import Tokens from "~/scenes/Settings/Tokens"; import Zapier from "~/scenes/Settings/Zapier"; import GoogleIcon from "~/components/Icons/GoogleIcon"; import ZapierIcon from "~/components/Icons/ZapierIcon"; @@ -89,7 +89,7 @@ const useSettingsConfig = () => { Api: { name: t("API Tokens"), path: "/settings/tokens", - component: Tokens, + component: ApiKeys, enabled: can.createApiKey, group: t("Account"), icon: CodeIcon, diff --git a/app/menus/ApiKeyMenu.tsx b/app/menus/ApiKeyMenu.tsx index 1681138fd..81571816f 100644 --- a/app/menus/ApiKeyMenu.tsx +++ b/app/menus/ApiKeyMenu.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { useTranslation } from "react-i18next"; import { useMenuState } from "reakit/Menu"; import ApiKey from "~/models/ApiKey"; -import TokenRevokeDialog from "~/scenes/Settings/components/TokenRevokeDialog"; +import ApiKeyRevokeDialog from "~/scenes/Settings/components/ApiKeyRevokeDialog"; import ContextMenu from "~/components/ContextMenu"; import MenuItem from "~/components/ContextMenu/MenuItem"; import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton"; @@ -11,12 +11,10 @@ import useStores from "~/hooks/useStores"; type Props = { /** The apiKey to associate with the menu */ - token: ApiKey; - /** CSS class name */ - className?: string; + apiKey: ApiKey; }; -function ApiKeyMenu({ token, className }: Props) { +function ApiKeyMenu({ apiKey }: Props) { const menu = useMenuState({ modal: true, }); @@ -28,18 +26,14 @@ function ApiKeyMenu({ token, className }: Props) { title: t("Revoke token"), isCentered: true, content: ( - + ), }); - }, [t, dialogs, token]); + }, [t, dialogs, apiKey]); return ( <> - + {t("Revoke")} diff --git a/app/scenes/Settings/Tokens.tsx b/app/scenes/Settings/ApiKeys.tsx similarity index 90% rename from app/scenes/Settings/Tokens.tsx rename to app/scenes/Settings/ApiKeys.tsx index b0e3ca4e5..4966c3699 100644 --- a/app/scenes/Settings/Tokens.tsx +++ b/app/scenes/Settings/ApiKeys.tsx @@ -15,9 +15,9 @@ import useBoolean from "~/hooks/useBoolean"; import useCurrentTeam from "~/hooks/useCurrentTeam"; import usePolicy from "~/hooks/usePolicy"; import useStores from "~/hooks/useStores"; -import TokenListItem from "./components/TokenListItem"; +import ApiKeyListItem from "./components/ApiKeyListItem"; -function Tokens() { +function ApiKeys() { const team = useCurrentTeam(); const { t } = useTranslation(); const { apiKeys } = useStores(); @@ -59,14 +59,15 @@ function Tokens() { fetch={apiKeys.fetchPage} items={apiKeys.orderedData} heading={

{t("Active")}

} - renderItem={(token: ApiKey) => ( - + renderItem={(apiKey: ApiKey) => ( + )} /> @@ -74,4 +75,4 @@ function Tokens() { ); } -export default observer(Tokens); +export default observer(ApiKeys); diff --git a/app/scenes/Settings/Notifications.tsx b/app/scenes/Settings/Notifications.tsx index bb540750c..91e137898 100644 --- a/app/scenes/Settings/Notifications.tsx +++ b/app/scenes/Settings/Notifications.tsx @@ -157,6 +157,7 @@ function Notifications() { return ( diff --git a/app/scenes/Settings/components/TokenListItem.tsx b/app/scenes/Settings/components/ApiKeyListItem.tsx similarity index 79% rename from app/scenes/Settings/components/TokenListItem.tsx rename to app/scenes/Settings/components/ApiKeyListItem.tsx index 2b96efbdf..de3daf642 100644 --- a/app/scenes/Settings/components/TokenListItem.tsx +++ b/app/scenes/Settings/components/ApiKeyListItem.tsx @@ -10,10 +10,10 @@ import useToasts from "~/hooks/useToasts"; import ApiKeyMenu from "~/menus/ApiKeyMenu"; type Props = { - token: ApiKey; + apiKey: ApiKey; }; -const TokenListItem = ({ token }: Props) => { +const ApiKeyListItem = ({ apiKey }: Props) => { const { t } = useTranslation(); const { showToast } = useToasts(); const [linkCopied, setLinkCopied] = React.useState(false); @@ -35,21 +35,21 @@ const TokenListItem = ({ token }: Props) => { return ( {token.secret.slice(0, 15)}…} + key={apiKey.id} + title={apiKey.name} + subtitle={{apiKey.secret.slice(0, 15)}…} actions={ - + - + } /> ); }; -export default TokenListItem; +export default ApiKeyListItem; diff --git a/app/scenes/Settings/components/TokenRevokeDialog.tsx b/app/scenes/Settings/components/ApiKeyRevokeDialog.tsx similarity index 79% rename from app/scenes/Settings/components/TokenRevokeDialog.tsx rename to app/scenes/Settings/components/ApiKeyRevokeDialog.tsx index 2645ff57e..b39f07661 100644 --- a/app/scenes/Settings/components/TokenRevokeDialog.tsx +++ b/app/scenes/Settings/components/ApiKeyRevokeDialog.tsx @@ -4,15 +4,15 @@ import ApiKey from "~/models/ApiKey"; import ConfirmationDialog from "~/components/ConfirmationDialog"; type Props = { - token: ApiKey; + apiKey: ApiKey; onSubmit: () => void; }; -export default function TokenRevokeDialog({ token, onSubmit }: Props) { +export default function ApiKeyRevokeDialog({ apiKey, onSubmit }: Props) { const { t } = useTranslation(); const handleSubmit = async () => { - await token.delete(); + await apiKey.delete(); onSubmit(); }; @@ -24,7 +24,7 @@ export default function TokenRevokeDialog({ token, onSubmit }: Props) { danger > {t("Are you sure you want to revoke the {{ tokenName }} token?", { - tokenName: token.name, + tokenName: apiKey.name, })} ); diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json index e9c61c9d3..178037d16 100644 --- a/shared/i18n/locales/en_US/translation.json +++ b/shared/i18n/locales/en_US/translation.json @@ -658,6 +658,14 @@ "Search titles only": "Search titles only", "No documents found for your search filters.": "No documents found for your search filters.", "Search Results": "Search Results", + "New token": "New token", + "You can create an unlimited amount of personal tokens to authenticate\n with the API. Tokens have the same permissions as your user account.\n For more details see the developer documentation.": "You can create an unlimited amount of personal tokens to authenticate\n with the API. Tokens have the same permissions as your user account.\n For more details see the developer documentation.", + "Active": "Active", + "Create a token": "Create a token", + "API token copied to clipboard": "API token copied to clipboard", + "Copied": "Copied", + "Revoking": "Revoking", + "Are you sure you want to revoke the {{ tokenName }} token?": "Are you sure you want to revoke the {{ tokenName }} token?", "Allowed domains": "Allowed domains", "The domains which should be allowed to create new accounts using SSO. Changing this setting does not affect existing user accounts.": "The domains which should be allowed to create new accounts using SSO. Changing this setting does not affect existing user accounts.", "Remove domain": "Remove domain", @@ -688,11 +696,6 @@ "Last accessed": "Last accessed", "Date shared": "Date shared", "Shared nested": "Shared nested", - "API token copied to clipboard": "API token copied to clipboard", - "Copied": "Copied", - "Revoking": "Revoking", - "Are you sure you want to revoke the {{ tokenName }} token?": "Are you sure you want to revoke the {{ tokenName }} token?", - "Active": "Active", "Everyone": "Everyone", "Admins": "Admins", "Settings saved": "Settings saved", @@ -808,9 +811,6 @@ "Sharing is currently disabled.": "Sharing is currently disabled.", "You can globally enable and disable public document sharing in the security settings.": "You can globally enable and disable public document sharing in the security settings.", "Documents that have been shared are listed below. Anyone that has the public link can access a read-only version of the document until the link has been revoked.": "Documents that have been shared are listed below. Anyone that has the public link can access a read-only version of the document until the link has been revoked.", - "New token": "New token", - "You can create an unlimited amount of personal tokens to authenticate\n with the API. Tokens have the same permissions as your user account.\n For more details see the developer documentation.": "You can create an unlimited amount of personal tokens to authenticate\n with the API. Tokens have the same permissions as your user account.\n For more details see the developer documentation.", - "Create a token": "Create a token", "Zapier is a platform that allows {{appName}} to easily integrate with thousands of other business tools. Automate your workflows, sync data, and more.": "Zapier is a platform that allows {{appName}} to easily integrate with thousands of other business tools. Automate your workflows, sync data, and more.", "Your are creating a new workspace using your current account — {{email}}": "Your are creating a new workspace using your current account — {{email}}", "Workspace name": "Workspace name",