@centreon/ui 23.10.30-MON-19324-dashboard-section-navigation.3 → 23.10.30

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -0,0 +1,95 @@
+import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
+
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { Button, Typography } from '@mui/material';
+
+import { dateTimeFormat, useLocaleDateTimeFormat } from '@centreon/ui';
+
+import { customTimePeriodAtom } from '../timePeriodsAtoms';
+import {
+  labelCompactTimePeriod,
+  labelFrom,
+  labelTo
+} from '../translatedLabels';
+
+import useStyles from './CompactCustomTimePeriod.styles';
+
+interface Props {
+  disabled?: boolean;
+  onClick: (event) => void;
+}
+
+const CompactCustomTimePeriod = ({
+  onClick,
+  disabled = false
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+  const { t } = useTranslation();
+
+  const { format } = useLocaleDateTimeFormat();
+
+  const customTimePeriod = useAtomValue(customTimePeriodAtom);
+
+  return (
+    <div>
+      <Button
+        aria-label={t(labelCompactTimePeriod) as string}
+        className={classes.button}
+        color="primary"
+        data-testid={labelCompactTimePeriod}
+        disabled={disabled}
+        variant="outlined"
+        onClick={onClick}
+      >
+        <div className={classes.buttonContent}>
+          <AccessTimeIcon />
+          <div className={classes.containerDates}>
+            <div className={classes.timeContainer}>
+              <Typography
+                className={classes.label}
+                component="div"
+                variant="caption"
+              >
+                {t(labelFrom)}:
+              </Typography>
+
+              <Typography
+                className={classes.date}
+                component="div"
+                variant="caption"
+              >
+                {format({
+                  date: customTimePeriod.start,
+                  formatString: dateTimeFormat
+                })}
+              </Typography>
+            </div>
+            <div className={classes.timeContainer}>
+              <Typography
+                className={classes.label}
+                component="div"
+                variant="caption"
+              >
+                {t(labelTo)}:
+              </Typography>
+
+              <Typography
+                className={classes.date}
+                component="div"
+                variant="caption"
+              >
+                {format({
+                  date: customTimePeriod.end,
+                  formatString: dateTimeFormat
+                })}
+              </Typography>
+            </div>
+          </div>
+        </div>
+      </Button>
+    </div>
+  );
+};
+
+export default CompactCustomTimePeriod;

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

@@ -0,0 +1,14 @@
+import { FormHelperText } from '@mui/material';
+
+interface Props {
+  message: string;
+  style: string;
+}
+
+const ErrorText = ({ message, style }: Props): JSX.Element => (
+  <FormHelperText error className={style}>
+    {message}
+  </FormHelperText>
+);
+
+export default ErrorText;

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

@@ -0,0 +1,163 @@
+import { useAtomValue } from 'jotai';
+import { makeStyles } from 'tss-react/mui';
+import { equals } from 'ramda';
+
+import { Typography } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+
+import { userAtom } from '@centreon/ui-context';
+import { useDateTimePickerAdapter } from '@centreon/ui';
+
+import DateTimePickerInput from '../../DateTimePickerInput';
+import {
+  CustomTimePeriodProperty,
+  DateTimePickerInputModel
+} from '../../models';
+import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
+
+import ErrorText from './ErrorText';
+import { PickersData, PickersStartEndDateDirection } from './models';
+import { PickersStartEndDateModel } from './usePickersStartEndDate';
+
+const useStyles = makeStyles()((theme) => ({
+  error: {
+    textAlign: 'center'
+  },
+  horizontalDirection: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1),
+    justifyItems: 'center',
+    padding: 0
+  },
+  horizontalError: {
+    textAlign: 'left'
+  },
+  row: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1)
+  },
+  verticalDirection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    justifyItems: 'center',
+    padding: theme.spacing(1, 2)
+  }
+}));
+
+interface PropsPickersDateWithLabel extends DateTimePickerInputModel {
+  direction?: PickersStartEndDateDirection;
+  label: string;
+}
+
+const PickerDateWithLabel = ({
+  label,
+  changeDate,
+  maxDate,
+  minDate,
+  property,
+  disabled,
+  date,
+  direction = PickersStartEndDateDirection.column
+}: PropsPickersDateWithLabel): JSX.Element => {
+  const { classes, cx } = useStyles();
+  const isRow = equals(direction, PickersStartEndDateDirection.row);
+
+  return (
+    <div aria-label={label} className={cx({ [classes.row]: isRow })}>
+      <Typography component={isRow ? 'div' : 'p'}>{label}</Typography>
+      <DateTimePickerInput
+        changeDate={changeDate}
+        date={date}
+        disabled={disabled}
+        maxDate={maxDate}
+        minDate={minDate}
+        property={property}
+      />
+    </div>
+  );
+};
+
+interface DisabledPicker {
+  isDisabledEndPicker?: boolean;
+  isDisabledStartPicker?: boolean;
+}
+type PickersDate = Pick<PickersData, 'rangeEndDate' | 'rangeStartDate'>;
+
+interface Props extends PickersDate, PickersStartEndDateModel {
+  direction?: PickersStartEndDateDirection;
+  disabled?: DisabledPicker;
+}
+
+const PickersStartEndDate = ({
+  startDate,
+  endDate,
+  disabled,
+  changeDate,
+  rangeStartDate,
+  rangeEndDate,
+  direction = PickersStartEndDateDirection.column
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles();
+  const { Adapter } = useDateTimePickerAdapter();
+
+  const { locale } = useAtomValue(userAtom);
+  const error = useAtomValue(errorTimePeriodAtom);
+
+  const maxStart = rangeStartDate?.max;
+  const minStart = rangeStartDate?.min;
+  const maxEnd = rangeEndDate?.max;
+  const minEnd = rangeEndDate?.min;
+
+  const styleContainer = equals(direction, PickersStartEndDateDirection.column)
+    ? classes.verticalDirection
+    : classes.horizontalDirection;
+
+  const isHorizontalDirection = equals(
+    direction,
+    PickersStartEndDateDirection.row
+  );
+
+  return (
+    <LocalizationProvider
+      adapterLocale={locale.substring(0, 2)}
+      dateAdapter={Adapter}
+    >
+      <div className={styleContainer}>
+        <PickerDateWithLabel
+          changeDate={changeDate}
+          date={startDate}
+          direction={direction}
+          disabled={disabled?.isDisabledStartPicker}
+          label="From"
+          maxDate={maxStart}
+          minDate={minStart}
+          property={CustomTimePeriodProperty.start}
+        />
+        <PickerDateWithLabel
+          changeDate={changeDate}
+          date={endDate}
+          direction={direction}
+          disabled={disabled?.isDisabledEndPicker}
+          label="To"
+          maxDate={maxEnd}
+          minDate={minEnd}
+          property={CustomTimePeriodProperty.end}
+        />
+      </div>
+
+      {error && (
+        <ErrorText
+          message="The end date must be greater than the start date"
+          style={cx(classes.error, {
+            [classes.horizontalError]: isHorizontalDirection
+          })}
+        />
+      )}
+    </LocalizationProvider>
+  );
+};
+
+export default PickersStartEndDate;

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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,49 @@
+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

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