@centreon/ui 23.10.36 → 23.10.37

package/src/RichTextEditor/RichTextEditor.cypress.spec.tsx

@@ -1,204 +0,0 @@
-import RichTextEditor from './RichTextEditor';
-
-interface CheckElementStyleOnRichTextEditorProps {
-  check: boolean;
-  element: HTMLElement;
-}
-
-const mockInititalStateToEditor =
-  '{"root": {"children": [{"children": [{"detail": 0,"format": 0,"mode": "normal","style": "","text": "test Cypress","type": "text","version": 1}],"direction": "ltr","format": "","indent": 0,"type": "paragraph","version": 1}],"direction": "ltr","format": "","indent": 0,"type": "root","version": 1}}';
-
-const checkElementStyleOnRichTextEditor = ({
-  element,
-  check
-}: CheckElementStyleOnRichTextEditorProps): void => {
-  cy.wrap(element).should('be.visible');
-
-  if (check) {
-    cy.wrap(element)
-      .contains('strong', 'cypress test')
-      .should('have.css', 'font-style')
-      .and('match', /italic/);
-
-    cy.wrap(element)
-      .contains('strong', 'cypress test')
-      .should('have.css', 'text-decoration')
-      .and('match', /underline line-through/);
-  } else {
-    cy.wrap(element)
-      .contains('p', 'cypress test')
-      .invoke('css', 'font-style')
-      .and('not.match', /italic/);
-
-    cy.wrap(element)
-      .contains('p', 'cypress test')
-      .invoke('css', 'text-decoration')
-      .and('not.match', /underline line-through/);
-  }
-};
-
-describe('Rich Text Editor', () => {
-  describe('Editable Rich Text Editor', () => {
-    beforeEach(() => {
-      cy.mount({ Component: <RichTextEditor editable /> });
-    });
-
-    it('displays all elements when RichTextEditor is called with required props', () => {
-      cy.findByLabelText('Undo').should('be.visible');
-      cy.findByLabelText('Redo').should('be.visible');
-      cy.findByLabelText('bold').should('be.visible');
-      cy.findByLabelText('italic').should('be.visible');
-      cy.findByLabelText('underline').should('be.visible');
-      cy.findByLabelText('strikethrough').should('be.visible');
-      cy.findByLabelText('link').should('be.visible');
-      cy.findByLabelText('RichTextEditor')
-        .should('be.visible')
-        .and('have.value', '');
-
-      cy.get('#RichTextEditor').contains('Type here...');
-    });
-
-    it('displays changes with undo redo buttons', () => {
-      cy.get('[data-testid="RichTextEditor"]').type('cypress test');
-      cy.get('[data-testid="RichTextEditor"]').should(
-        'have.text',
-        'cypress test'
-      );
-
-      cy.findByLabelText('Undo').click();
-
-      cy.get('[data-testid="RichTextEditor"]').should('have.text', '');
-
-      cy.findByLabelText('Redo').click();
-
-      cy.get('[data-testid="RichTextEditor"]').should(
-        'have.text',
-        'cypress test'
-      );
-    });
-
-    it('displays changes with bold, italic, underline and strikethrough buttons', () => {
-      cy.get('[data-testid="RichTextEditor"]').type('cypress test');
-      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
-
-      cy.get('#bold').click();
-      cy.get('#italic').click();
-      cy.get('#underline').click();
-      cy.get('#strikethrough').click();
-
-      cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
-        checkElementStyleOnRichTextEditor({ check: true, element });
-      });
-
-      cy.get('#bold').click();
-      cy.get('#italic').click();
-      cy.get('#underline').click();
-      cy.get('#strikethrough').click();
-
-      cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
-        checkElementStyleOnRichTextEditor({ check: false, element });
-      });
-    });
-
-    it('adds link with an url when link button is clicked', () => {
-      cy.get('[data-testid="RichTextEditor"]').type('cypress');
-      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
-
-      cy.get('#link').click();
-
-      cy.findByLabelText('Saved link').should('have.text', 'https://');
-
-      cy.findByLabelText('Edit link').click();
-      cy.get('#InputLinkField').type('www.centreon.com').type('{enter}');
-
-      cy.findByText('cypress')
-        .parent()
-        .then((element: HTMLElement) => {
-          cy.wrap(element)
-            .should('have.attr', 'href')
-            .and('match', /^https:\/\/www.centreon.com/);
-
-          cy.wrap(element)
-            .should('have.attr', 'rel')
-            .and('match', /^noopener/);
-
-          cy.wrap(element)
-            .should('have.attr', 'target')
-            .and('match', /_blank/);
-        });
-
-      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
-
-      cy.get('#link').click({ force: true });
-
-      cy.findByText('cypress')
-        .parent()
-        .then((element: HTMLElement) => {
-          cy.wrap(element)
-            .contains('p', 'cypress')
-            .should('not.have.attr', 'href');
-
-          cy.wrap(element).should('not.have.attr', 'rel');
-
-          cy.wrap(element).should('not.have.attr', 'target');
-        });
-    });
-  });
-
-  describe('Disabled Rich Text Editor', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: (
-          <RichTextEditor
-            editable={false}
-            initialEditorState={mockInititalStateToEditor}
-          />
-        )
-      });
-    });
-
-    it('displays editor when editable props is false and an initialState exist', () => {
-      cy.get('[data-testid="RichTextEditor"]')
-        .invoke('attr', 'contenteditable')
-        .should('eq', 'false');
-      cy.findByLabelText('Undo').should('not.exist');
-      cy.findByLabelText('Redo').should('not.exist');
-      cy.findByLabelText('bold').should('not.exist');
-      cy.findByLabelText('italic').should('not.exist');
-      cy.findByLabelText('underline').should('not.exist');
-      cy.findByLabelText('strikethrough').should('not.exist');
-      cy.findByLabelText('link').should('not.exist');
-    });
-  });
-
-  describe('Custom style editable rich text editor ', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: (
-          <RichTextEditor
-            editable
-            minInputHeight={200}
-            namespace="CypressComponentTest"
-            placeholder="Type Cypress test..."
-          />
-        )
-      });
-    });
-    it('displays editor with custom namespace', () => {
-      cy.get('#CypressComponentTest > p').should('be.exist');
-      cy.get('[data-testid="CypressComponentTest"]').should('be.exist');
-    });
-
-    it('displays editor with custom placeholder', () => {
-      cy.get('#CypressComponentTest > p').contains('Type Cypress test...');
-    });
-
-    it('displays editor with custom minimum input height', () => {
-      cy.get('[data-testid="CypressComponentTest"]').should(
-        'have.css',
-        'min-height',
-        '200px'
-      );
-    });
-  });
-});

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts

@@ -1,51 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  button: {
-    height: '100%',
-    padding: theme.spacing(0, 0.5)
-  },
-  buttonContent: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex'
-  },
-  containerDates: {
-    display: 'flex',
-    gap: theme.spacing(0.5),
-    [theme.breakpoints.down('sm')]: {
-      columnGap: theme.spacing(0.5),
-      flexDirection: 'column'
-    }
-  },
-  date: {
-    minWidth: theme.spacing(12.5),
-    textAlign: 'start'
-  },
-  error: {
-    textAlign: 'center'
-  },
-  label: {
-    minWidth: theme.spacing(3),
-    textAlign: 'start'
-  },
-
-  picker: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
-    justifyItems: 'center',
-    padding: theme.spacing(1, 2)
-  },
-  timeContainer: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    flexDirection: 'row',
-    [theme.breakpoints.down('sm')]: {
-      alignItems: 'flex-start'
-    }
-  }
-}));
-
-export default useStyles;

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

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

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

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

@@ -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'
-}