Merge pull request #7788 from sagemathinc/fix-i18n-timetravel

frontend/frame-editors: nail down type of each frame editor spec + translation fix

Author: williamstein

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

@@ -31,9 +31,10 @@ export const SHELLS = {
   ml: "ocaml",
   pl: "perl",
   rb: "ruby",
-};
+} as const;
 
-export const cm = {
+export const cm: EditorDescription = {
+  type: "cm",
   short: "Code",
   name: "Source Code",
   icon: "code",
@@ -65,13 +66,13 @@ export const cm = {
       },
     },
   },
-} as EditorDescription;
+} as const;
 
 const EDITOR_SPEC = {
   cm,
   terminal,
   time_travel,
-};
+} as const;
 
 export const Editor = createEditor({
   format_bar: false,

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

@@ -18,6 +18,7 @@ import {
   Students,
   Handouts,
 } from "./course-panels";
+import { EditorDescription } from "../frame-tree/types";
 
 const commands = set([
   // commented out for now since broken: See https://github.com/sagemathinc/cocalc/issues/7235
@@ -30,47 +31,62 @@ const commands = set([
 //const buttons = set(["decrease_font_size", "increase_font_size"]);
 const buttons = undefined;
 
+const course_students: EditorDescription = {
+  type: "course-students",
+  short: "Students",
+  name: "Students",
+  icon: "users",
+  component: Students,
+  commands,
+  buttons,
+} as const;
+
+const course_assignments: EditorDescription = {
+  type: "course-assignments",
+  short: "Assignments",
+  name: "Assignments",
+  icon: "share-square",
+  component: Assignments,
+  commands,
+  buttons,
+} as const;
+
+const course_handouts: EditorDescription = {
+  type: "course-handouts",
+  short: "Handouts",
+  name: "Handouts",
+  icon: "copy",
+  component: Handouts,
+  commands,
+  buttons,
+} as const;
+
+const course_configuration: EditorDescription = {
+  type: "course-configuration",
+  short: "Config",
+  name: "Configuration",
+  icon: "cogs",
+  component: Configuration,
+  commands,
+  buttons,
+} as const;
+
+const course_shared_project: EditorDescription = {
+  type: "course-shared_project",
+  short: "Shared",
+  name: "Shared Project",
+  icon: "share-square",
+  component: SharedProject,
+  commands,
+  buttons,
+} as const;
+
 export const EDITOR_SPEC = {
-  course_students: {
-    short: "Students",
-    name: "Students",
-    icon: "users",
-    component: Students,
-    commands,
-    buttons,
-  },
-  course_assignments: {
-    short: "Assignments",
-    name: "Assignments",
-    icon: "share-square",
-    component: Assignments,
-    commands,
-    buttons,
-  },
-  course_handouts: {
-    short: "Handouts",
-    name: "Handouts",
-    icon: "copy",
-    component: Handouts,
-    commands,
-    buttons,
-  },
-  course_configuration: {
-    short: "Config",
-    name: "Configuration",
-    icon: "cogs",
-    component: Configuration,
-    commands,
-    buttons,
-  },
-  course_shared_project: {
-    short: "Shared",
-    name: "Shared Project",
-    icon: "share-square",
-    component: SharedProject,
-    commands,
-    buttons,
-  },
+  course_students,
+  course_assignments,
+  course_handouts,
+  course_configuration,
+  course_shared_project,
   terminal,
   time_travel,
 } as const;

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

@@ -11,22 +11,28 @@ import { time_travel } from "@cocalc/frontend/frame-editors/time-travel-editor/e
 import TableEditor from "./table-editor";
 import Users from "./users";
 
+const tables: EditorDescription = {
+  type: "crm-tables",
+  short: "Tables",
+  name: "Tables",
+  icon: "database",
+  component: TableEditor,
+  commands: set(["save", "undo", "redo"]),
+} as const;
+
+const account: EditorDescription = {
+  type: "crm-account",
+  short: "Users",
+  name: "User Search",
+  icon: "users",
+  component: Users,
+} as const;
+
 const EDITOR_SPEC = {
-  tables: {
-    short: "Tables",
-    name: "Tables",
-    icon: "database",
-    component: TableEditor,
-    commands: set(["save", "undo", "redo"]),
-  },
-  account: {
-    short: "Users",
-    name: "User Search",
-    icon: "users",
-    component: Users,
-  },
+  tables,
+  account,
   time_travel,
-} as { [name: string]: EditorDescription };
+} as const;
 
 export const Editor = createEditor({
   format_bar: false,

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

@@ -7,47 +7,51 @@
 Top-level react component for editing CSV files
 */
 
-import { createEditor } from "../frame-tree/editor";
 import { set } from "@cocalc/util/misc";
 import { CodemirrorEditor } from "../code-editor/codemirror-editor";
+import { createEditor } from "../frame-tree/editor";
+import { EditorDescription } from "../frame-tree/types";
 import { terminal } from "../terminal-editor/editor";
 import { time_travel } from "../time-travel-editor/editor";
 import Grid from "./grid";
 
-const EDITOR_SPEC = {
-  grid: {
-    short: "Grid",
-    name: "Grid",
-    icon: "table",
-    component: Grid,
-    commands: set(["decrease_font_size", "increase_font_size", "chatgpt"]),
-  },
+const grid: EditorDescription = {
+  type: "csv-grid",
+  short: "Grid",
+  name: "Grid",
+  icon: "table",
+  component: Grid,
+  commands: set(["decrease_font_size", "increase_font_size", "chatgpt"]),
+} as const;
 
-  cm: {
-    short: "Raw",
-    name: "Raw Data",
-    icon: "code",
-    component: CodemirrorEditor,
-    commands: set([
-      "chatgpt",
-      "print",
-      "decrease_font_size",
-      "increase_font_size",
-      "save",
-      "time_travel",
-      "replace",
-      "find",
-      "goto_line",
-      "cut",
-      "paste",
-      "copy",
-      "undo",
-      "redo",
-    ]),
-  },
+const cm: EditorDescription = {
+  type: "cm",
+  short: "Raw",
+  name: "Raw Data",
+  icon: "code",
+  component: CodemirrorEditor,
+  commands: set([
+    "chatgpt",
+    "print",
+    "decrease_font_size",
+    "increase_font_size",
+    "save",
+    "time_travel",
+    "replace",
+    "find",
+    "goto_line",
+    "cut",
+    "paste",
+    "copy",
+    "undo",
+    "redo",
+  ]),
+} as const;
 
+const EDITOR_SPEC = {
+  grid,
+  cm,
   terminal,
-
   time_travel,
 } as const;
 

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

@@ -32,6 +32,7 @@ import { copy, hidden_meta_file, is_different } from "@cocalc/util/misc";
 import { delay } from "awaiting";
 import { Map, Set } from "immutable";
 import React from "react";
+
 import {
   ReactDOM,
   redux,
@@ -290,8 +291,7 @@ export const FrameTree: React.FC<FrameTreeProps> = React.memo(
       let name_leaf = name;
       let actions_leaf = actions;
       if (
-        typeof spec.name != "string" &&
-        spec.name?.id === "labels.timetravel" &&
+        spec.type === "timetravel" &&
         !(actions instanceof TimeTravelActions)
       ) {
         if (path_leaf.slice(path_leaf.length - 12) != ".time-travel") {

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

@@ -35,8 +35,68 @@ export type ErrorStyles = undefined | "monospace";
 
 export type ConnectionStatus = "disconnected" | "connected" | "connecting";
 
+// Each editor gets its own unique type. This is useful to check which editor it is.
+// e.g. #7787 was caused by merely checking on the name, which had changed.
+type EditorType =
+  | "chat"
+  | "cm-lean"
+  | "cm"
+  | "course-assignments"
+  | "course-configuration"
+  | "course-handouts"
+  | "course-shared_project"
+  | "course-students"
+  | "crm-account"
+  | "crm-tables"
+  | "csv-grid"
+  | "errors"
+  | "iframe"
+  | "jupyter_json_edit"
+  | "jupyter_json_view"
+  | "jupyter-introspect"
+  | "jupyter-toc"
+  | "jupyter"
+  | "latex-build"
+  | "latex-toc"
+  | "latex-word_count"
+  | "latex"
+  | "lean-help"
+  | "lean-info"
+  | "lean-messages"
+  | "markdown-rendered"
+  | "markdown-toc"
+  | "markdown"
+  | "pdfjs-canvas"
+  | "preview-html"
+  | "preview-pdf-canvas"
+  | "preview-pdf-native"
+  | "qmd-log"
+  | "rmd-build"
+  | "rst-view"
+  | "sagews-cells"
+  | "sagews-document"
+  | "settings"
+  | "slate"
+  | "slides-notes"
+  | "slides-slideshow"
+  | "slides"
+  | "slideshow-revealjs"
+  | "snippets"
+  | "tasks"
+  | "terminal-guide"
+  | "terminal"
+  | "timetravel"
+  | "whiteboard-overview"
+  | "whiteboard-pages"
+  | "whiteboard-search"
+  | "whiteboard"
+  | "wiki"
+  | "x11-apps"
+  | "x11"
+
 // Editor spec
 export interface EditorDescription {
+  type: EditorType;
   short: string | IntlMessage; // short description of the editor
   name: string | IntlMessage; // slightly longer description
   icon: IconName;
@@ -67,6 +127,7 @@ export interface EditorDescription {
   hide_public?: boolean; // if true, do not show this editor option (in title bar dropdown) when viewing file publicly.
   clear_info?: { text: string; confirm: string };
   placeholder?: string; // placeholder text to use when empty.
+  renderer?: "canvas"; // TODO: is this used at all?
 }
 
 export interface EditorSpec {