add terminal settings menu

Author: williamstein

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

@@ -4,7 +4,6 @@
  */
 
 import { useIntl } from "react-intl";
-
 import { Panel } from "@cocalc/frontend/antd-bootstrap";
 import { useTypedRedux } from "@cocalc/frontend/app-framework";
 import {
@@ -23,7 +22,7 @@ declare global {
   }
 }
 
-export const TerminalSettings: React.FC = () => {
+export function TerminalSettings() {
   const intl = useIntl();
 
   const terminal = useTypedRedux("account", "terminal");
@@ -56,4 +55,4 @@ export const TerminalSettings: React.FC = () => {
       </LabeledRow>
     </Panel>
   );
-};
+}

src/packages/frontend/app/actions.ts

@@ -22,6 +22,7 @@ export class PageActions extends Actions<PageState> {
   private active_key_handler?: any;
   private suppress_key_handlers: boolean = false;
   private popconfirmIsOpen: boolean = false;
+  private settingsModalIsOpen: boolean = false;
 
   /* Expects a func which takes a browser keydown event
      Only allows one keyhandler to be active at a time.
@@ -421,6 +422,27 @@ export class PageActions extends Actions<PageState> {
       this.setState({ popconfirm: { open: false } });
     }
   };
+
+  settings = async (name) => {
+    if (!name) {
+      this.setState({ settingsModal: "" });
+      this.settingsModalIsOpen = false;
+      return;
+    }
+    const store = redux.getStore("page");
+    while (this.settingsModalIsOpen) {
+      await once(store, "change");
+    }
+    try {
+      this.settingsModalIsOpen = true;
+      this.setState({ settingsModal: name });
+      while (store.get("settingsModal")) {
+        await once(store, "change");
+      }
+    } finally {
+      this.settingsModalIsOpen = false;
+    }
+  };
 }
 
 export function init_actions() {

src/packages/frontend/app/page.tsx

@@ -11,7 +11,6 @@ everything on *desktop*, once the user has signed in.
 declare var DEBUG: boolean;
 
 import { useIntl } from "react-intl";
-
 import { Avatar } from "@cocalc/frontend/account/avatar/avatar";
 import { alert_message } from "@cocalc/frontend/alerts";
 import { Button } from "@cocalc/frontend/antd-bootstrap";
@@ -45,6 +44,7 @@ import PopconfirmModal from "./popconfirm-modal";
 import { HIDE_LABEL_THRESHOLD, NAV_CLASS } from "./top-nav-consts";
 import { CookieWarning, LocalStorageWarning, VersionWarning } from "./warnings";
 import { I18NBanner, useShowI18NBanner } from "./i18n-banner";
+import SettingsModal from "./settings-modal";
 
 // ipad and ios have a weird trick where they make the screen
 // actually smaller than 100vh and have it be scrollable, even
@@ -110,7 +110,7 @@ export const Page: React.FC = () => {
   );
   const when_account_created = useTypedRedux("account", "created");
   const groups = useTypedRedux("account", "groups");
-  const show_i18n = useShowI18NBanner()
+  const show_i18n = useShowI18NBanner();
 
   const is_commercial = useTypedRedux("customize", "is_commercial");
 
@@ -401,6 +401,7 @@ export const Page: React.FC = () => {
       <ActiveContent />
       <PayAsYouGoModal />
       <PopconfirmModal />
+      <SettingsModal />
     </div>
   );
 };

src/packages/frontend/app/settings-modal.tsx

@@ -0,0 +1,61 @@
+/*
+Easily show a global settings modal at any point in cocalc by doing
+
+   await redux.getActions("page").settings(name)
+
+This should be used only for various types of configuration that is not
+specific to a particular project.  E.g., many of the panels in the Account
+tab could also be accessed this way.
+*/
+
+import { Modal } from "antd";
+import { useActions, useRedux } from "@cocalc/frontend/app-framework";
+
+import { TerminalSettings } from "@cocalc/frontend/account/terminal-settings";
+
+// Ensure the billing Actions and Store are created, which are needed for purchases, etc., to work...
+import "@cocalc/frontend/billing/actions";
+
+export default function SettingsModal({}) {
+  const actions = useActions("page");
+  const name = useRedux("page", "settingsModal");
+
+  if (!name) {
+    return null;
+  }
+
+  const { Component, title } = getDescription(name);
+
+  const close = () => {
+    actions.settings("");
+  };
+
+  // destroyOnClose so values in quota input, etc. get updated
+  return (
+    <Modal
+      key="settings-modal"
+      width={"600px"}
+      destroyOnClose
+      open
+      title={title}
+      onOk={close}
+      onCancel={close}
+      cancelButtonProps={{ style: { display: "none" } }}
+      okText="Close"
+    >
+      <br />
+      {Component != null ? <Component /> : undefined}
+    </Modal>
+  );
+}
+
+function getDescription(name: string): { Component?; title? } {
+  switch (name) {
+    case "terminal-settings":
+      return { Component: TerminalSettings };
+    default:
+      return {
+        title: <div>Unknown component {name}</div>,
+      };
+  }
+}

src/packages/frontend/app/store.ts

@@ -50,6 +50,8 @@ export interface PageState {
     cancelText?: string;
     okText?: string;
   };
+
+  settingsModal?: string;
 }
 
 export class PageStore extends Store<PageState> {}

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

@@ -1123,6 +1123,17 @@ addCommands({
     }),
     ...fileAction("close"),
   },
+  settings: {
+    pos: 10,
+    group: "settings",
+    icon: "gear",
+    title: "Settings",
+    label: "Settings",
+    button: "Settings",
+    onClick: ({ props }) => {
+      props.actions.settings?.();
+    },
+  },
   new_frame_of_type: {
     alwaysShow: true,
     icon: "plus-square",

src/packages/frontend/frame-editors/frame-tree/commands/generic-menus.ts

@@ -6,7 +6,7 @@ addMenus({
   app: {
     label: APPLICATION_MENU,
     pos: -10,
-    groups: ["about", "frame_types", "quit"],
+    groups: ["about", "frame_types", "quit", "settings"],
   },
   file: {
     label: menu.file,

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

@@ -115,6 +115,10 @@ export class TerminalActions extends Actions {
   compute_server() {
     // this is here just so the dropdown gets enabled
   }
+
+  settings = () => {
+    this.redux.getActions("page").settings("terminal-settings");
+  };
 }
 
 // Also useful to import as just "Actions" for our editor reg system

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

@@ -38,7 +38,7 @@ export const terminal: EditorDescription = {
     "chatgpt",
     // "tour", -- temporarily disabled until I figure out how to to do editor tours again (fallout from pr 7180)
     "compute_server",
-    /*"reload" */
+    "settings",
   ]),
   buttons: set([
     "decrease_font_size",