frontend/i18n: fixing the "compilation" step; catching up with spanish and chinese, expanding coverage, ...

Author: haraldschilly

src/packages/frontend/account/settings/account-settings.tsx

@@ -6,7 +6,7 @@
 import { Alert as AntdAlert, Space } from "antd";
 import { List, Map } from "immutable";
 import { join } from "path";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import {
   Alert,
@@ -475,7 +475,12 @@ export function AccountSettings(props: Readonly<Props>) {
     }
     return (
       <Row style={{ marginBottom: "15px" }}>
-        <Col md={4}>Created</Col>
+        <Col md={4}>
+          <FormattedMessage
+            id="account.settings.created.label"
+            defaultMessage={"Created"}
+          />
+        </Col>
         <Col md={8}>
           <TimeAgo date={props.created} />
         </Col>
@@ -505,7 +510,10 @@ export function AccountSettings(props: Readonly<Props>) {
           disabled={props.is_anonymous && !terms_checkbox}
         />
         <TextSetting
-          label="Username (optional)"
+          label={intl.formatMessage({
+            id: "account.settings.username.label",
+            defaultMessage: "Username (optional)",
+          })}
           value={props.name}
           onChange={(e) => {
             const name = e.target.value?.trim();
@@ -535,16 +543,16 @@ export function AccountSettings(props: Readonly<Props>) {
             showIcon
             style={{ margin: "15px 0" }}
             message={
-              <>
-                Setting a username provides optional nicer URL's for shared
-                public documents. Your username can be between 1 and 39
-                characters, contain upper and lower case letters, numbers, and
-                dashes.
-                <br />
-                WARNING: If you change your username, existing links using the
-                previous username will no longer work (automatic redirects are
-                not implemented), so change with caution.
-              </>
+              <FormattedMessage
+                id="account.settings.username.info"
+                defaultMessage={`Setting a username provides optional nicer URL's for shared
+public documents. Your username can be between 1 and 39 characters,
+contain upper and lower case letters, numbers, and dashes.
+{br}
+WARNING: If you change your username, existing links using the previous username
+will no longer work (automatic redirects are not implemented), so change with caution.`}
+                values={{ br: <br /> }}
+              />
             }
             type="info"
           />
@@ -579,7 +587,12 @@ export function AccountSettings(props: Readonly<Props>) {
           actions().set_account_table({ unlisted: e.target.checked })
         }
       >
-        Unlisted: you can only be found by an exact email address match
+        <FormattedMessage
+          id="account.settings.unlisted.label"
+          defaultMessage={
+            "Unlisted: you can only be found by an exact email address match"
+          }
+        />
       </Checkbox>
     );
   }

src/packages/frontend/app/localize.tsx

@@ -7,7 +7,7 @@ import { ConfigProvider as AntdConfigProvider } from "antd";
 import type { Locale as AntdLocale } from "antd/lib/locale";
 import enUS from "antd/locale/en_US";
 import { isEmpty } from "lodash";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useRef, useState } from "react";
 import { IntlProvider } from "react-intl";
 import useAsyncEffect from "use-async-effect";
 
@@ -43,6 +43,14 @@ export function Localize({ children }: { children: React.ReactNode }) {
   const [antdLoc, setAntdLoc] = useState<AntdLocale | undefined>(undefined);
   const [messages, setMessages] = useState<Messages | undefined>(undefined);
   const { antdTheme } = useAntdStyleProvider();
+  const uniqueKey = useRef<{ [tag: string]: number }>({});
+
+  // Note: this is e.g. necessary to render text in a modal, where some caching happens, apparently
+  function getKey(tag: string): number {
+    const n = (uniqueKey.current[tag] ?? 0) + 1;
+    uniqueKey.current[tag] = n;
+    return n;
+  }
 
   useAsyncEffect(async () => {
     setMessages(await loadLocaleMessages(locale));
@@ -92,12 +100,20 @@ export function Localize({ children }: { children: React.ReactNode }) {
           defaultLocale={DEFAULT_LOCALE}
           onError={onError}
           defaultRichTextElements={{
-            b: (ch) => <Text strong>{ch}</Text>,
-            p: (ch) => <Paragraph>{ch}</Paragraph>,
-            code: (ch) => <Text code>{ch}</Text>,
-            ul: (e) => <ul>{e}</ul>,
-            ol: (e) => <ol>{e}</ol>,
-            li: (e) => <li>{e}</li>,
+            b: (ch) => (
+              <Text strong key={getKey("b")}>
+                {ch}
+              </Text>
+            ),
+            p: (ch) => <Paragraph key={getKey("p")}>{ch}</Paragraph>,
+            code: (ch) => (
+              <Text code key={getKey("code")}>
+                {ch}
+              </Text>
+            ),
+            ul: (e) => <ul key={getKey("ul")}>{e}</ul>,
+            ol: (e) => <ol key={getKey("ol")}>{e}</ol>,
+            li: (e) => <li key={getKey("li")}>{e}</li>,
           }}
         >
           {renderApp()}

src/packages/frontend/editors/stopwatch/button-bar.tsx

@@ -8,9 +8,11 @@ Some buttons
 */
 import { HistoryOutlined, RedoOutlined, UndoOutlined } from "@ant-design/icons";
 import { Button } from "antd";
+import { useIntl } from "react-intl";
 
 import { Rendered } from "@cocalc/frontend/app-framework";
 import { Gap } from "@cocalc/frontend/components/gap";
+import { labels } from "@cocalc/frontend/i18n";
 import { TimeActions } from "./actions";
 
 export function ButtonBar({ actions }: { actions: TimeActions }): JSX.Element {
@@ -24,13 +26,15 @@ export function ButtonBar({ actions }: { actions: TimeActions }): JSX.Element {
 }
 
 function timeTravelButton(actions: TimeActions): Rendered {
+  const intl = useIntl();
+
   return (
     <Button
       key={"time-travel"}
       onClick={() => actions.time_travel()}
       icon={<HistoryOutlined />}
     >
-      TimeTravel
+      {intl.formatMessage(labels.timetravel)}
     </Button>
   );
 }

src/packages/frontend/frame-editors/frame-tree/commands/const.ts

@@ -1,3 +1,3 @@
 export const SEARCH_COMMANDS = "search_commands";
 export const APPLICATION_MENU = "__title__";
-export const AI_GEN_TEXT = "Help me write...";
+

src/packages/frontend/frame-editors/frame-tree/commands/editor-menus.ts

@@ -16,7 +16,7 @@ import type { Command, Menus } from "./types";
 type Command0 = {
   icon?: string;
   iconRotate?: IconRotation;
-  label?: string | (({ props }: any) => any);
+  label?: string | (({ props }: any) => any) | IntlMessage;
   name?: string;
   children?;
   disabled?: ({ props }: { props: any }) => boolean;