i18n/site-setting: enable some, only english, all are default

Author: haraldschilly

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

@@ -85,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(() => {
@@ -262,16 +263,22 @@ export const AccountPage: React.FC = () => {
     return items;
   }
 
-  function renderI18N(): JSX.Element {
+  function renderI18N(): JSX.Element | null {
+    if (
+      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).map(
-        ([key, { name, trans, native, flag }]) => {
+      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({

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

@@ -5,6 +5,7 @@
 
 import { Form, Switch, Tooltip } from "antd";
 import { join } from "path";
+import { FormattedMessage } from "react-intl";
 
 import { Col, Row } from "@cocalc/frontend/antd-bootstrap";
 import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
@@ -20,7 +21,6 @@ import { AccountSettings } from "./settings/account-settings";
 import ApiKeys from "./settings/api-keys";
 import TableError from "./table-error";
 import { TerminalSettings } from "./terminal-settings";
-import { FormattedMessage } from "react-intl";
 
 export const AccountPreferences: React.FC = () => {
   const account_id = useTypedRedux("account", "account_id");

src/packages/frontend/admin/site-settings/row-entry-inner.tsx

@@ -15,8 +15,11 @@ import { USER_SELECTABLE_LANGUAGE_MODELS } from "@cocalc/util/db-schema/llm-util
 import {
   ConfigValid,
   to_list_of_llms,
+  to_list_of_locale,
 } from "@cocalc/util/db-schema/site-defaults";
 import { RowEntryInnerProps } from "./row-entry";
+import { LOCALE } from "@cocalc/util/consts/locale";
+import { LOCALIZATIONS } from "../../i18n";
 
 export function rowEntryStyle(value, valid?: ConfigValid): CSSProperties {
   if (
@@ -65,6 +68,29 @@ export function RowEntryInner({
         )}
       />
     );
+  } else if (name === "i18n") {
+    return (
+      <Select
+        mode="multiple"
+        style={{ width: "100%" }}
+        placeholder="Select user selectable language locale"
+        optionLabelProp="label"
+        defaultValue={to_list_of_locale(value, false)}
+        onChange={(value: Array<string>) => {
+          onChangeEntry(name, value.join(","));
+          update();
+        }}
+        options={LOCALE.map((l) => {
+          return { label: LOCALIZATIONS[l].name, value: l };
+        })}
+        optionRender={(option) => (
+          <>
+            {option.value ? LOCALIZATIONS[option.value].flag : ""}{" "}
+            {option.label}
+          </>
+        )}
+      />
+    );
   } else if (Array.isArray(valid)) {
     return (
       <Select

src/packages/frontend/customize.tsx

@@ -57,6 +57,7 @@ import { sanitizeSoftwareEnv } from "@cocalc/util/sanitize-software-envs";
 import * as theme from "@cocalc/util/theme";
 import { CustomLLMPublic } from "@cocalc/util/types/llm";
 import { DefaultQuotaSetting, Upgrades } from "@cocalc/util/upgrades/quota";
+import { Locale } from "./i18n";
 export { TermsOfService } from "@cocalc/frontend/customize/terms-of-service";
 
 // this sets UI modes for using a kubernetes based back-end
@@ -170,6 +171,8 @@ export interface CustomizeState {
   selectable_llms: List<string>;
   default_llm?: string;
   user_defined_llm: boolean;
+
+  i18n: List<Locale>;
 }
 
 export class CustomizeStore extends Store<CustomizeState> {

src/packages/frontend/i18n/common.sh renamed to src/packages/frontend/i18n/bin/common.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-. ./i18n/common.sh
+. ./i18n/bin/common.sh
 for L in $LANGS; do
   pnpm exec formatjs compile --ast --format i18n/formatter.js --out-file ./i18n/$L.compiled.json  ./i18n/$L.json
   #rm ./i18n/$L.json # we might want to delete it at some point, but for now it is nice to have a copy of the translated messages

src/packages/frontend/i18n/bin/compile.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-. ./i18n/common.sh
+. ./i18n/bin/common.sh
 for L in $LANGS; do
   simplelocalize download --apiKey $SIMPLELOCALIZE_KEY --downloadPath ./i18n/$L.json --downloadFormat single-language-json --languageKey=$L
 done

src/packages/frontend/i18n/bin/download.sh

@@ -6,7 +6,7 @@
 // ATTN: these languages have to match the frontend/package.json script "i18n:download",
 //       be valid for Antd (<AntdConfigProvider localize.../>),
 //       and also harmonize with localize::loadLocaleData
-const LOCALE = ["en", "es", "de", "zh"] as const;
+export const LOCALE = ["en", "es", "de", "zh"] as const;
 
 export type Locale = (typeof LOCALE)[number];
 

src/packages/util/consts/locale.ts

@@ -16,6 +16,7 @@ import {
   getDefaultLLM,
   isValidModel,
 } from "./llm-utils";
+import { LOCALE } from "../consts/locale";
 
 export type ConfigValid = Readonly<string[]> | ((val: string) => boolean);
 
@@ -40,6 +41,7 @@ export const TAGS = [
   "AI LLM",
   "Theme",
   "On-Prem",
+  "I18N",
 ] as const;
 
 export type Tag = (typeof TAGS)[number];
@@ -83,6 +85,7 @@ export type SiteSettingsKeys =
   | "unlicensed_project_timetravel_limit"
   | "google_analytics"
   | "kucalc"
+  | "i18n"
   | "dns"
   | "datastore"
   | "ssh_gateway"
@@ -194,6 +197,18 @@ export const onlyNonnegFloat = (val) =>
   ((v) => onlyFloats(v) && v >= 0)(toFloat(val));
 export const onlyPosFloat = (val) =>
   ((v) => onlyFloats(v) && v > 0)(toFloat(val));
+
+export function to_list_of_locale(val?: string, fallbackAll = true): string[] {
+  if (!val?.trim()) {
+    return fallbackAll ? [...LOCALE] : [];
+  }
+  const list = val
+    .split(",")
+    .map((s) => s.trim())
+    .filter((v) => LOCALE.includes(v as any));
+  return list;
+}
+
 export function to_list_of_llms(val?: string, fallbackAll = true): string[] {
   if (!val?.trim())
     return fallbackAll ? [...USER_SELECTABLE_LANGUAGE_MODELS] : [];
@@ -202,7 +217,6 @@ export function to_list_of_llms(val?: string, fallbackAll = true): string[] {
     .map((s) => s.trim())
     .filter((v) => USER_SELECTABLE_LANGUAGE_MODELS.includes(v as any));
 }
-
 export const is_list_of_llms = (val: string) =>
   val
     .split(",")
@@ -542,6 +556,20 @@ export const site_settings_conf: SiteSettings = {
     valid: KUCALC_VALID_VALS,
     tags: ["On-Prem"],
   },
+  i18n: {
+    name: "Internationalization",
+    desc: "Select, which languages the frontend should offer for users to translate to. Only 'English', no dropdown will be shown. No selection, all available translations are available (default).",
+    default: "",
+    valid: LOCALE,
+    to_val: (v) => to_list_of_locale(v), // note: we store this as a comma separated list
+    to_display: (val: string | string[]) => {
+      const list = Array.isArray(val) ? val : to_list_of_locale(val);
+      return isEqual(list, LOCALE)
+        ? "All translations are available."
+        : list.join(", ");
+    },
+    tags: ["I18N"],
+  },
   google_analytics: {
     name: "Google Analytics",
     desc: `A Google Analytics GA4 tag for tracking usage of your site ("G-...").`,