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

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

app/client/ui/FieldConfig.ts

@@ -1,3 +1,4 @@
+import {makeT} from 'app/client/lib/localization';
 import {CursorPos} from 'app/client/components/Cursor';
 import {GristDoc} from 'app/client/components/GristDoc';
 import {BEHAVIOR, ColumnRec} from 'app/client/models/entities/ColumnRec';
@@ -18,6 +19,8 @@ import {bundleChanges, Computed, dom, DomContents, DomElementArg, fromKo, MultiH
         Observable, styled} from 'grainjs';
 import * as ko from 'knockout';
 
+const t = makeT('FieldConfig');
+
 export function buildNameConfig(
   owner: MultiHolder,
   origColumn: ColumnRec,
@@ -51,7 +54,7 @@ export function buildNameConfig(
   };
 
   return [
-    cssLabel('COLUMN LABEL AND ID'),
+    cssLabel(t('ColumnLabel')),
     cssRow(
       dom.cls(cssBlockedCursor.className, origColumn.disableModify),
       cssColLabelBlock(
@@ -81,7 +84,7 @@ export function buildNameConfig(
       )
     ),
     dom.maybe(isSummaryTable,
-      () => cssRow('Column options are limited in summary tables.'))
+      () => cssRow(t('ColumnOptionsLimited')))
   ];
 }
 
@@ -207,18 +210,19 @@ export function buildFormulaConfig(
   const behaviorName = Computed.create(owner, behavior, (use, type) => {
     if (use(isMultiSelect)) {
       const commonType = use(multiType);
-      if (commonType === 'formula') { return "Formula Columns"; }
-      if (commonType === 'data') { return "Data Columns"; }
-      if (commonType === 'mixed') { return "Mixed Behavior"; }
-      return "Empty Columns";
+      if (commonType === 'formula') { return t('ColumnType', {context: 'formula', count: 2}); }
+      if (commonType === 'data') { return t('ColumnType', {context: 'data', count: 2}); }
+      if (commonType === 'mixed') { return t('ColumnType', {context: 'mixed', count: 2}); }
+      return t('ColumnType', {context: 'empty', count: 2});
     } else {
-      if (type === 'formula') { return "Formula Column"; }
-      if (type === 'data') { return "Data Column"; }
-      return "Empty Column";
+      if (type === 'formula') { return t('ColumnType', {context: 'formula', count: 1}); }
+      if (type === 'data') { return t('ColumnType', {context: 'data', count: 1}); }
+      return t('ColumnType', {context: 'empty', count: 1});
     }
   });
   const behaviorIcon = Computed.create<IconName>(owner, (use) => {
-    return use(behaviorName).startsWith("Data Column") ? "Database" : "Script";
+    return use(behaviorName) === t('ColumnType', {context: 'data', count: 2}) ||
+           use(behaviorName) === t('ColumnType', {context: 'data', count: 1}) ? "Database" : "Script";
   });
   const behaviorLabel = () => selectTitle(behaviorName, behaviorIcon);
 
@@ -227,26 +231,26 @@ export function buildFormulaConfig(
   // Converts data column to formula column.
   const convertDataColumnToFormulaOption = () => selectOption(
     () => (maybeFormula.set(true), formulaField?.focus()),
-    'Clear and make into formula', 'Script');
+    t('ConvertColumn', {context: 'formula'}), 'Script');
 
   // Converts to empty column and opens up the editor. (label is the same, but this is used when we have no formula)
   const convertTriggerToFormulaOption = () => selectOption(
     () => gristDoc.convertIsFormula([origColumn.id.peek()], {toFormula: true, noRecalc: true}),
-    'Clear and make into formula', 'Script');
+    t('ConvertColumn', {context: 'formula'}), 'Script');
 
   // Convert column to data.
   // This method is also available through a text button.
   const convertToData = () => gristDoc.convertIsFormula([origColumn.id.peek()], {toFormula: false, noRecalc: true});
   const convertToDataOption = () => selectOption(
     convertToData,
-    'Convert column to data', 'Database',
+    t('ConvertColumn', {context: 'data'}), 'Database',
     dom.cls('disabled', isSummaryTable)
     );
 
   // Clears the column
   const clearAndResetOption = () => selectOption(
     () => gristDoc.clearColumns([origColumn.id.peek()]),
-    'Clear and reset', 'CrossSmall');
+    t('ClearAndReset'), 'CrossSmall');
 
   // Actions on text buttons:
 
@@ -310,7 +314,7 @@ export function buildFormulaConfig(
     cssRow(formulaField = buildFormula(
       origColumn,
       buildEditor,
-      "Enter formula",
+      t('EnterFormula'),
       disableOtherActions,
       onSave,
       clearState)),
@@ -318,21 +322,21 @@ export function buildFormulaConfig(
   ];
 
   return dom.maybe(behavior, (type: BEHAVIOR) => [
-      cssLabel('COLUMN BEHAVIOR'),
+      cssLabel(t('ColumnBehavior')),
       ...(type === "empty" ? [
         menu(behaviorLabel(), [
           convertToDataOption(),
         ]),
         cssEmptySeparator(),
         cssRow(textButton(
-          "Set formula",
+          t('SetFormula'),
           dom.on("click", setFormula),
           dom.prop("disabled", disableOtherActions),
           testId("field-set-formula")
         )),
         cssRow(withInfoTooltip(
           textButton(
-            "Set trigger formula",
+            t('SetTriggerFormula'),
             dom.on("click", setTrigger),
             dom.prop("disabled", use => use(isSummaryTable) || use(disableOtherActions)),
             testId("field-set-trigger")
@@ -340,7 +344,7 @@ export function buildFormulaConfig(
           GristTooltips.setTriggerFormula(),
         )),
         cssRow(textButton(
-          "Make into data column",
+          t('MakeIntoDataColumn'),
           dom.on("click", convertToData),
           dom.prop("disabled", use => use(isSummaryTable) || use(disableOtherActions)),
           testId("field-set-data")
@@ -353,7 +357,7 @@ export function buildFormulaConfig(
         formulaBuilder(onSaveConvertToFormula),
         cssEmptySeparator(),
         cssRow(textButton(
-          "Convert to trigger formula",
+          t('ConvertColumn', {context: 'triggerformula'}),
           dom.on("click", convertFormulaToTrigger),
           dom.hide(maybeFormula),
           dom.prop("disabled", use => use(isSummaryTable) || use(disableOtherActions)),
@@ -373,7 +377,7 @@ export function buildFormulaConfig(
         ),
         // If data column is or wants to be a trigger formula:
         dom.maybe((use) => use(maybeTrigger) || use(origColumn.hasTriggerFormula), () => [
-          cssLabel('TRIGGER FORMULA'),
+          cssLabel(t('TriggerFormula')),
           formulaBuilder(onSaveConvertToTrigger),
           dom.create(buildFormulaTriggers, origColumn, {
             disabled: disableOtherActions,
@@ -385,7 +389,7 @@ export function buildFormulaConfig(
           cssEmptySeparator(),
           cssRow(withInfoTooltip(
             textButton(
-              "Set trigger formula",
+              t("SetTriggerFormula"),
               dom.on("click", convertDataColumnToTriggerColumn),
               dom.prop("disabled", disableOtherActions),
               testId("field-set-trigger")