Merge branch 'master' of github.com:sagemathinc/cocalc

Author: williamstein

src/packages/frontend/admin/users/impersonate.tsx

@@ -3,55 +3,54 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Component, Rendered } from "@cocalc/frontend/app-framework";
-import { Loading } from "@cocalc/frontend/components";
-import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { Alert } from "antd";
 import { join } from "path";
+
+import { Rendered, useEffect, useState } from "@cocalc/frontend/app-framework";
+import { Loading } from "@cocalc/frontend/components";
 import { appBasePath } from "@cocalc/frontend/customize/app-base-path";
-import { Alert } from "antd";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
 
 interface Props {
   account_id: string;
   first_name: string;
   last_name: string;
 }
 
-interface State {
-  auth_token?: string;
-  err?: string;
-}
+export function Impersonate(props: Readonly<Props>) {
+  const { first_name, last_name, account_id } = props;
 
-export class Impersonate extends Component<Props, State> {
-  constructor(props, state) {
-    super(props, state);
-    this.state = {};
-  }
+  const [auth_token, set_auth_token] = useState<string | null>(null);
+  const [err, set_err] = useState<string | null>(null);
 
-  async get_token(): Promise<void> {
+  async function get_token(): Promise<void> {
     try {
       const auth_token = await webapp_client.admin_client.get_user_auth_token(
-        this.props.account_id
+        account_id,
       );
-      this.setState({ auth_token });
+      set_auth_token(auth_token);
+      set_err(null);
     } catch (err) {
-      this.setState({ err: err.toString() });
+      set_err(err.toString());
+      set_auth_token(null);
     }
   }
 
-  componentDidMount(): void {
-    this.get_token();
-  }
+  useEffect(() => {
+    get_token();
+  }, []);
 
-  render_link(): Rendered {
-    if (this.state.auth_token == null) {
+  function render_link(): Rendered {
+    if (auth_token == null) {
       return <Loading />;
     }
-    const link = join(appBasePath, `app?auth_token=${this.state.auth_token}`);
+    // lang_temp: https://github.com/sagemathinc/cocalc/issues/7782
+    const link = join(appBasePath, `app?auth_token=${auth_token}&lang_temp=en`);
     return (
       <div>
         <a href={link} target="_blank" rel="noopener noreferrer">
           Right click and open this link in a new incognito window, where you
-          will be signed in as {this.props.first_name} {this.props.last_name}...
+          will be signed in as {first_name} {last_name}...
         </a>
         <br />
         The actual link:
@@ -64,35 +63,31 @@ export class Impersonate extends Component<Props, State> {
     );
   }
 
-  render_err(): Rendered {
-    if (this.state.err != null) {
+  function render_err(): Rendered {
+    if (err != null) {
       return (
         <div>
-          <b>ERROR</b> {this.state.err}
+          <b>ERROR</b> {err}
         </div>
       );
     }
   }
 
-  render(): Rendered {
-    return (
-      <Alert
-        type="warning"
-        style={{
-          margin: "15px",
-        }}
-        message={
-          <b>
-            Impersonate user "{this.props.first_name} {this.props.last_name}"
-          </b>
-        }
-        description={
-          <>
-            {this.render_err()}
-            {this.render_link()}
-          </>
-        }
-      />
-    );
-  }
+  return (
+    <Alert
+      type="warning"
+      style={{ margin: "15px" }}
+      message={
+        <b>
+          Impersonate user "{first_name} {last_name}"
+        </b>
+      }
+      description={
+        <>
+          {render_err()}
+          {render_link()}
+        </>
+      }
+    />
+  );
 }

src/packages/frontend/app/localize.tsx

@@ -140,6 +140,12 @@ function loadAntdLocale(locale: Locale): Promise<AntdLocale> {
         return import("antd/locale/zh_CN");
       case "es":
         return import("antd/locale/es_ES");
+      case "ru":
+        return import("antd/locale/ru_RU");
+      case "fr":
+        return import("antd/locale/fr_FR");
+      case "it":
+        return import("antd/locale/it_IT");
       default:
         unreachable(locale);
         throw new Error(`Unknown locale '${locale}.`);

src/packages/frontend/app/render.tsx

@@ -29,29 +29,43 @@ function App({ children }) {
 
   // setting via ?lang=[locale] takes precedece over account settings
   useAsyncEffect(async () => {
-    const lang = QueryParams.get("lang");
+    const lang_set = QueryParams.get("lang");
+    // lang_temp sets the language *temporarily*, i.e. without changing the account settings and it is sticky
+    // this is useful for impersonation – https://github.com/sagemathinc/cocalc/issues/7782
+    const lang_temp = QueryParams.get("lang_temp");
+    const temp = lang_temp != null;
+    const lang = temp ? lang_temp : lang_set;
     if (lang != null) {
       if (lang in LOCALIZATIONS) {
         console.warn(
-          `URL query parameter 'lang=${lang}' – overriding user configuration.`,
+          `URL query parameter 'lang=${lang}' – overriding user configuration ${
+            temp ? "temporary" : "permanent"
+          }.`,
         );
-        const store = redux.getStore("account");
-        // we have to ensure the account store is available, because this code runs very early
-        await store.async_wait({
-          until: () => store.get_account_id() != null,
-        });
-        redux
-          .getActions("account")
-          .set_other_settings(OTHER_SETTINGS_LOCALE_KEY, lang);
+        if (!temp) {
+          const store = redux.getStore("account");
+          // we have to ensure the account store is available, because this code runs very early
+          await store.async_wait({
+            until: () => store.get_account_id() != null,
+          });
+          redux
+            .getActions("account")
+            .set_other_settings(OTHER_SETTINGS_LOCALE_KEY, lang);
+        }
         setLocale(lang);
       } else {
         console.warn(
-          `URL query parameter 'lang=${lang}' provided, but not a valid locale.`,
+          `URL query parameter '${JSON.stringify({
+            lang_set,
+            lang_temp,
+          })}' provided, but not a valid locale.`,
           `Known values: ${Object.keys(LOCALIZATIONS)}`,
         );
       }
-      // removing the parameter, otherwise this conflicts with further changes of account settings
-      QueryParams.remove("lang");
+      if (!temp) {
+        // removing the parameter, otherwise this conflicts with further changes of account settings
+        QueryParams.remove("lang");
+      }
     } else {
       setLocale(getLocale(other_settings));
     }

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/crm-editor/users/impersonate.tsx

@@ -1,5 +1,6 @@
 import { Button } from "antd";
 import { useState } from "react";
+
 import { Impersonate as OldImpersonate } from "@cocalc/frontend/admin/users/impersonate";
 import { Icon } from "@cocalc/frontend/components";