feat: add API key expiry options (#7064)

* feat: add API key expiry options

* review

app/scenes/Settings/ApiKeys.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { CodeIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
 import ApiKey from "~/models/ApiKey";
 import { Action } from "~/components/Actions";
 import Button from "~/components/Button";
@@ -23,6 +24,23 @@ function ApiKeys() {
   const can = usePolicy(team);
   const context = useActionContext();
 
+  const [copiedKeyId, setCopiedKeyId] = React.useState<string | null>();
+  const copyTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout>>();
+
+  const handleCopy = React.useCallback(
+    (keyId: string) => {
+      if (copyTimeoutIdRef.current) {
+        clearTimeout(copyTimeoutIdRef.current);
+      }
+      setCopiedKeyId(keyId);
+      copyTimeoutIdRef.current = setTimeout(() => {
+        setCopiedKeyId(null);
+      }, 3000);
+      toast.message(t("API key copied to clipboard"));
+    },
+    [t]
+  );
+
   return (
     <Scene
       title={t("API Keys")}
@@ -62,9 +80,14 @@ function ApiKeys() {
       <PaginatedList
         fetch={apiKeys.fetchPage}
         items={apiKeys.orderedData}
-        heading={<h2>{t("Active")}</h2>}
+        heading={<h2>{t("Generated Keys")}</h2>}
         renderItem={(apiKey: ApiKey) => (
-          <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
+          <ApiKeyListItem
+            key={apiKey.id}
+            apiKey={apiKey}
+            isCopied={apiKey.id === copiedKeyId}
+            onCopy={handleCopy}
+          />
         )}
       />
     </Scene>

app/scenes/Settings/components/ApiKeyListItem.tsx

@@ -1,45 +1,53 @@
+import { isPast } from "date-fns";
 import { CopyIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import ApiKey from "~/models/ApiKey";
 import Button from "~/components/Button";
 import CopyToClipboard from "~/components/CopyToClipboard";
 import Flex from "~/components/Flex";
 import ListItem from "~/components/List/Item";
+import Text from "~/components/Text";
+import useUserLocale from "~/hooks/useUserLocale";
 import ApiKeyMenu from "~/menus/ApiKeyMenu";
+import { dateToExpiry } from "~/utils/date";
 
 type Props = {
   apiKey: ApiKey;
+  isCopied: boolean;
+  onCopy: (keyId: string) => void;
 };
 
-const ApiKeyListItem = ({ apiKey }: Props) => {
+const ApiKeyListItem = ({ apiKey, isCopied, onCopy }: Props) => {
   const { t } = useTranslation();
-  const [linkCopied, setLinkCopied] = React.useState<boolean>(false);
+  const userLocale = useUserLocale();
 
-  React.useEffect(() => {
-    if (linkCopied) {
-      setTimeout(() => {
-        setLinkCopied(false);
-      }, 3000);
-    }
-  }, [linkCopied]);
+  const hasExpired = apiKey.expiresAt
+    ? isPast(new Date(apiKey.expiresAt))
+    : false;
+
+  const subtitle = (
+    <Text type={hasExpired ? "danger" : "tertiary"}>
+      {apiKey.expiresAt
+        ? dateToExpiry(apiKey.expiresAt, t, userLocale)
+        : t("No expiry")}
+    </Text>
+  );
 
   const handleCopy = React.useCallback(() => {
-    setLinkCopied(true);
-    toast.message(t("API token copied to clipboard"));
-  }, [t]);
+    onCopy(apiKey.id);
+  }, [apiKey.id, onCopy]);
 
   return (
     <ListItem
       key={apiKey.id}
       title={apiKey.name}
-      subtitle={<code>{apiKey.secret.slice(0, 15)}…</code>}
+      subtitle={subtitle}
       actions={
         <Flex align="center" gap={8}>
           <CopyToClipboard text={apiKey.secret} onCopy={handleCopy}>
             <Button type="button" icon={<CopyIcon />} neutral borderOnHover>
-              {linkCopied ? t("Copied") : t("Copy")}
+              {isCopied ? t("Copied") : t("Copy")}
             </Button>
           </CopyToClipboard>
           <ApiKeyMenu apiKey={apiKey} />