fix: Improve translation strings for api key management

app/models/ApiKey.ts

@@ -1,4 +1,5 @@
-import { observable } from "mobx";
+import { isPast } from "date-fns";
+import { computed, observable } from "mobx";
 import Model from "./base/Model";
 import Field from "./decorators/Field";
 
@@ -9,15 +10,29 @@ class ApiKey extends Model {
   @observable
   id: string;
 
+  /**
+   * The user chosen name of the API key.
+   */
   @Field
   @observable
   name: string;
 
+  /**
+   * An optional datetime that the API key expires.
+   */
   @Field
   @observable
   expiresAt?: string;
 
   secret: string;
+
+  /**
+   * Whether the API key has an expiry in the past.
+   */
+  @computed
+  get isExpired() {
+    return this.expiresAt ? isPast(new Date(this.expiresAt)) : false;
+  }
 }
 
 export default ApiKey;

app/scenes/Settings/components/ApiKeyListItem.tsx

@@ -1,4 +1,3 @@
-import { isPast } from "date-fns";
 import { CopyIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -23,17 +22,17 @@ const ApiKeyListItem = ({ apiKey, isCopied, onCopy }: Props) => {
   const { t } = useTranslation();
   const userLocale = useUserLocale();
 
-  const hasExpired = apiKey.expiresAt
-    ? isPast(new Date(apiKey.expiresAt))
-    : false;
-
   const subtitle = (
-    <Text type={hasExpired ? "danger" : "tertiary"}>
-      {t(`Created`)} <Time dateTime={apiKey.createdAt} addSuffix /> &middot;{" "}
-      {apiKey.expiresAt
-        ? dateToExpiry(apiKey.expiresAt, t, userLocale)
-        : t("No expiry")}
-    </Text>
+    <>
+      <Text type="tertiary">
+        {t(`Created`)} <Time dateTime={apiKey.createdAt} addSuffix /> &middot;{" "}
+      </Text>
+      <Text type={apiKey.isExpired ? "danger" : "tertiary"}>
+        {apiKey.expiresAt
+          ? dateToExpiry(apiKey.expiresAt, t, userLocale)
+          : t("No expiry")}
+      </Text>
+    </>
   );
 
   const handleCopy = React.useCallback(() => {

app/utils/date.ts

@@ -74,6 +74,13 @@ export function dateToHeading(
   });
 }
 
+/**
+ * Converts a date string to a human-readable expiry string.
+ *
+ * @param dateTime The date string to convert
+ * @param t The translation function
+ * @param userLocale The user's locale
+ */
 export function dateToExpiry(
   dateTime: string,
   t: TFunction,
@@ -84,30 +91,34 @@ export function dateToExpiry(
   const locale = dateLocale(userLocale);
 
   if (isYesterday(date)) {
-    return t("Expired Yesterday");
+    return t("Expired yesterday");
   }
 
   if (isPast(date)) {
-    return `${t("Expired on")} ${formatDate(date, "MMM dd, yyyy", { locale })}`;
-  }
-
-  if (isToday(date)) {
-    return t("Expires Today");
-  }
-
-  if (isTomorrow(date)) {
-    return t("Expires Tomorrow");
-  }
-
-  const prefix = t("Expires on");
-
-  if (isSameWeek(date, now)) {
-    return `${prefix} ${formatDate(Date.parse(dateTime), "iiii", {
-      locale,
+    return `${t("Expired {{ date }}", {
+      date: formatDate(date, "MMM dd, yyyy", { locale }),
     })}`;
   }
 
-  return `${prefix} ${formatDate(date, "MMM dd, yyyy", { locale })}`;
+  if (isToday(date)) {
+    return t("Expires today");
+  }
+
+  if (isTomorrow(date)) {
+    return t("Expires tomorrow");
+  }
+
+  if (isSameWeek(date, now)) {
+    return t("Expires {{ date }}", {
+      date: formatDate(Date.parse(dateTime), "iiii", {
+        locale,
+      }),
+    });
+  }
+
+  return t("Expires {{ date }}", {
+    date: formatDate(date, "MMM dd, yyyy", { locale }),
+  });
 }
 
 /**