@centreon/ui 24.10.12 → 24.10.13

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import {
   equals,
@@ -17,7 +17,7 @@ import {
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import { ListingModel, SelectEntry } from '../../../..';
+import { ListingMapModel, ListingModel, SelectEntry } from '../../../..';
 import {
   ConditionsSearchParameter,
   SearchParameter
@@ -30,13 +30,20 @@ import {
 } from '../../../../utils';
 import Option from '../../Option';
 
+interface OptionResult<T> {
+  result: Array<T>;
+  limit: number;
+  total: number;
+}
+
 export interface ConnectedAutoCompleteFieldProps<TData> {
   allowUniqOption?: boolean;
   baseEndpoint?: string;
   changeIdValue: (item: TData) => number | string;
-  conditionField?: keyof SelectEntry;
+  exclusionOptionProperty?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
+  decoder?;
   getRenderedOptionText: (option: TData) => string;
   getRequestHeaders?: HeadersInit;
   initialPage: number;
@@ -52,10 +59,11 @@ const ConnectedAutocompleteField = (
   const InnerConnectedAutocompleteField = <TData extends { name: string }>({
     initialPage = 1,
     getEndpoint,
+    decoder,
     field,
     labelKey,
     open,
-    conditionField = 'id',
+    exclusionOptionProperty = 'id',
     searchConditions = [],
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
@@ -89,8 +97,9 @@ const ConnectedAutocompleteField = (
     const theme = useTheme();
 
     const { fetchQuery, isFetching, prefetchNextPage } = useFetchQuery<
-      ListingModel<TData>
+      ListingModel<TData> | ListingMapModel<TData>
     >({
+      decoder,
       baseEndpoint,
       fetchHeaders: getRequestHeaders,
       getEndpoint: (params) => {
@@ -106,13 +115,39 @@ const ConnectedAutocompleteField = (
       ],
       isPaginated: true,
       queryOptions: {
-        cacheTime: 0,
+        gcTime: 0,
         enabled: false,
         staleTime: 0,
         suspense: false
       }
     });
 
+    const getOptionResult = useCallback(
+      (
+        newOptions: ListingModel<TData> | ListingMapModel<TData>
+      ): OptionResult<TData> => {
+        if ('result' in newOptions)
+          return {
+            result: newOptions.result || [],
+            total: newOptions.meta.total || 1,
+            limit: newOptions.meta.limit || 1
+          };
+        if ('content' in newOptions)
+          return {
+            result: newOptions.content || [],
+            total: newOptions.totalElements || 1,
+            limit: newOptions.size || 1
+          };
+
+        return {
+          result: [],
+          total: 1,
+          limit: 1
+        };
+      },
+      []
+    );
+
     const lastOptionRef = useIntersectionObserver({
       action: () => setPage(page + 1),
       loading: isFetching,
@@ -134,10 +169,11 @@ const ConnectedAutocompleteField = (
         : [selectedValue];
 
       return {
-        field: conditionField,
+        operator: '$and',
+        field,
         values: {
           $ni: map(
-            prop(conditionField),
+            prop(exclusionOptionProperty),
             selectedValues as Array<
               Record<keyof SelectEntry, string | undefined>
             >
@@ -154,6 +190,7 @@ const ConnectedAutocompleteField = (
       }
 
       return {
+        operator: '$and',
         field,
         values: {
           $lk: `%${searchedValue}%`
@@ -240,12 +277,14 @@ const ConnectedAutocompleteField = (
 
         const moreOptions = page > 1 ? options : [];
 
+        const { result, limit, total } = getOptionResult(newOptions);
+
         const formattedList = changeIdValue
-          ? newOptions.result.map((item) => ({
+          ? result.map((item) => ({
               ...item,
               id: changeIdValue(item)
             }))
-          : newOptions.result;
+          : result;
 
         if (!isEmpty(labelKey) && !isNil(labelKey)) {
           const list = formattedList.map((item) =>
@@ -259,9 +298,6 @@ const ConnectedAutocompleteField = (
 
         setOptions(moreOptions.concat(formattedList as Array<TData>));
 
-        const total = prop('total', newOptions.meta) || 1;
-        const limit = prop('limit', newOptions.meta) || 1;
-
         const newMaxPage = Math.ceil(total / limit);
 
         setMaxPage(newMaxPage);
@@ -322,12 +358,13 @@ const ConnectedAutocompleteField = (
       <AutocompleteField
         filterOptions={(opt): SelectEntry => opt}
         loading={isFetching}
-        open={optionsOpen}
         options={
           allowUniqOption ? uniqBy(getRenderedOptionText, options) : options
         }
         renderOption={renderOptions}
-        onChange={(_, value) => setAutocompleteChangedValue(value)}
+        onChange={(_, value) => {
+          setAutocompleteChangedValue(value);
+        }}
         onClose={(): void => setOptionsOpen(false)}
         onOpen={(): void => setOptionsOpen(true)}
         onTextChange={changeText}

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

@@ -58,3 +58,22 @@ export const popoverWithoutInput = (): JSX.Element => {
     />
   );
 };
+
+export const customRenderedTags = (): JSX.Element => {
+  const customRender = (tags: React.ReactNode): React.ReactNode => (
+    <div style={{ display: 'flex' }}>
+      {tags}
+      <span style={{ color: '#999' }}>Custom wrapper</span>
+    </div>
+  );
+
+  return (
+    <MultiAutocompleteField
+      customRenderTags={customRender}
+      label="Custom Tags Render"
+      options={options}
+      placeholder="Type here..."
+      value={[options[0], options[1]]}
+    />
+  );
+};

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

@@ -9,10 +9,6 @@ import { SelectEntry } from '../..';
 import Option from '../../Option';
 
 const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    marginRight: theme.spacing(1),
-    padding: 0
-  },
   deleteIcon: {
     height: theme.spacing(1.5),
     width: theme.spacing(1.5)
@@ -33,6 +29,7 @@ export interface Props
       'multiple'
     > {
   chipProps?: ChipProps;
+  customRenderTags?: (tags: React.ReactNode) => React.ReactNode;
   disableSortedOptions?: boolean;
   getOptionTooltipLabel?: (option) => string;
   getTagLabel?: (option) => string;
@@ -48,6 +45,7 @@ const MultiAutocompleteField = ({
   getTagLabel = (option): string => option[optionProperty],
   getOptionTooltipLabel,
   chipProps,
+  customRenderTags,
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
@@ -65,6 +63,7 @@ const MultiAutocompleteField = ({
               deleteIcon: classes.deleteIcon,
               root: classes.tag
             }}
+            data-testid={`tag-option-chip-${option.id}`}
             label={getTagLabel(option)}
             size="medium"
             {...getTagProps({ index })}
@@ -106,7 +105,11 @@ const MultiAutocompleteField = ({
           <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
         </li>
       )}
-      renderTags={renderTags}
+      renderTags={(renderedValue, getTagProps): React.ReactNode =>
+        customRenderTags
+          ? customRenderTags(renderTags(renderedValue, getTagProps))
+          : renderTags(renderedValue, getTagProps)
+      }
       value={value}
       {...props}
     />

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

@@ -18,7 +18,7 @@ import { ForwardedRef, HTMLAttributes, ReactElement, forwardRef } from 'react';
 import { SelectEntry } from '..';
 import { getNormalizedId } from '../../../utils';
 import TextField from '../../Text';
-import { searchLabel } from '../../translatedLabels';
+import { labelClear, labelOpen, searchLabel } from '../../translatedLabels';
 import Option from '../Option';
 
 export type Props = {
@@ -38,6 +38,7 @@ export type Props = {
   onTextChange?;
   placeholder?: string | undefined;
   required?: boolean;
+  forceInputRenderValue?: boolean;
 } & Omit<
   AutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
   'renderInput'
@@ -160,7 +161,8 @@ const AutocompleteField = forwardRef(
       autoSize = false,
       autoSizeDefaultWidth = 0,
       autoSizeCustomPadding,
-      getOptionItemLabel = (option) => option.name,
+      getOptionItemLabel = (option) => option?.name,
+      forceInputRenderValue = false,
       ...autocompleteProps
     }: Props,
     ref?: ForwardedRef<HTMLDivElement>
@@ -178,59 +180,74 @@ const AutocompleteField = forwardRef(
       );
     };
 
-    const renderInput = (params): JSX.Element => (
-      <TextField
-        {...params}
-        InputLabelProps={{
-          classes: {
-            marginDense: classes.inputLabel,
-            shrink: classes.inputLabelShrink
+    const renderInput = (params): JSX.Element => {
+      return (
+        <TextField
+          {...params}
+          InputLabelProps={{
+            classes: {
+              marginDense: classes.inputLabel,
+              shrink: classes.inputLabelShrink
+            }
+          }}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <>
+                {endAdornment && (
+                  <InputAdornment position="end">{endAdornment}</InputAdornment>
+                )}
+                {params.InputProps.endAdornment}
+              </>
+            ),
+            style: {
+              background: 'transparent',
+              minWidth: 0,
+              padding: theme.spacing(
+                0.75,
+                isEmpty(placeholder) ? 0 : 5,
+                0.75,
+                0.75
+              )
+            }
+          }}
+          autoFocus={autoFocus}
+          autoSize={autoSize}
+          autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
+          autoSizeDefaultWidth={autoSizeDefaultWidth}
+          classes={{
+            root: classes.textfield
+          }}
+          error={error}
+          externalValueForAutoSize={autocompleteProps?.value?.name}
+          inputProps={{
+            ...params.inputProps,
+            'aria-label': label,
+            'data-testid': dataTestId || label,
+            id: getNormalizedId(label || ''),
+            ...(forceInputRenderValue
+              ? {
+                  value: getOptionItemLabel(
+                    autocompleteProps?.value || undefined
+                  )
+                }
+              : {}),
+            ...autocompleteProps?.inputProps
+          }}
+          label={label}
+          placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
+          required={required}
+          value={
+            inputValue ||
+            (forceInputRenderValue
+              ? getOptionItemLabel(autocompleteProps?.value || undefined)
+              : undefined) ||
+            undefined
           }
-        }}
-        InputProps={{
-          ...params.InputProps,
-          endAdornment: (
-            <>
-              {endAdornment && (
-                <InputAdornment position="end">{endAdornment}</InputAdornment>
-              )}
-              {params.InputProps.endAdornment}
-            </>
-          ),
-          style: {
-            background: 'transparent',
-            minWidth: 0,
-            padding: theme.spacing(
-              0.75,
-              isEmpty(placeholder) ? 0 : 5,
-              0.75,
-              0.75
-            )
-          }
-        }}
-        autoFocus={autoFocus}
-        autoSize={autoSize}
-        autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
-        autoSizeDefaultWidth={autoSizeDefaultWidth}
-        classes={{
-          root: classes.textfield
-        }}
-        error={error}
-        externalValueForAutoSize={autocompleteProps?.value?.name}
-        inputProps={{
-          ...params.inputProps,
-          'aria-label': label,
-          'data-testid': dataTestId || label,
-          id: getNormalizedId(label || ''),
-          ...autocompleteProps?.inputProps
-        }}
-        label={label}
-        placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
-        required={required}
-        value={inputValue || undefined}
-        onChange={onTextChange}
-      />
-    );
+          onChange={onTextChange}
+        />
+      );
+    };
 
     return (
       <Autocomplete
@@ -269,6 +286,14 @@ const AutocompleteField = forwardRef(
           );
         }}
         size="small"
+        slotProps={{
+          clearIndicator: {
+            title: t(labelClear)
+          },
+          popupIndicator: {
+            title: t(labelOpen)
+          }
+        }}
         {...autocompleteProps}
       />
     );

package/src/InputField/Text/index.tsx

@@ -77,7 +77,7 @@ const OptionalLabelInputAdornment = ({
 type SizeVariant = 'large' | 'medium' | 'small' | 'compact';
 
 export type TextProps = {
-  EndAdornment?: React.FC | JSX.Element;
+  EndAdornment?: React.FC;
   StartAdornment?: React.FC;
   ariaLabel?: string;
   autoSize?: boolean;
@@ -95,6 +95,7 @@ export type TextProps = {
   size?: SizeVariant;
   transparent?: boolean;
   value?: string;
+  forceUncontrolled?: boolean;
 } & Omit<TextFieldProps, 'variant' | 'size' | 'error'>;
 
 const TextField = forwardRef(
@@ -119,6 +120,7 @@ const TextField = forwardRef(
       required = false,
       containerClassName,
       type,
+      forceUncontrolled,
       ...rest
     }: TextProps,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -137,7 +139,7 @@ const TextField = forwardRef(
     const tooltipTitle = displayErrorInTooltip && !isNil(error) ? error : '';
 
     const getValueProps = useCallback((): object => {
-      if (debounced) {
+      if (debounced || forceUncontrolled) {
         return {};
       }
 
@@ -146,7 +148,7 @@ const TextField = forwardRef(
       }
 
       return { value: innerValue };
-    }, [innerValue, debounced, defaultValue]);
+    }, [innerValue, debounced, defaultValue, forceUncontrolled]);
 
     return (
       <Box
@@ -214,7 +216,7 @@ const TextField = forwardRef(
         </Tooltip>
         {autoSize && (
           <Typography className={classes.hiddenText} ref={inputRef}>
-            {rest.value || externalValueForAutoSize || innerValue}
+            {rest?.value || externalValueForAutoSize || innerValue}
           </Typography>
         )}
       </Box>

package/src/InputField/translatedLabels.ts

@@ -1 +1,3 @@
 export const searchLabel = 'Search';
+export const labelOpen = 'Open';
+export const labelClear = 'Clear';

package/src/Listing/ActionBar/index.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles<StyleProps>()(
     },
     actions: {
       flex: 1,
-      padding: theme.spacing(1, 0)
+      padding: theme.spacing(1, 1, 1, 0)
     },
     container: {
       alignItems: 'center',

package/src/Listing/Listing.styles.ts

@@ -6,13 +6,13 @@ const loadingIndicatorHeight = 3;
 
 interface StylesProps {
   dataStyle: TableStyle;
-  getGridTemplateColumn: string;
+  gridTemplateColumn: string;
   isResponsive: string;
   rows: Array<unknown>;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows, isResponsive }) => ({
+  (theme, { dataStyle, gridTemplateColumn, rows, isResponsive }) => ({
     actionBar: {
       alignItems: 'center',
       display: 'flex'
@@ -51,7 +51,7 @@ const useListingStyles = makeStyles<StylesProps>()(
       },
       alignItems: 'center',
       display: 'grid',
-      gridTemplateColumns: getGridTemplateColumn,
+      gridTemplateColumns: gridTemplateColumn,
       gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
         rows?.length || 1
       }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,

package/src/Listing/index.tsx

@@ -61,8 +61,8 @@ import {
   SortOrder
 } from './models';
 import { subItemsPivotsAtom } from './tableAtoms';
-import { labelNoResultFound } from './translatedLabels';
-import useStyleTable from './useStyleTable';
+import { labelNoResultFound as defaultLabelNoResultFound } from './translatedLabels';
+import useStyleTable, { useColumnStyle } from './useStyleTable';
 
 const subItemPrefixKey = 'listing';
 
@@ -139,7 +139,6 @@ export interface Props<TRow> {
   totalRows?: number;
   viewerModeConfiguration?: ViewerModeConfiguration;
   widthToMoveTablePagination?: number;
-  isActionBarVisible: boolean;
 }
 
 const defaultColumnConfiguration = {
@@ -198,18 +197,19 @@ const Listing = <
     getRowProperty: () => '',
     labelCollapse: 'Collapse',
     labelExpand: 'Expand'
-  },
-  isActionBarVisible = true
+  }
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
     columns
   });
-  const { dataStyle, getGridTemplateColumn } = useStyleTable({
-    checkable,
-    currentVisibleColumns,
+  const { dataStyle } = useStyleTable({
     listingVariant
   });
+  const gridTemplateColumn = useColumnStyle({
+    checkable,
+    currentVisibleColumns
+  });
 
   const { t } = useTranslation();
 
@@ -289,7 +289,7 @@ const Listing = <
 
   const { classes } = useListingStyles({
     dataStyle,
-    getGridTemplateColumn,
+    gridTemplateColumn,
     isResponsive,
     rows: rowsToDisplay
   });
@@ -526,33 +526,30 @@ const Listing = <
         className={classes.container}
         ref={containerRef as RefObject<HTMLDivElement>}
       >
-        {
-          isActionBarVisible && 
-            <div
-              className={classes.actionBar}
-              ref={actionBarRef as RefObject<HTMLDivElement>}
-            >
-              <ListingActionBar
-                actions={actions}
-                actionsBarMemoProps={actionsBarMemoProps}
-                columnConfiguration={columnConfiguration}
-                columns={columns}
-                currentPage={currentPage}
-                customPaginationClassName={customPaginationClassName}
-                limit={limit}
-                listingVariant={listingVariant}
-                moveTablePagination={moveTablePagination}
-                paginated={paginated}
-                totalRows={totalRows}
-                viewerModeConfiguration={viewerModeConfiguration}
-                widthToMoveTablePagination={widthToMoveTablePagination}
-                onLimitChange={changeLimit}
-                onPaginate={onPaginate}
-                onResetColumns={onResetColumns}
-                onSelectColumns={onSelectColumns}
-              />
-            </div>
-        }
+        <div
+          className={classes.actionBar}
+          ref={actionBarRef as RefObject<HTMLDivElement>}
+        >
+          <ListingActionBar
+            actions={actions}
+            actionsBarMemoProps={actionsBarMemoProps}
+            columnConfiguration={columnConfiguration}
+            columns={columns}
+            currentPage={currentPage}
+            customPaginationClassName={customPaginationClassName}
+            limit={limit}
+            listingVariant={listingVariant}
+            moveTablePagination={moveTablePagination}
+            paginated={paginated}
+            totalRows={totalRows}
+            viewerModeConfiguration={viewerModeConfiguration}
+            widthToMoveTablePagination={widthToMoveTablePagination}
+            onLimitChange={changeLimit}
+            onPaginate={onPaginate}
+            onResetColumns={onResetColumns}
+            onSelectColumns={onSelectColumns}
+          />
+        </div>
 
         <ParentSize
           parentSizeStyles={{
@@ -704,7 +701,13 @@ const Listing = <
                       (loading ? (
                         <SkeletonLoader rows={limit} />
                       ) : (
-                        <EmptyResult label={t(labelNoResultFound)} />
+                        <EmptyResult
+                          label={
+                            defaultLabelNoResultFound
+                              ? t(defaultLabelNoResultFound)
+                              : t(defaultLabelNoResultFound)
+                          }
+                        />
                       ))}
                   </TableBody>
                 </Table>

package/src/Listing/models.ts

@@ -76,11 +76,3 @@ export interface TableStyleAtom {
     width: number;
   };
 }
-
-export interface ListingSubItems {
-  canCheckSubItems: boolean;
-  enable: boolean;
-  getRowProperty: (row?) => string;
-  labelCollapse: string;
-  labelExpand: string;
-}