@centreon/ui 23.10.121 → 24.4.0

package/src/InputField/Text/index.tsx

@@ -4,51 +4,49 @@ import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
-  TextField as MuiTextField,
+  Box,
   InputAdornment,
+  TextField as MuiTextField,
   TextFieldProps,
   Theme,
   Tooltip,
-  Typography,
-  Box
+  Typography
 } from '@mui/material';
 
 import { getNormalizedId } from '../../utils';
 
 import useAutoSize from './useAutoSize';
 
-const useStyles = makeStyles<{ displayAsBlock: boolean }>()(
-  (theme: Theme, { displayAsBlock }) => ({
-    autoSizeCompact: {
-      paddingRight: theme.spacing(1),
-      paddingTop: theme.spacing(0.6)
-    },
-    hiddenText: {
-      display: 'table',
-      lineHeight: 0,
-      transform: 'scaleY(0)'
-    },
-    input: {
-      fontSize: theme.typography.body1.fontSize
-    },
-    inputBase: {
-      display: displayAsBlock ? 'block' : 'inline-flex',
-      justifyItems: 'start',
-      paddingRight: theme.spacing(1)
-    },
-    noLabelInput: {
-      padding: theme.spacing(1)
-    },
-    textField: {
-      transition: theme.transitions.create(['width'], {
-        duration: theme.transitions.duration.shortest
-      })
-    },
-    transparent: {
-      backgroundColor: 'transparent'
-    }
-  })
-);
+const useStyles = makeStyles()((theme: Theme) => ({
+  autoSizeCompact: {
+    paddingRight: theme.spacing(1),
+    paddingTop: theme.spacing(0.6)
+  },
+  hiddenText: {
+    display: 'table',
+    lineHeight: 0,
+    transform: 'scaleY(0)'
+  },
+  input: {
+    fontSize: theme.typography.body1.fontSize
+  },
+  inputBase: {
+    display: 'inline-flex',
+    justifyItems: 'start',
+    paddingRight: theme.spacing(1)
+  },
+  noLabelInput: {
+    padding: theme.spacing(1)
+  },
+  textField: {
+    transition: theme.transitions.create(['width'], {
+      duration: theme.transitions.duration.shortest
+    })
+  },
+  transparent: {
+    backgroundColor: 'transparent'
+  }
+}));
 
 interface OptionalLabelInputAdornmentProps {
   children: React.ReactNode;
@@ -72,7 +70,7 @@ const OptionalLabelInputAdornment = ({
 
 type SizeVariant = 'large' | 'medium' | 'small' | 'compact';
 
-export type Props = {
+export type TextProps = {
   EndAdornment?: React.FC;
   StartAdornment?: React.FC;
   ariaLabel?: string;
@@ -80,11 +78,13 @@ export type Props = {
   autoSizeCustomPadding?: number;
   autoSizeDefaultWidth?: number;
   className?: string;
+  containerClassName?: string;
   dataTestId: string;
   debounced?: boolean;
   displayErrorInTooltip?: boolean;
   error?: string;
   externalValueForAutoSize?: string;
+  forceUncontrolled?: boolean;
   open?: boolean;
   required?: boolean;
   size?: SizeVariant;
@@ -112,17 +112,20 @@ const TextField = forwardRef(
       autoSizeCustomPadding,
       defaultValue,
       required = false,
+      containerClassName,
+      type,
+      forceUncontrolled,
       ...rest
-    }: Props,
+    }: TextProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ): JSX.Element => {
-    const { classes, cx } = useStyles({
-      displayAsBlock: autoSize && isNil(StartAdornment) && isNil(EndAdornment)
-    });
+    const { classes, cx } = useStyles();
 
     const { inputRef, width, changeInputValue, innerValue } = useAutoSize({
       autoSize,
-      autoSizeCustomPadding,
+      autoSizeCustomPadding: equals(type, 'number')
+        ? Math.max(6, autoSizeCustomPadding || 0)
+        : autoSizeCustomPadding,
       autoSizeDefaultWidth,
       value: externalValueForAutoSize || rest.value
     });
@@ -130,7 +133,7 @@ const TextField = forwardRef(
     const tooltipTitle = displayErrorInTooltip && !isNil(error) ? error : '';
 
     const getValueProps = useCallback((): object => {
-      if (debounced) {
+      if (debounced || forceUncontrolled) {
         return {};
       }
 
@@ -139,10 +142,13 @@ const TextField = forwardRef(
       }
 
       return { value: innerValue };
-    }, [innerValue, debounced, defaultValue]);
+    }, [innerValue, debounced, defaultValue, forceUncontrolled]);
 
     return (
-      <Box sx={{ width: autoSize ? 'auto' : '100%' }}>
+      <Box
+        className={containerClassName}
+        sx={{ width: autoSize ? 'auto' : '100%' }}
+      >
         <Tooltip placement="top" title={tooltipTitle}>
           <MuiTextField
             data-testid={dataTestId}
@@ -150,9 +156,9 @@ const TextField = forwardRef(
             helperText={displayErrorInTooltip ? undefined : error}
             id={getNormalizedId(dataTestId || '')}
             inputProps={{
-              ...rest.inputProps,
               'aria-label': ariaLabel,
-              'data-testid': dataTestId
+              'data-testid': dataTestId,
+              ...rest.inputProps
             }}
             label={label}
             ref={ref}
@@ -191,6 +197,7 @@ const TextField = forwardRef(
               width: autoSize ? width : undefined,
               ...rest?.sx
             }}
+            type={type}
           />
         </Tooltip>
         {autoSize && (

package/src/Listing/ActionBar/index.tsx

@@ -9,10 +9,9 @@ import Divider from '@mui/material/Divider';
 
 import { userAtom, ListingVariant } from '@centreon/ui-context';
 
-import { ListingProps } from '../..';
+import { ListingProps, IconButton } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
 import { useMemoComponent } from '../../utils';
-import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';
 import PaginationActions from './PaginationActions';
@@ -29,6 +28,7 @@ const useStyles = makeStyles<StyleProps>()(
       paddingLeft: theme.spacing(1)
     },
     actions: {
+      flex: 1,
       padding: theme.spacing(1, 0)
     },
     container: {
@@ -175,14 +175,15 @@ const MemoListingActionBar = ({
               </IconButton>
             )}
           <div className={classes.ModeViewer} />
-          {columnConfiguration?.selectedColumnIds && (
-            <ColumnMultiSelect
-              columnConfiguration={columnConfiguration}
-              columns={columns}
-              onResetColumns={onResetColumns}
-              onSelectColumns={onSelectColumns}
-            />
-          )}
+          {columnConfiguration?.selectedColumnIds &&
+            columnConfiguration?.sortable && (
+              <ColumnMultiSelect
+                columnConfiguration={columnConfiguration}
+                columns={columns}
+                onResetColumns={onResetColumns}
+                onSelectColumns={onSelectColumns}
+              />
+            )}
           {paginated && (
             <StyledPagination
               ActionsComponent={PaginationActions}

package/src/Listing/Cell/DataCell.styles.ts

@@ -8,6 +8,9 @@ const useStyles = makeStyles()((theme) => ({
     overflow: 'hidden',
     whiteSpace: 'nowrap'
   },
+  clickable: {
+    cursor: 'default'
+  },
   componentColumn: {
     width: theme.spacing(2.75)
   },

package/src/Listing/Cell/DataCell.tsx

@@ -46,7 +46,7 @@ const DataCell = ({
   labelCollapse,
   labelExpand
 }: Props): JSX.Element | null => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const { dataStyle } = useStyleTable({ listingVariant });
 
   const commonCellProps = {
@@ -64,7 +64,7 @@ const DataCell = ({
 
   const cellByColumnType = {
     [ColumnType.string]: (): JSX.Element => {
-      const { getFormattedString, isTruncated, getColSpan } = column;
+      const { getFormattedString, isTruncated, getColSpan, align } = column;
 
       const colSpan = getColSpan?.(isRowSelected);
 
@@ -87,6 +87,7 @@ const DataCell = ({
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
           style={{
+            alignItems: align,
             gridColumn
           }}
           {...commonCellProps}
@@ -99,7 +100,7 @@ const DataCell = ({
       );
     },
     [ColumnType.component]: (): JSX.Element | null => {
-      const { getHiddenCondition, clickable } = column;
+      const { getHiddenCondition, clickable, align } = column;
       const Component = column.Component as (
         props: ComponentColumnProps
       ) => JSX.Element;
@@ -107,14 +108,31 @@ const DataCell = ({
       const isCellHidden = getHiddenCondition?.(isRowSelected);
 
       if (isCellHidden) {
-        return null;
+        return (
+          <Cell
+            className={classes.cell}
+            isRowHighlighted={isRowHighlighted}
+            listingVariant={listingVariant}
+            onClick={(e): void => {
+              if (!clickable) {
+                return;
+              }
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            {...commonCellProps}
+          />
+        );
       }
 
       return (
         <Cell
-          className={classes.cell}
+          className={cx(classes.cell, clickable && classes.clickable)}
           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,4 +1,8 @@
-import { Button } from '@mui/material';
+import { useState } from 'react';
+
+import { Button, Typography } from '@mui/material';
+
+import { ListingVariant } from '@centreon/ui-context';
 
 import { ColumnType } from './models';
 
@@ -12,20 +16,26 @@ const ButtonColumn = ({ row }: Props): JSX.Element => (
   <Button size="small">Click to reveal details about {row.name}</Button>
 );
 
-const generateSubItems = (parentIndex: number): Array<unknown> => {
+const LargeText = (): JSX.Element => (
+  <Typography sx={{ whiteSpace: 'normal' }}>
+    This is a large text that fills the content
+  </Typography>
+);
+
+const tenElements = new Array(10).fill(0);
+
+const generateSubItems = (): Array<unknown> => {
   return tenElements.map((__, subIndex) => ({
     active: false,
-    description: `Sub item ${subIndex + (parentIndex + 10) * 10} description`,
+    description: `Sub item ${subIndex * 10} description`,
     disableCheckbox: false,
     disableRow: false,
-    id: subIndex + (parentIndex + 10) * 10,
-    name: `Sub Item ${subIndex + (parentIndex + 10) * 10}`,
+    id: subIndex * 10,
+    name: `Sub Item ${subIndex * 10}`,
     selected: false
   }));
 };
 
-const tenElements = new Array(10).fill(0);
-
 const listingWithSubItems = tenElements.map((_, index) => ({
   active: false,
   description: `Entity ${index}`,
@@ -34,9 +44,44 @@ const listingWithSubItems = tenElements.map((_, index) => ({
   id: index,
   name: `E${index}`,
   selected: false,
-  subItems: index % 2 === 0 ? generateSubItems(index) : undefined
+  subItems: index % 2 === 0 ? generateSubItems() : undefined
 }));
 
+const listingWithSubItems3Rows = Array(3)
+  .fill(0)
+  .map((_, index) => ({
+    active: false,
+    description: `Entity ${index}`,
+    disableCheckbox: false,
+    disableRow: false,
+    id: index,
+    name: `E${index}`,
+    selected: false,
+    subItems: index % 2 === 0 ? generateSubItems() : 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,
@@ -62,25 +107,19 @@ const columnsWithSubItems = [
 
 const expandedItems = [0, 8];
 
-const mountListing = (): void => {
+const mountListingResponsive = (listingVariant: ListingVariant): void => {
   cy.viewport('macbook-13');
 
   cy.mount({
     Component: (
       <div style={{ height: '100vh' }}>
         <Listing
-          checkable
-          columns={columnsWithSubItems}
+          isResponsive
+          columns={defaultColumn}
           currentPage={1}
           limit={10}
+          listingVariant={listingVariant}
           rows={listingWithSubItems}
-          subItems={{
-            canCheckSubItems: false,
-            enable: true,
-            labelCollapse: 'Collapse',
-            labelExpand: 'Expand',
-            rowProperty: 'subItems'
-          }}
           totalRows={10}
         />
       </div>
@@ -88,34 +127,180 @@ const mountListing = (): void => {
   });
 };
 
+interface TestComponentProps {
+  canCheckSubItems?: boolean;
+  isSmallListing?: boolean;
+}
+
+const TestComponent = ({
+  isSmallListing = false,
+  canCheckSubItems = false
+}: TestComponentProps): JSX.Element => {
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  return (
+    <Listing
+      checkable
+      columns={columnsWithSubItems}
+      currentPage={1}
+      limit={10}
+      rows={isSmallListing ? listingWithSubItems3Rows : listingWithSubItems}
+      selectedRows={selectedRows}
+      subItems={{
+        canCheckSubItems,
+        enable: true,
+        getRowProperty: () => 'subItems',
+        labelCollapse: 'Collapse',
+        labelExpand: 'Expand'
+      }}
+      totalRows={10}
+      onSelectRows={setSelectedRows}
+    />
+  );
+};
+
+const mountListingForSubItems = ({
+  isSmallListing = false,
+  canCheckSubItems = false
+}: TestComponentProps): void => {
+  cy.viewport('macbook-13');
+
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh' }}>
+        <TestComponent
+          canCheckSubItems={canCheckSubItems}
+          isSmallListing={isSmallListing}
+        />
+      </div>
+    )
+  });
+};
+
 describe('Listing', () => {
-  beforeEach(mountListing);
+  describe('Sub items', () => {
+    it('expands the row when the corresponding icon is clicked', () => {
+      mountListingForSubItems({});
 
-  it('expands the row when the corresponding icon si clicked', () => {
-    cy.contains('E0').should('be.visible');
+      cy.contains('E0').should('be.visible');
 
-    expandedItems.forEach((index) => {
-      const subItems = generateSubItems(index);
+      expandedItems.forEach((index) => {
+        const subItems = generateSubItems(index);
 
-      cy.findByLabelText(`Expand ${index}`).click();
+        cy.findByLabelText(`Expand ${index}`).click();
 
-      cy.findByLabelText(`Collapse ${index}`).should('exist');
+        cy.findByLabelText(`Collapse ${index}`).should('exist');
 
-      subItems.forEach(({ name, description }) => {
-        cy.contains(name).should('exist');
-        cy.contains(description).should('exist');
+        subItems.forEach(({ name, description }) => {
+          cy.contains(name).should('exist');
+          cy.contains(description).should('exist');
+        });
+
+        cy.findByLabelText(`Collapse ${index}`).click();
       });
+
+      cy.makeSnapshot();
     });
 
-    cy.makeSnapshot();
+    it('collapses the row when the corresponding icon is clicked', () => {
+      mountListingForSubItems({});
+
+      cy.findByLabelText(`Expand 0`).click();
+
+      cy.contains('Sub item 10').should('be.visible');
+
+      cy.findByLabelText('Collapse 0').click();
+
+      cy.contains('Sub item 10').should('not.exist');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays only one row as hovered when mutilple rows are expanded and a sub item row is hovered', () => {
+      mountListingForSubItems({ isSmallListing: true });
+
+      cy.findByLabelText('Expand 2').click();
+      cy.findByLabelText('Expand 0').click();
+
+      cy.findByLabelText('Collapse 0').should('be.visible');
+      cy.findByLabelText('Collapse 2').should('be.visible');
+
+      cy.contains('Sub Item 0').realHover();
+
+      cy.get('[data-isHovered="true"]').should('have.length', 1);
+      cy.get('[data-isHovered="true"]').contains('Sub Item 0').should('exist');
+
+      cy.findByLabelText('Collapse 0').click();
+      cy.findByLabelText('Collapse 2').click();
+    });
+
+    it('selects displayed rows when a row is selected and another row is selected with the shift key', () => {
+      mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
+
+      cy.findByLabelText('Expand 0').click();
+
+      cy.findByLabelText('Collapse 0').should('be.visible');
+
+      cy.findAllByLabelText('Select row 0').eq(0).click();
+      cy.get('body').type('{shift}', { release: false });
+      cy.findByLabelText('Select row 50').eq(0).click();
+
+      cy.findAllByLabelText('Select row 0').eq(0).should('be.checked');
+      cy.findAllByLabelText('Select row 0').eq(1).should('be.checked');
+      cy.findByLabelText('Select row 10').should('be.checked');
+      cy.findByLabelText('Select row 20').should('be.checked');
+      cy.findByLabelText('Select row 30').should('be.checked');
+      cy.findByLabelText('Select row 40').should('be.checked');
+      cy.findByLabelText('Select row 50').should('be.checked');
+
+      cy.findByLabelText('Collapse 0').click();
+    });
+
+    it('selects displayed rows when the corresponding checkbox is clicked', () => {
+      mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
+
+      cy.findByLabelText('Expand 0').click();
+
+      cy.findByLabelText('Collapse 0').should('be.visible');
+
+      cy.findAllByLabelText('Select all').eq(0).click();
+
+      cy.findAllByLabelText('Select row 0').eq(0).should('be.checked');
+      tenElements.forEach((_, index) => {
+        if (index === 0) {
+          cy.findAllByLabelText('Select row 0').eq(1).should('be.checked');
+
+          return;
+        }
+        cy.findByLabelText(`Select row ${index * 10}`).should('be.checked');
+      });
+      cy.findByLabelText('Select row 1').should('be.checked');
+      cy.findByLabelText('Select row 2').should('be.checked');
+
+      cy.findByLabelText('Collapse 0').click();
+    });
   });
 
-  it('collapses the row when the corresponding icon si clicked', () => {
-    cy.contains('Sub item 100').should('be.visible');
+  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();
+  });
 
-    cy.findByLabelText('Collapse 0').click();
+  it('displays the last column on several lines in extended mode when the isResponsive prop is set', () => {
+    mountListingResponsive(ListingVariant.extended);
 
-    cy.contains('Sub item 100').should('not.exist');
+    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,7 +1,5 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { ListingVariant } from '@centreon/ui-context';
-
 import { TableStyleAtom as TableStyle } from './models';
 
 const loadingIndicatorHeight = 3;
@@ -9,13 +7,12 @@ const loadingIndicatorHeight = 3;
 interface StylesProps {
   dataStyle: TableStyle;
   getGridTemplateColumn: string;
-  limit: number;
-  listingVariant: ListingVariant;
+  isResponsive: string;
   rows: Array<unknown>;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
+  (theme, { dataStyle, getGridTemplateColumn, rows, isResponsive }) => ({
     actionBar: {
       alignItems: 'center',
       display: 'flex'
@@ -56,8 +53,8 @@ const useListingStyles = makeStyles<StylesProps>()(
       display: 'grid',
       gridTemplateColumns: getGridTemplateColumn,
       gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length || limit
-      }, ${dataStyle.body.height}px)`,
+        rows?.length || 1
+      }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,
       position: 'relative'
     },
     tableBody: {

package/src/Listing/Row/Row.tsx

@@ -197,7 +197,7 @@ const Row = memo<RowProps>(
   }
 );
 
-const IntersectionRow = (props: Props): JSX.Element => {
+const IntersectionRow = ({ isHovered, ...rest }: Props): JSX.Element => {
   const rowRef = useRef<HTMLDivElement | null>(null);
   const theme = useTheme();
   const { isInViewport, setElement } = useViewportIntersection({
@@ -214,8 +214,12 @@ const IntersectionRow = (props: Props): JSX.Element => {
   }, [getFirstCellElement()]);
 
   return (
-    <div className={classes.intersectionRow} ref={rowRef}>
-      <Row {...props} isInViewport={isInViewport} />
+    <div
+      className={classes.intersectionRow}
+      data-isHovered={isHovered}
+      ref={rowRef}
+    >
+      <Row {...rest} isHovered={isHovered} isInViewport={isInViewport} />
     </div>
   );
 };