chore: Tidy API key settings page

app/actions/definitions/apiKeys.tsx

@@ -0,0 +1,25 @@
+import { PlusIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import APIKeyNew from "~/scenes/APIKeyNew";
+import { createAction } from "..";
+import { SettingsSection } from "../sections";
+
+export const createApiKey = createAction({
+  name: ({ t }) => t("New API key"),
+  analyticsName: "New API key",
+  section: SettingsSection,
+  icon: <PlusIcon />,
+  keywords: "create",
+  visible: () =>
+    stores.policies.abilities(stores.auth.team?.id || "").createApiKey,
+  perform: ({ t, event }) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+
+    stores.dialogs.openModal({
+      title: t("New API key"),
+      content: <APIKeyNew onSubmit={stores.dialogs.closeAllModals} />,
+    });
+  },
+});

app/hooks/useSettingsConfig.ts

@@ -88,7 +88,7 @@ const useSettingsConfig = () => {
         icon: EmailIcon,
       },
       {
-        name: t("API Tokens"),
+        name: t("API"),
         path: settingsPath("tokens"),
         component: ApiKeys,
         enabled: can.createApiKey,

app/scenes/APIKeyNew.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
+import { ApiKeyValidation } from "@shared/validations";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Input from "~/components/Input";
@@ -11,7 +12,7 @@ type Props = {
   onSubmit: () => void;
 };
 
-function APITokenNew({ onSubmit }: Props) {
+function APIKeyNew({ onSubmit }: Props) {
   const [name, setName] = React.useState("");
   const [isSaving, setIsSaving] = React.useState(false);
   const { apiKeys } = useStores();
@@ -26,7 +27,7 @@ function APITokenNew({ onSubmit }: Props) {
         await apiKeys.create({
           name,
         });
-        toast.success(t("API token created"));
+        toast.success(t("API Key created"));
         onSubmit();
       } catch (err) {
         toast.error(err.message);
@@ -45,7 +46,7 @@ function APITokenNew({ onSubmit }: Props) {
     <form onSubmit={handleSubmit}>
       <Text as="p" type="secondary">
         {t(
-          `Name your token something that will help you to remember it's use in the future, for example "local development", "production", or "continuous integration".`
+          `Name your key something that will help you to remember it's use in the future, for example "local development" or "continuous integration".`
         )}
       </Text>
       <Flex>
@@ -54,16 +55,20 @@ function APITokenNew({ onSubmit }: Props) {
           label={t("Name")}
           onChange={handleNameChange}
           value={name}
+          minLength={ApiKeyValidation.minNameLength}
+          maxLength={ApiKeyValidation.maxNameLength}
           required
           autoFocus
           flex
         />
       </Flex>
-      <Button type="submit" disabled={isSaving || !name}>
-        {isSaving ? `${t("Creating")}…` : t("Create")}
-      </Button>
+      <Flex justify="flex-end">
+        <Button type="submit" disabled={isSaving || !name}>
+          {isSaving ? `${t("Creating")}…` : t("Create")}
+        </Button>
+      </Flex>
     </form>
   );
 }
 
-export default APITokenNew;
+export default APIKeyNew;

app/scenes/Settings/ApiKeys.tsx

@@ -3,15 +3,14 @@ import { CodeIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import ApiKey from "~/models/ApiKey";
-import APITokenNew from "~/scenes/APITokenNew";
 import { Action } from "~/components/Actions";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
-import Modal from "~/components/Modal";
 import PaginatedList from "~/components/PaginatedList";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
-import useBoolean from "~/hooks/useBoolean";
+import { createApiKey } from "~/actions/definitions/apiKeys";
+import useActionContext from "~/hooks/useActionContext";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
@@ -21,12 +20,12 @@ function ApiKeys() {
   const team = useCurrentTeam();
   const { t } = useTranslation();
   const { apiKeys } = useStores();
-  const [newModalOpen, handleNewModalOpen, handleNewModalClose] = useBoolean();
   const can = usePolicy(team);
+  const context = useActionContext();
 
   return (
     <Scene
-      title={t("API Tokens")}
+      title={t("API Keys")}
       icon={<CodeIcon />}
       actions={
         <>
@@ -34,19 +33,20 @@ function ApiKeys() {
             <Action>
               <Button
                 type="submit"
-                value={`${t("New token")}…`}
-                onClick={handleNewModalOpen}
+                value={`${t("New API key")}…`}
+                action={createApiKey}
+                context={context}
               />
             </Action>
           )}
         </>
       }
     >
-      <Heading>{t("API Tokens")}</Heading>
+      <Heading>{t("API Keys")}</Heading>
       <Text as="p" type="secondary">
         <Trans
-          defaults="You can create an unlimited amount of personal tokens to authenticate
-          with the API. Tokens have the same permissions as your user account.
+          defaults="Create personal API keys to authenticate with the API and programatically control
+          your workspace's data. API keys have the same permissions as your user account.
           For more details see the <em>developer documentation</em>."
           components={{
             em: (
@@ -67,13 +67,6 @@ function ApiKeys() {
           <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
         )}
       />
-      <Modal
-        title={t("Create a token")}
-        onRequestClose={handleNewModalClose}
-        isOpen={newModalOpen}
-      >
-        <APITokenNew onSubmit={handleNewModalClose} />
-      </Modal>
     </Scene>
   );
 }