diff --git a/app/client/models/entities/ViewSectionRec.ts b/app/client/models/entities/ViewSectionRec.ts index 729f79de..418f1b16 100644 --- a/app/client/models/entities/ViewSectionRec.ts +++ b/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. diff --git a/app/client/ui/PageWidgetPicker.ts b/app/client/ui/PageWidgetPicker.ts index fed425f4..61552422 100644 --- a/app/client/ui/PageWidgetPicker.ts +++ b/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), diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts index 4ff41a60..a0f90bb5 100644 --- a/app/client/ui/RightPanel.ts +++ b/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')), diff --git a/app/client/ui/widgetTypesMap.ts b/app/client/ui/widgetTypesMap.ts index cbd5a48d..7b96c4e8 100644 --- a/app/client/ui/widgetTypesMap.ts +++ b/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([ - ['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) { diff --git a/static/locales/en.client.json b/static/locales/en.client.json index ef888e63..98f05d48 100644 --- a/static/locales/en.client.json +++ b/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" } }