frontend/i18n: something is off with the types or assignments of AllActions, FrameActions, etc. in Jupyter

Author: haraldschilly

src/packages/frontend/frame-editors/code-editor/actions.ts

@@ -1994,7 +1994,7 @@ export class Actions<
   // Do a formatting action to whatever code editor
   // is currently active, or the main document if none is
   // focused or force_main is true.
-  async format_action(cmd, args, force_main: boolean = false): Promise<void> {
+  async format_action(cmd, args?, force_main: boolean = false): Promise<void> {
     if (!force_main) {
       const id = this._get_active_id();
       const editor = this.get_code_editor(id);

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

@@ -13,8 +13,10 @@ import type { MenuItem } from "@cocalc/frontend/components/dropdown-menu";
 import { STAY_OPEN_ON_CLICK } from "@cocalc/frontend/components/dropdown-menu";
 import { Icon, IconName } from "@cocalc/frontend/components/icon";
 import { IS_MOBILE } from "@cocalc/frontend/feature";
-import { isIntlMessage } from "@cocalc/frontend/i18n";
+import { IntlMessage, isIntlMessage } from "@cocalc/frontend/i18n";
 import { cmp, filename_extension, trunc_middle } from "@cocalc/util/misc";
+// import { FrameTitleBarProps } from "../title-bar";
+import { EditorDescription } from "../types";
 import { COMMANDS } from "./commands";
 import { APPLICATION_MENU, SEARCH_COMMANDS } from "./const";
 import { GROUPS, MENUS } from "./menus";
@@ -25,7 +27,9 @@ const MAX_SEARCH_RESULTS = 10;
 const ICON_WIDTH = "24px";
 
 export class ManageCommands {
-  readonly props;
+  // TODO: setting this to FrameTitleBarProps causes type issues in frame-editors/jupyter-editor/editor.ts
+  // So, there is probably a fundamental problem with that mapping into "AllActions"
+  readonly props; // FrameTitleBarProps;
   readonly studentProjectFunctionality;
   readonly setShowAI: (val: boolean) => void;
   readonly setShowNewAI: (val: boolean) => void;
@@ -58,7 +62,7 @@ export class ManageCommands {
     this.readOnly = readOnly;
     this.editorSettings = editorSettings;
     this.intl = intl;
-    this.formatMessageValues = { br: <br />, ...this.props };
+    this.formatMessageValues = { br: <br /> };
     //window.x = { manage: this };
   }
 
@@ -171,6 +175,19 @@ export class ManageCommands {
     return v;
   };
 
+  spec2display = (
+    spec: EditorDescription,
+    aspect: "name" | "short",
+  ): string => {
+    const label: string | IntlMessage | undefined = spec[aspect];
+    if (isIntlMessage(label)) {
+      return this.intl.formatMessage(label);
+    } else if (typeof label === "string") {
+      return label;
+    }
+    return "";
+  };
+
   applicationMenuTitle = () => {
     let title: string = "Application";
     let icon: IconName | undefined = undefined;
@@ -179,9 +196,9 @@ export class ManageCommands {
       if (spec != null) {
         icon = spec.icon;
         if (spec.short) {
-          title = spec.short;
+          title = this.spec2display(spec, "short");
         } else if (spec.name) {
-          title = spec.name;
+          title = this.spec2display(spec, "name");
         }
       }
     }
@@ -243,11 +260,11 @@ export class ManageCommands {
           `BUG -- ${type} must be defined by the editor_spec, but is not`,
         );
       }
-      const search = spec.name?.toLowerCase();
-      let label = spec.name;
+      const label = this.spec2display(spec, "name");
+      const search = label.toLowerCase();
       items.push({
         search,
-        label: selected_type == type ? <b>{label}</b> : label,
+        label: selected_type === type ? <b>{label}</b> : label,
         icon: spec.icon ? spec.icon : "file",
         onClick: () => {
           if (createNew) {

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

@@ -36,7 +36,9 @@ 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 { NotebookFrameActions } from "@cocalc/frontend/frame-editors/jupyter-editor/cell-notebook/actions";
 import { IntlMessage, isIntlMessage, labels } from "@cocalc/frontend/i18n";
+import { JupyterActions } from "@cocalc/frontend/jupyter/browser-actions";
 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";
@@ -68,7 +70,7 @@ import { ConnectionStatus, EditorDescription, EditorSpec } from "./types";
 // actions that are not defined in the base code editor actions.
 // In all cases, we check these are actually defined before calling
 // them to avoid a runtime stacktrace.
-interface FrameActions extends Actions {
+export interface FrameActions extends Actions {
   zoom_page_width?: (id: string) => void;
   zoom_page_height?: (id: string) => void;
   sync?: (id: string, editor_actions: EditorActions) => void;
@@ -79,6 +81,10 @@ interface FrameActions extends Actions {
   word_count?: (time: number, force: boolean) => void;
   close_and_halt?: (id: string) => void;
   stop_build?: (id: string) => void;
+
+  // optional, set in frame-editors/jupyter-editor/editor.ts → initMenus
+  jupyter_actions?: JupyterActions;
+  frame_actions?: NotebookFrameActions;
 }
 
 interface EditorActions extends Actions {
@@ -148,7 +154,7 @@ export function ConnectionStatusIcon({ status }: { status: ConnectionStatus }) {
   );
 }
 
-interface Props {
+export interface FrameTitleBarProps {
   actions: FrameActions;
   editor_actions: EditorActions;
   path: string;
@@ -173,7 +179,7 @@ interface Props {
   tab_is_visible?: boolean;
 }
 
-export function FrameTitleBar(props: Props) {
+export function FrameTitleBar(props: FrameTitleBarProps) {
   // Whether this is *the* active currently focused frame:
   const is_active = props.active_id === props.id;
   const track = useMemo(() => {

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

@@ -8,23 +8,24 @@ Jupyter Frame Editor Actions
 */
 
 import { delay } from "awaiting";
-import { FrameTree } from "../frame-tree/types";
+
+import { syncAllComputeServers } from "@cocalc/frontend/compute/sync-all";
+import { markdown_to_slate } from "@cocalc/frontend/editors/slate/markdown-to-slate";
+import { JupyterActions } from "@cocalc/frontend/jupyter/browser-actions";
+import { toFragmentId } from "@cocalc/frontend/jupyter/heading-tag";
+import { open_new_tab } from "@cocalc/frontend/misc";
+import type { FragmentId } from "@cocalc/frontend/misc/fragment-id";
 import {
   Actions as BaseActions,
   CodeEditorState,
 } from "../code-editor/actions";
-import { revealjs_slideshow_html } from "./slideshow-revealjs/nbconvert";
+import { FrameTree } from "../frame-tree/types";
+import { NotebookFrameActions } from "./cell-notebook/actions";
 import {
-  create_jupyter_actions,
   close_jupyter_actions,
+  create_jupyter_actions,
 } from "./jupyter-actions";
-import type { FragmentId } from "@cocalc/frontend/misc/fragment-id";
-import { markdown_to_slate } from "@cocalc/frontend/editors/slate/markdown-to-slate";
-import { toFragmentId } from "@cocalc/frontend/jupyter/heading-tag";
-import { JupyterActions } from "../../jupyter/browser-actions";
-import { NotebookFrameActions } from "./cell-notebook/actions";
-import { open_new_tab } from "../../misc";
-import { syncAllComputeServers } from "@cocalc/frontend/compute/sync-all";
+import { revealjs_slideshow_html } from "./slideshow-revealjs/nbconvert";
 
 export interface JupyterEditorState extends CodeEditorState {
   slideshow?: {

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

@@ -13,6 +13,7 @@ import type { Command } from "@cocalc/frontend/frame-editors/frame-tree/commands
 import { addEditorMenus } from "@cocalc/frontend/frame-editors/frame-tree/commands";
 import { FORMAT_SOURCE_ICON } from "@cocalc/frontend/frame-editors/frame-tree/config";
 import { labels, menu } from "@cocalc/frontend/i18n";
+import { editor } from "@cocalc/frontend/i18n/common";
 import { AllActions, commands } from "@cocalc/frontend/jupyter/commands";
 import { shortcut_to_string } from "@cocalc/frontend/jupyter/keyboard-shortcuts";
 import { capitalize, field_cmp, set } from "@cocalc/util/misc";
@@ -28,7 +29,6 @@ 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,
@@ -542,7 +542,7 @@ function initMenus() {
         onClick: ({ props }) => {
           allActions.frame_actions = props.actions.frame_actions?.[props.id];
           allActions.jupyter_actions = props.actions.jupyter_actions;
-          allActions.editor_actions = props.actions;
+          allActions.editor_actions = props.actions; // TODO should this be props.editor_actions ?
           cmd.f();
         },
       };

src/packages/frontend/i18n/README.md

@@ -38,6 +38,10 @@ Ref:
 - https://simplelocalize.io/docs/integrations/format-js/
 - https://simplelocalize.io/docs/integrations/format-js-cli/
 
+### Issues
+
+In dev mode, there are warnings like `"defaultRichTextElements" was specified but "message" was not pre-compiled.`. I don't understand why. These simple json messages for translations are fine (at least there is no way to compile them) and they also seem to work. It's probably a matter of fixing the top level "render.tsx" components – i.e. when to prevent a rendering, because of incomplete data, or something like that.
+
 ## Specifics
 
 CoCalc specific rules for implementing translations, of which I think are good to follow in CoCalc's environment: