chore: Name API keys consistently as the model

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,

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: (
-        <TokenRevokeDialog onSubmit={dialogs.closeAllModals} token={token} />
+        <ApiKeyRevokeDialog onSubmit={dialogs.closeAllModals} apiKey={apiKey} />
       ),
     });
-  }, [t, dialogs, token]);
+  }, [t, dialogs, apiKey]);
 
   return (
     <>
-      <OverflowMenuButton
-        aria-label={t("Show menu")}
-        className={className}
-        {...menu}
-      />
+      <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
       <ContextMenu {...menu}>
         <MenuItem {...menu} onClick={handleRevoke} dangerous>
           {t("Revoke")}

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={<h2>{t("Active")}</h2>}
-        renderItem={(token: ApiKey) => (
-          <TokenListItem key={token.id} token={token} />
+        renderItem={(apiKey: ApiKey) => (
+          <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
         )}
       />
       <Modal
         title={t("Create a token")}
         onRequestClose={handleNewModalClose}
         isOpen={newModalOpen}
+        isCentered
       >
         <APITokenNew onSubmit={handleNewModalClose} />
       </Modal>
@@ -74,4 +75,4 @@ function Tokens() {
   );
 }
 
-export default observer(Tokens);
+export default observer(ApiKeys);

app/scenes/Settings/Notifications.tsx

@@ -157,6 +157,7 @@ function Notifications() {
 
             return (
               <SettingRow
+                key={option.event}
                 visible={option.visible}
                 label={
                   <Flex align="center" gap={4}>

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<boolean>(false);
@@ -35,21 +35,21 @@ const TokenListItem = ({ token }: Props) => {
 
   return (
     <ListItem
-      key={token.id}
-      title={token.name}
-      subtitle={<code>{token.secret.slice(0, 15)}…</code>}
+      key={apiKey.id}
+      title={apiKey.name}
+      subtitle={<code>{apiKey.secret.slice(0, 15)}…</code>}
       actions={
         <Flex align="center" gap={8}>
-          <CopyToClipboard text={token.secret} onCopy={handleCopy}>
+          <CopyToClipboard text={apiKey.secret} onCopy={handleCopy}>
             <Button type="button" icon={<CopyIcon />} neutral borderOnHover>
               {linkCopied ? t("Copied") : t("Copy")}
             </Button>
           </CopyToClipboard>
-          <ApiKeyMenu token={token} />
+          <ApiKeyMenu apiKey={apiKey} />
         </Flex>
       }
     />
   );
 };
 
-export default TokenListItem;
+export default ApiKeyListItem;

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,
       })}
     </ConfirmationDialog>
   );