feat: add translation of vue types when added (#946)

app/client/models/entities/ViewSectionRec.ts

@@ -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'
+      ? `${getWidgetTypes(this.parentKey.peek() as any).getLabel()}`
+      : '';
     const table = this.table();
     return [
       table.tableNameDef()?.toUpperCase(), // Due to ACL this can be null.

app/client/ui/PageWidgetPicker.ts

@@ -205,7 +205,7 @@ 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 label = getWidgetTypes(type).getLabel();
         await spinnerModal(t("Building {{- label}} widget", { label }), savePromise);
       }
     }
@@ -317,12 +317,12 @@ export class PageWidgetSelect extends Disposable {
         cssPanel(
           header(t("Select Widget")),
           sectionTypes.map((value) => {
-            const {label, icon: iconName} = getWidgetTypes(value);
+            const widgetInfo = getWidgetTypes(value);
             const disabled = computed(this._value.table, (use, tid) => this._isTypeDisabled(value, tid));
             return cssEntry(
               dom.autoDispose(disabled),
-              cssTypeIcon(iconName),
-              label,
+              cssTypeIcon(widgetInfo.icon),
+              widgetInfo.getLabel(),
               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,7 @@ 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} 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 +220,10 @@ 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 fieldInfo = getFieldType(type);
       return [
-        cssTopBarItem(cssTopBarIcon(widgetInfo.icon), widgetInfo.label,
+        cssTopBarItem(cssTopBarIcon(widgetInfo.icon), widgetInfo.getLabel(),
           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,21 +3,25 @@ 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'}],
-  ['single', {label: 'Card', icon: 'TypeCard'}],
-  ['detail', {label: 'Card List', icon: 'TypeCardList'}],
-  ['chart', {label: 'Chart', icon: 'TypeChart'}],
-  ['form', {label: 'Form', icon: 'Board'}],
-  ['custom', {label: 'Custom', icon: 'TypeCustom'}],
-  ['custom.calendar', {label: 'Calendar', icon: 'TypeCalendar'}],
+  ['record', {name: 'Table', icon: 'TypeTable', getLabel: () => t('Table')}],
+  ['single', {name: 'Card', icon: 'TypeCard', getLabel: () => t('Card')}],
+  ['detail', {name: 'Card List', icon: 'TypeCardList', getLabel: () => t('Card List')}],
+  ['chart', {name: 'Chart', icon: 'TypeChart', getLabel: () => t('Chart')}],
+  ['form', {name: 'Form', icon: 'Board', getLabel: () => t('Form')}],
+  ['custom', {name: 'Custom', icon: 'TypeCustom', getLabel: () => t('Custom')}],
+  ['custom.calendar', {name: 'Calendar', icon: 'TypeCalendar', getLabel: () => t('Calendar')}],
 ]);
 
 // Widget type info.
 export interface IWidgetTypeInfo {
-  label: string;
+  name: string;
   icon: IconName;
+  getLabel: () => string;
 }
 
 // Returns the widget type info for sectionType, or the one for 'record' if sectionType is null.
@@ -46,7 +50,7 @@ export function getTelemetryWidgetTypeFromPageWidget(widget: IPageWidget) {
 }
 
 function getTelemetryWidgetType(type: IWidgetType, options: GetTelemetryWidgetTypeOptions = {}) {
-  let telemetryWidgetType: string | undefined = widgetTypesMap.get(type)?.label;
+  let telemetryWidgetType: string | undefined = widgetTypesMap.get(type)?.name;
   if (!telemetryWidgetType) { return undefined; }
 
   if (options.isNewTable) {

static/locales/en.client.json

@@ -1578,5 +1578,14 @@
         "Search": "Search",
         "Select...": "Select...",
         "Submit": "Submit"
+    },
+    "widgetTypesMap": {
+        "Calendar": "Calendar",
+        "Card": "Card",
+        "Card List": "Card List",
+        "Chart": "Chart",
+        "Custom": "Custom",
+        "Form": "Form",
+        "Table": "Table"
     }
 }