@datarobot/design-system 29.7.6 → 29.7.7

package/cjs/multiselect-searchable-list/multiselect-searchable-list.js

@@ -34,6 +34,12 @@ const MultiselectSearchableList = ({
   const {
     t
   } = (0, _useTranslation.useTranslation)();
+  const getSelectedItemsMessageDefault = itemsLength => itemsLength === 1 ? t('{{itemsLength}} item selected', {
+    itemsLength
+  }) : t('{{itemsLength}} items selected', {
+    itemsLength
+  });
+  const selectedItemsMessageFn = selectedItemsMessage || getSelectedItemsMessageDefault;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "multiselect-items-list",
     "test-id": "multiselect-items-list",
@@ -49,7 +55,7 @@ const MultiselectSearchableList = ({
         listKey: ({
           id
         }) => id,
-        header: selectedItemsMessage(selectedItems.length),
+        header: selectedItemsMessageFn(selectedItems.length),
         onItemRemove: onSelectToggle,
         onClearAll: onClearAll,
         clearAllText: clearAllText ?? t('Clear all'),

package/cjs/multiselect-searchable-list/selected-items-board.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _faChevronDown = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 var _faChevronUp = require("@fortawesome/free-solid-svg-icons/faChevronUp");
 var _faCircleXmark = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
+var _useTranslation = require("../hooks/use-translation");
 var _fontAwesomeIcon = require("../font-awesome-icon");
 var _button = require("../button");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -23,9 +24,18 @@ function SelectedItemsBoard({
   clearAllText,
   removeText
 }) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
   const [isExpanded, toggleExpanded] = (0, _react.useState)(true);
+  const getSelectedItemsMessageDefault = itemsLength => itemsLength === 1 ? t('{{itemsLength}} item selected', {
+    itemsLength
+  }) : t('{{itemsLength}} items selected', {
+    itemsLength
+  });
+
   // not in default props because it depends on items length
-  const headerContent = header || getDefaultHeaderText?.(items.length);
+  const headerContent = header || getDefaultHeaderText?.(items.length) || getSelectedItemsMessageDefault(items.length);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "selected-items-board",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
@@ -47,6 +57,7 @@ function SelectedItemsBoard({
           "test-id": "selected-items-board-item-label",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "item-display-label",
+            "test-id": item?.testId,
             children: displayLabel(item, index)
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
             testId: "selected-items-board-remove-item-btn",

package/cjs/scheduler/index.d.ts

@@ -1,6 +1,6 @@
 import { Scheduler } from './scheduler';
 import { DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS } from './constants';
-import { getFrequency } from './utils';
+import { getFrequency, useGetScheduleString } from './utils';
 export type { ScheduleValidity, Schedule, DateItem, Months, LabelTexts, Frequency, } from './constants';
 export type { SchedulerProps } from './scheduler';
-export { Scheduler, getFrequency, DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS, };
+export { Scheduler, getFrequency, useGetScheduleString, DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS, };

package/cjs/scheduler/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "getFrequency", {
     return _utils.getFrequency;
   }
 });
+Object.defineProperty(exports, "useGetScheduleString", {
+  enumerable: true,
+  get: function () {
+    return _utils.useGetScheduleString;
+  }
+});
 var _scheduler = require("./scheduler");
 var _constants = require("./constants");
 var _utils = require("./utils");

package/cjs/scheduler/utils.d.ts

@@ -1,4 +1,8 @@
 import { Frequency, Schedule, ScheduleValidity } from './constants';
 export declare const stringToArrayOfNumbersOrAll: (value?: string | number) => (number | "*")[];
 export declare function useArrayOfRangedNumbersOrAllValidator(): ({ min, max, values, allowAll, }: ScheduleValidity) => ScheduleValidity | undefined;
+export declare function useGetScheduleString(schedule: Schedule, stringOptions?: {
+    complexScheduleString?: string | null;
+    timeStandardString?: string | null;
+}): string | null;
 export declare function getFrequency({ minute, hour, month, dayOfMonth, dayOfWeek, }: Schedule): Frequency | undefined;

package/cjs/scheduler/utils.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getFrequency = getFrequency;
 exports.stringToArrayOfNumbersOrAll = void 0;
 exports.useArrayOfRangedNumbersOrAllValidator = useArrayOfRangedNumbersOrAllValidator;
+exports.useGetScheduleString = useGetScheduleString;
 var _message = require("../message");
 var _useTranslation = require("../hooks/use-translation");
 var _constants = require("./constants");
@@ -62,6 +63,92 @@ function useArrayOfRangedNumbersOrAllValidator() {
     return validity;
   };
 }
+function useGetScheduleString(schedule, stringOptions = {}) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const {
+    complexScheduleString = t('Complex schedule'),
+    timeStandardString = t('(UTC)')
+  } = stringOptions;
+  const scheduleStringTimeStandard = timeStandardString ? ` ${timeStandardString}` : '';
+  const months = (0, _constants.useMonths)();
+  const daysOfWeek = (0, _constants.useDaysOfWeek)();
+  switch (getFrequency(schedule)) {
+    case _constants.FREQUENCIES.HOURLY:
+      return schedule?.minute?.[0] === 1 ? t('Hourly at {{minutes}} minute past the hour', {
+        minutes: schedule.minute[0].toString()
+      }) : t('Hourly at {{minutes}} minutes past the hour', {
+        minutes: schedule?.minute?.[0].toString()
+      });
+    case _constants.FREQUENCIES.DAILY:
+      return `${t('Daily at {{hour}}:{{minutes}}', {
+        hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+        minutes: schedule?.minute?.[0].toString().padStart(2, '0')
+      })}${scheduleStringTimeStandard}`;
+    case _constants.FREQUENCIES.WEEKLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: daysOfWeek.find(d => d.index === schedule?.dayOfWeek?.[0])?.label
+        };
+        const weeklyString = schedule?.dayOfWeek?.length === 1 ? t('Weekly on {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Weekly on multiple days at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${weeklyString}${scheduleStringTimeStandard}`;
+      }
+    case _constants.FREQUENCIES.MONTHLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: schedule?.dayOfMonth?.[0],
+          days: schedule?.dayOfMonth?.join(', ') // day 1, 2, 3
+        };
+        const monthlyString = schedule?.dayOfMonth?.length === 1 ? t('Monthly on day {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Monthly on days {{days}} at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${monthlyString}${scheduleStringTimeStandard}`;
+      }
+    case _constants.FREQUENCIES.QUARTERLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: schedule?.dayOfMonth?.[0],
+          days: schedule?.dayOfMonth?.join(', ') // day 1, 2, 3
+        };
+        const quarterlyString = schedule?.dayOfMonth?.length === 1 ? t('Quarterly on day {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Quarterly on days {{days}} at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${quarterlyString}${scheduleStringTimeStandard}`;
+      }
+    case _constants.FREQUENCIES.YEARLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: schedule?.dayOfMonth?.[0],
+          month: Object.values(months).find(m => m.index === schedule?.month?.[0])?.label
+        };
+        const yearlyString = Math.max(schedule?.month?.length ?? 0, schedule?.dayOfMonth?.length ?? 0) ? t('Yearly on {{month}} {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Yearly on multiple dates at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${yearlyString}${scheduleStringTimeStandard}`;
+      }
+    default:
+      return complexScheduleString;
+  }
+}
 function hasSameItems(arr1, arr2) {
   return arr1.length === arr2?.length && arr1.every(item1 => {
     return arr2.find(item2 => item2 === item1);

package/cjs/scheduler/utils.test.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _utils = require("./utils");
+describe('useGetScheduleString', function () {
+  describe('Schedule strings', function () {
+    const createSchedule = (partialSchedule = {}) => ({
+      minute: ['*'],
+      hour: ['*'],
+      dayOfMonth: ['*'],
+      month: ['*'],
+      dayOfWeek: ['*'],
+      ...partialSchedule
+    });
+    const testSchedules = [{
+      schedule: createSchedule({
+        minute: [15, 45],
+        month: [1, 4, 8, 12]
+      }),
+      expectedScheduleString: 'Complex schedule',
+      hasTimeStandard: false
+    }, {
+      schedule: createSchedule({
+        minute: [1]
+      }),
+      expectedScheduleString: 'Hourly at 1 minute past the hour',
+      hasTimeStandard: false
+    }, {
+      schedule: createSchedule({
+        minute: [5]
+      }),
+      expectedScheduleString: 'Hourly at 5 minutes past the hour',
+      hasTimeStandard: false
+    }, {
+      schedule: createSchedule({
+        hour: [12],
+        minute: [30]
+      }),
+      expectedScheduleString: 'Daily at 12:30',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        dayOfWeek: [1],
+        hour: [12],
+        minute: [30]
+      }),
+      expectedScheduleString: 'Weekly on Monday at 12:30',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        dayOfWeek: [1, 2],
+        hour: [12],
+        minute: [30]
+      }),
+      expectedScheduleString: 'Weekly on multiple days at 12:30',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        dayOfMonth: [1],
+        hour: [6],
+        minute: [45]
+      }),
+      expectedScheduleString: 'Monthly on day 1 at 06:45',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        dayOfMonth: [1, 2],
+        hour: [6],
+        minute: [45]
+      }),
+      expectedScheduleString: 'Monthly on days 1, 2 at 06:45',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        month: [1, 4, 7, 10],
+        dayOfMonth: [1],
+        hour: [1],
+        minute: [30]
+      }),
+      expectedScheduleString: 'Quarterly on day 1 at 01:30',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        month: [1, 4, 7, 10],
+        dayOfMonth: [1, 15],
+        hour: [1],
+        minute: [30]
+      }),
+      expectedScheduleString: 'Quarterly on days 1, 15 at 01:30',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        dayOfMonth: [1],
+        month: [6],
+        hour: [17],
+        minute: [0]
+      }),
+      expectedScheduleString: 'Yearly on June 1 at 17:00',
+      hasTimeStandard: true
+    }];
+    describe('Default time standard (UTC)', function () {
+      testSchedules.forEach(function ({
+        schedule,
+        expectedScheduleString,
+        hasTimeStandard
+      }) {
+        const expectedString = `${expectedScheduleString}${hasTimeStandard ? ' (UTC)' : ''}`;
+        it(`should generate "${expectedString}"`, function () {
+          const {
+            result
+          } = (0, _react.renderHook)(() => (0, _utils.useGetScheduleString)(schedule));
+          expect(result.current).toBe(`${expectedString}`);
+        });
+      });
+    });
+    describe('Alternate time standard (EST)', function () {
+      testSchedules.forEach(function ({
+        schedule,
+        expectedScheduleString,
+        hasTimeStandard
+      }) {
+        const expectedString = `${expectedScheduleString}${hasTimeStandard ? ' (EST)' : ''}`;
+        it(`should generate "${expectedString}"`, function () {
+          const {
+            result
+          } = (0, _react.renderHook)(() => (0, _utils.useGetScheduleString)(schedule, {
+            timeStandardString: '(EST)'
+          }));
+          expect(result.current).toBe(`${expectedString}`);
+        });
+      });
+    });
+    describe('No time standard (locale time)', function () {
+      testSchedules.forEach(function ({
+        schedule,
+        expectedScheduleString
+      }) {
+        it(`should generate "${expectedScheduleString}"`, function () {
+          const {
+            result
+          } = (0, _react.renderHook)(() => (0, _utils.useGetScheduleString)(schedule, {
+            timeStandardString: null
+          }));
+          expect(result.current).toBe(expectedScheduleString);
+        });
+      });
+    });
+  });
+});

package/cjs/zoom-controls/zoom-controls.js

@@ -39,9 +39,9 @@ function ZoomControls({
   const {
     t
   } = (0, _useTranslation.useTranslation)();
-  const zoomInTextWithDefault = zoomInText ?? t('Zoom In');
-  const zoomOutTextWithDefault = zoomOutText ?? t('Zoom Out');
-  const resetTextWithDefault = resetText ?? t('Reset Zoom');
+  const zoomInTextWithDefault = zoomInText ?? t('Zoom in');
+  const zoomOutTextWithDefault = zoomOutText ?? t('Zoom out');
+  const resetTextWithDefault = resetText ?? t('Reset zoom');
   if (hidden) {
     return null;
   }

package/esm/multiselect-searchable-list/multiselect-searchable-list.js

@@ -27,6 +27,12 @@ const MultiselectSearchableList = ({
   const {
     t
   } = useTranslation();
+  const getSelectedItemsMessageDefault = itemsLength => itemsLength === 1 ? t('{{itemsLength}} item selected', {
+    itemsLength
+  }) : t('{{itemsLength}} items selected', {
+    itemsLength
+  });
+  const selectedItemsMessageFn = selectedItemsMessage || getSelectedItemsMessageDefault;
   return /*#__PURE__*/_jsx("div", {
     className: "multiselect-items-list",
     "test-id": "multiselect-items-list",
@@ -42,7 +48,7 @@ const MultiselectSearchableList = ({
         listKey: ({
           id
         }) => id,
-        header: selectedItemsMessage(selectedItems.length),
+        header: selectedItemsMessageFn(selectedItems.length),
         onItemRemove: onSelectToggle,
         onClearAll: onClearAll,
         clearAllText: clearAllText ?? t('Clear all'),

package/esm/multiselect-searchable-list/selected-items-board.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
 import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
+import { useTranslation } from '../hooks/use-translation';
 import { FontAwesomeIcon } from '../font-awesome-icon';
 import { Button, ACCENT_TYPES } from '../button';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -16,9 +17,18 @@ export default function SelectedItemsBoard({
   clearAllText,
   removeText
 }) {
+  const {
+    t
+  } = useTranslation();
   const [isExpanded, toggleExpanded] = useState(true);
+  const getSelectedItemsMessageDefault = itemsLength => itemsLength === 1 ? t('{{itemsLength}} item selected', {
+    itemsLength
+  }) : t('{{itemsLength}} items selected', {
+    itemsLength
+  });
+
   // not in default props because it depends on items length
-  const headerContent = header || getDefaultHeaderText?.(items.length);
+  const headerContent = header || getDefaultHeaderText?.(items.length) || getSelectedItemsMessageDefault(items.length);
   return /*#__PURE__*/_jsxs("div", {
     className: "selected-items-board",
     children: [/*#__PURE__*/_jsx("header", {
@@ -40,6 +50,7 @@ export default function SelectedItemsBoard({
           "test-id": "selected-items-board-item-label",
           children: [/*#__PURE__*/_jsx("div", {
             className: "item-display-label",
+            "test-id": item?.testId,
             children: displayLabel(item, index)
           }), /*#__PURE__*/_jsx(Button, {
             testId: "selected-items-board-remove-item-btn",

package/esm/scheduler/index.d.ts

@@ -1,6 +1,6 @@
 import { Scheduler } from './scheduler';
 import { DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS } from './constants';
-import { getFrequency } from './utils';
+import { getFrequency, useGetScheduleString } from './utils';
 export type { ScheduleValidity, Schedule, DateItem, Months, LabelTexts, Frequency, } from './constants';
 export type { SchedulerProps } from './scheduler';
-export { Scheduler, getFrequency, DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS, };
+export { Scheduler, getFrequency, useGetScheduleString, DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS, };

package/esm/scheduler/index.js

@@ -1,4 +1,4 @@
 import { Scheduler } from './scheduler';
 import { DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS } from './constants';
-import { getFrequency } from './utils';
-export { Scheduler, getFrequency, DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS };
+import { getFrequency, useGetScheduleString } from './utils';
+export { Scheduler, getFrequency, useGetScheduleString, DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS };

package/esm/scheduler/utils.d.ts

@@ -1,4 +1,8 @@
 import { Frequency, Schedule, ScheduleValidity } from './constants';
 export declare const stringToArrayOfNumbersOrAll: (value?: string | number) => (number | "*")[];
 export declare function useArrayOfRangedNumbersOrAllValidator(): ({ min, max, values, allowAll, }: ScheduleValidity) => ScheduleValidity | undefined;
+export declare function useGetScheduleString(schedule: Schedule, stringOptions?: {
+    complexScheduleString?: string | null;
+    timeStandardString?: string | null;
+}): string | null;
 export declare function getFrequency({ minute, hour, month, dayOfMonth, dayOfWeek, }: Schedule): Frequency | undefined;

package/esm/scheduler/utils.js

@@ -1,6 +1,6 @@
 import { MESSAGE_TYPES } from '../message';
 import { useTranslation } from '../hooks/use-translation';
-import { FREQUENCIES } from './constants';
+import { FREQUENCIES, useDaysOfWeek, useMonths } from './constants';
 export const stringToArrayOfNumbersOrAll = value => String(value)?.split(',').filter(item => item === '*' || !Number.isNaN(parseInt(item))).map(item => item === '*' ? item : Number(item));
 export function useArrayOfRangedNumbersOrAllValidator() {
   const {
@@ -53,6 +53,92 @@ export function useArrayOfRangedNumbersOrAllValidator() {
     return validity;
   };
 }
+export function useGetScheduleString(schedule, stringOptions = {}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    complexScheduleString = t('Complex schedule'),
+    timeStandardString = t('(UTC)')
+  } = stringOptions;
+  const scheduleStringTimeStandard = timeStandardString ? ` ${timeStandardString}` : '';
+  const months = useMonths();
+  const daysOfWeek = useDaysOfWeek();
+  switch (getFrequency(schedule)) {
+    case FREQUENCIES.HOURLY:
+      return schedule?.minute?.[0] === 1 ? t('Hourly at {{minutes}} minute past the hour', {
+        minutes: schedule.minute[0].toString()
+      }) : t('Hourly at {{minutes}} minutes past the hour', {
+        minutes: schedule?.minute?.[0].toString()
+      });
+    case FREQUENCIES.DAILY:
+      return `${t('Daily at {{hour}}:{{minutes}}', {
+        hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+        minutes: schedule?.minute?.[0].toString().padStart(2, '0')
+      })}${scheduleStringTimeStandard}`;
+    case FREQUENCIES.WEEKLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: daysOfWeek.find(d => d.index === schedule?.dayOfWeek?.[0])?.label
+        };
+        const weeklyString = schedule?.dayOfWeek?.length === 1 ? t('Weekly on {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Weekly on multiple days at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${weeklyString}${scheduleStringTimeStandard}`;
+      }
+    case FREQUENCIES.MONTHLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: schedule?.dayOfMonth?.[0],
+          days: schedule?.dayOfMonth?.join(', ') // day 1, 2, 3
+        };
+        const monthlyString = schedule?.dayOfMonth?.length === 1 ? t('Monthly on day {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Monthly on days {{days}} at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${monthlyString}${scheduleStringTimeStandard}`;
+      }
+    case FREQUENCIES.QUARTERLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: schedule?.dayOfMonth?.[0],
+          days: schedule?.dayOfMonth?.join(', ') // day 1, 2, 3
+        };
+        const quarterlyString = schedule?.dayOfMonth?.length === 1 ? t('Quarterly on day {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Quarterly on days {{days}} at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${quarterlyString}${scheduleStringTimeStandard}`;
+      }
+    case FREQUENCIES.YEARLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: schedule?.dayOfMonth?.[0],
+          month: Object.values(months).find(m => m.index === schedule?.month?.[0])?.label
+        };
+        const yearlyString = Math.max(schedule?.month?.length ?? 0, schedule?.dayOfMonth?.length ?? 0) ? t('Yearly on {{month}} {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Yearly on multiple dates at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${yearlyString}${scheduleStringTimeStandard}`;
+      }
+    default:
+      return complexScheduleString;
+  }
+}
 function hasSameItems(arr1, arr2) {
   return arr1.length === arr2?.length && arr1.every(item1 => {
     return arr2.find(item2 => item2 === item1);