@centreon/ui 23.10.42 → 23.10.44

package/src/Listing/ListingDocs.mdx

@@ -1,61 +0,0 @@
-{/* ListingDocs.mdx */}
-
-import { Meta, Story } from '@storybook/blocks';
-import * as ListingStories from './index.stories';
-
-<Meta of={ListingStories} />
-
-# Listing
-
-## Expand/collapse rows
-
-The listing supports rows expanding and collapsing.
-
-In order to use this feature, please follow the instructions:
-- (pre-requisite): Your data should have a child property that contains sub-items.
-```javascript
-[
-  {
-    "id": 1,
-    "festival": "Test",
-    "name": "Tom",
-    "counter": 3,
-    "description": "My description of Tom"
-  },
-  {
-    "id": 2,
-    "name": "Jane's group",
-    "festival": "fest",
-    "counter": 5,
-    "description": "My description of Jane's group",
-    "subItems": [
-      {
-        "id": 3,
-        "name": "Jane",
-        "counter": 0,
-        "description": "My description of Jane"
-      },
-    ]
-  }
-]
-```
-- Use the `subItems` property to configure how the component will handle your sub-items
-```javascript
-subItems={{
-  canCheckSubItems: false, // Display checkbox on sub items. Default: false
-  enable: true, // It enables or disable the row expand/collapse feature. Default: false
-  rowProperty: 'subItems' // Which property should be used to detect sub-items. Default: ''
-  labelExpand: 'Expand',
-  labelCollapse: 'Collapse'
-}}
-```
-- Finally, update the column configuration in order to display the expand/collapse caret
-```javascript
-{
-  Component: ButtonColumn,
-  displaySubItemsCaret: true, // Add this property
-  id: '#',
-  label: 'Custom',
-  type: ColumnType.component
-}
-```

package/src/Listing/Row/EmptyRow.styles.ts

@@ -1,14 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()(() => ({
-  emptyDataCell: {
-    flexDirection: 'column',
-    gridColumn: 'auto / -1',
-    justifyContent: 'center'
-  },
-  emptyDataRow: {
-    display: 'contents'
-  }
-}));
-
-export { useStyles };

package/src/Listing/Row/EmptyRow.tsx

@@ -1,30 +0,0 @@
-import { ReactNode } from 'react';
-
-import { TableRow } from '@mui/material';
-
-import Cell from '../Cell';
-
-import { useStyles } from './EmptyRow.styles';
-
-interface EmptyRowProps {
-  children: ReactNode;
-}
-
-const EmptyRow = ({ children }: EmptyRowProps): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <TableRow className={classes.emptyDataRow} component="div" tabIndex={-1}>
-      <Cell
-        align="center"
-        className={classes.emptyDataCell}
-        disableRowCondition={(): boolean => false}
-        isRowHovered={false}
-      >
-        {children}
-      </Cell>
-    </TableRow>
-  );
-};
-
-export { EmptyRow };

package/src/Listing/Row/SkeletonLoaderRows.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import LoadingSkeleton from '../../LoadingSkeleton';
-
-import { EmptyRow } from './EmptyRow';
-
-interface SkeletonLoaderProps {
-  rows?: number;
-}
-
-const SkeletonLoader = ({ rows = 10 }: SkeletonLoaderProps): JSX.Element => (
-  <>
-    {[...Array(rows)].map((_v, i) => (
-      <EmptyRow
-        key={`skeleton-row-${i}`} // eslint-disable-line react/no-array-index-key
-      >
-        <LoadingSkeleton variant="text" width="100%" />
-      </EmptyRow>
-    ))}
-  </>
-);
-
-export { SkeletonLoader };

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;