frontend/i18n: more support for i18n, e.g. in menu entries and editors

Author: haraldschilly

src/packages/frontend/frame-editors/frame-tree/commands/format-commands.tsx

@@ -1,4 +1,5 @@
 import { range } from "lodash";
+import { defineMessage } from "react-intl";
 
 import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import ColorPicker from "@cocalc/frontend/components/color-picker";
@@ -12,21 +13,48 @@ import { addEditorMenus } from "./editor-menus";
 
 const FORMAT_SPEC = {
   equation: {
-    button: "Math",
-    label: "Inline Equation",
-    title: "Insert inline LaTeX math equation.",
+    button: defineMessage({
+      id: "command.format.equation.button",
+      defaultMessage: "Math",
+    }),
+    label: defineMessage({
+      id: "command.format.equation.label",
+      defaultMessage: "Inline Equation",
+    }),
+    title: defineMessage({
+      id: "command.format.equation.title",
+      defaultMessage: "Insert inline LaTeX math equation",
+    }),
     icon: <span>$</span>,
   },
   display_equation: {
-    button: "Display",
-    label: "Displayed Equation",
-    title: "Insert display LaTeX math equation.",
+    button: defineMessage({
+      id: "command.format.display_equation.button",
+      defaultMessage: "Display",
+    }),
+    label: defineMessage({
+      id: "command.format.display_equation.label",
+      defaultMessage: "Displayed Equation",
+    }),
+    title: defineMessage({
+      id: "command.format.display_equation.title",
+      defaultMessage: "Insert display LaTeX math equation",
+    }),
     icon: <span>$$</span>,
   },
   ai_formula: {
-    button: "Formula",
-    label: "AI Generated Formula",
-    title: "Insert AI generated formula.",
+    button: defineMessage({
+      id: "command.format.ai_formula.button",
+      defaultMessage: "Formula",
+    }),
+    label: defineMessage({
+      id: "command.format.ai_formula.label",
+      defaultMessage: "AI Generated Formula",
+    }),
+    title: defineMessage({
+      id: "command.format.ai_formula.title",
+      defaultMessage: "Insert AI generated formula.",
+    }),
     icon: <AIAvatar size={16} />,
   },
   bold: { icon: "bold", title: "Make selected text bold" },

src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx

@@ -20,6 +20,7 @@ import {
 } from "@cocalc/frontend/frame-editors/generic/chat";
 import { get_default_font_size } from "@cocalc/frontend/frame-editors/generic/client";
 import { labels, menu } from "@cocalc/frontend/i18n";
+import { editor } from "@cocalc/frontend/i18n/common";
 import { open_new_tab as openNewTab } from "@cocalc/frontend/misc/open-browser-tab";
 import { isSupportedExtension } from "@cocalc/frontend/project/page/home-page/ai-generate-examples";
 import { AI_GENERATE_DOC_TAG } from "@cocalc/frontend/project/page/home-page/ai-generate-utils";
@@ -34,7 +35,10 @@ addCommands({
     group: "frame-control",
     alwaysShow: true,
     pos: 1,
-    title: "Split frame horizontally into two rows",
+    title: defineMessage({
+      id: "command.generic.split_row.title",
+      defaultMessage: "Split frame horizontally into two rows",
+    }),
     onClick: ({ props }) => {
       if (props.is_full) {
         return props.actions.unset_frame_full();
@@ -43,14 +47,14 @@ addCommands({
       }
     },
     icon: "horizontal-split",
-    label: "Split Down",
-    button: "Split",
+    label: labels.split_frame_horizontally_title,
+    button: menu.split,
   },
   "split-col": {
     group: "frame-control",
     alwaysShow: true,
     pos: 2,
-    title: "Split frame vertically into two columns",
+    title: labels.split_frame_vertically_title,
     onClick: ({ props }) => {
       if (props.is_full) {
         return props.actions.unset_frame_full();
@@ -59,48 +63,77 @@ addCommands({
       }
     },
     icon: "vertical-split",
-    label: "Split Right",
-    button: "Split",
+    label: defineMessage({
+      id: "command.generic.split_col.label",
+      defaultMessage: "Split Right",
+      description: "Split a frame vertically",
+    }),
+    button: menu.split,
   },
   maximize: {
     group: "frame-control",
     alwaysShow: true,
     pos: 3,
-    title: "Toggle whether or not this frame is maximized",
+    title: defineMessage({
+      id: "command.generic.maximize.title",
+      defaultMessage: "Toggle whether or not this frame is maximized",
+    }),
     onClick: ({ props }) => {
       if (props.is_full) {
         props.actions.unset_frame_full();
       } else {
         props.actions.set_frame_full(props.id);
       }
     },
-    label: ({ props }) => {
-      if (props.is_full) {
-        return <span>Demaximize Frame</span>;
-      } else {
-        return <span>Maximize Frame</span>;
-      }
-    },
+    label: ({ props, intl }) =>
+      intl.formatMessage(
+        {
+          id: "command.generic.maximize.label",
+          defaultMessage:
+            "{is_full, select, true {Demaximize Frame} other {Maximize Frame}}",
+          description:
+            "Depending on is_full, say maximize or de-maximize frame.",
+        },
+        {
+          is_full: props.is_full,
+        },
+      ),
     icon: "expand",
   },
   close: {
     group: "frame-control",
     alwaysShow: true,
     pos: 4,
-    title: "Close this frame. Close all frames to restore the default layout.",
+    title: defineMessage({
+      id: "command.generic.close.title",
+      defaultMessage:
+        "Close this frame. To restore the default layout, select the application menu entry 'Default Layout'.",
+    }),
     onClick: ({ props }) => {
       props.actions.close_frame(props.id);
     },
-    label: "Close Frame",
-    button: "Close",
+    label: defineMessage({
+      id: "command.generic.close.label",
+      defaultMessage: "Close Frame",
+    }),
+    button: defineMessage({
+      id: "command.generic.close.button",
+      defaultMessage: "Close",
+    }),
     icon: "times",
   },
   show_table_of_contents: {
     group: "show-frames",
-    title: "Show the Table of Contents",
+    title: defineMessage({
+      id: "command.generic.show_table_of_contents.title",
+      defaultMessage: "Show the Table of Contents",
+    }),
     icon: "align-right",
-    label: "Table of Contents",
-    button: "Contents",
+    label: editor.table_of_contents_name,
+    button: defineMessage({
+      id: "command.generic.show_table_of_contents.button",
+      defaultMessage: "Contents",
+    }),
   },
   guide: {
     group: "show-frames",
@@ -352,25 +385,24 @@ addCommands({
   kick_other_users_out: {
     group: "other-users",
     icon: "skull-crossbones",
-    title:
-      "Kick all other users out from this document. It will close in all other browsers.",
+    title: menu.kick_other_users_out_title,
     tour: "kick_other_users_out",
-    label: "Kick Other Users Out",
-    button: "Kick",
+    label: menu.kick_other_users_out_label,
+    button: menu.kick_other_users_out_button,
   },
 
   halt_jupyter: {
     group: "quit",
     icon: "PoweroffOutlined",
-    label: "Close and Halt...",
-    button: "Halt",
-    title: "Halt the running Jupyter kernel and close this notebook.",
+    label: menu.close_and_halt,
+    button: menu.halt_jupyter_button,
+    title: menu.halt_jupyter_title,
   },
 
   close_and_halt: {
     group: "quit",
     icon: "PoweroffOutlined",
-    label: "Close and Halt...",
+    label: menu.close_and_halt,
     title: "Halt backend server and close this file.",
   },
 
@@ -838,9 +870,18 @@ addCommands({
     alwaysShow: true,
     icon: "layout",
     group: "frame_types",
-    title: "Reset the layout of all frames to the default",
-    label: "Default Layout",
-    button: "Default",
+    title: defineMessage({
+      id: "command.generic.reset_local_view_state.title",
+      defaultMessage: "Reset the layout of all frames to the default",
+    }),
+    label: defineMessage({
+      id: "command.generic.reset_local_view_state.label",
+      defaultMessage: "Default Layout",
+    }),
+    button: defineMessage({
+      id: "command.generic.reset_local_view_state.button",
+      defaultMessage: "Default",
+    }),
   },
   button_bar: {
     alwaysShow: true,

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

@@ -36,6 +36,7 @@ import { StandaloneComputeServerDocStatus } from "@cocalc/frontend/compute/stand
 import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
 import { IS_MOBILE } from "@cocalc/frontend/feature";
 import { excludeFromComputeServer } from "@cocalc/frontend/file-associations";
+import { IntlMessage, isIntlMessage, labels } from "@cocalc/frontend/i18n";
 import { AIGenerateDocumentModal } from "@cocalc/frontend/project/page/home-page/ai-generate-document";
 import { isSupportedExtension } from "@cocalc/frontend/project/page/home-page/ai-generate-examples";
 import { AvailableFeatures } from "@cocalc/frontend/project_configuration";
@@ -48,7 +49,6 @@ import {
   trunc_middle,
 } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
-import { isIntlMessage } from "../../i18n";
 import { Actions } from "../code-editor/actions";
 import { is_safari } from "../generic/browser";
 import LanguageModelTitleBarButton from "../llm/title-bar-button";
@@ -406,7 +406,7 @@ export function FrameTitleBar(props: Props) {
     return (
       <Button
         key={"split-row-button"}
-        title={"Split frame horizontally into two rows"}
+        title={intl.formatMessage(labels.split_frame_horizontally_title)}
         size="small"
         type="text"
         onClick={(e) => {
@@ -429,7 +429,7 @@ export function FrameTitleBar(props: Props) {
     return (
       <Button
         key={"split-col-button"}
-        title={"Split frame vertically into two columns"}
+        title={intl.formatMessage(labels.split_frame_vertically_title)}
         size="small"
         type="text"
         onClick={(e) => {
@@ -912,6 +912,18 @@ export function FrameTitleBar(props: Props) {
     );
   }
 
+  function spec2display(
+    spec: EditorDescription,
+    aspect: "name" | "short",
+  ): string {
+    const label: string | IntlMessage = spec[aspect];
+    if (isIntlMessage(label)) {
+      return intl.formatMessage(label);
+    } else {
+      return label;
+    }
+  }
+
   function renderTitle(): Rendered {
     let title: string = "";
     if (props.title !== undefined) {
@@ -922,9 +934,9 @@ export function FrameTitleBar(props: Props) {
       if (spec != null) {
         if (!title) {
           if (spec.name) {
-            title = spec.name;
+            title = spec2display(spec, "name");
           } else if (spec.short) {
-            title = spec.short;
+            title = spec2display(spec, "short");
           }
         }
       }

src/packages/frontend/frame-editors/frame-tree/types.ts

@@ -4,7 +4,9 @@
  */
 
 import { Map } from "immutable";
+
 import { IconName } from "@cocalc/frontend/components/icon";
+import { IntlMessage } from "@cocalc/frontend/i18n";
 import type { Command } from "./commands";
 
 export type FrameDirection = "row" | "col";
@@ -35,8 +37,8 @@ export type ConnectionStatus = "disconnected" | "connected" | "connecting";
 
 // Editor spec
 export interface EditorDescription {
-  short: string; // short description of the editor
-  name: string; // slightly longer description
+  short: string | IntlMessage; // short description of the editor
+  name: string | IntlMessage; // slightly longer description
   icon: IconName;
   component: any; // React component
 

src/packages/frontend/frame-editors/jupyter-editor/editor.ts

@@ -28,6 +28,7 @@ import { RawIPynb } from "./raw-ipynb";
 import { Slideshow } from "./slideshow-revealjs/slideshow";
 import { JupyterSnippets } from "./snippets";
 import { TableOfContents } from "./table-of-contents";
+import { editor } from "@cocalc/frontend/i18n/common";
 
 const {
   ICON_NAME: SNIPPET_ICON_NAME,
@@ -100,7 +101,7 @@ export const EDITOR_SPEC = {
   } as EditorDescription,
   jupyter_table_of_contents: {
     short: "Contents",
-    name: "Table of Contents",
+    name: editor.table_of_contents_name,
     icon: "align-right",
     component: TableOfContents,
     commands: set(["decrease_font_size", "increase_font_size"]),

src/packages/frontend/frame-editors/latex-editor/editor.ts

@@ -7,8 +7,9 @@
 Spec for editing LaTeX documents.
 */
 
+import { IS_IOS, IS_IPAD } from "@cocalc/frontend/feature";
+import { editor } from "@cocalc/frontend/i18n";
 import { set } from "@cocalc/util/misc";
-import { IS_IOS, IS_IPAD } from "../../feature";
 import { CodemirrorEditor } from "../code-editor/codemirror-editor";
 import { createEditor } from "../frame-tree/editor";
 import { EditorDescription } from "../frame-tree/types";
@@ -150,8 +151,8 @@ const EDITOR_SPEC = {
   } as EditorDescription,
 
   latex_table_of_contents: {
-    short: "Contents",
-    name: "Table of Contents",
+    short: editor.table_of_contents_short,
+    name: editor.table_of_contents_name,
     icon: "align-right",
     component: TableOfContents,
     commands: set(["decrease_font_size", "increase_font_size"]),

src/packages/frontend/frame-editors/markdown-editor/editor.ts

@@ -17,6 +17,7 @@ import { CodemirrorEditor } from "../code-editor/codemirror-editor";
 import { SETTINGS_SPEC } from "../settings/editor";
 import { terminal } from "../terminal-editor/editor";
 import { time_travel } from "../time-travel-editor/editor";
+import { editor } from "../../i18n";
 
 const EDITOR_SPEC = {
   slate: {
@@ -118,8 +119,8 @@ const EDITOR_SPEC = {
     buttons: set(["edit", "decrease_font_size", "increase_font_size"]),
   } as EditorDescription,
   markdown_table_of_contents: {
-    short: "Contents",
-    name: "Table of Contents",
+    short: editor.table_of_contents_short,
+    name: editor.table_of_contents_name,
     icon: "align-right",
     component: TableOfContents,
     commands: set(["decrease_font_size", "increase_font_size"]),