Merge pull request #7784 from sagemathinc/i18n-ru_it_fr

I18N: ru it fr

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/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";
 

src/packages/frontend/frame-editors/crm-editor/users/user.tsx

@@ -1,10 +1,11 @@
+import { Card, Space, Tag } from "antd";
+
 import { Avatar } from "@cocalc/frontend/account/avatar/avatar";
-import { Tag, Card, Space } from "antd";
 import { TimeAgo } from "@cocalc/frontend/components";
-import Projects from "./projects";
+import { PurchasesButton } from "@cocalc/frontend/purchases/purchases";
 import Impersonate from "./impersonate";
 import PayAsYouGoMinBalance from "./pay-as-you-go-min-balance";
-import { PurchasesButton } from "@cocalc/frontend/purchases/purchases";
+import Projects from "./projects";
 
 export default function User({
   account_id,