Trying to chase missing translations (#3441)

app/components/EventListItem.tsx

@@ -113,7 +113,10 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
         <Time
           dateTime={event.createdAt}
           tooltipDelay={500}
-          format="MMM do, h:mm a"
+          format={{
+            en_US: "MMM do, h:mm a",
+            fr_FR: "'Le 'd MMMM 'à' H:mm",
+          }}
           relative={false}
           addSuffix
           onClick={handleTimeClick}

app/components/LocaleTime.tsx

@@ -2,7 +2,7 @@ import { format as formatDate, formatDistanceToNow } from "date-fns";
 import * as React from "react";
 import Tooltip from "~/components/Tooltip";
 import useUserLocale from "~/hooks/useUserLocale";
-import { dateLocale } from "~/utils/i18n";
+import { dateLocale, locales } from "~/utils/i18n";
 
 let callbacks: (() => void)[] = [];
 
@@ -26,7 +26,7 @@ type Props = {
   addSuffix?: boolean;
   shorten?: boolean;
   relative?: boolean;
-  format?: string;
+  format?: Partial<Record<keyof typeof locales, string>>;
 };
 
 const LocaleTime: React.FC<Props> = ({
@@ -38,7 +38,13 @@ const LocaleTime: React.FC<Props> = ({
   relative,
   tooltipDelay,
 }) => {
-  const userLocale = useUserLocale();
+  const userLocale: string = useUserLocale() || "";
+  const dateFormatLong = {
+    en_US: "MMMM do, yyyy h:mm a",
+    fr_FR: "'Le 'd MMMM yyyy 'à' H:mm",
+  };
+  const formatLocaleLong = dateFormatLong[userLocale];
+  const formatLocale = format ? format[userLocale] : formatLocaleLong;
   const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
   const callback = React.useRef<() => void>();
 
@@ -66,17 +72,13 @@ const LocaleTime: React.FC<Props> = ({
       .replace("minute", "min");
   }
 
-  const tooltipContent = formatDate(
-    Date.parse(dateTime),
-    "MMMM do, yyyy h:mm a",
-    {
-      locale,
-    }
-  );
+  const tooltipContent = formatDate(Date.parse(dateTime), formatLocaleLong, {
+    locale,
+  });
   const content =
     relative !== false
       ? relativeContent
-      : formatDate(Date.parse(dateTime), format || "MMMM do, yyyy h:mm a", {
+      : formatDate(Date.parse(dateTime), formatLocale, {
           locale,
         });
 

app/components/Sidebar/components/Version.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Badge from "~/components/Badge";
 import { version } from "../../../../package.json";
@@ -6,6 +7,7 @@ import SidebarLink from "./SidebarLink";
 
 export default function Version() {
   const [releasesBehind, setReleasesBehind] = React.useState(0);
+  const { t } = useTranslation();
 
   React.useEffect(() => {
     async function loadReleases() {
@@ -37,10 +39,11 @@ export default function Version() {
           <br />
           <LilBadge>
             {releasesBehind === 0
-              ? "Up to date"
-              : `${releasesBehind} version${
-                  releasesBehind === 1 ? "" : "s"
-                } behind`}
+              ? t("Up to date")
+              : t(`{{ releasesBehind }} versions behind`, {
+                  releasesBehind,
+                  count: releasesBehind,
+                })}
           </LilBadge>
         </>
       }

app/scenes/CollectionEdit.tsx

@@ -104,7 +104,7 @@ const CollectionEdit = ({ collectionId, onSubmit }: Props) => {
           label={t("Sort in sidebar")}
           options={[
             {
-              label: t("Alphabetical"),
+              label: t("Alphabetical sort"),
               value: "title.asc",
             },
             {

app/scenes/Document/components/Contents.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Text from "~/components/Text";
@@ -48,11 +49,12 @@ export default function Contents({ headings, isFullWidth }: Props) {
     Infinity
   );
   const headingAdjustment = minHeading - 1;
+  const { t } = useTranslation();
 
   return (
     <Wrapper isFullWidth={isFullWidth}>
       <Sticky>
-        <Heading>Contents</Heading>
+        <Heading>{t("Contents")}</Heading>
         {headings.length ? (
           <List>
             {headings.map((heading) => (
@@ -66,7 +68,9 @@ export default function Contents({ headings, isFullWidth }: Props) {
             ))}
           </List>
         ) : (
-          <Empty>Headings you add to the document will appear here</Empty>
+          <Empty>
+            {t("Headings you add to the document will appear here")}
+          </Empty>
         )}
       </Sticky>
     </Wrapper>

app/scenes/Document/components/SharePopover.tsx

@@ -18,6 +18,8 @@ import useKeyDown from "~/hooks/useKeyDown";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
+import useUserLocale from "~/hooks/useUserLocale";
+import { dateLocale } from "~/utils/i18n";
 
 type Props = {
   document: Document;
@@ -109,6 +111,9 @@ function SharePopover({
     }, 250);
   }, [t, onRequestClose, showToast]);
 
+  const userLocale = useUserLocale();
+  const locale = userLocale ? dateLocale(userLocale) : undefined;
+
   return (
     <>
       <Heading>
@@ -156,6 +161,7 @@ function SharePopover({
                       Date.parse(share?.lastAccessedAt),
                       {
                         addSuffix: true,
+                        locale,
                       }
                     ),
                   })}

app/scenes/Login/index.tsx

@@ -105,8 +105,9 @@ function Login() {
             {t("Failed to load configuration.")}
             {!isHosted && (
               <p>
-                Check the network requests and server logs for full details of
-                the error.
+                {t(
+                  "Check the network requests and server logs for full details of the error."
+                )}
               </p>
             )}
           </NoticeAlert>
@@ -194,7 +195,7 @@ function Login() {
                     authProviderName: defaultProvider.name,
                   })}
                 </Note>
-                <Or />
+                <Or data-text={t("Or")} />
               </>
             )}
           </React.Fragment>
@@ -284,7 +285,7 @@ const Or = styled.hr`
   width: 100%;
 
   &:after {
-    content: "Or";
+    content: attr(data-text);
     display: block;
     position: absolute;
     left: 50%;

app/utils/i18n.ts

@@ -39,3 +39,5 @@ const locales = {
 export function dateLocale(userLocale: string | null | undefined) {
   return userLocale ? locales[userLocale] : undefined;
 }
+
+export { locales };

shared/i18n/locales/en_US/translation.json

@@ -165,6 +165,9 @@
   "Show more": "Show more",
   "Toggle sidebar": "Toggle sidebar",
   "Delete {{ documentName }}": "Delete {{ documentName }}",
+  "Up to date": "Up to date",
+  "{{ releasesBehind }} versions behind": "{{ releasesBehind }} version behind",
+  "{{ releasesBehind }} versions behind_plural": "{{ releasesBehind }} versions behind",
   "Return to App": "Back to App",
   "Installation": "Installation",
   "No results": "No results",
@@ -328,7 +331,6 @@
   "The collection was updated": "The collection was updated",
   "You can edit the name and other details at any time, however doing so often might confuse your team mates.": "You can edit the name and other details at any time, however doing so often might confuse your team mates.",
   "Name": "Name",
-  "Alphabetical": "Alphabetical",
   "Sort": "Sort",
   "Saving": "Saving",
   "Save": "Save",
@@ -514,6 +516,7 @@
   "Back to website": "Back to website",
   "Login": "Login",
   "Failed to load configuration.": "Failed to load configuration.",
+  "Check the network requests and server logs for full details of the error.": "Check the network requests and server logs for full details of the error.",
   "Check your email": "Check your email",
   "A magic sign-in link has been sent to the email <em>{{ emailLinkSentTo }}</em> if an account exists.": "A magic sign-in link has been sent to the email <em>{{ emailLinkSentTo }}</em> if an account exists.",
   "Back to login": "Back to login",
@@ -521,6 +524,7 @@
   "Get started by choosing a sign-in method for your new team below…": "Get started by choosing a sign-in method for your new team below…",
   "Login to {{ authProviderName }}": "Login to {{ authProviderName }}",
   "You signed in with {{ authProviderName }} last time.": "You signed in with {{ authProviderName }} last time.",
+  "Or": "Or",
   "Already have an account? Go to <1>login</1>.": "Already have an account? Go to <1>login</1>.",
   "Any collection": "Any collection",
   "Any time": "Any time",
@@ -669,6 +673,7 @@
   "Create a token": "Create a token",
   "Zapier is a platform that allows Outline to easily integrate with thousands of other business tools. Head over to Zapier to setup a \"Zap\" and start programmatically interacting with Outline.'": "Zapier is a platform that allows Outline to easily integrate with thousands of other business tools. Head over to Zapier to setup a \"Zap\" and start programmatically interacting with Outline.'",
   "Open Zapier": "Open Zapier",
+  "Alphabetical": "Alphabetical",
   "There are no templates just yet.": "There are no templates just yet.",
   "You can create templates to help your team create consistent and accurate documentation.": "You can create templates to help your team create consistent and accurate documentation.",
   "Trash is empty at the moment.": "Trash is empty at the moment.",