Merge branch 'master' into port-bottom-left-from-6804

Author: williamstein

src/packages/frontend/account/account-button.tsx

@@ -3,10 +3,13 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import React from "react";
 import { Popconfirm, Popover } from "antd";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
-import { AccountActions } from "../account";
+import { AccountActions } from "@cocalc/frontend/account";
+import { labels } from "@cocalc/frontend/i18n";
+import { CancelText } from "@cocalc/frontend/i18n/components";
 
 interface Props {
   icon: React.ReactNode; // When clicked, show popover
@@ -28,6 +31,9 @@ interface AccountTabProps {
 
 export const AccountTabDropdown: React.FC<Props> = (props: AccountTabProps) => {
   const { icon, links, label_class, show_label, is_active, user_label } = props;
+  const intl = useIntl();
+
+  const label = intl.formatMessage(labels.account);
 
   // If icon is a string then use the Icon component
   // Else (it is a node already) just render icon
@@ -52,7 +58,7 @@ export const AccountTabDropdown: React.FC<Props> = (props: AccountTabProps) => {
       >
         {icon}
         <span style={{ marginLeft: 5 }} className={label_class}>
-          {show_label ? "Account" : undefined}
+          {show_label ? label : undefined}
         </span>
       </div>
     </Popover>
@@ -145,10 +151,20 @@ export const DefaultAccountDropDownLinks: React.FC<LinksProps> = ({
         </li>
         <li>
           <Popconfirm
-            title={"Sign out of your account?"}
+            title={
+              <FormattedMessage
+                id="account.account-button.confirm.title"
+                defaultMessage={"Sign out of your account?"}
+              />
+            }
             onConfirm={() => account_actions.sign_out(false, false)}
-            okText={"Yes, sign out"}
-            cancelText={"Cancel"}
+            okText={
+              <FormattedMessage
+                id="account.account-button.confirm.ok"
+                defaultMessage={"Yes, sign out"}
+              />
+            }
+            cancelText={<CancelText />}
           >
             <a
               style={{

src/packages/frontend/account/account-page.tsx

@@ -10,12 +10,34 @@ for different account related information
 and configuration.
 */
 
+import { DownOutlined } from "@ant-design/icons";
+import { Button, Dropdown, MenuProps, Modal, Space, Tooltip } from "antd";
+import { useIntl } from "react-intl";
+
 import { SignOut } from "@cocalc/frontend/account/sign-out";
 import { AntdTabItem, Col, Row, Tabs } from "@cocalc/frontend/antd-bootstrap";
-import { React, redux, useTypedRedux } from "@cocalc/frontend/app-framework";
-import { Icon, Loading } from "@cocalc/frontend/components";
+import {
+  React,
+  redux,
+  useTypedRedux,
+  useWindowDimensions,
+} from "@cocalc/frontend/app-framework";
+import { useLocalizationCtx } from "@cocalc/frontend/app/localize";
+import { Icon, Loading, Paragraph } from "@cocalc/frontend/components";
+import { cloudFilesystemsEnabled } from "@cocalc/frontend/compute";
+import CloudFilesystems from "@cocalc/frontend/compute/cloud-filesystem/cloud-filesystems";
+import {
+  getLocale,
+  labels,
+  Locale,
+  LOCALIZATIONS,
+  OTHER_SETTINGS_LOCALE_KEY,
+} from "@cocalc/frontend/i18n";
 import { LandingPage } from "@cocalc/frontend/landing-page/landing-page";
 import { local_storage_length } from "@cocalc/frontend/misc/local-storage";
+import PurchasesPage from "@cocalc/frontend/purchases/purchases-page";
+import StatementsPage from "@cocalc/frontend/purchases/statements-page";
+import SubscriptionsPage from "@cocalc/frontend/purchases/subscriptions-page";
 import { SupportTickets } from "@cocalc/frontend/support";
 import {
   KUCALC_COCALC_COM,
@@ -26,13 +48,15 @@ import { LicensesPage } from "./licenses/licenses-page";
 import { PublicPaths } from "./public-paths/public-paths";
 import { SSHKeysPage } from "./ssh-keys/global-ssh-keys";
 import { UpgradesPage } from "./upgrades/upgrades-page";
-import PurchasesPage from "@cocalc/frontend/purchases/purchases-page";
-import SubscriptionsPage from "@cocalc/frontend/purchases/subscriptions-page";
-import StatementsPage from "@cocalc/frontend/purchases/statements-page";
-import { cloudFilesystemsEnabled } from "@cocalc/frontend/compute";
-import CloudFilesystems from "@cocalc/frontend/compute/cloud-filesystem/cloud-filesystems";
 
 export const AccountPage: React.FC = () => {
+  const intl = useIntl();
+  const { setLocale, locale } = useLocalizationCtx();
+
+  const { width: windowWidth } = useWindowDimensions();
+  const isWide = windowWidth > 800;
+
+  const other_settings = useTypedRedux("account", "other_settings");
   const active_page = useTypedRedux("account", "active_page");
   const is_logged_in = useTypedRedux("account", "is_logged_in");
   const account_id = useTypedRedux("account", "account_id");
@@ -61,6 +85,7 @@ export const AccountPage: React.FC = () => {
   const ssh_gateway = useTypedRedux("customize", "ssh_gateway");
   const is_commercial = useTypedRedux("customize", "is_commercial");
   const get_api_key = useTypedRedux("page", "get_api_key");
+  const i18n_enabled = useTypedRedux("customize", "i18n");
 
   // for each exclusive domain, tell the user which strategy to use
   const exclusive_sso_domains = React.useMemo(() => {
@@ -116,7 +141,7 @@ export const AccountPage: React.FC = () => {
       key: "account",
       label: (
         <span>
-          <Icon name="wrench" /> Preferences
+          <Icon name="wrench" /> {intl.formatMessage(labels.preferences)}
         </span>
       ),
       children: (active_page == null || active_page === "account") && (
@@ -137,7 +162,7 @@ export const AccountPage: React.FC = () => {
         key: "purchases",
         label: (
           <span>
-            <Icon name="money" /> Purchases
+            <Icon name="money" /> {intl.formatMessage(labels.purchases)}
           </span>
         ),
         children: active_page === "purchases" && <PurchasesPage />,
@@ -146,7 +171,7 @@ export const AccountPage: React.FC = () => {
         key: "subscriptions",
         label: (
           <span>
-            <Icon name="calendar" /> Subscriptions
+            <Icon name="calendar" /> {intl.formatMessage(labels.subscriptions)}
           </span>
         ),
         children: active_page === "subscriptions" && <SubscriptionsPage />,
@@ -155,7 +180,7 @@ export const AccountPage: React.FC = () => {
         key: "statements",
         label: (
           <span>
-            <Icon name="money" /> Statements
+            <Icon name="money" /> {intl.formatMessage(labels.statements)}
           </span>
         ),
         children: active_page === "statements" && <StatementsPage />,
@@ -171,7 +196,7 @@ export const AccountPage: React.FC = () => {
         key: "licenses",
         label: (
           <span>
-            <Icon name="key" /> Licenses
+            <Icon name="key" /> {intl.formatMessage(labels.licenses)}
           </span>
         ),
         children: active_page === "licenses" && <LicensesPage />,
@@ -183,7 +208,7 @@ export const AccountPage: React.FC = () => {
         key: "ssh-keys",
         label: (
           <span>
-            <Icon name="key" /> SSH Keys
+            <Icon name="key" /> {intl.formatMessage(labels.ssh_keys)}
           </span>
         ),
         children: active_page === "ssh-keys" && <SSHKeysPage />,
@@ -194,7 +219,7 @@ export const AccountPage: React.FC = () => {
         key: "support",
         label: (
           <span>
-            <Icon name="medkit" /> Support
+            <Icon name="medkit" /> {intl.formatMessage(labels.support)}
           </span>
         ),
         children: active_page === "support" && <SupportTickets />,
@@ -204,7 +229,8 @@ export const AccountPage: React.FC = () => {
       key: "public-files",
       label: (
         <span>
-          <Icon name="share-square" /> Public Files
+          <Icon name="share-square" />{" "}
+          {intl.formatMessage(labels.published_files)}
         </span>
       ),
       children: active_page === "public-files" && <PublicPaths />,
@@ -214,7 +240,8 @@ export const AccountPage: React.FC = () => {
         key: "upgrades",
         label: (
           <span>
-            <Icon name="arrow-circle-up" /> Upgrades
+            <Icon name="arrow-circle-up" />{" "}
+            {intl.formatMessage(labels.upgrades)}
           </span>
         ),
         children: active_page === "upgrades" && <UpgradesPage />,
@@ -225,7 +252,8 @@ export const AccountPage: React.FC = () => {
         key: "cloud-filesystems",
         label: (
           <>
-            <Icon name="disk-round" /> Cloud File Systems
+            <Icon name="disk-round" />{" "}
+            {intl.formatMessage(labels.cloud_file_system)}
           </>
         ),
         children: <CloudFilesystems />,
@@ -235,6 +263,122 @@ export const AccountPage: React.FC = () => {
     return items;
   }
 
+  function renderI18N(): JSX.Element | null {
+    if (
+      i18n_enabled == null ||
+      i18n_enabled.isEmpty() ||
+      (i18n_enabled.size === 1 && i18n_enabled.includes("en"))
+    ) {
+      return null;
+    }
+
+    const i18n: Locale = getLocale(other_settings);
+
+    const items: MenuProps["items"] =
+      Object.entries(LOCALIZATIONS)
+        .filter(([key, _]) => i18n_enabled.includes(key as any))
+        .map(([key, { name, trans, native, flag }]) => {
+          const other = key === locale ? name : intl.formatMessage(trans);
+          return { key, label: `${flag} ${native} (${other})` };
+        }) ?? [];
+
+    items.push({ type: "divider" });
+    items.push({
+      key: "help",
+      label: (
+        <Space>
+          <Icon name="translation-outlined" />
+          {intl.formatMessage({
+            id: "account.account_page.translation.info.label",
+            defaultMessage: "Translation Info...",
+            description: "Label of translation information modal in dropdown",
+          })}
+        </Space>
+      ),
+      onClick: () =>
+        Modal.info({
+          width: "min(90vw, 600px)",
+          title: intl.formatMessage({
+            id: "account.account_page.translation.info.title",
+            defaultMessage: "Translation Information",
+            description: "Title of translation information modal",
+          }),
+          content: (
+            <Paragraph>
+              {intl.formatMessage({
+                id: "account.account_page.translation.info.content",
+                defaultMessage: `
+We're excited to start offering our application in multiple languages! Here's what you need to know:
+
+<ul>
+<li><b>Work in Progress</b>: Our translation effort is just beginning. Many parts of the application are not yet translated.</li>
+<li><b>Gradual Improvement</b>: We're continuously working to expand our language coverage. You'll see more content translated over time.</li>
+<li><b>Your Help is Welcome</b>: We value our community's input. If you're fluent in multiple languages and would like to contribute to our translation efforts, we'd love to hear from you!</li>
+<li><b>Contact Us</b>: To learn more about contributing to translations or to report any issues, please reach out to our support team.</li>
+</ul>
+
+Thank you for your patience and understanding as we work to make our application accessible to a global audience!`,
+                description: "Content of translation information modal",
+              })}
+            </Paragraph>
+          ),
+        }),
+    });
+
+    const menu: MenuProps = {
+      items,
+      onClick: ({ key }) => {
+        if (key in LOCALIZATIONS) {
+          redux
+            .getActions("account")
+            .set_other_settings(OTHER_SETTINGS_LOCALE_KEY, key);
+          setLocale(key);
+        }
+      },
+    };
+
+    const lang_icon = LOCALIZATIONS[i18n]?.flag;
+
+    const title =
+      i18n in LOCALIZATIONS
+        ? intl.formatMessage(LOCALIZATIONS[i18n].trans)
+        : i18n;
+
+    const cur = `${title} (${LOCALIZATIONS[i18n]?.name ?? i18n})`;
+    const msg = intl.formatMessage(labels.account_language_tooltip);
+    const tooltip = (
+      <>
+        {cur}
+        <br />
+        {msg}
+        <br />({labels.account_language_tooltip.defaultMessage})
+      </>
+    );
+
+    return (
+      <Tooltip title={tooltip} trigger={["hover"]}>
+        <Dropdown menu={menu} trigger={["click"]}>
+          <Button>
+            <Space>
+              {lang_icon}
+              {isWide ? title : undefined}
+              <DownOutlined />
+            </Space>
+          </Button>
+        </Dropdown>
+      </Tooltip>
+    );
+  }
+
+  function renderExtraContent() {
+    return (
+      <Space>
+        {renderI18N()}
+        <SignOut everywhere={false} highlight={true} narrow={!isWide} />
+      </Space>
+    );
+  }
+
   function render_logged_in_view(): JSX.Element {
     if (!account_id) {
       return (
@@ -263,7 +407,7 @@ export const AccountPage: React.FC = () => {
             activeKey={active_page ?? "account"}
             onSelect={handle_select}
             animation={false}
-            tabBarExtraContent={<SignOut everywhere={false} highlight={true} />}
+            tabBarExtraContent={renderExtraContent()}
             items={tabs}
           />
         </Col>