[UI] EVEREST-1647 Restrict selectable hours for PSMDB db with monthly schedule

ui/apps/everest/src/components/schedule-form-dialog/schedule-form-wrapper/schedule-form-wrapper.tsx

@@ -59,7 +59,7 @@
   useEffect(() => {
     // This allowed us to get an error from zod .superRefine to avoid duplication of checking the schedule with the same time
     trigger();
   }, [amPm, hour, minute, onDay, weekDay, selectedTime]);
 
   useEffect(() => {
     if (mode === 'edit' && setSelectedScheduleName) {
@@ -84,6 +84,7 @@
       autoFillLocation={mode === 'new'}
       disableNameEdit={mode === 'edit'}
       schedules={schedules}
+      editMode={mode === 'edit'}
     />
   );
 };

ui/apps/everest/src/components/schedule-form-dialog/schedule-form/schedule-form.tsx

@@ -38,6 +38,7 @@ export const ScheduleForm = ({
   schedules,
   showTypeRadio,
   disableNameEdit = false,
+  editMode,
 }: ScheduleFormProps) => {
   const {
     formState: { errors },
@@ -111,7 +112,12 @@ export const ScheduleForm = ({
         isRequired
       />
       <LabeledContent label={Messages.repeats}>
-        <TimeSelection showInfoAlert errorInfoAlert={errorInfoAlert} />
+        <TimeSelection
+          showInfoAlert
+          errorInfoAlert={errorInfoAlert}
+          shouldRestrictSelectableHours={dbEngine === DbEngineType.PSMDB}
+          editMode={editMode}
+        />
       </LabeledContent>
     </>
   );

ui/apps/everest/src/components/schedule-form-dialog/schedule-form/schedule-form.types.ts

@@ -15,6 +15,7 @@ export type ScheduleFormProps = {
   schedules: Schedule[];
   showTypeRadio: boolean;
   disableNameEdit?: boolean;
+  editMode: boolean;
 };
 
 export const ScheduleFormFields = { ...ScheduleForm, ...TimeSelectionFields };

ui/apps/everest/src/components/time-selection/fields/time-fields.tsx

@@ -6,7 +6,13 @@ import { Messages } from '../time-selection.messages';
 import { AmPM, TimeSelectionFields } from '../time-selection.types';
 import { addZeroToSingleDigit } from '../time-selection.utils';
 
-export const TimeFields = () => {
+export const TimeFields = ({
+  selectableHours = HOURS_AM_PM,
+  selectableMinutes = MINUTES,
+}: {
+  selectableHours?: number[];
+  selectableMinutes?: number[];
+}) => {
   const { control } = useFormContext();
 
   return (
@@ -29,7 +35,11 @@ export const TimeFields = () => {
         }}
       >
         {HOURS_AM_PM.map((value) => (
-          <MenuItem key={value} value={value}>
+          <MenuItem
+            key={value}
+            value={value}
+            sx={{ display: selectableHours.includes(value) ? 'block' : 'none' }}
+          >
             {value}
           </MenuItem>
         ))}
@@ -42,7 +52,13 @@ export const TimeFields = () => {
         }}
       >
         {MINUTES.map((value) => (
-          <MenuItem key={value} value={value}>
+          <MenuItem
+            key={value}
+            value={value}
+            sx={{
+              display: selectableMinutes.includes(value) ? 'block' : 'none',
+            }}
+          >
             {addZeroToSingleDigit(value)}
           </MenuItem>
         ))}

ui/apps/everest/src/components/time-selection/time-selection.test.tsx

@@ -127,4 +127,112 @@ describe('TimeSelection', () => {
       screen.queryByTestId('select-input-week-day')
     ).not.toBeInTheDocument();
   });
+
+  it('should render correctly for monthly values for UTX+X:30 timezone', () => {
+    vi.stubEnv('TZ', 'Asia/Calcutta');
+    render(
+      <TestWrapper>
+        <FormProviderWrapper>
+          <TimeSelection shouldRestrictSelectableHours />
+        </FormProviderWrapper>
+      </TestWrapper>
+    );
+
+    const selectTimeValue = screen.getByTestId('select-input-selected-time');
+    expect(selectTimeValue).toBeInTheDocument();
+
+    fireEvent.change(selectTimeValue, { target: { value: 'month' } });
+
+    expect(selectTimeValue.getAttribute('value')).toBe('month');
+
+    expect(screen.getByTestId('select-input-hour')).toHaveAttribute(
+      'value',
+      '5'
+    );
+    expect(screen.getByTestId('select-input-minute')).toHaveAttribute(
+      'value',
+      '30'
+    );
+  });
+
+  it('should render correctly for UTX+X timezone when monthly is selected', () => {
+    vi.stubEnv('TZ', 'Europe/Amsterdam');
+    render(
+      <TestWrapper>
+        <FormProviderWrapper>
+          <TimeSelection shouldRestrictSelectableHours />
+        </FormProviderWrapper>
+      </TestWrapper>
+    );
+
+    const selectTimeValue = screen.getByTestId('select-input-selected-time');
+    expect(selectTimeValue).toBeInTheDocument();
+
+    fireEvent.change(selectTimeValue, { target: { value: 'month' } });
+
+    expect(selectTimeValue.getAttribute('value')).toBe('month');
+
+    expect(screen.getByTestId('select-input-hour')).toHaveAttribute(
+      'value',
+      '1'
+    );
+    expect(screen.getByTestId('select-input-minute')).toHaveAttribute(
+      'value',
+      '0'
+    );
+  });
+
+  it('should render correctly for UTX-X timezone if monthly is selected ', () => {
+    vi.stubEnv('TZ', 'America/Los_Angeles');
+    render(
+      <TestWrapper>
+        <FormProviderWrapper>
+          <TimeSelection shouldRestrictSelectableHours />
+        </FormProviderWrapper>
+      </TestWrapper>
+    );
+
+    const selectTimeValue = screen.getByTestId('select-input-selected-time');
+    expect(selectTimeValue).toBeInTheDocument();
+
+    fireEvent.change(selectTimeValue, { target: { value: 'month' } });
+
+    expect(selectTimeValue.getAttribute('value')).toBe('month');
+
+    expect(screen.getByTestId('select-input-hour')).toHaveAttribute(
+      'value',
+      '12'
+    );
+    expect(screen.getByTestId('select-input-minute')).toHaveAttribute(
+      'value',
+      '0'
+    );
+  });
+
+  it('should render normally if monthly is selected and selectable hours are not restricted', () => {
+    vi.stubEnv('TZ', 'Asia/Calcutta');
+    render(
+      <TestWrapper>
+        <FormProviderWrapper>
+          <TimeSelection shouldRestrictSelectableHours={false} />
+        </FormProviderWrapper>
+      </TestWrapper>
+    );
+
+    const selectTimeValue = screen.getByTestId('select-input-selected-time');
+    expect(selectTimeValue).toBeInTheDocument();
+
+    fireEvent.change(selectTimeValue, { target: { value: 'month' } });
+
+    expect(selectTimeValue.getAttribute('value')).toBe('month');
+
+    expect(screen.getByTestId('select-input-hour')).toHaveAttribute(
+      'value',
+      '12'
+    );
+    expect(screen.getByTestId('select-input-minute')).toHaveAttribute(
+      'value',
+      '0'
+    );
+  });
 });

ui/apps/everest/src/components/time-selection/time-selection.tsx

@@ -1,6 +1,6 @@
 import { Alert, Box, MenuItem } from '@mui/material';
 import { SelectInput } from '@percona/ui-lib';
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { HoursField } from './fields/hours-field';
 import { MonthsField } from './fields/months-field';
@@ -14,21 +14,84 @@ import {
   timeValueHumanized,
 } from './time-selection.types';
 import { getTimeText } from './time-selection.utils';
+import { HOURS_AM_PM, MINUTES } from './time-selection.constants';
 
 export const TimeSelection = ({
   errorInfoAlert,
   showInfoAlert,
   sx,
   sxTimeFields,
+  shouldRestrictSelectableHours = false,
+  editMode = false,
 }: TimeSelectionProps) => {
-  const { watch } = useFormContext();
+  const { watch, setValue, getFieldState, resetField } = useFormContext();
+
   const selectedTime: TimeValue = watch(TimeSelectionFields.selectedTime);
   const minute: number = watch(TimeSelectionFields.minute);
   const hour: number = watch(TimeSelectionFields.hour);
   const amPm: string = watch(TimeSelectionFields.amPm);
   const weekDay: string = watch(TimeSelectionFields.weekDay);
   const onDay: number = watch(TimeSelectionFields.onDay);
 
+  const OFFSET = -1 * (new Date().getTimezoneOffset() / 60);
+
+  const TIMEZONE_OFFSET_HOURS = Math.floor(OFFSET);
+
+  const TIMEZONE_OFFSET_MINUTES = (OFFSET - TIMEZONE_OFFSET_HOURS) * 60;
+
+  const isFirstDayOfTheMonthAndPositiveOffset =
+    selectedTime === TimeValue.months &&
+    onDay === 1 &&
+    TIMEZONE_OFFSET_HOURS > 0;
+
+  const changeSelectableTime =
+    shouldRestrictSelectableHours && isFirstDayOfTheMonthAndPositiveOffset;
+
+  const selectableHours = changeSelectableTime
+    ? Array.from(
+        { length: 12 - TIMEZONE_OFFSET_HOURS },
+        (_, i) => i + Math.floor(TIMEZONE_OFFSET_HOURS)
+      )
+    : HOURS_AM_PM;
+
+  const selectableMinutes =
+    TIMEZONE_OFFSET_MINUTES > 0 && changeSelectableTime
+      ? Array.from({ length: 30 }, (_, i) => i + TIMEZONE_OFFSET_MINUTES)
+      : MINUTES;
+
+  useEffect(() => {
+    const { isDirty: isHourFieldDirty } = getFieldState(
+      TimeSelectionFields.hour
+    );
+    const { isDirty: isMinuteFieldDirty } = getFieldState(
+      TimeSelectionFields.minute
+    );
+    if (changeSelectableTime && !isHourFieldDirty && !editMode) {
+      setValue(TimeSelectionFields.hour, Math.floor(TIMEZONE_OFFSET_HOURS));
+    }
+    if (
+      changeSelectableTime &&
+      TIMEZONE_OFFSET_MINUTES > 0 &&
+      !isMinuteFieldDirty &&
+      !editMode
+    ) {
+      setValue(TimeSelectionFields.minute, TIMEZONE_OFFSET_MINUTES);
+    }
+  }, [
+    selectedTime,
+    onDay,
+    hour,
+    setValue,
+    getFieldState,
+    isFirstDayOfTheMonthAndPositiveOffset,
+    shouldRestrictSelectableHours,
+    resetField,
+    editMode,
+    changeSelectableTime,
+    TIMEZONE_OFFSET_MINUTES,
+    TIMEZONE_OFFSET_HOURS,
+  ]);
+
   const timeInfoText = useMemo(
     () =>
       showInfoAlert
@@ -84,7 +147,12 @@ export const TimeSelection = ({
           {selectedTime === TimeValue.months && <MonthsField />}
           {(selectedTime === TimeValue.days ||
             selectedTime === TimeValue.weeks ||
-            selectedTime === TimeValue.months) && <TimeFields />}
+            selectedTime === TimeValue.months) && (
+            <TimeFields
+              selectableHours={selectableHours}
+              selectableMinutes={selectableMinutes}
+            />
+          )}
         </Box>
       </Box>
       {errorInfoAlert}

ui/apps/everest/src/components/time-selection/time-selection.types.ts

@@ -62,6 +62,8 @@ export interface TimeSelectionProps {
   errorInfoAlert?: ReactNode;
   sx?: SxProps<Theme>;
   sxTimeFields?: SxProps<Theme>;
+  shouldRestrictSelectableHours?: boolean;
+  editMode?: boolean;
 }
 
 export type TimeProps = {