@centreon/ui 24.4.46 → 24.4.48

package/src/Listing/Cell/DataCell.tsx

@@ -46,7 +46,7 @@ const DataCell = ({
   labelCollapse,
   labelExpand
 }: Props): JSX.Element | null => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
   const { dataStyle } = useStyleTable({ listingVariant });
 
   const commonCellProps = {
@@ -64,7 +64,7 @@ const DataCell = ({
 
   const cellByColumnType = {
     [ColumnType.string]: (): JSX.Element => {
-      const { getFormattedString, isTruncated, getColSpan, align } = column;
+      const { getFormattedString, isTruncated, getColSpan } = column;
 
       const colSpan = getColSpan?.(isRowSelected);
 
@@ -87,7 +87,6 @@ const DataCell = ({
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
           style={{
-            alignItems: align,
             gridColumn
           }}
           {...commonCellProps}
@@ -100,7 +99,7 @@ const DataCell = ({
       );
     },
     [ColumnType.component]: (): JSX.Element | null => {
-      const { getHiddenCondition, clickable, align } = column;
+      const { getHiddenCondition, clickable } = column;
       const Component = column.Component as (
         props: ComponentColumnProps
       ) => JSX.Element;
@@ -108,31 +107,14 @@ const DataCell = ({
       const isCellHidden = getHiddenCondition?.(isRowSelected);
 
       if (isCellHidden) {
-        return (
-          <Cell
-            className={classes.cell}
-            isRowHighlighted={isRowHighlighted}
-            listingVariant={listingVariant}
-            onClick={(e): void => {
-              if (!clickable) {
-                return;
-              }
-              e.preventDefault();
-              e.stopPropagation();
-            }}
-            {...commonCellProps}
-          />
-        );
+        return null;
       }
 
       return (
         <Cell
-          className={cx(classes.cell, clickable && classes.clickable)}
+          className={classes.cell}
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
-          style={{
-            alignItems: align
-          }}
           onClick={(e): void => {
             if (!clickable) {
               return;

package/src/Listing/Header/ListingHeader.tsx

@@ -71,7 +71,7 @@ const ListingHeader = ({
   });
 
   const getColumnById = (id: string): Column => {
-    return find(propEq(id, 'id'), columns) as Column;
+    return find(propEq('id', id), columns) as Column;
   };
 
   const Content = React.useCallback(

package/src/Listing/Listing.cypress.spec.tsx

@@ -1,6 +1,4 @@
-import { Button, Typography } from '@mui/material';
-
-import { ListingVariant } from '@centreon/ui-context';
+import { Button } from '@mui/material';
 
 import { ColumnType } from './models';
 
@@ -14,12 +12,6 @@ const ButtonColumn = ({ row }: Props): JSX.Element => (
   <Button size="small">Click to reveal details about {row.name}</Button>
 );
 
-const LargeText = (): JSX.Element => (
-  <Typography sx={{ whiteSpace: 'normal' }}>
-    This is a large text that fills the content
-  </Typography>
-);
-
 const generateSubItems = (parentIndex: number): Array<unknown> => {
   return tenElements.map((__, subIndex) => ({
     active: false,
@@ -45,28 +37,6 @@ const listingWithSubItems = tenElements.map((_, index) => ({
   subItems: index % 2 === 0 ? generateSubItems(index) : undefined
 }));
 
-const defaultColumn = [
-  {
-    getFormattedString: ({ name }): string => name,
-    id: 'name',
-    label: 'Name',
-    type: ColumnType.string
-  },
-  {
-    getFormattedString: ({ description }): string => description,
-    id: 'description',
-    label: 'Description',
-    type: ColumnType.string
-  },
-  {
-    Component: LargeText,
-    id: '#',
-    label: 'Custom',
-    type: ColumnType.component,
-    width: '100px'
-  }
-];
-
 const columnsWithSubItems = [
   {
     getFormattedString: ({ name }): string => name,
@@ -92,27 +62,7 @@ const columnsWithSubItems = [
 
 const expandedItems = [0, 8];
 
-const mountListingResponsive = (listingVariant: ListingVariant): void => {
-  cy.viewport('macbook-13');
-
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh' }}>
-        <Listing
-          isResponsive
-          columns={defaultColumn}
-          currentPage={1}
-          limit={10}
-          listingVariant={listingVariant}
-          rows={listingWithSubItems}
-          totalRows={10}
-        />
-      </div>
-    )
-  });
-};
-
-const mountListingForSubItems = (): void => {
+const mountListing = (): void => {
   cy.viewport('macbook-13');
 
   cy.mount({
@@ -139,9 +89,9 @@ const mountListingForSubItems = (): void => {
 };
 
 describe('Listing', () => {
-  it('expands the row when the corresponding icon si clicked', () => {
-    mountListingForSubItems();
+  beforeEach(mountListing);
 
+  it('expands the row when the corresponding icon si clicked', () => {
     cy.contains('E0').should('be.visible');
 
     expandedItems.forEach((index) => {
@@ -161,8 +111,6 @@ describe('Listing', () => {
   });
 
   it('collapses the row when the corresponding icon si clicked', () => {
-    mountListingForSubItems();
-
     cy.contains('Sub item 100').should('be.visible');
 
     cy.findByLabelText('Collapse 0').click();
@@ -171,28 +119,4 @@ describe('Listing', () => {
 
     cy.makeSnapshot();
   });
-
-  it('displays the last column on several lines in compact mode when the isResponsive prop is set', () => {
-    mountListingResponsive(ListingVariant.compact);
-
-    cy.get('.MuiTable-root').should(
-      'have.css',
-      'grid-template-rows',
-      '30px 85px 85px 85px 85px 85px 85px 85px 85px 85px 85px'
-    );
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the last column on several lines in extended mode when the isResponsive prop is set', () => {
-    mountListingResponsive(ListingVariant.extended);
-
-    cy.get('.MuiTable-root').should(
-      'have.css',
-      'grid-template-rows',
-      '38px 85px 85px 85px 85px 85px 85px 85px 85px 85px 85px'
-    );
-
-    cy.makeSnapshot();
-  });
 });

package/src/Listing/Listing.styles.ts

@@ -1,5 +1,7 @@
 import { makeStyles } from 'tss-react/mui';
 
+import { ListingVariant } from '@centreon/ui-context';
+
 import { TableStyleAtom as TableStyle } from './models';
 
 const loadingIndicatorHeight = 3;
@@ -7,12 +9,13 @@ const loadingIndicatorHeight = 3;
 interface StylesProps {
   dataStyle: TableStyle;
   getGridTemplateColumn: string;
-  isResponsive: string;
+  limit: number;
+  listingVariant: ListingVariant;
   rows: Array<unknown>;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows, isResponsive }) => ({
+  (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
     actionBar: {
       alignItems: 'center',
       display: 'flex'
@@ -53,8 +56,8 @@ const useListingStyles = makeStyles<StylesProps>()(
       display: 'grid',
       gridTemplateColumns: getGridTemplateColumn,
       gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length || 1
-      }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,
+        rows?.length || limit
+      }, ${dataStyle.body.height}px)`,
       position: 'relative'
     },
     tableBody: {

package/src/Listing/index.stories.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 const ComponentColumn = ({ row, isSelected }): JSX.Element => (
-  <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
+  <>
     <span>
       {'I am '}
       <b>{`${isSelected ? 'selected' : 'not selected'}`}</b>
@@ -50,7 +50,7 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
       {'I am '}
       <b>{`${row.active ? 'active' : 'not active'}`}</b>
     </span>
-  </div>
+  </>
 );
 
 const ButtonColumn = ({ row }): JSX.Element => (
@@ -366,16 +366,6 @@ const columnsWithSubItems = [
   }
 ];
 
-const TemplateSubItems = (args): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.listing}>
-      <Listing {...args} />
-    </div>
-  );
-};
-
 export const ListingWithSubItems = {
   args: {
     checkable: true,
@@ -392,29 +382,5 @@ export const ListingWithSubItems = {
       labelExpand: 'Expand'
     },
     totalRows: 10
-  },
-  render: TemplateSubItems
-};
-
-export const ListingWithResponsive = {
-  args: {
-    checkable: true,
-    columns: [
-      ...defaultColumns,
-      {
-        Component: ComponentColumn,
-        id: '##',
-        label: 'Responsive',
-        type: ColumnType.component,
-        width: '140px'
-      }
-    ],
-    currentPage: 1,
-    isResponsive: true,
-    limit: 10,
-    loading: false,
-    rows: listingWithSubItems,
-    totalRows: 10
-  },
-  render: TemplateSubItems
+  }
 };

package/src/Listing/index.test.tsx

@@ -216,7 +216,7 @@ describe('Listing', () => {
       <Listing
         columnConfiguration={{
           selectedColumnIds: columns.map(prop('id')),
-          sortable: true
+          sortable: false
         }}
         columns={columns}
         rows={rows}

package/src/Listing/index.tsx

@@ -69,7 +69,7 @@ const getVisibleColumns = ({
   }
 
   return selectedColumnIds.map((id) =>
-    columns.find(propEq(id, 'id'))
+    columns.find(propEq('id', id))
   ) as Array<Column>;
 };
 
@@ -102,7 +102,6 @@ export interface Props<TRow> {
   getId?: (row: TRow) => RowId;
   headerMemoProps?: Array<unknown>;
   innerScrollDisabled?: boolean;
-  isResponsive?: boolean;
   limit?: number;
   listingVariant?: ListingVariant;
   loading?: boolean;
@@ -148,7 +147,6 @@ const Listing = <TRow extends { id: RowId }>({
   columns,
   columnConfiguration = defaultColumnConfiguration,
   customPaginationClassName,
-  isResponsive = false,
   onResetColumns,
   onSelectColumns,
   rows = [],
@@ -235,7 +233,8 @@ const Listing = <TRow extends { id: RowId }>({
   const { classes } = useListingStyles({
     dataStyle,
     getGridTemplateColumn,
-    isResponsive,
+    limit,
+    listingVariant,
     rows: rowsToDisplay
   });
 

package/src/Listing/models.ts

@@ -15,7 +15,6 @@ export interface ComponentColumnProps {
 
 export interface Column {
   Component?: (props: ComponentColumnProps) => JSX.Element | null;
-  align?: 'start' | 'end' | 'center';
   clickable?: boolean;
   compact?: boolean;
   disablePadding?: boolean;

package/src/Module/index.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { Provider as JotaiProvider, createStore } from 'jotai';
 
 import { createGenerateClassName, StylesProvider } from '@mui/styles';
@@ -7,7 +9,7 @@ import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
 export interface ModuleProps {
   children: React.ReactElement;
-  maxSnackbars?: number;
+  maxSnackbars: number;
   seedName: string;
   store: ReturnType<typeof createStore>;
 }
@@ -15,7 +17,7 @@ export interface ModuleProps {
 const Module = ({
   children,
   seedName,
-  maxSnackbars = 3,
+  maxSnackbars,
   store
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({

package/src/RichTextEditor/RichTextEditor.tsx

@@ -12,7 +12,6 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { equals } from 'ramda';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { $generateHtmlFromNodes } from '@lexical/html';
 
 import { Typography } from '@mui/material';
 
@@ -39,7 +38,6 @@ export interface RichTextEditorProps {
   openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
-  setHtmlString?: (htmlString: string) => void;
   toolbarClassName?: string;
   toolbarPositions?: 'start' | 'end';
 }
@@ -145,7 +143,6 @@ const RichTextEditor = ({
   openLinkInNewTab = true,
   initialize,
   displayBlockButtons = true,
-  setHtmlString,
   toolbarClassName
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
@@ -181,13 +178,6 @@ const RichTextEditor = ({
     }
   };
 
-  const change = (state: EditorState, editor: LexicalEditor): void => {
-    editor.update(() => {
-      setHtmlString?.($generateHtmlFromNodes(editor, null));
-    });
-    getEditorState?.(state, editor);
-  };
-
   return (
     <LexicalComposer initialConfig={initialConfig}>
       <div className={classes.container}>
@@ -220,7 +210,6 @@ const RichTextEditor = ({
                 resetEditorToInitialStateCondition={
                   resetEditorToInitialStateCondition
                 }
-                setHtmlString={setHtmlString}
                 onBlur={onBlur}
               />
             }
@@ -229,7 +218,7 @@ const RichTextEditor = ({
           <HistoryPlugin />
           <LinkPlugin />
           <ListPlugin />
-          <OnChangePlugin onChange={change} />
+          <OnChangePlugin onChange={getEditorState} />
           <AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
           <FloatingLinkEditorPlugin
             editable={editable}

package/src/SortableItems/index.tsx

@@ -15,7 +15,11 @@ import {
   DragEndEvent,
   Over
 } from '@dnd-kit/core';
-import { SortableContext, SortingStrategy } from '@dnd-kit/sortable';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  SortingStrategy
+} from '@dnd-kit/sortable';
 import {
   equals,
   find,
@@ -113,6 +117,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
     useSensor(MouseSensor),
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
       keyboardCodes: {
         cancel: ['Escape'],
         end: ['Space', 'Enter'],
@@ -164,7 +169,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
   };
 
   const getItemById = (id): T | undefined =>
-    find(propEq(id, propertyToFilterItemsOn), items);
+    find(propEq(propertyToFilterItemsOn, id), items);
 
   const activeItem = getItemById(activeId) as Record<string, unknown>;
 

package/src/ThemeProvider/index.tsx

@@ -147,30 +147,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
-        ::-webkit-scrollbar {
-          height: ${theme.spacing(1)};
-          width: ${theme.spacing(1)};
-          background-color: transparent;
-        }
-        ::-webkit-scrollbar-thumb {
-          background-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          };
-          border-radius: ${theme.spacing(0.5)};
-        }
-        ::-webkit-scrollbar-thumb:hover {
-          background-color: ${theme.palette.primary.main};
-        }
-        * {
-          scrollbar-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          } ${theme.palette.background.default};
-          scrollbar-width: thin;
-        }
         html {
           margin: 0;
           padding: 0;

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

@@ -12,21 +12,22 @@ const useStyles = makeStyles()((theme) => ({
   },
   containerDates: {
     display: 'flex',
+    gap: theme.spacing(0.5),
     [theme.breakpoints.down('sm')]: {
-      flexDirection: 'column',
-      gap: theme.spacing(0.5)
+      columnGap: theme.spacing(0.5),
+      flexDirection: 'column'
     }
   },
   date: {
-    minWidth: theme.spacing(12),
+    minWidth: theme.spacing(12.5),
     textAlign: 'start'
   },
   error: {
     textAlign: 'center'
   },
   label: {
-    minWidth: theme.spacing(3.5),
-    textAlign: 'end'
+    minWidth: theme.spacing(3),
+    textAlign: 'start'
   },
 
   picker: {
@@ -38,7 +39,7 @@ const useStyles = makeStyles()((theme) => ({
   },
   timeContainer: {
     alignItems: 'center',
-    columnGap: theme.spacing(0.5),
+    columnGap: theme.spacing(1),
     display: 'flex',
     flexDirection: 'row',
     [theme.breakpoints.down('sm')]: {

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

@@ -2,15 +2,12 @@ import { useAtomValue } from 'jotai';
 import { makeStyles } from 'tss-react/mui';
 import { equals } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
 
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 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 {
@@ -23,9 +20,6 @@ import ErrorText from './ErrorText';
 import { PickersData, PickersStartEndDateDirection } from './models';
 import { PickersStartEndDateModel } from './usePickersStartEndDate';
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
 const useStyles = makeStyles()((theme) => ({
   error: {
     textAlign: 'center'
@@ -110,6 +104,7 @@ const PickersStartEndDate = ({
   direction = PickersStartEndDateDirection.column
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
+  const { Adapter } = useDateTimePickerAdapter();
 
   const { locale } = useAtomValue(userAtom);
   const error = useAtomValue(errorTimePeriodAtom);
@@ -131,7 +126,7 @@ const PickersStartEndDate = ({
   return (
     <LocalizationProvider
       adapterLocale={locale.substring(0, 2)}
-      dateAdapter={AdapterDayjs}
+      dateAdapter={Adapter}
     >
       <div className={styleContainer}>
         <PickerDateWithLabel

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

@@ -18,6 +18,8 @@ export interface PickersData {
   getError?: (value: boolean) => void;
   isDisabledEndPicker?: boolean;
   isDisabledStartPicker?: boolean;
+  onCloseEndPicker?: (isClosed: boolean) => void;
+  onCloseStartPicker?: (isClosed: boolean) => void;
   rangeEndDate?: RangeDate;
   rangeStartDate?: RangeDate;
 }