Make a good part of the app localizable and add French translations (#325)

Co-authored-by: Yohan Boniface <yohanboniface@free.fr>

app/client/ui/CustomSectionConfig.ts

@@ -19,6 +19,9 @@ import {GristLoadConfig} from 'app/common/gristUrls';
 import {nativeCompare, unwrap} from 'app/common/gutil';
 import {bundleChanges, Computed, Disposable, dom, fromKo, makeTestId,
         MultiHolder, Observable, styled, UseCBOwner} from 'grainjs';
+import {makeT} from 'app/client/lib/localization';
+
+const t = makeT('CustomSectionConfig');
 
 // Custom URL widget id - used as mock id for selectbox.
 const CUSTOM_ID = 'custom';
@@ -58,7 +61,7 @@ class ColumnPicker extends Disposable {
     return [
       cssLabel(
         this._column.title,
-        this._column.optional ? cssSubLabel(" (optional)") : null,
+        this._column.optional ? cssSubLabel(t('Optional')) : null,
         testId('label-for-' + this._column.name),
       ),
       this._column.description ? cssHelp(
@@ -70,7 +73,7 @@ class ColumnPicker extends Disposable {
           properValue,
           options,
           {
-            defaultLabel: this._column.typeDesc != "any" ? `Pick a ${this._column.typeDesc} column` : 'Pick a column'
+            defaultLabel: this._column.typeDesc != "any" ? t('PickAColumnWithType', {"columnType": this._column.typeDesc}) : t('PickAColumn')
           }
         ),
         testId('mapping-for-' + this._column.name),
@@ -102,7 +105,7 @@ class ColumnListPicker extends Disposable {
     return [
       cssRow(
         cssAddMapping(
-          cssAddIcon('Plus'), 'Add ' + this._column.title,
+          cssAddIcon('Plus'), t('Add') + ' ' + this._column.title,
           menu(() => {
             const otherColumns = this._getNotMappedColumns();
             const typedColumns = otherColumns.filter(this._typeFilter());
@@ -114,7 +117,7 @@ class ColumnListPicker extends Disposable {
                 col.label.peek(),
               )),
               wrongTypeCount > 0 ? menuText(
-`${wrongTypeCount} non-${this._column.type.toLowerCase()} column${wrongTypeCount > 1 ? 's are' : ' is'} not shown`,
+                t("WrongTypesMenuText", {wrongTypeCount, columnType: this._column.type.toLowerCase(), count: wrongTypeCount}),
                 testId('map-message-' + this._column.name)
               ) : null
             ];
@@ -367,17 +370,17 @@ export class CustomSectionConfig extends Disposable {
         return null;
       }
       switch(level) {
-        case AccessLevel.none: return cssConfirmLine("Widget does not require any permissions.");
-        case AccessLevel.read_table: return cssConfirmLine("Widget needs to ", dom("b", "read"), " the current table.");
-        case AccessLevel.full: return cssConfirmLine("Widget needs ", dom("b", "full access"), " to this document.");
+        case AccessLevel.none: return cssConfirmLine(t("WidgetNoPermissison"));
+        case AccessLevel.read_table: return cssConfirmLine(t("WidgetNeedRead", {read: dom("b", "read")})); // TODO i18next
+        case AccessLevel.full: return cssConfirmLine(t("WidgetNeedFullAccess", {fullAccess: dom("b", "full access")})); // TODO i18next
         default: throw new Error(`Unsupported ${level} access level`);
       }
     }
     // Options for access level.
     const levels: IOptionFull<string>[] = [
-      {label: 'No document access', value: AccessLevel.none},
-      {label: 'Read selected table', value: AccessLevel.read_table},
-      {label: 'Full document access', value: AccessLevel.full},
+      {label: t('NoDocumentAccess'), value: AccessLevel.none},
+      {label: t('ReadSelectedTable'), value: AccessLevel.read_table},
+      {label: t('FullDocumentAccess'), value: AccessLevel.full},
     ];
     return dom(
       'div',
@@ -385,7 +388,7 @@ export class CustomSectionConfig extends Disposable {
       this._canSelect
         ? cssRow(
             select(this._selectedId, options, {
-              defaultLabel: 'Select Custom Widget',
+              defaultLabel: t('SelectCustomWidget'),
               menuCssClass: cssMenu.className,
             }),
             testId('select')
@@ -396,7 +399,7 @@ export class CustomSectionConfig extends Disposable {
           cssTextInput(
             this._url,
             async value => this._url.set(value),
-            dom.attr('placeholder', 'Enter Custom URL'),
+            dom.attr('placeholder', t('EnterCustomURL')),
             testId('url')
           )
         ),
@@ -437,7 +440,7 @@ export class CustomSectionConfig extends Disposable {
       dom.maybe(this._hasConfiguration, () =>
         cssSection(
           textButton(
-            'Open configuration',
+            t('OpenConfiguration'),
             dom.on('click', () => this._openConfiguration()),
             testId('open-configuration')
           )
@@ -447,7 +450,7 @@ export class CustomSectionConfig extends Disposable {
         cssLink(
           dom.attr('href', 'https://support.getgrist.com/widget-custom'),
           dom.attr('target', '_blank'),
-          'Learn more about custom widgets'
+          t('LearnMore')
         )
       ),
       dom.maybeOwned(use => use(this._section.columnsToMap), (owner, columns) => {