chore: Name API keys consistently as the model

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>
   );