fix: Updated design of api tokens to clarify, closes #3422

app/scenes/Settings/components/TokenListItem.tsx

@@ -1,26 +1,65 @@
+import { CopyIcon } from "outline-icons";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import ApiKey from "~/models/ApiKey";
 import Button from "~/components/Button";
+import CopyToClipboard from "~/components/CopyToClipboard";
 import ListItem from "~/components/List/Item";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+import TokenRevokeDialog from "./TokenRevokeDialog";
 
 type Props = {
   token: ApiKey;
-  onDelete: (tokenId: string) => Promise<void>;
 };
 
-const TokenListItem = ({ token, onDelete }: Props) => {
+const TokenListItem = ({ token }: Props) => {
+  const { t } = useTranslation();
+  const { showToast } = useToasts();
+  const { dialogs } = useStores();
+  const [linkCopied, setLinkCopied] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    if (linkCopied) {
+      setTimeout(() => {
+        setLinkCopied(false);
+      }, 3000);
+    }
+  }, [linkCopied]);
+
+  const handleCopy = React.useCallback(() => {
+    setLinkCopied(true);
+    showToast(t("API token copied to clipboard"), {
+      type: "success",
+    });
+  }, [showToast, t]);
+
+  const showRevokeConfirmation = React.useCallback(() => {
+    dialogs.openModal({
+      title: t("Revoke token"),
+      isCentered: true,
+      content: (
+        <TokenRevokeDialog onSubmit={dialogs.closeAllModals} token={token} />
+      ),
+    });
+  }, [t, dialogs, token]);
+
   return (
     <ListItem
       key={token.id}
-      title={
-        <>
-          {token.name} – <code>{token.secret}</code>
-        </>
-      }
+      title={token.name}
+      subtitle={<code>{token.secret}</code>}
       actions={
-        <Button onClick={() => onDelete(token.id)} neutral>
-          Revoke
-        </Button>
+        <>
+          <CopyToClipboard text={token.secret} onCopy={handleCopy}>
+            <Button type="button" icon={<CopyIcon />} neutral borderOnHover>
+              {linkCopied ? t("Copied") : t("Copy")}
+            </Button>
+          </CopyToClipboard>
+          <Button onClick={showRevokeConfirmation} neutral>
+            Revoke
+          </Button>
+        </>
       }
     />
   );