feat: add API key expiry options (#7064)

* feat: add API key expiry options

* review

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} />