Merge 428994ce73 into 3334d140be

app/client/models/entities/ViewSectionRec.ts

@@ -20,7 +20,7 @@ import {BEHAVIOR} from 'app/client/models/entities/ColumnRec';
 import * as modelUtil from 'app/client/models/modelUtil';
 import {removeRule, RuleOwner} from 'app/client/models/RuleOwner';
 import {LinkConfig} from 'app/client/ui/selectBy';
-import {getWidgetTypes} from "app/client/ui/widgetTypesMap";
+import {getWidgetTypes, getWidgetTypesLabelTranslation} from "app/client/ui/widgetTypesMap";
 import {FilterColValues} from "app/common/ActiveDocAPI";
 import {AccessLevel, ICustomWidget} from 'app/common/CustomWidget';
 import {UserAction} from 'app/common/DocActions';
@@ -460,7 +460,9 @@ export function createViewSectionRec(this: ViewSectionRec, docModel: DocModel):
   // - Widget type description (if not grid)
   // All concatenated separated by space.
   this.defaultWidgetTitle = this.autoDispose(ko.pureComputed(() => {
-    const widgetTypeDesc = this.parentKey() !== 'record' ? `${getWidgetTypes(this.parentKey.peek() as any).label}` : '';
+    const widgetTypeDesc = this.parentKey() !== 'record'
+      ? `${getWidgetTypesLabelTranslation(getWidgetTypes(this.parentKey.peek() as any))}`
+      : '';
     const table = this.table();
     return [
       table.tableNameDef()?.toUpperCase(), // Due to ACL this can be null.

app/client/ui/PageWidgetPicker.ts

@@ -6,7 +6,7 @@ import {ColumnRec, TableRec, ViewSectionRec} from 'app/client/models/DocModel';
 import {PERMITTED_CUSTOM_WIDGETS} from "app/client/models/features";
 import {linkId, NoLink} from 'app/client/ui/selectBy';
 import {overflowTooltip, withInfoTooltip} from 'app/client/ui/tooltips';
-import {getWidgetTypes} from "app/client/ui/widgetTypesMap";
+import {getWidgetTypes, getWidgetTypesLabelTranslation} from "app/client/ui/widgetTypesMap";
 import {bigPrimaryButton} from "app/client/ui2018/buttons";
 import {theme, vars} from "app/client/ui2018/cssVars";
 import {icon} from "app/client/ui2018/icons";
@@ -205,7 +205,8 @@ export function buildPageWidgetPicker(
       // If savePromise throws an error, before or after timeout, we let the error propagate as it
       // should be handle by the caller.
       if (await isLongerThan(savePromise, DELAY_BEFORE_SPINNER_MS)) {
-        const label = getWidgetTypes(type).label;
+        const widgetInfo = getWidgetTypes(type);
+        const label = getWidgetTypesLabelTranslation(widgetInfo);
         await spinnerModal(t("Building {{- label}} widget", { label }), savePromise);
       }
     }
@@ -317,12 +318,13 @@ export class PageWidgetSelect extends Disposable {
         cssPanel(
           header(t("Select Widget")),
           sectionTypes.map((value) => {
-            const {label, icon: iconName} = getWidgetTypes(value);
+            const widgetInfo = getWidgetTypes(value);
+            const tLabel = getWidgetTypesLabelTranslation(widgetInfo);
             const disabled = computed(this._value.table, (use, tid) => this._isTypeDisabled(value, tid));
             return cssEntry(
               dom.autoDispose(disabled),
-              cssTypeIcon(iconName),
-              label,
+              cssTypeIcon(widgetInfo.icon),
+              tLabel,
               dom.on('click', () => !disabled.get() && this._selectType(value)),
               cssEntry.cls('-selected', (use) => use(this._value.type) === value),
               cssEntry.cls('-disabled', disabled),

app/client/ui/RightPanel.ts

@@ -38,7 +38,11 @@ import {PredefinedCustomSectionConfig} from "app/client/ui/PredefinedCustomSecti
 import {cssLabel} from 'app/client/ui/RightPanelStyles';
 import {linkId, NoLink, selectBy} from 'app/client/ui/selectBy';
 import {VisibleFieldsConfig} from 'app/client/ui/VisibleFieldsConfig';
-import {getTelemetryWidgetTypeFromVS, widgetTypesMap} from "app/client/ui/widgetTypesMap";
+import {
+  getTelemetryWidgetTypeFromVS,
+  getWidgetTypes,
+  getWidgetTypesLabelTranslation,
+} from "app/client/ui/widgetTypesMap";
 import {basicButton, primaryButton} from 'app/client/ui2018/buttons';
 import {buttonSelect} from 'app/client/ui2018/buttonSelect';
 import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
@@ -220,10 +224,11 @@ export class RightPanel extends Disposable {
 
   private _buildStandardHeader() {
     return dom.maybe(this._pageWidgetType, (type) => {
-      const widgetInfo = widgetTypesMap.get(type) || {label: 'Table', icon: 'TypeTable'};
+      const widgetInfo = getWidgetTypes(type);
+      const widgetLabel = getWidgetTypesLabelTranslation(widgetInfo);
       const fieldInfo = getFieldType(type);
       return [
-        cssTopBarItem(cssTopBarIcon(widgetInfo.icon), widgetInfo.label,
+        cssTopBarItem(cssTopBarIcon(widgetInfo.icon), widgetLabel,
           cssTopBarItem.cls('-selected', (use) => use(this._topTab) === 'pageWidget'),
           dom.on('click', () => this._topTab.set("pageWidget")),
           testId('right-tab-pagewidget')),

app/client/ui/widgetTypesMap.ts

@@ -3,6 +3,9 @@ import {ViewSectionRec} from "app/client/models/entities/ViewSectionRec";
 import {IPageWidget} from "app/client/ui/PageWidgetPicker";
 import {IconName} from "app/client/ui2018/IconList";
 import {IWidgetType} from "app/common/widgetTypes";
+import {makeT} from 'app/client/lib/localization';
+
+const t = makeT('widgetTypesMap');
 
 export const widgetTypesMap = new Map<IWidgetType, IWidgetTypeInfo>([
   ['record', {label: 'Table', icon: 'TypeTable'}],
@@ -25,6 +28,10 @@ export function getWidgetTypes(sectionType: IWidgetType | null): IWidgetTypeInfo
   return widgetTypesMap.get(sectionType || 'record') || widgetTypesMap.get('record')!;
 }
 
+export function getWidgetTypesLabelTranslation(widgetType: IWidgetTypeInfo) {
+  return t(widgetType.label);
+}
+
 export interface GetTelemetryWidgetTypeOptions {
   /** Defaults to `false`. */
   isSummary?: boolean;

static/locales/en.client.json

@@ -1543,5 +1543,14 @@
         "Error in dropdown condition": "Error in dropdown condition",
         "No choices matching condition": "No choices matching condition",
         "No choices to select": "No choices to select"
+    },
+    "widgetTypesMap": {
+        "Calendar": "Calendar",
+        "Card": "Card",
+        "Card List": "Card List",
+        "Chart": "Chart",
+        "Custom": "Custom",
+        "Form": "Form",
+        "Table": "Table"
     }
 }