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

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,6 +325,27 @@ 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}`);
 
-export const getViewName = (view: NormalizedView): string | undefined => view.name ?? view.type;
+  if (!viewText) {
+    return viewName ?? '';
+  }
+
+  return viewText;
+};
+
+export const formatViews = (
+  views: NormalizedView[],
+): NormalizedView[] => views.map((view) => ({ ...view, text: getViewText(view) }));
+
+export const getStep = (type: ViewType): Step => STEP_MAP[type];

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

@@ -1,9 +1,11 @@
+/* eslint-disable i18n/no-russian-character */
+/* eslint-disable spellcheck/spell-checker */
 import {
-  afterEach,
-  describe, expect, it,
+  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';
@@ -14,6 +16,7 @@ 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<{
@@ -85,4 +88,57 @@ describe('ViewSwitcher', () => {
       },
     );
   });
+
+  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,
 } from './m_utils';
 
@@ -14,7 +15,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);
 
@@ -32,7 +33,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',
@@ -42,7 +42,7 @@ export const getTabViewSwitcher = (header: SchedulerHeader, item): ToolbarItem =
     cssClass: ClASS.container,
     visible: isVisible,
     options: {
-      items,
+      items: views,
       keyExpr: 'name',
       selectedItemKeys: [selectedView],
       stylingMode,
@@ -77,7 +77,7 @@ export const getDropDownViewSwitcher = (header: SchedulerHeader, item): ToolbarI
       useSelectMode: true,
       keyExpr: 'name',
       selectedItemKey: selectedView,
-      displayExpr: 'name',
+      displayExpr: 'text',
       showArrowIcon: true,
       elementAttr: {
         class: ClASS.dropDownButton,