Merge pull request #7696 from sagemathinc/toggle-autobuild

tex/rmd/qmd: "build on save" toggle button

Author: williamstein

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

@@ -4,10 +4,11 @@
  */
 
 import { Map } from "immutable";
-import { Rendered, Component } from "../../app-framework";
+
+import { Checkbox } from "@cocalc/frontend/antd-bootstrap";
+import { Component, Rendered } from "@cocalc/frontend/app-framework";
 import { capitalize, is_different, keys } from "@cocalc/util/misc";
 import { JUPYTER_CLASSIC_MODERN } from "@cocalc/util/theme";
-import { Checkbox } from "../../antd-bootstrap";
 
 const EDITOR_SETTINGS_CHECKBOXES: { [setting: string]: string | Rendered } = {
   extra_button_bar:
@@ -40,7 +41,7 @@ const EDITOR_SETTINGS_CHECKBOXES: { [setting: string]: string | Rendered } = {
   /* commented out since we are never using this.
   disable_jupyter_windowing:
     "never use windowing with Jupyter notebooks (windowing is sometimes used on the Chrome browser to make very large notebooks render quickly, but can lead to trouble)",*/
-};
+} as const;
 
 interface Props {
   editor_settings: Map<string, any>;

src/packages/frontend/components/icon.tsx

@@ -67,6 +67,7 @@ import {
   DatabaseFilled,
   DatabaseOutlined,
   DeleteOutlined,
+  DeliveredProcedureOutlined,
   DeploymentUnitOutlined,
   DesktopOutlined,
   DoubleLeftOutlined,
@@ -185,6 +186,7 @@ import {
   StarOutlined,
   StepBackwardOutlined,
   StepForwardOutlined,
+  StopFilled,
   StopOutlined,
   StrikethroughOutlined,
   SwapOutlined,
@@ -331,6 +333,7 @@ const IconSpec: { [name: string]: any } = {
   "deployment-unit": DeploymentUnitOutlined,
   dedicated: DatabaseOutlined, // icon for "dedicated resources", looks like a server rack
   desktop: DesktopOutlined,
+  "delivered-procedure-outlined": DeliveredProcedureOutlined,
   digitalocean: { IconFont: "digitalocean" },
   discord: { IconFont: "discord" },
   "disk-drive": { IconFont: "disk-drive" },
@@ -541,6 +544,7 @@ const IconSpec: { [name: string]: any } = {
   "step-backward": StepBackwardOutlined,
   "step-forward": StepForwardOutlined,
   stop: { IconFont: "stop" }, // the ant-design "stop" looks weird.
+  "stop-filled": StopFilled,
   stopwatch: FieldTimeOutlined,
   store: { IconFont: "store" },
   strikethrough: StrikethroughOutlined,

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

@@ -32,6 +32,7 @@ import {
   Store,
   TypedMap,
   createTypedMap,
+  redux,
 } from "@cocalc/frontend/app-framework";
 import type { PageActions } from "@cocalc/frontend/app/actions";
 import { syncAllComputeServers } from "@cocalc/frontend/compute/sync-all";
@@ -98,6 +99,7 @@ import * as cm_doc_cache from "./doc";
 import { SHELLS } from "./editor";
 import { test_line } from "./simulate_typing";
 import { misspelled_words } from "./spell-check";
+import { set_account_table } from "../../account/util";
 
 interface gutterMarkerParams {
   line: number;
@@ -3009,4 +3011,12 @@ export class Actions<
   tour(_id: string, _refs: any): TourProps["steps"] {
     return [];
   }
+
+  // toggle autobuild on save via the menu or button
+  public build_on_save(): void {
+    const val = redux
+      .getStore("account")
+      .getIn(["editor_settings", "build_on_save"]);
+    set_account_table({ editor_settings: { build_on_save: !val } });
+  }
 }

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

@@ -435,11 +435,32 @@ addCommands({
   build: {
     group: "build",
     label: "Build",
-    title:
-      "Build the document.  To disable automatic builds, change Account → Editor → 'Build on save'.",
+    title: (
+      <>
+        Build the document.
+        <br />
+        To enable or disable automatic builds, click on the 'Build on Save'
+        button or menu entry.
+      </>
+    ),
     icon: "play-circle",
   },
-
+  build_on_save: {
+    group: "build",
+    label: () => (
+      <>
+        Build on Save{" "}
+        {redux.getStore("account").getIn(["editor_settings", "build_on_save"])
+          ? "(Enabled)"
+          : "(Disabled)"}
+      </>
+    ),
+    title: "Toggle automatic build on file save.",
+    icon: () =>
+      redux.getStore("account").getIn(["editor_settings", "build_on_save"])
+        ? "delivered-procedure-outlined"
+        : "stop-filled",
+  },
   force_build: {
     group: "build",
     label: "Force Build",

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

@@ -43,6 +43,7 @@ const EDITOR_SPEC = {
     commands: set([
       "format_action",
       "build",
+      "build_on_save",
       "force_build",
       "print",
       "decrease_font_size",
@@ -75,6 +76,7 @@ const EDITOR_SPEC = {
       "format-font",
       "format-color",
       "build",
+      "build_on_save",
       "show_table_of_contents",
     ]),
     customizeCommands: {
@@ -136,7 +138,7 @@ const EDITOR_SPEC = {
       "rescan_latex_directive",
       "word_count",
     ]),
-    buttons: set(["build", "force_build", "clean"]),
+    buttons: set(["build", "force_build", "build_on_save", "clean"]),
   } as EditorDescription,
 
   latex_table_of_contents: {

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

@@ -7,12 +7,13 @@
 Quarto Editor Actions
 */
 
-import { path_split } from "@cocalc/util/misc";
-import { reuseInFlight } from "@cocalc/util/reuse-in-flight";
 import { Set } from "immutable";
 import { debounce } from "lodash";
-import { redux } from "../../app-framework";
-import { markdown_to_html_frontmatter } from "../../markdown";
+
+import { redux } from "@cocalc/frontend/app-framework";
+import { markdown_to_html_frontmatter } from "@cocalc/frontend/markdown";
+import { path_split } from "@cocalc/util/misc";
+import { reuseInFlight } from "@cocalc/util/reuse-in-flight";
 import {
   Actions as BaseActions,
   CodeEditorState,
@@ -42,7 +43,7 @@ export class Actions extends MarkdownActions {
     }
   }
 
-  private do_implicit_builds(): boolean {
+  private do_build_on_save(): boolean {
     const account: any = this.redux.getStore("account");
     if (account != null) {
       return !!account.getIn(["editor_settings", "build_on_save"]);
@@ -59,7 +60,7 @@ export class Actions extends MarkdownActions {
     );
 
     const do_build = reuseInFlight(async () => {
-      if (!this.do_implicit_builds()) return;
+      if (!this.do_build_on_save()) return;
       if (this._syncstring == null) return;
       const hash = this._syncstring.hash_of_saved_version();
       if (this._last_qmd_hash != hash) {

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

@@ -45,12 +45,14 @@ const EDITOR_SPEC = {
       "redo",
       "format",
       "build",
+      "build_on_save",
     ]),
     buttons: set([
       "format-ai_formula",
       "decrease_font_size",
       "increase_font_size",
       "build",
+      "build_on_save",
     ]),
   } as EditorDescription,
 

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

@@ -82,7 +82,7 @@ export class Actions extends MarkdownActions {
     );
   }
 
-  private do_implicit_builds(): boolean {
+  private do_build_on_save(): boolean {
     const account: any = this.redux.getStore("account");
     if (account != null) {
       return !!account.getIn(["editor_settings", "build_on_save"]);
@@ -99,7 +99,7 @@ export class Actions extends MarkdownActions {
     );
 
     const do_build = reuseInFlight(async () => {
-      if (!this.do_implicit_builds()) return;
+      if (!this.do_build_on_save()) return;
       if (this._syncstring == null) return;
       const hash = this._syncstring.hash_of_saved_version();
       if (this._last_rmd_hash != hash) {

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

@@ -48,12 +48,14 @@ const EDITOR_SPEC = {
       "redo",
       "format",
       "build",
+      "build_on_save",
     ]),
     buttons: set([
       "format-ai_formula",
       "decrease_font_size",
       "increase_font_size",
       "build",
+      "build_on_save",
     ]),
   } as EditorDescription,