Scheduler: View switcher text is not translated by localization in v25.1.4 (#31114)

Author: sjbur

packages/devextreme/js/__internal/scheduler/header/m_utils.ts

@@ -1,9 +1,10 @@
 import dateLocalization from '@js/common/core/localization/date';
 import dateUtils from '@js/core/utils/date';
-import { isFunction } from '@js/core/utils/type';
+import { isFunction, isObject } from '@js/core/utils/type';
+import messageLocalization from '@js/localization/message';
 import type { DateNavigatorTextInfo, Properties } from '@js/ui/scheduler';
 import type { IntervalOptions, Step } from '@ts/scheduler/header/types';
-import type { NormalizedView, ViewType } from '@ts/scheduler/utils/options/types';
+import type { NormalizedView, RawViewType, ViewType } from '@ts/scheduler/utils/options/types';
 
 import type { Direction } from './constants';
 
@@ -324,9 +325,30 @@ const STEP_MAP: Record<ViewType, Step> = {
   agenda: 'agenda',
 } as const;
 
-export const getStep = (type: ViewType): Step => STEP_MAP[type];
+export const getViewName = (view: RawViewType): string | undefined => {
+  if (isObject(view)) {
+    return view.name ?? view.type;
+  }
+
+  return view;
+};
+
+export const getViewText = (view: RawViewType): string => {
+  const viewName = getViewName(view);
+  const viewText = messageLocalization.format(`dxScheduler-switcher${viewName}`);
+
+  if (!viewText) {
+    return viewName ?? '';
+  }
+
+  return viewText;
+};
 
-export const getViewName = (view: NormalizedView): string | undefined => view.name ?? view.type;
+export const formatViews = (
+  views: NormalizedView[],
+): NormalizedView[] => views.map((view) => ({ ...view, text: getViewText(view) }));
+
+export const getStep = (type: ViewType): Step => STEP_MAP[type];
 
 export const isOneView = (
   views: NormalizedView[],

packages/devextreme/js/__internal/scheduler/header/m_view_switcher.integration.test.ts

@@ -0,0 +1,99 @@
+/* eslint-disable i18n/no-russian-character */
+/* eslint-disable spellcheck/spell-checker */
+import {
+  afterEach, describe, expect, it,
+} from '@jest/globals';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import { loadMessages, locale } from '@js/localization';
+
+import type { Properties as SchedulerProperties } from '../../../ui/scheduler';
+import Scheduler from '../../../ui/scheduler';
+
+const SCHEDULER_CONTAINER_ID = 'schedulerContainer';
+
+const SELECTORS = {
+  schedulerContainer: '#schedulerContainer',
+  invisibleState: '.dx-state-invisible',
+  viewSwitcher: '.dx-scheduler-view-switcher',
+  viewSwitcherButton: '.dx-scheduler-view-switcher .dx-button',
+};
+
+const createScheduler = (options: SchedulerProperties): Promise<{
+  $container: dxElementWrapper; instance: Scheduler;
+}> => new Promise((resolve) => {
+  const $container = $('<div>')
+    .attr('id', SCHEDULER_CONTAINER_ID)
+    .appendTo(document.body);
+
+  const instance = new Scheduler($container.get(0) as HTMLDivElement, {
+    ...options,
+    onContentReady: (): void => {
+      resolve({ $container, instance });
+    },
+  });
+});
+
+describe('ViewSwitcher', () => {
+  afterEach(() => {
+    const $container = $(SELECTORS.schedulerContainer);
+
+    const scheduler = ($container as any).dxScheduler('instance') as Scheduler;
+
+    scheduler.dispose();
+    $container.remove();
+  });
+
+  describe('Localization', () => {
+    it('should display Russian view names when locale is set to Russian', async () => {
+      loadMessages({
+        ru: {
+          'dxScheduler-switcherDay': 'День',
+          'dxScheduler-switcherWeek': 'Неделя',
+          'dxScheduler-switcherMonth': 'Месяц',
+        },
+      });
+      locale('ru');
+
+      const { $container } = await createScheduler({
+        useDropDownViewSwitcher: false,
+        currentView: 'day',
+        views: ['day', 'week', 'month'],
+      });
+
+      const buttons = $container.find(SELECTORS.viewSwitcherButton);
+      const buttonTexts: string[] = [];
+      buttons.each((_, button) => {
+        buttonTexts.push($(button).text());
+        return true;
+      });
+
+      expect(buttonTexts).toContain('День');
+      expect(buttonTexts).toContain('Неделя');
+      expect(buttonTexts).toContain('Месяц');
+    });
+
+    it('should display Russian view names in dropdown switcher when locale is set to Russian', async () => {
+      loadMessages({
+        ru: {
+          'dxScheduler-switcherDay': 'День',
+          'dxScheduler-switcherWeek': 'Неделя',
+          'dxScheduler-switcherMonth': 'Месяц',
+        },
+      });
+      locale('ru');
+
+      const { $container } = await createScheduler({
+        useDropDownViewSwitcher: true,
+        currentView: 'day',
+        views: ['day', 'week', 'month'],
+      });
+
+      const viewSwitcher = $container.find(SELECTORS.viewSwitcher);
+      const dropdown = viewSwitcher.find('.dx-dropdownbutton');
+      const buttonText = dropdown.find('.dx-button-text');
+
+      expect(buttonText.text()).toBe('День');
+    });
+  });
+});

packages/devextreme/js/__internal/scheduler/header/m_view_switcher.ts

@@ -4,6 +4,7 @@ import type { Item as ToolbarItem } from '@js/ui/toolbar';
 import type { NormalizedView } from '../utils/options/types';
 import type { SchedulerHeader } from './m_header';
 import {
+  formatViews,
   getViewName,
   isOneView,
 } from './m_utils';
@@ -15,7 +16,7 @@ const ClASS = {
 };
 
 const getViewsAndSelectedView = (header: SchedulerHeader) => {
-  const views = header.option('views');
+  const views = formatViews(header.option('views'));
   const selectedView = header.option('currentView').name;
   const isSelectedViewInViews = views.some((view) => view.name === selectedView);
 
@@ -30,7 +31,6 @@ export const getTabViewSwitcher = (header: SchedulerHeader, item): ToolbarItem =
 
   // @ts-expect-error
   const stylingMode = isFluent() ? 'outlined' : 'contained';
-  const items = views.map((view) => ({ ...view, text: view.name }));
 
   return {
     widget: 'dxButtonGroup',
@@ -39,7 +39,7 @@ export const getTabViewSwitcher = (header: SchedulerHeader, item): ToolbarItem =
     name: 'viewSwitcher',
     cssClass: ClASS.container,
     options: {
-      items,
+      items: views,
       keyExpr: 'name',
       selectedItemKeys: [selectedView],
       stylingMode,
@@ -55,7 +55,7 @@ export const getTabViewSwitcher = (header: SchedulerHeader, item): ToolbarItem =
       },
     },
     ...item,
-  };
+  } as ToolbarItem;
 };
 
 export const getDropDownViewSwitcher = (header: SchedulerHeader, item): ToolbarItem => {
@@ -73,7 +73,7 @@ export const getDropDownViewSwitcher = (header: SchedulerHeader, item): ToolbarI
       useSelectMode: true,
       keyExpr: 'name',
       selectedItemKey: selectedView,
-      displayExpr: 'name',
+      displayExpr: 'text',
       showArrowIcon: !isOnlyOneView,
       elementAttr: {
         class: ClASS.dropDownButton,
@@ -102,5 +102,5 @@ export const getDropDownViewSwitcher = (header: SchedulerHeader, item): ToolbarI
       },
     },
     ...item,
-  };
+  } as ToolbarItem;
 };