@centreon/ui 24.11.14 → 24.11.21

package/src/TimePeriods/ResolutionTimePeriod.cypress.spec.tsx

@@ -0,0 +1,74 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/en';
+import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utcPlugin from 'dayjs/plugin/utc';
+import { Provider, createStore } from 'jotai';
+
+import { Switch } from '@mui/material';
+
+import { userAtom } from '@centreon/ui-context';
+
+import { retrievedUser } from './mockedData';
+
+import TimePeriod from './index';
+
+dayjs.extend(timezonePlugin);
+dayjs.extend(utcPlugin);
+dayjs.extend(localizedFormatPlugin);
+
+const data = [
+  {
+    locale: 'en_US',
+    resolution: { height: 590, width: 500 },
+    timezone: 'Europe/Paris'
+  },
+  {
+    locale: 'en_US',
+    resolution: { height: 590, width: 200 },
+    timezone: 'Europe/Paris'
+  },
+  {
+    locale: 'en_US',
+    resolution: { height: 590, width: 1024 },
+    timezone: 'Europe/Paris'
+  }
+];
+
+data.forEach((item) =>
+  describe('Time period', () => {
+    const { height, width } = item.resolution;
+    beforeEach(() => {
+      cy.viewport(width, height);
+
+      const store = createStore();
+
+      store.set(userAtom, {
+        ...retrievedUser,
+        locale: 'en_US',
+        timezone: 'Europe/Paris'
+      });
+
+      cy.mount({
+        Component: (
+          <Provider store={store}>
+            <TimePeriod renderExternalComponent={<Switch />} />
+          </Provider>
+        )
+      });
+    });
+
+    it(`displays correctly the dates design when screen resolution is ${width}px`, () => {
+      cy.contains('1 day').should('be.visible');
+      cy.contains('7 days').should('be.visible');
+      cy.contains('31 days').should('be.visible');
+      cy.contains('From').should('be.visible');
+      cy.contains('To').should('be.visible');
+
+      cy.makeSnapshotWithCustomResolution({
+        resolution: { height, width },
+        title: `${width}px`
+      });
+    });
+  })
+);

package/src/TimePeriods/SelectedTimePeriod.tsx

@@ -0,0 +1,102 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { T, always, cond, equals, lte, map, pick } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import { Button, ButtonGroup, Tooltip, useTheme } from '@mui/material';
+
+import { TimePeriod, timePeriods } from './models';
+import {
+  changeSelectedTimePeriodDerivedAtom,
+  selectedTimePeriodAtom
+} from './timePeriodsAtoms';
+import useSortTimePeriods from './useSortTimePeriods';
+
+const useStyles = makeStyles()((theme) => ({
+  button: {
+    fontSize: theme.typography.body2.fontSize,
+    pointerEvents: 'all'
+  },
+  buttonGroup: {
+    alignSelf: 'center',
+    height: '100%'
+  }
+}));
+
+interface Props {
+  disabled?: boolean;
+  extraTimePeriods?: Array<Omit<TimePeriod, 'timelineEventsLimit'>>;
+  width: number;
+}
+
+const SelectedTimePeriod = ({
+  width,
+  disabled = false,
+  extraTimePeriods = []
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const selectedTimePeriodData = useAtomValue(selectedTimePeriodAtom);
+
+  const changeSelectedTimePeriod = useSetAtom(
+    changeSelectedTimePeriodDerivedAtom
+  );
+
+  const currentTimePeriods = useSortTimePeriods([
+    ...timePeriods,
+    ...extraTimePeriods
+  ] as Array<TimePeriod>);
+
+  const timePeriodOptions = map(
+    pick(['id', 'name', 'largeName']),
+    currentTimePeriods
+  );
+
+  const translatedTimePeriodOptions = timePeriodOptions.map((timePeriod) => ({
+    ...timePeriod,
+    largeName: t(timePeriod.largeName),
+    name: t(timePeriod.name)
+  }));
+
+  return (
+    <ButtonGroup
+      className={classes.buttonGroup}
+      color="primary"
+      disabled={disabled}
+      size="small"
+    >
+      {map(
+        ({ id, name, largeName }) => (
+          <Tooltip key={name} placement="top" title={largeName}>
+            <Button
+              className={classes.button}
+              data-testid={id}
+              variant={
+                equals(selectedTimePeriodData?.id, id)
+                  ? 'contained'
+                  : 'outlined'
+              }
+              onClick={(): void =>
+                changeSelectedTimePeriod({
+                  id,
+                  timePeriods: currentTimePeriods
+                })
+              }
+            >
+              {
+                cond<number, string>([
+                  [lte(theme.breakpoints.values.md), always(largeName)],
+                  [T, always(name)]
+                ])(width) as string
+              }
+            </Button>
+          </Tooltip>
+        ),
+        translatedTimePeriodOptions
+      )}
+    </ButtonGroup>
+  );
+};
+
+export default SelectedTimePeriod;

package/src/TimePeriods/TimePeriods.cypress.spec.tsx

@@ -0,0 +1,486 @@
+import { renderHook } from '@testing-library/react';
+import dayjs from 'dayjs';
+import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utcPlugin from 'dayjs/plugin/utc';
+import { Provider, createStore } from 'jotai';
+import { equals } from 'ramda';
+
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+import { ListingVariant, userAtom } from '@centreon/ui-context';
+
+import DateTimePickerInput from './DateTimePickerInput';
+import { CustomTimePeriodProperty } from './models';
+
+dayjs.extend(timezonePlugin);
+dayjs.extend(utcPlugin);
+dayjs.extend(localizedFormatPlugin);
+
+const retrievedUser = {
+  alias: 'Admin alias',
+  default_page: '/monitoring/resources',
+  is_export_button_enabled: true,
+  isExportButtonEnabled: true,
+  locale: 'fr_FR.UTF8',
+  name: 'Admin',
+  use_deprecated_pages: false,
+  user_interface_density: ListingVariant.compact
+};
+
+const numberDaysInWeek = 7;
+
+const days = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday'
+];
+
+const months2023 = [
+  {
+    January: {
+      date: '2023-01-01T12:59:41.041Z',
+      firstDay: { day: days[0], indexDayInRowWeek: 0, value: 1 },
+      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 31 },
+      numberWeeks: 5
+    }
+  },
+  {
+    February: {
+      date: '2023-02-01T12:59:41.041Z',
+      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
+      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 28 },
+      numberWeeks: 5
+    }
+  },
+  {
+    March: {
+      date: '2023-03-01T12:59:41.041Z',
+      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
+      lastDay: { day: days[5], indexDayInRowWeek: 5, value: 31 },
+      numberWeeks: 5
+    }
+  },
+  {
+    April: {
+      date: '2023-04-01T12:59:41.041Z',
+      firstDay: { day: days[6], indexDayInRowWeek: 6, value: 1 },
+      lastDay: { day: days[0], indexDayInRowWeek: 0, value: 30 },
+      numberWeeks: 6
+    }
+  },
+  {
+    May: {
+      date: '2023-05-01T12:59:41.041Z',
+      firstDay: { day: days[1], indexDayInRowWeek: 1, value: 1 },
+      lastDay: { day: days[3], indexDayInRowWeek: 3, value: 31 },
+      numberWeeks: 5
+    }
+  },
+  {
+    June: {
+      date: '2023-06-01T12:59:41.041Z',
+      firstDay: { day: days[4], indexDayInRowWeek: 4, value: 1 },
+      lastDay: { day: days[5], indexDayInRowWeek: 5, value: 30 },
+      numberWeeks: 5
+    }
+  },
+  {
+    July: {
+      date: '2023-07-01T12:59:41.041Z',
+      firstDay: { day: days[6], indexDayInRowWeek: 6, value: 1 },
+      lastDay: { day: days[1], indexDayInRowWeek: 1, value: 31 },
+      numberWeeks: 6
+    }
+  },
+  {
+    August: {
+      date: '2023-08-01T12:59:41.041Z',
+      firstDay: { day: days[2], indexDayInRowWeek: 2, value: 1 },
+      lastDay: { day: days[4], indexDayInRowWeek: 4, value: 31 },
+      numberWeeks: 5
+    }
+  },
+  {
+    September: {
+      date: '2023-09-01T12:59:41.041Z',
+      firstDay: { day: days[5], indexDayInRowWeek: 5, value: 1 },
+      lastDay: { day: days[6], indexDayInRowWeek: 6, value: 30 },
+      numberWeeks: 5
+    }
+  },
+  {
+    October: {
+      date: '2023-10-01T12:59:41.041Z',
+      firstDay: { day: days[0], indexDayInRowWeek: 0, value: 1 },
+      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 31 },
+      numberWeeks: 5
+    }
+  },
+  {
+    November: {
+      date: '2023-11-01T12:59:41.041Z',
+      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
+      lastDay: { day: days[4], indexDayInRowWeek: 4, value: 30 },
+      numberWeeks: 5
+    }
+  },
+  {
+    December: {
+      date: '2023-12-01T12:59:41.041Z',
+      firstDay: { day: days[5], indexDayInRowWeek: 5, value: 1 },
+      lastDay: { day: days[0], indexDayInRowWeek: 0, value: 31 },
+      numberWeeks: 6
+    }
+  }
+];
+
+const month2023Reverse = [
+  {
+    December: {
+      date: '2023-12-01T12:59:41.041Z',
+      firstDay: { day: days[5], indexDayInRowWeek: 5, value: 1 },
+      lastDay: { day: days[0], indexDayInRowWeek: 0, value: 31 },
+      numberWeeks: 6
+    }
+  },
+  {
+    November: {
+      date: '2023-11-01T12:59:41.041Z',
+      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
+      lastDay: { day: days[4], indexDayInRowWeek: 4, value: 30 },
+      numberWeeks: 5
+    }
+  },
+  {
+    October: {
+      date: '2023-10-01T12:59:41.041Z',
+      firstDay: { day: days[0], indexDayInRowWeek: 0, value: 1 },
+      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 31 },
+      numberWeeks: 5
+    }
+  },
+  {
+    September: {
+      date: '2023-09-01T12:59:41.041Z',
+      firstDay: { day: days[5], indexDayInRowWeek: 5, value: 1 },
+      lastDay: { day: days[6], indexDayInRowWeek: 6, value: 30 },
+      numberWeeks: 5
+    }
+  },
+  {
+    August: {
+      date: '2023-08-01T12:59:41.041Z',
+      firstDay: { day: days[2], indexDayInRowWeek: 2, value: 1 },
+      lastDay: { day: days[4], indexDayInRowWeek: 4, value: 31 },
+      numberWeeks: 5
+    }
+  },
+  {
+    July: {
+      date: '2023-07-01T12:59:41.041Z',
+      firstDay: { day: days[6], indexDayInRowWeek: 6, value: 1 },
+      lastDay: { day: days[1], indexDayInRowWeek: 1, value: 31 },
+      numberWeeks: 6
+    }
+  },
+  {
+    June: {
+      date: '2023-06-01T12:59:41.041Z',
+      firstDay: { day: days[4], indexDayInRowWeek: 4, value: 1 },
+      lastDay: { day: days[5], indexDayInRowWeek: 5, value: 30 },
+      numberWeeks: 5
+    }
+  },
+  {
+    May: {
+      date: '2023-05-01T12:59:41.041Z',
+      firstDay: { day: days[1], indexDayInRowWeek: 1, value: 1 },
+      lastDay: { day: days[3], indexDayInRowWeek: 3, value: 31 },
+      numberWeeks: 5
+    }
+  },
+  {
+    April: {
+      date: '2023-04-01T12:59:41.041Z',
+      firstDay: { day: days[6], indexDayInRowWeek: 6, value: 1 },
+      lastDay: { day: days[0], indexDayInRowWeek: 0, value: 30 },
+      numberWeeks: 6
+    }
+  },
+  {
+    March: {
+      date: '2023-03-01T12:59:41.041Z',
+      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
+      lastDay: { day: days[5], indexDayInRowWeek: 5, value: 31 },
+      numberWeeks: 5
+    }
+  },
+  {
+    February: {
+      date: '2023-02-01T12:59:41.041Z',
+      firstDay: { day: days[3], indexDayInRowWeek: 3, value: 1 },
+      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 28 },
+      numberWeeks: 5
+    }
+  },
+  {
+    January: {
+      date: '2023-01-01T12:59:41.041Z',
+      firstDay: { day: days[0], indexDayInRowWeek: 0, value: 1 },
+      lastDay: { day: days[2], indexDayInRowWeek: 2, value: 31 },
+      numberWeeks: 5
+    }
+  }
+];
+
+const testData = [
+  {
+    button: 'Next month',
+    data: months2023,
+    initialDate: '2023-01-01T12:59:41.041Z',
+    timezone: 'Europe/Paris'
+  },
+  {
+    button: 'Previous month',
+    data: month2023Reverse,
+    initialDate: '2023-12-01T12:59:41.041Z',
+    timezone: 'Europe/Paris'
+  }
+];
+
+enum ButtonCalendar {
+  NMONTH = 'Next month',
+  PMONTH = 'Previous month'
+}
+interface GetPreviousNextMonth {
+  currentMonth: string;
+  labelButton: string;
+}
+
+const getNextMonth = ({
+  currentMonth,
+  labelButton
+}: GetPreviousNextMonth): Cypress.Chainable | null => {
+  if (equals(currentMonth, 'December')) {
+    return null;
+  }
+
+  return cy.get(`[aria-label="${labelButton}"]`).click();
+};
+
+const getPreviousMonth = ({
+  currentMonth,
+  labelButton
+}: GetPreviousNextMonth): Cypress.Chainable | null => {
+  if (equals(currentMonth, 'January')) {
+    return null;
+  }
+
+  return cy.get(`[aria-label="${labelButton}"]`).click();
+};
+
+const checkIfDuplicateExists = (arr: Array<unknown>): boolean => {
+  return new Set(arr).size !== arr.length;
+};
+
+testData.forEach((item) =>
+  describe(`DateTimePicker ${item.button}`, () => {
+    beforeEach(() => {
+      cy.viewport('macbook-13');
+
+      const store = createStore();
+      store.set(userAtom, {
+        ...retrievedUser,
+        locale: 'en_US',
+        timezone: item.timezone
+      });
+
+      cy.mount({
+        Component: (
+          <Provider store={store}>
+            <DateTimePickerInput
+              changeDate={cy.stub()}
+              date={new Date(item.initialDate)}
+              property={CustomTimePeriodProperty.start}
+            />
+          </Provider>
+        )
+      });
+    });
+
+    it(`displays the correct number of days for the current month when the ${item.button} button is clicked`, () => {
+      cy.get('button').click();
+      item.data.forEach((element) => {
+        const { lastDay } = Object.values(element)[0];
+
+        cy.get('[role="rowgroup"]').children().as('listWeeks');
+        cy.get('@listWeeks').children('button').as('days');
+        cy.get('@days').should('have.length', lastDay.value);
+
+        const currentMonth = Object.keys(element)[0];
+
+        if (equals(item.button, ButtonCalendar.PMONTH)) {
+          getPreviousMonth({ currentMonth, labelButton: item.button });
+        } else {
+          getNextMonth({ currentMonth, labelButton: item.button });
+        }
+      });
+    });
+
+    it(`does not duplicate days in any of the month in the year when the ${item.button} button is clicked`, () => {
+      cy.get('button').click();
+      item.data.forEach((element) => {
+        const daysInCurrentMonth: Array<string> = [];
+        cy.get('[role="rowgroup"]').first().children().as('listWeeks');
+        cy.get('@listWeeks').children('button').as('days');
+
+        cy.get('@days')
+          .each((day) => daysInCurrentMonth.push(day.text()))
+          .as('currentDays');
+
+        cy.get('@currentDays').then(() => {
+          const isDuplicateExist = checkIfDuplicateExists(daysInCurrentMonth);
+
+          return expect(isDuplicateExist).to.be.false;
+        });
+
+        const currentMonth = Object.keys(element)[0];
+        if (equals(item.button, ButtonCalendar.PMONTH)) {
+          getPreviousMonth({ currentMonth, labelButton: item.button });
+        } else {
+          getNextMonth({ currentMonth, labelButton: item.button });
+        }
+      });
+    });
+
+    it(`displays the first day as the start of the week when the ${item.button} button is clicked`, () => {
+      cy.get('button').click();
+
+      item.data.forEach((element) => {
+        const { firstDay, numberWeeks } = Object.values(element)[0];
+
+        cy.get('[role="rowgroup"]').children().as('listWeeks');
+
+        cy.get('@listWeeks').should('have.length', numberWeeks);
+        cy.get('@listWeeks').eq(0).as('firstWeek');
+        cy.get('@firstWeek').children().as('listDaysInFirstWeek');
+
+        cy.get('@listDaysInFirstWeek').should('have.length', numberDaysInWeek);
+        cy.get('@listDaysInFirstWeek')
+          .eq(firstDay.indexDayInRowWeek)
+          .as('firstDayInWeek');
+        cy.get('@firstDayInWeek').contains(firstDay.value);
+
+        const currentMonth = Object.keys(element)[0];
+        if (equals(item.button, ButtonCalendar.PMONTH)) {
+          getPreviousMonth({ currentMonth, labelButton: item.button });
+        } else {
+          getNextMonth({ currentMonth, labelButton: item.button });
+        }
+      });
+    });
+
+    it(`displays the last day as the end of the week when the ${item.button} button is clicked`, () => {
+      cy.get('button').click();
+
+      item.data.forEach((element) => {
+        const { lastDay, numberWeeks } = Object.values(element)[0];
+
+        cy.get('[role="rowgroup"]').children().as('listWeeks');
+
+        cy.get('@listWeeks').should('have.length', numberWeeks);
+
+        cy.get('@listWeeks')
+          .eq(numberWeeks - 1)
+          .as('lastWeek');
+
+        cy.get('@lastWeek').children().as('listDaysInLastWeek');
+        cy.get('@listDaysInLastWeek').should('have.length', numberDaysInWeek);
+
+        cy.get('@listDaysInLastWeek')
+          .eq(lastDay.indexDayInRowWeek)
+          .as('lastDayInWeek');
+        cy.get('@lastDayInWeek').contains(lastDay.value);
+        const currentMonth = Object.keys(element)[0];
+        if (equals(item.button, ButtonCalendar.PMONTH)) {
+          getPreviousMonth({ currentMonth, labelButton: item.button });
+        } else {
+          getNextMonth({ currentMonth, labelButton: item.button });
+        }
+      });
+    });
+
+    it(`displays the month and the year in the calendar's header when the ${item.button} button is clicked`, () => {
+      cy.get('button').click();
+      const { result } = renderHook(() => useLocaleDateTimeFormat());
+
+      item.data.forEach((element) => {
+        const { date } = Object.values(element)[0];
+
+        const { format } = result.current;
+        const monthAndYear = format({
+          date: dayjs(date).tz(item.timezone),
+          formatString: 'MMMM YYYY'
+        });
+        cy.contains(monthAndYear);
+        const currentMonth = Object.keys(element)[0];
+        if (equals(item.button, ButtonCalendar.PMONTH)) {
+          getPreviousMonth({ currentMonth, labelButton: item.button });
+        } else {
+          getNextMonth({ currentMonth, labelButton: item.button });
+        }
+      });
+    });
+
+    it(`displays the correct day name on calendar's header when the ${item.button} button is clicked`, () => {
+      cy.get('button').click();
+      const { result } = renderHook(() => useLocaleDateTimeFormat());
+
+      item.data.forEach((element) => {
+        const { date } = Object.values(element)[0];
+        const dateByTimeZone = dayjs(date).tz(item.timezone);
+        const firstDay = dateByTimeZone.isUTC()
+          ? dateByTimeZone.utc().startOf('month').startOf('week')
+          : dateByTimeZone.startOf('month').startOf('week');
+
+        const { format } = result.current;
+        const daysArray = [0, 1, 2, 3, 4, 5, 6].map((diff) =>
+          format({
+            date: firstDay.add(diff, 'day'),
+            formatString: 'dd'
+          })
+        );
+        daysArray.forEach((day) => cy.contains(day.toUpperCase()));
+        const currentMonth = Object.keys(element)[0];
+        if (equals(item.button, ButtonCalendar.PMONTH)) {
+          getPreviousMonth({ currentMonth, labelButton: item.button });
+        } else {
+          getNextMonth({ currentMonth, labelButton: item.button });
+        }
+      });
+    });
+
+    it(`displays the calendar for the timezone ${item.timezone} when the ${item.button} button is clicked`, () => {
+      cy.get('button').click();
+
+      item.data.forEach((element) => {
+        const currentMonth = Object.keys(element)[0];
+        if (equals(item.button, ButtonCalendar.PMONTH)) {
+          getPreviousMonth({ currentMonth, labelButton: item.button });
+        } else {
+          getNextMonth({ currentMonth, labelButton: item.button });
+        }
+
+        cy.makeSnapshot(
+          `calendar-${item.timezone}-${
+            Object.keys(element)[0]
+          }-when-clicking-on-${item.button}`
+        );
+      });
+    });
+  })
+);

package/src/TimePeriods/TimePeriods.styles.ts

@@ -0,0 +1,23 @@
+import { makeStyles } from 'tss-react/mui';
+
+interface StylesProps {
+  disabled: boolean;
+}
+
+export const useStyles = makeStyles<StylesProps>()((theme, { disabled }) => ({
+  condensed: {
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    rowGap: theme.spacing(1)
+  },
+  header: {
+    alignItems: 'center',
+    backgroundColor: disabled ? 'transparent' : 'undefined',
+    border: disabled ? 'unset' : 'undefined',
+    boxShadow: disabled ? 'unset' : 'undefined',
+    columnGap: theme.spacing(2),
+    display: 'flex',
+    gridTemplateRows: '1fr',
+    justifyContent: 'center'
+  }
+}));