@centreon/ui 23.10.69 → 23.10.71

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -16,16 +16,18 @@ import {
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import useIntersectionObserver from '../../../../utils/useIntersectionObserver';
+import {
+  useDebounce,
+  useIntersectionObserver,
+  useDeepCompare
+} from '../../../../utils';
 import { ListingModel, SelectEntry } from '../../../..';
 import Option from '../../Option';
 import {
   ConditionsSearchParameter,
   SearchParameter
 } from '../../../../api/buildListingEndpoint/models';
-import useDebounce from '../../../../utils/useDebounce';
 import useFetchQuery from '../../../../api/useFetchQuery';
-import { useDeepCompare } from '../../../../utils/useMemoComponent';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
   conditionField?: keyof SelectEntry;
@@ -35,6 +37,7 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
+  queryKey?: string;
   searchConditions?: Array<ConditionsSearchParameter>;
 }
 
@@ -53,6 +56,7 @@ const ConnectedAutocompleteField = (
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
     displayOptionThumbnail,
+    queryKey,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -63,6 +67,9 @@ const ConnectedAutocompleteField = (
     const [searchParameter, setSearchParameter] = useState<
       SearchParameter | undefined
     >(undefined);
+
+    const [autocompleteChangedValue, setAutocompleteChangedValue] =
+      useState<Array<SelectEntry>>();
     const debounce = useDebounce({
       functionToDebounce: (value): void => {
         setSearchParameter(getSearchParameter(value));
@@ -84,10 +91,16 @@ const ConnectedAutocompleteField = (
           search: searchParameter
         });
       },
-      getQueryKey: () => [`autocomplete-${props.label}`, page, searchParameter],
+      getQueryKey: () => [
+        `autocomplete-${queryKey || props.label}`,
+        page,
+        searchParameter
+      ],
       isPaginated: true,
       queryOptions: {
+        cacheTime: 0,
         enabled: false,
+        staleTime: 0,
         suspense: false
       }
     });
@@ -272,6 +285,13 @@ const ConnectedAutocompleteField = (
       );
     }, useDeepCompare([searchConditions]));
 
+    useEffect(() => {
+      if (!autocompleteChangedValue && !props?.value) {
+        return;
+      }
+      setSearchParameter(undefined);
+    }, [autocompleteChangedValue, props?.value]);
+
     useEffect(() => {
       if (!optionsOpen) {
         return;
@@ -287,6 +307,7 @@ const ConnectedAutocompleteField = (
         open={optionsOpen}
         options={options}
         renderOption={renderOptions}
+        onChange={(_, value) => setAutocompleteChangedValue(value)}
         onClose={(): void => setOptionsOpen(false)}
         onOpen={(): void => setOptionsOpen(true)}
         onTextChange={changeText}

package/src/InputField/Select/Autocomplete/Draggable/index.stories.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
 import { isNil, not } from 'ramda';
-import withMock from 'storybook-addon-mock';
 
 import { Tooltip, Typography } from '@mui/material';
 
@@ -15,7 +14,6 @@ import MultiDraggableAutocompleteField from './Multi';
 import { ItemActionProps } from '.';
 
 export default {
-  decorators: [withMock],
   title: 'InputField/Autocomplete/Draggable'
 };
 

package/src/InputField/Select/Autocomplete/Multi/index.tsx

@@ -1,7 +1,7 @@
 import { includes, map, prop, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Chip } from '@mui/material';
+import { Chip, ChipProps } from '@mui/material';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import Autocomplete, { Props as AutocompleteProps } from '..';
@@ -18,7 +18,6 @@ const useStyles = makeStyles()((theme) => ({
     width: theme.spacing(1.5)
   },
   tag: {
-    backgroundColor: theme.palette.divider,
     fontSize: theme.typography.caption.fontSize
   }
 }));
@@ -33,13 +32,20 @@ export interface Props
       UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
       'multiple'
     > {
+  chipProps?: ChipProps;
   disableSortedOptions?: boolean;
+  getTagLabel?: (option) => string;
+  optionProperty?: string;
 }
 
 const MultiAutocompleteField = ({
   value,
   options,
   disableSortedOptions = false,
+  optionProperty = 'name',
+  getOptionLabel = (option): string => option.name,
+  getTagLabel = (option): string => option[optionProperty],
+  chipProps,
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
@@ -52,9 +58,10 @@ const MultiAutocompleteField = ({
           root: classes.tag
         }}
         key={option.id}
-        label={option.name}
+        label={getTagLabel(option)}
         size="medium"
         {...getTagProps({ index })}
+        {...chipProps}
       />
     ));
 
@@ -84,7 +91,7 @@ const MultiAutocompleteField = ({
           key={option.id}
           {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
         >
-          <Option checkboxSelected={selected}>{option.name}</Option>
+          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
         </li>
       )}
       renderTags={renderTags}

package/src/InputField/Select/Autocomplete/index.stories.tsx

@@ -85,7 +85,7 @@ const AutoSizeAutocompleteField = ({
   endAdornment,
   customPadding
 }: AutoSizeAutocompleteFieldProps): JSX.Element => {
-  const [value, setValue] = React.useState(autoSizeOptions[1]);
+  const [value, setValue] = React.useState(null);
 
   const change = (_, newValue): void => {
     setValue(newValue);
@@ -108,12 +108,3 @@ const AutoSizeAutocompleteField = ({
 export const autoSize = (): JSX.Element => {
   return <AutoSizeAutocompleteField />;
 };
-
-export const autoSizeWithCustomPadding = (): JSX.Element => {
-  return (
-    <AutoSizeAutocompleteField
-      customPadding={5}
-      endAdornment={<EndAdornment />}
-    />
-  );
-};

package/src/InputField/Select/Autocomplete/index.tsx

@@ -20,7 +20,7 @@ import Option from '../Option';
 import TextField from '../../Text';
 import { SelectEntry } from '..';
 import { searchLabel } from '../../translatedLabels';
-import getNormalizedId from '../../../utils/getNormalizedId';
+import { getNormalizedId } from '../../../utils';
 
 export type Props = {
   autoFocus?: boolean;
@@ -32,6 +32,7 @@ export type Props = {
   displayPopupIcon?: boolean;
   endAdornment?: React.ReactElement;
   error?: string;
+  getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
   label: string;
   loading?: boolean;
@@ -158,6 +159,7 @@ const AutocompleteField = ({
   autoSize = false,
   autoSizeDefaultWidth = 0,
   autoSizeCustomPadding,
+  getOptionItemLabel = (option) => option.name,
   ...autocompleteProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ hideInput });
@@ -193,6 +195,7 @@ const AutocompleteField = ({
           </>
         ),
         style: {
+          background: 'transparent',
           paddingRight: theme.spacing(5)
         }
       }}
@@ -249,7 +252,7 @@ const AutocompleteField = ({
             <Option
               thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
             >
-              {option.name}
+              {getOptionItemLabel(option)}
             </Option>
           </li>
         );

package/src/InputField/Select/index.tsx

@@ -13,7 +13,7 @@ import {
   Divider
 } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import Option from './Option';
 

package/src/InputField/Text/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useCallback } from 'react';
 
-import { isNil } from 'ramda';
+import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
@@ -9,17 +9,19 @@ import {
   TextFieldProps,
   Theme,
   Tooltip,
-  Typography
+  Typography,
+  Box
 } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import useAutoSize from './useAutoSize';
 
 const useStyles = makeStyles<{ displayAsBlock: boolean }>()(
   (theme: Theme, { displayAsBlock }) => ({
-    compact: {
-      fontSize: 'x-small'
+    autoSizeCompact: {
+      paddingRight: theme.spacing(1),
+      paddingTop: theme.spacing(0.6)
     },
     hiddenText: {
       display: 'table',
@@ -84,6 +86,7 @@ export type Props = {
   error?: string;
   externalValueForAutoSize?: string;
   open?: boolean;
+  required?: boolean;
   size?: SizeVariant;
   transparent?: boolean;
   value?: string;
@@ -108,6 +111,7 @@ const TextField = forwardRef(
       externalValueForAutoSize,
       autoSizeCustomPadding,
       defaultValue,
+      required = false,
       ...rest
     }: Props,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -138,7 +142,7 @@ const TextField = forwardRef(
     }, [innerValue, debounced, defaultValue]);
 
     return (
-      <>
+      <Box sx={{ width: autoSize ? 'auto' : '100%' }}>
         <Tooltip placement="top" title={tooltipTitle}>
           <MuiTextField
             data-testid={dataTestId}
@@ -160,11 +164,11 @@ const TextField = forwardRef(
               className: cx(
                 classes.inputBase,
                 {
-                  [classes.transparent]: transparent
+                  [classes.transparent]: transparent,
+                  [classes.autoSizeCompact]: autoSize && equals(size, 'compact')
                 },
                 className
               ),
-              disableUnderline: true,
               endAdornment: (
                 <OptionalLabelInputAdornment label={label} position="end">
                   {EndAdornment ? (
@@ -182,6 +186,7 @@ const TextField = forwardRef(
               ...rest.InputProps
             }}
             className={classes.textField}
+            required={required}
             sx={{
               width: autoSize ? width : undefined,
               ...rest?.sx
@@ -193,7 +198,7 @@ const TextField = forwardRef(
             {rest.value || externalValueForAutoSize || innerValue}
           </Typography>
         )}
-      </>
+      </Box>
     );
   }
 );

package/src/Listing/ActionBar/index.tsx

@@ -11,7 +11,7 @@ import { userAtom, ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
-import useMemoComponent from '../../utils/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';
@@ -86,7 +86,7 @@ type Props = Pick<
   | 'moveTablePagination'
   | 'widthToMoveTablePagination'
   | 'customPaginationClassName'
-  | 'viewMode'
+  | 'listingVariant'
   | 'viewerModeConfiguration'
 >;
 
@@ -107,7 +107,8 @@ const MemoListingActionBar = ({
   widthToMoveTablePagination = 550,
   actionsBarMemoProps = [],
   viewerModeConfiguration,
-  viewMode
+  listingVariant,
+  visualizationActions
 }: Props): JSX.Element => {
   const marginWidthTableListing = 30;
   const { classes, cx } = useStyles({
@@ -136,6 +137,7 @@ const MemoListingActionBar = ({
         <div className={classes.actions}>
           <div>{actions}</div>
         </div>
+        {visualizationActions && <div>{visualizationActions}</div>}
         <div className={classes.subContainer}>
           {!isEmpty(viewerModeConfiguration) &&
             !isNil(viewerModeConfiguration) && (
@@ -159,7 +161,10 @@ const MemoListingActionBar = ({
                     viewerModeConfiguration?.customStyle
                       ?.customStyleViewerModeIcon,
                     {
-                      [classes.mode]: equals(viewMode, ListingVariant.extended)
+                      [classes.mode]: equals(
+                        listingVariant,
+                        ListingVariant.extended
+                      )
                     }
                   )}
                 >
@@ -210,7 +215,7 @@ const MemoListingActionBar = ({
       currentPage,
       moveTablePagination,
       widthToMoveTablePagination,
-      viewMode,
+      listingVariant,
       themeMode,
       limit,
       pick(
@@ -240,8 +245,9 @@ const ListingActionBar = ({
   moveTablePagination,
   widthToMoveTablePagination,
   customPaginationClassName,
-  viewMode,
-  viewerModeConfiguration
+  listingVariant,
+  viewerModeConfiguration,
+  visualizationActions
 }: Props): JSX.Element | null => {
   if (
     not(paginated) &&
@@ -260,11 +266,12 @@ const ListingActionBar = ({
       currentPage={currentPage}
       customPaginationClassName={customPaginationClassName}
       limit={limit}
+      listingVariant={listingVariant}
       moveTablePagination={moveTablePagination}
       paginated={paginated}
       totalRows={totalRows}
-      viewMode={viewMode}
       viewerModeConfiguration={viewerModeConfiguration}
+      visualizationActions={visualizationActions}
       widthToMoveTablePagination={widthToMoveTablePagination}
       onLimitChange={onLimitChange}
       onPaginate={onPaginate}

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

@@ -0,0 +1,24 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  cell: {
+    alignItems: 'center',
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  },
+  componentColumn: {
+    width: theme.spacing(2.75)
+  },
+  rowNotHovered: {
+    color: theme.palette.text.secondary
+  },
+  text: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+}));
+
+export { useStyles };

package/src/Listing/Cell/DataCell.tsx

@@ -1,13 +1,11 @@
 import { memo } from 'react';
 
 import { equals, props } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 
 import { Tooltip } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import DraggableIcon from '../Header/SortableCell/DraggableIcon';
 import {
   Column,
   ColumnType,
@@ -17,46 +15,24 @@ import {
 import useStyleTable from '../useStyleTable';
 
 import EllipsisTypography from './EllipsisTypography';
+import { useStyles } from './DataCell.styles';
 
 import Cell from '.';
 
 interface Props {
-  areColumnsEditable: boolean;
   column: Column;
   disableRowCondition: (row) => boolean;
   getHighlightRowCondition?: (row) => boolean;
   isRowHovered: boolean;
   isRowSelected: boolean;
+  labelCollapse?: string;
+  labelExpand?: string;
+  listingVariant?: ListingVariant;
   row?;
   rowColorConditions?: Array<RowColorCondition>;
-  viewMode?: ListingVariant;
+  subItemsRowProperty?: string;
 }
 
-const useStyles = makeStyles()((theme) => ({
-  cell: {
-    alignItems: 'center',
-    backgroundColor: 'transparent',
-    display: 'flex',
-    height: '100%',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap'
-  },
-  componentColumn: {
-    width: theme.spacing(2.75)
-  },
-  headerCell: {
-    padding: theme.spacing(0, 0, 0, 1)
-  },
-  rowNotHovered: {
-    color: theme.palette.text.secondary
-  },
-  text: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }
-}));
-
 const DataCell = ({
   row,
   column,
@@ -64,19 +40,24 @@ const DataCell = ({
   isRowHovered,
   rowColorConditions,
   disableRowCondition,
-  viewMode,
+  listingVariant,
   getHighlightRowCondition,
-  areColumnsEditable
+  subItemsRowProperty,
+  labelCollapse,
+  labelExpand
 }: Props): JSX.Element | null => {
-  const { dataStyle } = useStyleTable({ viewMode });
   const { classes } = useStyles();
+  const { dataStyle } = useStyleTable({ listingVariant });
 
   const commonCellProps = {
-    align: 'left' as const,
     disableRowCondition,
+    displaySubItemsCaret: column.displaySubItemsCaret,
     isRowHovered,
+    labelCollapse,
+    labelExpand,
     row,
-    rowColorConditions
+    rowColorConditions,
+    subItemsRowProperty
   };
 
   const isRowHighlighted = getHighlightRowCondition?.(row);
@@ -102,20 +83,18 @@ const DataCell = ({
 
       return (
         <Cell
+          className={classes.cell}
           isRowHighlighted={isRowHighlighted}
+          listingVariant={listingVariant}
           style={{
             gridColumn
           }}
-          viewMode={viewMode}
           {...commonCellProps}
         >
           {isTruncated && (
             <Tooltip title={formattedString}>{typography}</Tooltip>
           )}
-          <>
-            {areColumnsEditable && <DraggableIcon />}
-            {!isTruncated && typography}
-          </>
+          {!isTruncated && typography}
         </Cell>
       );
     },
@@ -133,10 +112,11 @@ const DataCell = ({
 
       return (
         <Cell
+          className={classes.cell}
           isRowHighlighted={isRowHighlighted}
-          viewMode={viewMode}
+          listingVariant={listingVariant}
           onClick={(e): void => {
-            if (!clickable) {
+            if (!clickable && !column.displaySubItemsCaret) {
               return;
             }
             e.preventDefault();
@@ -144,31 +124,25 @@ const DataCell = ({
           }}
           {...commonCellProps}
         >
-          <>
-            {areColumnsEditable && (
-              <DraggableIcon className={classes.componentColumn} />
-            )}
-
-            <Component
-              isHovered={isRowHovered}
-              isSelected={isRowSelected}
-              renderEllipsisTypography={({
-                className,
-                formattedString
-              }): JSX.Element => {
-                return (
-                  <EllipsisTypography
-                    className={className}
-                    dataStyle={dataStyle}
-                    disableRowCondition={disableRowCondition(row)}
-                    formattedString={formattedString}
-                    isRowHovered={isRowHovered}
-                  />
-                );
-              }}
-              row={row}
-            />
-          </>
+          <Component
+            isHovered={isRowHovered}
+            isSelected={isRowSelected}
+            renderEllipsisTypography={({
+              className,
+              formattedString
+            }): JSX.Element => {
+              return (
+                <EllipsisTypography
+                  className={className}
+                  dataStyle={dataStyle}
+                  disableRowCondition={disableRowCondition(row)}
+                  formattedString={formattedString}
+                  isRowHovered={isRowHovered}
+                />
+              );
+            }}
+            row={row}
+          />
         </Cell>
       );
     }
@@ -248,7 +222,7 @@ const MemoizedDataCell = memo<Props>(
 
     // Explicitely prevent the component from rendering.
     if (nextRenderComponentCondition === false) {
-      return equals(prevProps.viewMode, nextProps.viewMode);
+      return equals(prevProps.listingVariant, nextProps.listingVariant);
     }
 
     const previousRowProps = previousRowMemoProps
@@ -259,6 +233,7 @@ const MemoizedDataCell = memo<Props>(
       : nextProps.row;
 
     return (
+      equals(prevProps.row, nextProps.row) &&
       equals(previousIsComponentHovered, nextIsComponentHovered) &&
       equals(prevProps.isRowHovered, nextProps.isRowHovered) &&
       equals(previousFormattedString, nextFormattedString) &&
@@ -280,8 +255,8 @@ const MemoizedDataCell = memo<Props>(
         nextProps.disableRowCondition(nextProps.row)
       ) &&
       equals(previousIsRowHighlighted, nextIsRowHighlighted) &&
-      equals(prevProps.viewMode, nextProps.viewMode) &&
-      equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable)
+      equals(prevProps.listingVariant, nextProps.listingVariant) &&
+      equals(prevProps.subItemsRowProperty, nextProps.subItemsRowProperty)
     );
   }
 );