Merge branch 'main' into column-description

app/client/aclui/ACLUsers.ts

@@ -6,7 +6,7 @@ import {cssMemberImage, cssMemberListItem, cssMemberPrimary,
 import {testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {PermissionDataWithExtraUsers} from 'app/common/ActiveDocAPI';
 import {menu, menuCssClass, menuItemLink} from 'app/client/ui2018/menus';
-import {userOverrideParams} from 'app/common/gristUrls';
+import {IGristUrlState, userOverrideParams} from 'app/common/gristUrls';
 import {FullUser} from 'app/common/LoginSessionAPI';
 import {ANONYMOUS_USER_EMAIL, EVERYONE_EMAIL} from 'app/common/UserAPI';
 import {getRealAccess, UserAccessData} from 'app/common/UserAPI';
@@ -66,12 +66,14 @@ export class ACLUsersPopup extends Disposable {
     }
   }
 
-  public attachPopup(elem: Element, options: IPopupOptions) {
+  // Optionnally have document page reverts to the default page upon activation of the view as mode
+  // by setting `options.resetDocPage` to true.
+  public attachPopup(elem: Element, options: IPopupOptions & {resetDocPage?: boolean}) {
     setPopupToCreateDom(elem, (ctl) => {
       const buildRow =
-        (user: UserAccessData) => this._buildUserRow(user);
+        (user: UserAccessData) => this._buildUserRow(user, options);
       const buildExampleUserRow =
-        (user: UserAccessData) => this._buildUserRow(user, {isExampleUser: true});
+        (user: UserAccessData) => this._buildUserRow(user, {isExampleUser: true, ...options});
       return cssMenuWrap(cssMenu(
         dom.cls(menuCssClass),
         cssUsers.cls(''),
@@ -92,6 +94,7 @@ export class ACLUsersPopup extends Disposable {
     }, {...defaultMenuOptions, ...options});
   }
 
+  // See 'attachPopup' for more info on the 'resetDocPage' option.
   public menu(options: IMenuOptions) {
     return menu(() => {
       this.load().catch(noop);
@@ -116,7 +119,7 @@ export class ACLUsersPopup extends Disposable {
     return this._shareUsers.length + this._attributeTableUsers.length < 5;
   }
 
-  private _buildUserRow(user: UserAccessData, opt: {isExampleUser?: boolean} = {}) {
+  private _buildUserRow(user: UserAccessData, opt: {isExampleUser?: boolean, resetDocPage?: boolean} = {}) {
     return dom('a',
       {class: cssMemberListItem.className + ' ' + cssUserItem.className},
       cssMemberImage(
@@ -128,12 +131,14 @@ export class ACLUsersPopup extends Disposable {
         ),
         user.name ? cssMemberSecondary(user.email) : null
       ),
-      this._viewAs(user),
+      this._viewAs(user, opt.resetDocPage),
       testId('acl-user-item'),
     );
   }
 
-  private _viewAs(user: UserAccessData) {
+  private _viewAs(user: UserAccessData, resetDocPage: boolean = false) {
+    const extraState: IGristUrlState = {};
+    if (resetDocPage) { extraState.docPage = undefined; }
     if (this.pageModel?.isPrefork.get() &&
         this.pageModel?.currentDoc.get()?.access !== 'owners') {
       // "View As" is restricted to document owners on the back-end. Non-owners can be
@@ -145,13 +150,12 @@ export class ACLUsersPopup extends Disposable {
         const forkResult = await this.pageModel?.gristDoc.get()?.docComm.fork();
         if (!forkResult) { throw new Error('Failed to create fork'); }
         window.location.assign(urlState().makeUrl(userOverrideParams(user.email,
-                                                                     {doc: forkResult.urlId,
-                                                                      docPage: undefined})));
+                                                                     {...extraState, doc: forkResult.urlId})));
       });
     } else {
       // When forking isn't needed, we return a direct link to be maximally transparent
       // about where button will go.
-      return urlState().setHref(userOverrideParams(user.email, {docPage: undefined}));
+      return urlState().setHref(userOverrideParams(user.email, extraState));
     }
   }
 }

app/client/aclui/AccessRules.ts

@@ -381,7 +381,7 @@ export class AccessRules extends Disposable {
         ),
         bigBasicButton(t('Add User Attributes'), dom.on('click', () => this._addUserAttributes())),
         bigBasicButton(t('View As'), cssDropdownIcon('Dropdown'),
-          elem => this._aclUsersPopup.attachPopup(elem, {placement: 'bottom-end'}),
+          elem => this._aclUsersPopup.attachPopup(elem, {placement: 'bottom-end', resetDocPage: true}),
           dom.style('visibility', use => use(this._aclUsersPopup.isInitialized) ? '' : 'hidden')),
       ),
       cssConditionError({style: 'margin-left: 16px'},

app/client/lib/localization.ts

@@ -6,18 +6,7 @@ import {G} from 'grainjs/dist/cjs/lib/browserGlobals';
 export async function setupLocale() {
   const now = Date.now();
   const supportedLngs = getGristConfig().supportedLngs ?? ['en'];
-  let lng = window.navigator.language || 'en';
-  // If user agent language is not in the list of supported languages, use the default one.
-  lng = lng.replace(/-/g, '_');
-  if (!supportedLngs.includes(lng)) {
-    // Test if server supports general language.
-    if (lng.includes("_") && supportedLngs.includes(lng.split("_")[0])) {
-      lng = lng.split("_")[0]!;
-    } else {
-      lng = 'en';
-    }
-  }
-
+  const lng = detectCurrentLang();
   const ns = getGristConfig().namespaces ?? ['client'];
   // Initialize localization plugin
   try {
@@ -25,8 +14,6 @@ export async function setupLocale() {
     i18next.init({
       // By default we use english language.
       fallbackLng: 'en',
-      // Fallback from en-US, en-GB, etc to en.
-      nonExplicitSupportedLngs: true,
       // We will load resources ourselves.
       initImmediate: false,
       // Read language from navigator object.
@@ -38,8 +25,7 @@ export async function setupLocale() {
       // for now just import all what server offers.
       // We can fallback to client namespace for any addons.
       fallbackNS: 'client',
-      ns,
-      supportedLngs
+      ns
     }).catch((err: any) => {
       // This should not happen, the promise should be resolved synchronously, without
       // any errors reported.
@@ -51,14 +37,14 @@ export async function setupLocale() {
     const loadPath = `${document.baseURI}locales/{{lng}}.{{ns}}.json`;
     const pathsToLoad: Promise<any>[] = [];
     async function load(lang: string, n: string) {
-      const resourceUrl = loadPath.replace('{{lng}}', lang).replace('{{ns}}', n);
+      const resourceUrl = loadPath.replace('{{lng}}', lang.replace("-", "_")).replace('{{ns}}', n);
       const response = await fetch(resourceUrl);
       if (!response.ok) {
         throw new Error(`Failed to load ${resourceUrl}`);
       }
       i18next.addResourceBundle(lang, n, await response.json());
     }
-    for (const lang of languages) {
+    for (const lang of languages.filter((l) => supportedLngs.includes(l))) {
       for (const n of ns) {
         pathsToLoad.push(load(lang, n));
       }
@@ -70,6 +56,25 @@ export async function setupLocale() {
   }
 }
 
+export function detectCurrentLang() {
+  const { userLocale, supportedLngs } = getGristConfig();
+  const detected = userLocale
+    || document.cookie.match(/grist_user_locale=([^;]+)/)?.[1]
+    || window.navigator.language
+    || 'en';
+  const supportedList = supportedLngs ?? ['en'];
+  // If we have this language in the list (or more general version) mark it as selected.
+  // Compare languages in lower case, as navigator.language can return en-US, en-us (for older Safari).
+  const selected = supportedList.find(supported => supported.toLowerCase() === detected.toLowerCase()) ??
+    supportedList.find(supported => supported === detected.split(/[-_]/)[0]) ?? 'en';
+  return selected;
+}
+
+export function setAnonymousLocale(lng: string) {
+  document.cookie = lng ? `grist_user_locale=${lng}; path=/; max-age=31536000`
+                        : 'grist_user_locale=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC';
+}
+
 /**
  * Resolves the translation of the given key using the given options.
  */
@@ -90,11 +95,6 @@ type InferResult<T> = T extends Record<string, string | number | boolean>|undefi
  * Resolves the translation of the given key and substitutes. Supports dom elements interpolation.
  */
 export function t<T extends Record<string, any>>(key: string, args?: T|null, instance = i18next): InferResult<T> {
-  if (!instance.exists(key, args || undefined)) {
-    const error = new Error(`Missing translation for key: ${key} and language: ${i18next.language}`);
-    reportError(error);
-  }
-  // Don't need to bind `t` function.
   return domT(key, args, instance.t);
 }
 
@@ -172,12 +172,6 @@ export function makeT(scope: string, instance?: typeof i18next) {
       // This will remove all the overloads from the function, but we don't need them.
       scopedResolver = (_key: string, _args?: any) => fixedResolver(_key, {defaultValue: _key, ..._args});
     }
-    // If the key has interpolation or we did pass some arguments, make sure that
-    // the key exists.
-    if ((args || key.includes("{{")) && !scopedInstance.exists(`${scope}.${key}`, args || undefined)) {
-      const error = new Error(`Missing translation for key: ${key} and language: ${i18next.language}`);
-      reportError(error);
-    }
     return domT(key, args, scopedResolver!);
   };
 }

app/client/models/UserManagerModel.ts

@@ -63,6 +63,7 @@ export interface IEditableMember {
   name: string;
   email: string;
   picture?: string|null;
+  locale?: string|null;
   access: Observable<roles.Role|null>;
   parentAccess: roles.BasicRole|null;
   inheritedAccess: Computed<roles.BasicRole|null>;

app/client/ui/AccountPage.ts

@@ -13,10 +13,12 @@ import {transientInput} from 'app/client/ui/transientInput';
 import {cssBreadcrumbs, separator} from 'app/client/ui2018/breadcrumbs';
 import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
 import {cssLink} from 'app/client/ui2018/links';
+import {select} from 'app/client/ui2018/menus';
 import {getGristConfig} from 'app/common/urlUtils';
 import {FullUser} from 'app/common/UserAPI';
+import {detectCurrentLang, makeT} from 'app/client/lib/localization';
+import {translateLocale} from 'app/client/ui/LanguageMenu';
 import {Computed, Disposable, dom, domComputed, makeTestId, Observable, styled} from 'grainjs';
-import {makeT} from 'app/client/lib/localization';
 
 const testId = makeTestId('test-account-page-');
 const t = makeT('AccountPage');
@@ -56,6 +58,22 @@ export class AccountPage extends Disposable {
 
   private _buildContentMain() {
     const {enableCustomCss} = getGristConfig();
+    const supportedLngs = getGristConfig().supportedLngs ?? ['en'];
+    const languageOptions = supportedLngs
+      .map((lng) => ({value: lng, label: translateLocale(lng)!}))
+      .sort((a, b) => a.value.localeCompare(b.value));
+
+    const userLocale = Computed.create(this, use => {
+      const selected = detectCurrentLang();
+      if (!supportedLngs.includes(selected)) { return 'en'; }
+      return selected;
+    });
+    userLocale.onWrite(async value => {
+      await this._appModel.api.updateUserLocale(value || null);
+      // Reload the page to apply the new locale.
+      window.location.reload();
+    });
+
     return domComputed(this._userObs, (user) => user && (
       css.container(css.accountPage(
         css.header(t("Account settings")),
@@ -73,7 +91,7 @@ export class AccountPage extends Disposable {
                   save: (val) => this._isNameValid.get() && this._updateUserName(val),
                   close: () => { this._isEditingName.set(false); this._nameEdit.set(''); },
                 },
-                { size: '5' }, // Lower size so that input can shrink below ~152px.
+                {size: '5'}, // Lower size so that input can shrink below ~152px.
                 dom.on('input', (_ev, el) => this._nameEdit.set(el.value)),
                 css.flexGrow.cls(''),
               ),
@@ -92,7 +110,7 @@ export class AccountPage extends Disposable {
           testId('username'),
         ),
         // show warning for invalid name but not for the empty string
-        dom.maybe(use => use(this._nameEdit) && !use(this._isNameValid), cssWarnings),
+        dom.maybe(use => use(this._nameEdit) && !use(this._isNameValid), this._buildNameWarningsDom.bind(this)),
         css.header(t("Password & Security")),
         css.dataRow(
           css.inlineSubHeader(t("Login Method")),
@@ -123,6 +141,15 @@ export class AccountPage extends Disposable {
         enableCustomCss ? null : [
           css.header(t("Theme")),
           dom.create(ThemeConfig, this._appModel),
+          css.subHeader(t("Language")),
+          css.dataRow({ style: 'width: 300px'},
+            select(userLocale, languageOptions, {
+              renderOptionArgs: () => {
+                return dom.cls(cssFirstUpper.className);
+              }
+            }),
+            testId('language'),
+          )
         ],
         css.header(t("API")),
         css.dataRow(css.inlineSubHeader(t("API Key")), css.content(
@@ -131,7 +158,7 @@ export class AccountPage extends Disposable {
             onCreate: () => this._createApiKey(),
             onDelete: () => this._deleteApiKey(),
             anonymous: false,
-            inputArgs: [{ size: '5' }], // Lower size so that input can shrink below ~152px.
+            inputArgs: [{size: '5'}], // Lower size so that input can shrink below ~152px.
           })
         )),
       ),
@@ -141,7 +168,7 @@ export class AccountPage extends Disposable {
 
   private _buildHeaderMain() {
     return dom.frag(
-      cssBreadcrumbs({ style: 'margin-left: 16px;' },
+      cssBreadcrumbs({style: 'margin-left: 16px;'},
         cssLink(
           urlState().setLinkUrl({}),
           'Home',
@@ -194,6 +221,16 @@ export class AccountPage extends Disposable {
   private _showChangePasswordDialog() {
     return buildChangePasswordDialog();
   }
+
+  /**
+  * Builds dom to show marning messages to the user.
+  */
+  private _buildNameWarningsDom() {
+    return cssWarnings(
+      t("Names only allow letters, numbers and certain special characters"),
+      testId('username-warning'),
+    );
+  }
 }
 
 /**
@@ -211,16 +248,14 @@ export function checkName(name: string): boolean {
   return VALID_NAME_REGEXP.test(name);
 }
 
-/**
- * Builds dom to show marning messages to the user.
- */
-function buildNameWarningsDom() {
-  return css.warning(
-    t("Names only allow letters, numbers and certain special characters"),
-    testId('username-warning'),
-  );
-}
 
-const cssWarnings = styled(buildNameWarningsDom, `
+
+const cssWarnings = styled(css.warning, `
   margin: -8px 0 0 110px;
 `);
+
+const cssFirstUpper = styled('div', `
+  & > div::first-letter {
+    text-transform: capitalize;
+  }
+`);

app/client/ui/AccountPageCss.ts

@@ -98,6 +98,7 @@ export const dataRow = styled('div', `
   margin: 8px 0px;
   display: flex;
   align-items: baseline;
+  gap: 2px;
 `);
 
 export const betaTag = styled('span', `

app/client/ui/AccountWidget.ts

@@ -86,7 +86,7 @@ export class AccountWidget extends Disposable {
           cssEmail(user.email, testId('usermenu-email'))
         )
       ),
-      menuItemLink(urlState().setLinkUrl({account: 'account'}), t("Profile Settings")),
+      menuItemLink(urlState().setLinkUrl({account: 'account'}), t("Profile Settings"), testId('dm-account-settings')),
 
       documentSettingsItem,
 

app/client/ui/LanguageMenu.ts

@@ -0,0 +1,107 @@
+import {detectCurrentLang, makeT, setAnonymousLocale} from 'app/client/lib/localization';
+import {AppModel} from 'app/client/models/AppModel';
+import {hoverTooltip} from 'app/client/ui/tooltips';
+import {cssHoverCircle, cssTopBarBtn} from 'app/client/ui/TopBarCss';
+import {icon} from 'app/client/ui2018/icons';
+import {menu, menuItem} from 'app/client/ui2018/menus';
+import {getCountryCode} from 'app/common/Locales';
+import {getGristConfig} from 'app/common/urlUtils';
+import {dom, makeTestId, styled} from 'grainjs';
+
+const testId = makeTestId('test-language-');
+const t = makeT('LanguageMenu');
+
+export function buildLanguageMenu(appModel: AppModel) {
+  // Get the list of languages from the config, or default to English.
+  const languages = getGristConfig().supportedLngs ?? ['en'];
+  // Get the current language (from user's preference, cookie or browser)
+  const userLanguage = detectCurrentLang();
+
+  if (appModel.currentValidUser) {
+    // For logged in users, we don't need to show the menu (they have a preference in their profile).
+    // But for tests we will show a hidden indicator.
+    return dom('input', {type: 'hidden'}, (testId(`current-` + userLanguage)));
+  }
+
+  // When we switch language, we need to reload the page to get the new translations.
+  // This button is only for anonymous users, so we don't need to save the preference or wait for anything.
+  const changeLanguage = (lng: string) => {
+    setAnonymousLocale(lng);
+    window.location.reload();
+  };
+  // Try to convert locale setting to the emoji flag, fallback to plain flag icon.
+  const emojiFlag = buildEmoji(userLanguage);
+  return cssHoverCircle(
+    // Margin is common for all hover buttons on TopBar.
+    {style: `margin: 5px;`},
+    // Flag or emoji flag if we have it.
+    emojiFlag ?? cssTopBarBtn('Flag'),
+    // Expose for test the current language use.
+    testId(`current-` + userLanguage),
+    menu(
+      // Convert the list of languages we support to menu items.
+      () => languages.map((lng) => menuItem(() => changeLanguage(lng), [
+        // Try to convert the locale to nice name, fallback to locale itself.
+        cssFirstUpper(translateLocale(lng) ?? lng),
+        // If this is current language, mark it with a tick (by default we mark en).
+        userLanguage === lng ? cssWrapper(icon('Tick'), testId('selected')) : null,
+        testId(`lang-` + lng),
+      ])),
+      {
+        placement: 'bottom-end',
+      }
+    ),
+    hoverTooltip(t('Language'), {key: 'topBarBtnTooltip'}),
+    testId('button'),
+  );
+}
+
+// Unfortunately, Windows doesn't support emoji flags, so we need to use SVG icons.
+function buildEmoji(locale: string) {
+  const countryCode = getCountryCode(locale);
+  if (!countryCode) { return null; }
+  return [
+    cssSvgIcon({
+      style: `background-image: url("icons/locales/${countryCode}.svg")`
+    }),
+    dom.cls(cssSvgIconWrapper.className)
+  ];
+}
+
+export function translateLocale(locale: string) {
+  try {
+    locale = locale.replace("_", "-");
+    // This API might not be available in all browsers.
+    const languageNames = new Intl.DisplayNames([locale], {type: 'language'});
+    return languageNames.of(locale) || null;
+  } catch (err) {
+    return null;
+  }
+}
+
+const cssWrapper = styled('div', `
+  margin-left: auto;
+  display: inline-block;
+`);
+
+const cssSvgIconWrapper = styled('div', `
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  user-select: none;
+`);
+
+const cssSvgIcon = styled('div', `
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: transparent;
+  background-size: contain;
+`);
+
+const cssFirstUpper = styled('span', `
+  &::first-letter {
+    text-transform: capitalize;
+  }
+`);

app/client/ui/TopBar.ts

@@ -11,6 +11,7 @@ import {manageTeamUsersApp} from 'app/client/ui/OpenUserManager';
 import {buildShareMenuButton} from 'app/client/ui/ShareMenu';
 import {hoverTooltip} from 'app/client/ui/tooltips';
 import {cssHoverCircle, cssTopBarBtn} from 'app/client/ui/TopBarCss';
+import {buildLanguageMenu} from 'app/client/ui/LanguageMenu';
 import {docBreadcrumbs} from 'app/client/ui2018/breadcrumbs';
 import {basicButton} from 'app/client/ui2018/buttons';
 import {cssHideForNarrowScreen, testId, theme} from 'app/client/ui2018/cssVars';
@@ -38,6 +39,7 @@ export function createTopBarHome(appModel: AppModel) {
       null
     ),
 
+    buildLanguageMenu(appModel),
     buildNotifyMenuButton(appModel.notifier, appModel),
     dom('div', dom.create(AccountWidget, appModel)),
   ];

app/client/ui/UserManager.ts

@@ -622,7 +622,8 @@ function getFullUser(member: IEditableMember): FullUser {
     id: member.id,
     name: member.name,
     email: member.email,
-    picture: member.picture
+    picture: member.picture,
+    locale: member.locale
   };
 }
 

app/client/ui2018/IconList.ts

@@ -61,6 +61,7 @@ export type IconName = "ChartArea" |
   "Filter" |
   "FilterSimple" |
   "Fireworks" |
+  "Flag" |
   "Folder" |
   "FontBold" |
   "FontItalic" |
@@ -195,6 +196,7 @@ export const IconList: IconName[] = ["ChartArea",
   "Filter",
   "FilterSimple",
   "Fireworks",
+  "Flag",
   "Folder",
   "FontBold",
   "FontItalic",

app/client/ui2018/modals.ts

@@ -330,10 +330,10 @@ export function saveModal(createFunc: (ctl: IModalControl, owner: MultiHolder) =
  * See saveModal() for error handling notes that here apply to the onConfirm callback.
  */
 export function confirmModal(
-  title: string,
-  btnText: string,
+  title: DomElementArg,
+  btnText: DomElementArg,
   onConfirm: () => Promise<void>,
-  explanation?: Element|string,
+  explanation?: DomElementArg,
   {hideCancel, extraButtons}: {hideCancel?: boolean, extraButtons?: DomContents} = {},
 ): void {
   return saveModal((ctl, owner): ISaveModalOptions => ({