@centreon/ui 23.10.43 → 23.10.44

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/index.tsx

@@ -1,76 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { Popover } from '@mui/material';
-
-import {
-  PickersData,
-  PopoverData,
-  defaultAnchorOrigin,
-  defaultTransformOrigin
-} from './models';
-import usePickersStartEndDate from './usePickersStartEndDate';
-import PickersStartEndDate from './PickersStartEndDate';
-
-const useStyles = makeStyles()((theme) => ({
-  paper: {
-    '& .MuiPopover-paper': {
-      minWidth: 250,
-      padding: theme.spacing(1)
-    }
-  }
-}));
-
-interface Props {
-  pickersData: PickersData;
-  popoverData: PopoverData;
-}
-
-const PopoverCustomTimePeriod = ({
-  popoverData,
-  pickersData
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const { open, onClose } = popoverData;
-  const { acceptDate, customTimePeriod } = pickersData;
-
-  const { startDate, endDate, changeDate } = usePickersStartEndDate({
-    acceptDate,
-    customTimePeriod
-  });
-
-  const anchorEl = popoverData?.anchorEl;
-  const anchorPosition = popoverData?.anchorPosition;
-  const anchorOrigin = popoverData?.anchorOrigin;
-  const transformOrigin = popoverData?.transformOrigin;
-  const anchorReference = anchorPosition ? 'anchorPosition' : 'anchorEl';
-
-  const disabled = {
-    isDisabledEndPicker: pickersData?.isDisabledEndPicker,
-    isDisabledStartPicker: pickersData?.isDisabledStartPicker
-  };
-
-  return (
-    <Popover
-      anchorEl={anchorEl}
-      anchorOrigin={anchorOrigin ?? defaultAnchorOrigin}
-      anchorPosition={anchorPosition}
-      anchorReference={anchorReference}
-      className={classes.paper}
-      open={open}
-      transformOrigin={transformOrigin ?? defaultTransformOrigin}
-      onClose={onClose}
-    >
-      <PickersStartEndDate
-        changeDate={changeDate}
-        disabled={disabled}
-        endDate={endDate}
-        rangeEndDate={pickersData?.rangeEndDate}
-        rangeStartDate={pickersData?.rangeStartDate}
-        startDate={startDate}
-      />
-    </Popover>
-  );
-};
-
-export default PopoverCustomTimePeriod;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts

@@ -1,61 +0,0 @@
-import { PopoverOrigin, PopoverPosition } from '@mui/material';
-
-import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
-
-interface RangeDate {
-  max?: Date;
-  min?: Date;
-}
-
-export interface AcceptDateProps {
-  date: Date;
-  property: CustomTimePeriodProperty;
-}
-
-export interface PickersData {
-  acceptDate: (props: AcceptDateProps) => void;
-  customTimePeriod: CustomTimePeriod;
-  getError?: (value: boolean) => void;
-  isDisabledEndPicker?: boolean;
-  isDisabledStartPicker?: boolean;
-  onCloseEndPicker?: (isClosed: boolean) => void;
-  onCloseStartPicker?: (isClosed: boolean) => void;
-  rangeEndDate?: RangeDate;
-  rangeStartDate?: RangeDate;
-}
-
-export interface PopoverData {
-  anchorEl?: HTMLButtonElement;
-  anchorOrigin?: PopoverOrigin;
-  anchorPosition?: PopoverPosition;
-  onClose?: () => void;
-  open: boolean;
-  transformOrigin?: PopoverOrigin;
-}
-
-export enum OriginHorizontalEnum {
-  center = 'center',
-  left = 'left',
-  right = 'right'
-}
-
-export enum OriginVerticalEnum {
-  bottom = 'bottom',
-  center = 'center',
-  top = 'top'
-}
-
-export const defaultAnchorOrigin = {
-  horizontal: OriginHorizontalEnum.center,
-  vertical: OriginVerticalEnum.top
-};
-
-export const defaultTransformOrigin = {
-  horizontal: OriginHorizontalEnum.center,
-  vertical: OriginVerticalEnum.top
-};
-
-export enum PickersStartEndDateDirection {
-  column = 'column',
-  row = 'row'
-}

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/usePickersStartEndDate.ts

@@ -1,82 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import dayjs from 'dayjs';
-import { useSetAtom } from 'jotai';
-import { and, cond, equals, isNil } from 'ramda';
-
-import { CustomTimePeriod, CustomTimePeriodProperty } from '../../models';
-import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
-
-import { AcceptDateProps } from './models';
-
-export interface PickersStartEndDateModel {
-  changeDate: (props: AcceptDateProps) => void;
-  endDate: Date | null;
-  startDate: Date | null;
-}
-interface Props {
-  acceptDate: (props: AcceptDateProps) => void;
-  customTimePeriod: CustomTimePeriod;
-}
-
-const usePickersStartEndDate = ({
-  customTimePeriod,
-  acceptDate
-}: Props): PickersStartEndDateModel => {
-  const [start, setStart] = useState<Date | null>(
-    !isNil(customTimePeriod) ? customTimePeriod.start : null
-  );
-  const [end, setEnd] = useState<Date | null>(
-    !isNil(customTimePeriod) ? customTimePeriod.end : null
-  );
-
-  const setError = useSetAtom(errorTimePeriodAtom);
-
-  const isInvalidDate = ({ startDate, endDate }): boolean =>
-    dayjs(startDate).isSameOrAfter(dayjs(endDate), 'minute');
-
-  const changeDate = ({ property, date }): void => {
-    const currentDate = customTimePeriod[property];
-    cond([
-      [equals(CustomTimePeriodProperty?.start), (): void => setStart(date)],
-      [equals(CustomTimePeriodProperty?.end), (): void => setEnd(date)]
-    ])(property);
-
-    if (dayjs(date).isSame(dayjs(currentDate)) || !dayjs(date).isValid()) {
-      return;
-    }
-
-    acceptDate({
-      date,
-      property
-    });
-  };
-
-  useEffect(() => {
-    if (
-      and(
-        dayjs(customTimePeriod.start).isSame(dayjs(start), 'minute'),
-        dayjs(customTimePeriod.end).isSame(dayjs(end), 'minute')
-      )
-    ) {
-      return;
-    }
-    setStart(customTimePeriod.start);
-    setEnd(customTimePeriod.end);
-  }, [customTimePeriod.start, customTimePeriod.end]);
-
-  useEffect(() => {
-    if (!end || !start) {
-      return;
-    }
-    setError(isInvalidDate({ endDate: end, startDate: start }));
-  }, [end, start]);
-
-  return {
-    changeDate,
-    endDate: end,
-    startDate: start
-  };
-};
-
-export default usePickersStartEndDate;

package/src/TimePeriods/CustomTimePeriod/index.tsx

@@ -1,66 +0,0 @@
-import { MouseEvent, useState } from 'react';
-
-import { useAtomValue, useSetAtom } from 'jotai';
-
-import { useDebounce } from '@centreon/ui';
-
-import {
-  changeCustomTimePeriodDerivedAtom,
-  customTimePeriodAtom
-} from '../timePeriodsAtoms';
-
-import CompactCustomTimePeriod from './CompactCustomTimePeriod';
-import PopoverCustomTimePeriod from './PopoverCustomTimePeriod';
-
-interface Props {
-  disabled?: boolean;
-}
-
-const CustomTimePeriod = ({ disabled = false }: Props): JSX.Element => {
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
-
-  const customTimePeriod = useAtomValue(customTimePeriodAtom);
-  const changeCustomTimePeriod = useSetAtom(changeCustomTimePeriodDerivedAtom);
-
-  const debouncedChangeDate = useDebounce({
-    functionToDebounce: ({ property, date }): void =>
-      changeCustomTimePeriod({ date, property }),
-    wait: 500
-  });
-
-  const onClickCompactCustomTimePeriod = (
-    event: MouseEvent<HTMLButtonElement>
-  ): void => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const closePopover = (): void => {
-    setAnchorEl(undefined);
-  };
-
-  return (
-    <>
-      <CompactCustomTimePeriod
-        disabled={disabled}
-        onClick={onClickCompactCustomTimePeriod}
-      />
-      <PopoverCustomTimePeriod
-        pickersData={{
-          acceptDate: debouncedChangeDate,
-          customTimePeriod,
-          isDisabledEndPicker: disabled,
-          isDisabledStartPicker: disabled,
-          rangeEndDate: { min: customTimePeriod.start },
-          rangeStartDate: { max: customTimePeriod.end }
-        }}
-        popoverData={{
-          anchorEl,
-          onClose: closePopover,
-          open: Boolean(anchorEl)
-        }}
-      />
-    </>
-  );
-};
-
-export default CustomTimePeriod;

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -1,49 +0,0 @@
-import dayjs from 'dayjs';
-
-import { DateTimePicker } from '@mui/x-date-pickers';
-
-import { useDateTimePickerAdapter } from '@centreon/ui';
-
-import { CustomTimePeriodProperty } from './models';
-
-interface Props {
-  changeDate: (props) => void;
-  date: Date | null;
-  desktopMediaQuery?: string;
-  disabled?: boolean;
-  maxDate?: Date;
-  minDate?: Date;
-  property: CustomTimePeriodProperty;
-}
-
-const DateTimePickerInput = ({
-  date,
-  maxDate,
-  minDate,
-  property,
-  changeDate,
-  disabled = false,
-  desktopMediaQuery
-}: Props): JSX.Element => {
-  const { desktopPickerMediaQuery } = useDateTimePickerAdapter();
-
-  const changeTime = (newValue: dayjs.Dayjs | null): void => {
-    changeDate({ date: dayjs(newValue).toDate(), property });
-  };
-
-  return (
-    <DateTimePicker<dayjs.Dayjs>
-      dayOfWeekFormatter={(day: string): string =>
-        day.substring(0, 2).toUpperCase()
-      }
-      desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
-      disabled={disabled}
-      maxDate={maxDate && dayjs(maxDate)}
-      minDate={minDate && dayjs(minDate)}
-      value={dayjs(date)}
-      onChange={changeTime}
-    />
-  );
-};
-
-export default DateTimePickerInput;

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

@@ -1,65 +0,0 @@
-import dayjs from 'dayjs';
-import 'dayjs/locale/fr';
-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: 'fr_FR',
-    resolution: { height: 720, width: 500 },
-    timezone: 'Europe/Paris'
-  },
-  {
-    locale: 'fr_FR',
-    resolution: { height: 720, width: 200 },
-    timezone: 'Europe/Paris'
-  },
-  {
-    locale: 'fr_FR',
-    resolution: { height: 720, 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: 'fr_FR',
-        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.matchImageSnapshot(`${width}px`);
-    });
-  })
-);

package/src/TimePeriods/SelectedTimePeriod.tsx

@@ -1,102 +0,0 @@
-import { useAtomValue, useSetAtom } from 'jotai';
-import { T, always, cond, equals, lte, map, pick } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-import { useTranslation } from 'react-i18next';
-
-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;