i18n: prepare "util" for message strings, project state information, fix some dropdown labels, vbar, ...

Author: haraldschilly

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

@@ -381,13 +381,21 @@ export function OtherSettings(props: Readonly<Props>): JSX.Element {
 
   function render_vertical_fixed_bar_options(): Rendered {
     const selected = getValidVBAROption(props.other_settings.get(VBAR_KEY));
+    const options = Object.fromEntries(
+      Object.entries(VBAR_OPTIONS).map(([k, v]) => [k, intl.formatMessage(v)]),
+    );
     return (
-      <LabeledRow label="Vertical Project Bar">
+      <LabeledRow
+        label={intl.formatMessage({
+          id: "account.other-settings.vbar.title",
+          defaultMessage: "Vertical Project Bar",
+        })}
+      >
         <div>
           <SelectorInput
             style={{ marginBottom: "10px" }}
             selected={selected}
-            options={VBAR_OPTIONS}
+            options={options}
             on_change={(value) => {
               on_change(VBAR_KEY, value);
               track("flyout", { aspect: "layout", how: "account", value });
@@ -397,7 +405,7 @@ export function OtherSettings(props: Readonly<Props>): JSX.Element {
             type="secondary"
             ellipsis={{ expandable: true, symbol: "more" }}
           >
-            {VBAR_EXPLANATION}
+            {intl.formatMessage(VBAR_EXPLANATION)}
           </Paragraph>
         </div>
       </LabeledRow>

src/packages/frontend/components/project-state.tsx

@@ -3,12 +3,16 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { React, useTypedRedux } from "../app-framework";
+import { useIntl } from "react-intl";
+
+import { React, useTypedRedux } from "@cocalc/frontend/app-framework";
+import { IntlMessage, isIntlMessage } from "@cocalc/frontend/i18n";
+import { ProjectStatus } from "@cocalc/frontend/todo-types";
+import { ComputeState } from "@cocalc/util/compute-states";
+import { KUCALC_COCALC_COM } from "@cocalc/util/db-schema/site-defaults";
 import { COMPUTE_STATES } from "@cocalc/util/schema";
-import { ProjectStatus } from "../todo-types";
 import { Gap } from "./gap";
 import { Icon } from "./icon";
-import { KUCALC_COCALC_COM } from "@cocalc/util/db-schema/site-defaults";
 
 interface Props {
   state?: ProjectStatus;
@@ -18,6 +22,7 @@ interface Props {
 export const ProjectState: React.FC<Props> = (props: Props) => {
   const { state, show_desc } = props;
 
+  const intl = useIntl();
   const kucalc = useTypedRedux("customize", "kucalc");
   const showCoCalcCom = kucalc === KUCALC_COCALC_COM;
 
@@ -29,27 +34,37 @@ export const ProjectState: React.FC<Props> = (props: Props) => {
     );
   }
 
-  function renderDescription({ desc, desc_cocalccom }) {
+  function renderI18N(msg: string | IntlMessage): string {
+    if (isIntlMessage(msg)) {
+      return intl.formatMessage(msg);
+    } else {
+      return msg;
+    }
+  }
+
+  function renderDescription({ desc_cocalccom, desc }: ComputeState) {
     if (!show_desc) {
       return;
     }
     const text =
       showCoCalcCom && desc_cocalccom != null ? desc_cocalccom : desc;
+
     return (
       <span>
-        <span style={{ fontSize: "11pt" }}>{text}</span>
+        <span style={{ fontSize: "11pt" }}>{renderI18N(text)}</span>
       </span>
     );
   }
 
-  const s = COMPUTE_STATES[state?.get("state") ?? ""];
+  const current_state = state?.get("state") ?? "";
+  const s: ComputeState = COMPUTE_STATES[current_state];
   if (s == null) {
     return <></>;
   }
   const { display, icon, stable } = s;
   return (
     <span>
-      <Icon name={icon} /> {display}
+      <Icon name={icon} /> {renderI18N(display)}
       <Gap />
       {!stable && renderSpinner()}
       {renderDescription(s)}

src/packages/frontend/frame-editors/frame-tree/title-bar.tsx

@@ -885,7 +885,7 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
     ) {
       return;
     }
-    if (props.connection_status == "connected") {
+    if (props.connection_status === "connected") {
       // To reduce clutter show nothing when connected.
       // NOTE: Keep this consistent with
       // cocalc/src/@cocalc/frontend/project/websocket/websocket-indicator.tsx

src/packages/frontend/i18n/bin/extract.sh

@@ -3,7 +3,7 @@
 # The interpolation pattern is a fixed string, because we intentionally trigger ID colissions.
 # There is just one (unused) string without a unique ID – otherwise we always set an explicit hierarchical ID.
 # Read the README in this directory for more information.
-pnpm exec formatjs extract $(git ls-files '**/*.tsx') i18n/*.ts jupyter/commands.ts \
+pnpm exec formatjs extract $(git ls-files '**/*.tsx') i18n/*.ts jupyter/commands.ts ../util/compute-states.ts ../util/i18n/*.ts \
 	--ignore='**/*.d.ts' --ignore='node_modules/*' \
 	--ignore='dist/*' \
 	--out-file i18n/extracted.json \

src/packages/frontend/i18n/common.ts

@@ -533,6 +533,23 @@ export const labels = defineMessages({
     id: "labels.language",
     defaultMessage: "Language",
   },
+  always_running: {
+    id: "labels.always_running",
+    defaultMessage: "Always Running",
+  },
+  idle_timeout: {
+    id: "labels.idle_timeout",
+    defaultMessage: "Idle Timeout",
+  },
+  uptime: {
+    id: "labels.uptime",
+    defaultMessage: "Uptime",
+  },
+  more_info: {
+    id: "labels.more_info",
+    defaultMessage: "More info",
+    description: "Short label for showing 'more information' about something",
+  },
 });
 
 export const menu = defineMessages({

src/packages/frontend/i18n/i18n.test.ts

@@ -1,5 +1,5 @@
 import { editor, jupyter, labels, menu } from "./common";
-import { IntlMessage } from "./types";
+import type { IntlMessage } from "./index";
 
 export type Data = { [key in string]: IntlMessage };
 

src/packages/frontend/i18n/index.ts

@@ -6,25 +6,33 @@
 import {
   createIntl,
   createIntlCache,
-  defineMessage,
   IntlShape,
   MessageFormatElement,
 } from "react-intl";
 
-import { NAMES, OTHER_SETTINGS_LOCALE_KEY } from "@cocalc/util/i18n";
 import { AccountState } from "@cocalc/frontend/account/types";
 import { redux } from "@cocalc/frontend/app-framework";
 import {
   DEFAULT_LOCALE,
   KEEP_EN_LOCALE,
   Locale,
 } from "@cocalc/util/consts/locale";
+import {
+  isIntlMessage,
+  LOCALIZATIONS,
+  OTHER_SETTINGS_LOCALE_KEY,
+} from "@cocalc/util/i18n";
+import type { IntlMessage } from "@cocalc/util/i18n/types";
 import { unreachable } from "@cocalc/util/misc";
-import { IntlMessage, isIntlMessage } from "./types";
 
 export { dialogs, editor, jupyter, labels, menu } from "./common";
 
-export { DEFAULT_LOCALE, isIntlMessage, OTHER_SETTINGS_LOCALE_KEY };
+export {
+  DEFAULT_LOCALE,
+  isIntlMessage,
+  OTHER_SETTINGS_LOCALE_KEY,
+  LOCALIZATIONS,
+};
 
 export type { IntlMessage, Locale };
 
@@ -103,160 +111,3 @@ export async function getIntl(): Promise<IntlShape> {
   const messages: Messages = await loadLocaleMessages(locale);
   return createIntl({ locale, messages }, cache);
 }
-
-// The ordering is a bit "opinionated". The top languages are European ones, and German has the best quality translations.
-// Then come other European languges, kind of alphabetical.
-// Then, the Asian group starts with Chinese, as the largest group.
-export const LOCALIZATIONS: {
-  [key in Locale]: {
-    name: string;
-    flag: string;
-    native: string;
-    trans: IntlMessage;
-  };
-} = {
-  en: {
-    name: NAMES.en,
-    flag: "🇺🇸",
-    native: "English",
-    trans: defineMessage({
-      id: "i18n.localization.lang.english",
-      defaultMessage: "English",
-    }),
-  },
-  de: {
-    name: NAMES.de,
-    flag: "🇩🇪",
-    native: "Deutsch",
-    trans: defineMessage({
-      id: "i18n.localization.lang.german",
-      defaultMessage: "German",
-    }),
-  },
-  es: {
-    name: NAMES.es,
-    flag: "🇪🇸",
-    native: "Español",
-    trans: defineMessage({
-      id: "i18n.localization.lang.spanish",
-      defaultMessage: "Spanish",
-    }),
-  },
-  fr: {
-    name: NAMES.fr,
-    flag: "🇫🇷",
-    native: "Français",
-    trans: defineMessage({
-      id: "i18n.localization.lang.french",
-      defaultMessage: "French",
-    }),
-  },
-  it: {
-    name: NAMES.it,
-    flag: "🇮🇹",
-    native: "Italiano",
-    trans: defineMessage({
-      id: "i18n.localization.lang.italian",
-      defaultMessage: "Italian",
-    }),
-  },
-  pl: {
-    name: NAMES.pl,
-    flag: "🇵🇱",
-    native: "Polski",
-    trans: defineMessage({
-      id: "i18n.localization.lang.polish",
-      defaultMessage: "Polish",
-    }),
-  },
-  hu: {
-    name: NAMES.hu,
-    flag: "🇭🇺",
-    native: "Magyar",
-    trans: defineMessage({
-      id: "i18n.localization.lang.hungarian",
-      defaultMessage: "Hungarian",
-    }),
-  },
-  ar: {
-    name: NAMES.ar,
-    flag: "🇪🇬",
-    native: "العربية",
-    trans: defineMessage({
-      id: "i18n.localization.lang.arabic",
-      defaultMessage: "Arabic",
-    }),
-  },
-  pt: {
-    name: NAMES.pt,
-    flag: "🇵🇹",
-    native: "Português",
-    trans: defineMessage({
-      id: "i18n.localization.lang.portuguese",
-      defaultMessage: "Portuguese",
-    }),
-  },
-  tr: {
-    name: NAMES.tr,
-    flag: "🇹🇷",
-    native: "Türkçe",
-    trans: defineMessage({
-      id: "i18n.localization.lang.turkish",
-      defaultMessage: "Turkish",
-    }),
-  },
-  he: {
-    name: NAMES.he,
-    flag: "🇮🇱",
-    native: "עִבְרִית",
-    trans: defineMessage({
-      id: "i18n.localization.lang.hebrew",
-      defaultMessage: "Hebrew",
-    }),
-  },
-  zh: {
-    name: NAMES.zh,
-    flag: "🇨🇳",
-    native: "中文",
-    trans: defineMessage({
-      id: "i18n.localization.lang.chinese",
-      defaultMessage: "Chinese",
-    }),
-  },
-  ja: {
-    name: NAMES.ja,
-    flag: "🇯🇵",
-    native: "日本語",
-    trans: defineMessage({
-      id: "i18n.localization.lang.japanese",
-      defaultMessage: "Japanese",
-    }),
-  },
-  hi: {
-    name: NAMES.hi,
-    flag: "🇮🇳",
-    native: "हिन्दी",
-    trans: defineMessage({
-      id: "i18n.localization.lang.hindi",
-      defaultMessage: "Hindi",
-    }),
-  },
-  ko: {
-    name: NAMES.ko,
-    flag: "🇰🇷",
-    native: "한국어",
-    trans: defineMessage({
-      id: "i18n.localization.lang.korean",
-      defaultMessage: "Korean",
-    }),
-  },
-  ru: {
-    name: NAMES.ru,
-    flag: "🇷🇺",
-    native: "Русский",
-    trans: defineMessage({
-      id: "i18n.localization.lang.russian",
-      defaultMessage: "Russian",
-    }),
-  },
-} as const;