@centreon/ui 24.7.2 → 24.7.4

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

@@ -1,486 +0,0 @@
-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 { renderHook } from '@testing-library/react';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-import { ListingVariant, userAtom } from '@centreon/ui-context';
-
-import { CustomTimePeriodProperty } from './models';
-import DateTimePickerInput from './DateTimePickerInput';
-
-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

@@ -1,23 +0,0 @@
-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'
-  }
-}));

package/src/TimePeriods/TimePeriods.tsx

@@ -1,59 +0,0 @@
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-import 'dayjs/locale/fr';
-import 'dayjs/locale/pt';
-import duration from 'dayjs/plugin/duration';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-import { lt } from 'ramda';
-
-import { Paper, Theme, useMediaQuery } from '@mui/material';
-
-import CustomTimePeriod from './CustomTimePeriod';
-import SelectedTimePeriod from './SelectedTimePeriod';
-import { useStyles } from './TimePeriods.styles';
-import useTimePeriod from './useTimePeriod';
-import { WrapperTimePeriodProps } from './models';
-
-dayjs.extend(isSameOrAfter);
-dayjs.extend(utcPlugin);
-dayjs.extend(timezonePlugin);
-dayjs.extend(duration);
-
-const TimePeriods = ({
-  extraTimePeriods,
-  disabled = false,
-  getParameters,
-  getIsError,
-  adjustTimePeriodData,
-  renderExternalComponent,
-  width
-}: WrapperTimePeriodProps & { width: number }): JSX.Element => {
-  const { classes, cx } = useStyles({ disabled });
-
-  useTimePeriod({
-    adjustTimePeriodData,
-    getIsError,
-    getParameters
-  });
-
-  const isCondensed =
-    useMediaQuery((theme: Theme) => theme.breakpoints.down('sm')) ||
-    lt(width, 600);
-
-  return (
-    <Paper className={cx(classes.header, { [classes.condensed]: isCondensed })}>
-      <SelectedTimePeriod
-        disabled={disabled}
-        extraTimePeriods={extraTimePeriods}
-        width={width}
-      />
-      <CustomTimePeriod disabled={disabled} isCondensed={isCondensed} />
-      <div>{renderExternalComponent}</div>
-    </Paper>
-  );
-};
-
-export default TimePeriods;

package/src/TimePeriods/helpers/index.ts

@@ -1,26 +0,0 @@
-import { find, propEq } from 'ramda';
-
-import {
-  CustomTimePeriod,
-  TimePeriod,
-  TimePeriodById,
-  lastDayPeriod
-} from '../models';
-
-export const defaultTimePeriod = lastDayPeriod;
-
-export const getTimePeriodFromNow = (
-  timePeriod: TimePeriod | null
-): CustomTimePeriod => {
-  return {
-    end: new Date(Date.now()),
-    start: new Date(timePeriod?.getStart() || 0),
-    timelineEventsLimit: timePeriod?.timelineEventsLimit as number
-  };
-};
-
-export const getTimePeriodById = ({
-  id,
-  timePeriods
-}: TimePeriodById): TimePeriod =>
-  find<TimePeriod>(propEq(id, 'id'))(timePeriods) as TimePeriod;

package/src/TimePeriods/index.stories.tsx

@@ -1,116 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import dayjs from 'dayjs';
-
-import Switch from '@mui/material/Switch';
-
-import { dateFormat } from './models';
-import SimpleCustomTimePeriod from './CustomTimePeriod/SimpleCustomTimePeriod';
-
-import TimePeriod from '.';
-
-const meta: Meta<typeof TimePeriod> = {
-  component: TimePeriod,
-  parameters: {
-    chromatic: { disableSnapshot: true }
-  },
-  tags: ['autodocs']
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TimePeriod>;
-
-type StorySimpleTimePeriod = StoryObj<typeof SimpleCustomTimePeriod>;
-
-const Template: Story = {
-  render: (args) => <TimePeriod {...args} />
-};
-
-const TemplateWithSimpleTimePeriod: StorySimpleTimePeriod = {
-  render: (args) => <SimpleCustomTimePeriod {...args} />
-};
-
-const TemplateWithExternalComponent: Story = {
-  render: (args) => (
-    <TimePeriod {...args} renderExternalComponent={<Switch />} />
-  )
-};
-
-const argTypes = {
-  disabled: {
-    control: 'boolean',
-    description: 'If true, the component is disabled.',
-    table: {
-      defaultValue: { summary: false },
-      type: { summary: 'boolean' }
-    }
-  },
-  extraTimePeriods: {
-    control: 'object',
-    description: 'soon',
-    table: {
-      defaultValue: { summary: '[]' },
-      type: { detail: 'extra selected time periods', summary: 'array' }
-    }
-  },
-  getIsError: {
-    description:
-      'Callback fired when The end date is smaller or equal to the start date',
-    table: {
-      category: 'Events',
-      type: { detail: '(value:boolean)=>void', summary: 'function' }
-    }
-  },
-  getStartEndParameters: {
-    description: 'Callback fired when the the user select or pick a date',
-    table: {
-      category: 'Events',
-      type: {
-        detail: '({start:isoString,end:isoString})=>void',
-        summary: 'function'
-      }
-    }
-  }
-};
-const args = {
-  extraTimePeriods: [
-    {
-      dateTimeFormat: dateFormat,
-      getStart: (): Date => dayjs(Date.now()).subtract(29, 'day').toDate(),
-      id: 'last_29_days',
-      largeName: 'last 29 days',
-      name: '29 days'
-    },
-    {
-      dateTimeFormat: dateFormat,
-      getStart: (): Date => dayjs(Date.now()).subtract(5, 'day').toDate(),
-      id: 'last_5_days',
-      largeName: 'last 5 days',
-      name: '5 days'
-    }
-  ]
-};
-
-export const BasicTimePeriod: Story = {
-  ...Template,
-  argTypes
-};
-
-export const WithExtraTimePeriods: Story = {
-  ...Template,
-  argTypes,
-  args
-};
-
-export const WithExternalComponent: Story = {
-  ...TemplateWithExternalComponent,
-  argTypes
-};
-
-export const SimpleTimePeriod: StorySimpleTimePeriod = {
-  ...TemplateWithSimpleTimePeriod,
-  args: {
-    endDate: dayjs(Date.now()).toDate(),
-    startDate: dayjs(Date.now()).subtract(29, 'day').toDate()
-  }
-};