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

.github/workflows/dev-fe-e2e.yaml

@@ -16,6 +16,13 @@ jobs:
   e2e:
     runs-on: ubuntu-latest
     steps:
+      - name: Switch docker-daemon data directory to /mnt
+        run: |
+          sudo systemctl stop docker
+          echo '{ "exec-opts": ["native.cgroupdriver=cgroupfs"], "cgroup-parent": "/actions_job", "data-root": "/mnt/docker-data" }' | sudo tee /etc/docker/daemon.json
+          sudo mkdir /mnt/docker-data
+          sudo systemctl start docker
+
       - uses: actions/checkout@v4
         with:
           lfs: true

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

@@ -1,12 +1,52 @@
-import { Box, MenuItem, Typography } from '@mui/material';
+import { Box, Divider, MenuItem, Tooltip, Typography } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { SelectInput } from '@percona/ui-lib';
-import { HOURS_AM_PM, MINUTES } from '../time-selection.constants';
+import { AM_PM, HOURS_AM_PM, MINUTES } from '../time-selection.constants';
 import { Messages } from '../time-selection.messages';
-import { AmPM, TimeSelectionFields } from '../time-selection.types';
+import { TimeSelectionFields } from '../time-selection.types';
 import { addZeroToSingleDigit } from '../time-selection.utils';
+import HelpIcon from '@mui/icons-material/Help';
 
-export const TimeFields = () => {
+const showLimitationInfo = () => {
+  return (
+    <Box>
+      <MenuItem
+        sx={{
+          cursor: 'text',
+          userSelect: 'text',
+          maxHeight: '20px',
+          paddingLeft: '5px',
+        }}
+      >
+        <HelpIcon sx={{ size: 'small' }} />
+
+        <Tooltip
+          title={Messages.notAvailable}
+          arrow
+          placement="right"
+          sx={{ ml: 1 }}
+        >
+          <Typography variant="helperText" color="text.secondary">
+            {Messages.help}
+          </Typography>
+        </Tooltip>
+      </MenuItem>
+      <Divider />
+    </Box>
+  );
+};
+
+export const TimeFields = ({
+  selectableHours = HOURS_AM_PM,
+  selectableMinutes = MINUTES,
+  selectableAmPm = AM_PM,
+  shouldRestrictTime,
+}: {
+  selectableHours?: number[];
+  selectableMinutes?: number[];
+  selectableAmPm?: string[];
+  shouldRestrictTime: boolean;
+}) => {
   const { control } = useFormContext();
 
   return (
@@ -28,8 +68,15 @@ export const TimeFields = () => {
           sx: { minWidth: '80px' },
         }}
       >
+        {shouldRestrictTime &&
+          HOURS_AM_PM.length !== selectableHours.length &&
+          showLimitationInfo()}
         {HOURS_AM_PM.map((value) => (
-          <MenuItem key={value} value={value}>
+          <MenuItem
+            key={value}
+            value={value}
+            disabled={!selectableHours.includes(value)}
+          >
             {value}
           </MenuItem>
         ))}
@@ -38,11 +85,18 @@ export const TimeFields = () => {
         name={TimeSelectionFields.minute}
         control={control}
         selectFieldProps={{
-          sx: { minWidth: '80px' },
+          sx: { minWidth: '80px', width: 'fit-content', margin: '5px' },
         }}
       >
+        {shouldRestrictTime &&
+          MINUTES.length !== selectableMinutes.length &&
+          showLimitationInfo()}
         {MINUTES.map((value) => (
-          <MenuItem key={value} value={value}>
+          <MenuItem
+            key={value}
+            value={value}
+            disabled={!selectableMinutes.includes(value)}
+          >
             {addZeroToSingleDigit(value)}
           </MenuItem>
         ))}
@@ -54,8 +108,18 @@ export const TimeFields = () => {
           sx: { minWidth: '80px' },
         }}
       >
-        <MenuItem value={AmPM.AM}>{Messages.am}</MenuItem>
-        <MenuItem value={AmPM.PM}>{Messages.pm}</MenuItem>
+        {shouldRestrictTime &&
+          AM_PM.length !== selectableAmPm.length &&
+          showLimitationInfo()}
+        {AM_PM.map((value) => (
+          <MenuItem
+            key={value}
+            value={value}
+            disabled={!selectableAmPm.includes(value)}
+          >
+            {value}
+          </MenuItem>
+        ))}
       </SelectInput>
     </Box>
   );

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

@@ -23,6 +23,7 @@ import {
 export const MINUTES = Array.from({ length: 60 }, (_, i) => i);
 export const DAYS_MONTH = Array.from({ length: 31 }, (_, i) => i + 1);
 export const HOURS_AM_PM = Array.from({ length: 12 }, (_, i) => i + 1);
+export const AM_PM = [AmPM.AM, AmPM.PM];
 
 export const TIME_SELECTION_DEFAULTS = {
   [TimeSelectionFields.selectedTime]: TimeValue.days,

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

@@ -20,6 +20,9 @@ export const Messages = {
   at: 'at',
   am: 'AM',
   pm: 'PM',
+  notAvailable:
+    'Some time slots are not available due to operator limitations.',
+  help: 'Help',
   infoText: (value: string) =>
     `Everest will create a backup of your database every ${value}`,
   getTimeText: {

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'
+    );
+  });
 });