fix(RelativeRangeDatePicker): correctly show chosen preset title

src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx

@@ -137,3 +137,24 @@ export const CustomControl: StoryObj<RelativeRangeDatePickerProps> = {
         );
     },
 };
+
+export const CustomPresets: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        withPresets: true,
+        presetTabs: [
+            {
+                id: 'my-presets',
+                title: 'My Presets',
+                presets: [
+                    {to: 'now', from: 'now-5d', title: 'Last five days'},
+                    {to: 'now', from: 'now-5w', title: 'Last five weeks'},
+                    {to: 'now', from: 'now-5M', title: 'Last five months'},
+                    {to: 'now', from: 'now-5Q', title: 'Last five quarters'},
+                    {to: 'now', from: 'now-5y', title: 'Last five years'},
+                ],
+            },
+        ],
+    },
+};

src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx

@@ -8,37 +8,36 @@ import type {TableColumnConfig} from '@gravity-ui/uikit';
 
 import {block} from '../../../../utils/cn';
 import {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';
-import {PresetTitle} from '../Presets/defaultPresets';
-import type {Preset} from '../Presets/defaultPresets';
+import type {DefaultPreset, Preset} from '../Presets/defaultPresets';
 import {i18n} from '../Presets/i18n';
 
 import './PickerDoc.scss';
 
 const b = block('relative-range-date-picker-doc');
 
-const data: Preset[] = [
+const data: DefaultPreset[] = [
     {
-        title: <PresetTitle title="Last 5 minutes" />,
+        title: 'Last 5 minutes',
         from: 'now - 5m',
         to: 'now',
     },
     {
-        title: <PresetTitle title="From start of day" />,
+        title: 'From start of day',
         from: 'now/d',
         to: 'now',
     },
     {
-        title: <PresetTitle title="This week" />,
+        title: 'This week',
         from: 'now/w',
         to: 'now/w',
     },
     {
-        title: <PresetTitle title="From start of week" />,
+        title: 'From start of week',
         from: 'now/w',
         to: 'now',
     },
     {
-        title: <PresetTitle title="Previous month" />,
+        title: 'Previous month',
         from: 'now - 1M/M',
         to: 'now - 1M/M',
     },
@@ -59,6 +58,9 @@ function DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) {
                 name: () => {
                     return t('Range');
                 },
+                template: (item) => {
+                    return t(item.title as any);
+                },
             },
             {
                 id: 'from',

src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx

@@ -89,6 +89,7 @@ interface PresetsListProps {
 }
 function PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {
     const ref = React.useRef<List<Preset>>(null);
+    const {t} = i18n.useTranslation();
 
     React.useEffect(() => {
         const list = ref.current;
@@ -121,7 +122,7 @@ function PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {
             items={presets}
             filterable={false}
             virtualized={false}
-            renderItem={(item) => item.title}
+            renderItem={(item) => t(item.title as any)}
             itemHeight={SIZE_TO_ITEM_HEIGHT[size]}
             onItemClick={(item) => {
                 onChoosePreset(item.from, item.to);

src/components/RelativeRangeDatePicker/components/Presets/defaultPresets.tsx

@@ -1,151 +1,148 @@
-import {i18n} from './i18n';
+import type {i18n} from './i18n';
 
 export interface Preset {
     from: string;
     to: string;
-    title: React.ReactNode;
+    title: string;
 }
 
-export function PresetTitle({
-    title,
-}: {
+export interface DefaultPreset {
+    from: string;
+    to: string;
     title: keyof (typeof i18n.keysetData)['g-date-relative-range-date-picker-presets'];
-}) {
-    const {t} = i18n.useTranslation();
-    return t(title);
 }
 
-export const DEFAULT_DATE_PRESETS: Preset[] = [
+export const DEFAULT_DATE_PRESETS: DefaultPreset[] = [
     {
         from: 'now-1d',
         to: 'now',
-        title: <PresetTitle title="Last day" />,
+        title: 'Last day',
     },
     {
         from: 'now-3d',
         to: 'now',
-        title: <PresetTitle title="Last 3 days" />,
+        title: 'Last 3 days',
     },
     {
         from: 'now-1w',
         to: 'now',
-        title: <PresetTitle title="Last week" />,
+        title: 'Last week',
     },
     {
         from: 'now-1M',
         to: 'now',
-        title: <PresetTitle title="Last month" />,
+        title: 'Last month',
     },
     {
         from: 'now-3M',
         to: 'now',
-        title: <PresetTitle title="Last 3 months" />,
+        title: 'Last 3 months',
     },
     {
         from: 'now-6M',
         to: 'now',
-        title: <PresetTitle title="Last 6 months" />,
+        title: 'Last 6 months',
     },
     {
         from: 'now-1y',
         to: 'now',
-        title: <PresetTitle title="Last year" />,
+        title: 'Last year',
     },
     {
         from: 'now-3y',
         to: 'now',
-        title: <PresetTitle title="Last 3 years" />,
+        title: 'Last 3 years',
     },
 ];
 
-export const DEFAULT_TIME_PRESETS: Preset[] = [
+export const DEFAULT_TIME_PRESETS: DefaultPreset[] = [
     {
         from: 'now-5m',
         to: 'now',
-        title: <PresetTitle title="Last 5 minutes" />,
+        title: 'Last 5 minutes',
     },
     {
         from: 'now-15m',
         to: 'now',
-        title: <PresetTitle title="Last 15 minutes" />,
+        title: 'Last 15 minutes',
     },
     {
         from: 'now-30m',
         to: 'now',
-        title: <PresetTitle title="Last 30 minutes" />,
+        title: 'Last 30 minutes',
     },
     {
         from: 'now-1h',
         to: 'now',
-        title: <PresetTitle title="Last hour" />,
+        title: 'Last hour',
     },
     {
         from: 'now-3h',
         to: 'now',
-        title: <PresetTitle title="Last 3 hours" />,
+        title: 'Last 3 hours',
     },
     {
         from: 'now-6h',
         to: 'now',
-        title: <PresetTitle title="Last 6 hours" />,
+        title: 'Last 6 hours',
     },
     {
         from: 'now-12h',
         to: 'now',
-        title: <PresetTitle title="Last 12 hours" />,
+        title: 'Last 12 hours',
     },
 ];
 
-export const DEFAULT_OTHERS_PRESETS: Preset[] = [
+export const DEFAULT_OTHERS_PRESETS: DefaultPreset[] = [
     {
         from: 'now/d',
         to: 'now/d',
-        title: <PresetTitle title="Today" />,
+        title: 'Today',
     },
     {
         from: 'now-1d/d',
         to: 'now-1d/d',
-        title: <PresetTitle title="Yesterday" />,
+        title: 'Yesterday',
     },
     {
         from: 'now-2d/d',
         to: 'now-2d/d',
-        title: <PresetTitle title="Day before yesterday" />,
+        title: 'Day before yesterday',
     },
     {
         from: 'now/w',
         to: 'now/w',
-        title: <PresetTitle title="This week" />,
+        title: 'This week',
     },
     {
         from: 'now/M',
         to: 'now/M',
-        title: <PresetTitle title="This month" />,
+        title: 'This month',
     },
     {
         from: 'now/y',
         to: 'now/y',
-        title: <PresetTitle title="This year" />,
+        title: 'This year',
     },
     {
         from: 'now/d',
         to: 'now',
-        title: <PresetTitle title="From start of day" />,
+        title: 'From start of day',
     },
     {
         from: 'now/w',
         to: 'now',
-        title: <PresetTitle title="From start of week" />,
+        title: 'From start of week',
     },
     {
         from: 'now/M',
         to: 'now',
-        title: <PresetTitle title="From start of month" />,
+        title: 'From start of month',
     },
     {
         from: 'now/y',
         to: 'now',
-        title: <PresetTitle title="From start of year" />,
+        title: 'From start of year',
     },
 ];
 

src/components/RelativeRangeDatePicker/components/Presets/utils.ts

@@ -39,13 +39,13 @@ export function getPresetTitle(
     end: string,
     presets: Preset[] = allPresets,
     t: ExtractFunctionType<typeof i18n> = i18n,
-) {
+): string {
     const startText = start.replace(/\s+/g, '');
     const endText = end.replace(/\s+/g, '');
 
     for (const preset of presets) {
         if (preset.from === startText && preset.to === endText) {
-            return preset.title;
+            return t(preset.title as any);
         }
     }
 

src/components/RelativeRangeDatePicker/utils.ts

@@ -45,7 +45,7 @@ export function getDefaultTitle({
     presets,
     presetsTranslations = i18n,
     lang = 'en',
-}: GetDefaultTitleArgs) {
+}: GetDefaultTitleArgs): string {
     if (!value) {
         return '';
     }
@@ -74,7 +74,7 @@ export function getDefaultTitle({
         value.start?.type === 'relative' &&
         value.end?.type === 'relative'
     ) {
-        return `${getPresetTitle(value.start.value, value.end.value, presets, presetsTranslations)}`;
+        return getPresetTitle(value.start.value, value.end.value, presets, presetsTranslations);
     }
 
     const delimiter = ' — ';