@centreon/ui 23.10.94 → 23.10.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.94",
+  "version": "23.10.96",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/ActionsList/index.tsx

@@ -3,27 +3,37 @@ import { useTranslation } from 'react-i18next';
 import { equals } from 'ramda';
 
 import {
-  SvgIconProps,
   MenuList,
   MenuItem,
   ListItemText,
   ListItemIcon,
-  Divider
+  Divider,
+  SvgIconTypeMap
 } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+
+import { sanitizedHTML } from '..';
 
 import { useStyles } from './ActionsList.styles';
 import { ActionVariants } from './models';
 
 interface ActionsType {
-  Icon?: (props: SvgIconProps) => JSX.Element;
+  Icon?: OverridableComponent<SvgIconTypeMap<object, 'svg'>> & {
+    muiName: string;
+  };
   label: string;
   onClick?: (e?) => void;
   secondaryLabel?: string;
   variant?: ActionVariants;
 }
 
+export enum ActionsListActionDivider {
+  divider = 'divider'
+}
+export type ActionsListActions = Array<ActionsType | ActionsListActionDivider>;
+
 interface Props {
-  actions: Array<ActionsType | 'divider'>;
+  actions: ActionsListActions;
   className?: string;
   listItemClassName?: string;
 }
@@ -39,7 +49,7 @@ const ActionsList = ({
   return (
     <MenuList className={cx(classes.list, className)}>
       {actions?.map((action, idx) => {
-        if (equals(action, 'divider')) {
+        if (equals(action, ActionsListActionDivider.divider)) {
           return <Divider key={`divider_${idx}`} />;
         }
 
@@ -63,7 +73,10 @@ const ActionsList = ({
             <ListItemText
               className={listItemClassName}
               primary={t(label)}
-              secondary={secondaryLabel && t(secondaryLabel)}
+              secondary={
+                secondaryLabel &&
+                sanitizedHTML({ initialContent: t(secondaryLabel) })
+              }
             />
           </MenuItem>
         );

package/src/Checkbox/Checkbox.tsx

@@ -2,12 +2,8 @@ import { makeStyles } from 'tss-react/mui';
 import { T, always, cond, equals } from 'ramda';
 
 import { SvgIconComponent } from '@mui/icons-material';
-import {
-  FormControlLabel,
-  Checkbox as MuiCheckbox,
-  Box,
-  Typography
-} from '@mui/material';
+import Typography, { TypographyTypeMap } from '@mui/material/Typography';
+import { FormControlLabel, Checkbox as MuiCheckbox, Box } from '@mui/material';
 
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 
@@ -60,6 +56,7 @@ interface Props {
   disabled?: boolean;
   label: string;
   labelPlacement?: LabelPlacement;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
 }
 
@@ -71,7 +68,8 @@ const Checkbox = ({
   className,
   disabled = false,
   labelPlacement = 'end',
-  dataTestId
+  dataTestId,
+  labelProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
     hasIcon: !!Icon,
@@ -96,7 +94,11 @@ const Checkbox = ({
         }
         data-testid={dataTestId || ''}
         key={label}
-        label={<Typography className={classes.label}>{label}</Typography>}
+        label={
+          <Typography classes={{ root: classes.label }} {...labelProps}>
+            {label}
+          </Typography>
+        }
         labelPlacement={labelPlacement}
         sx={{ margin: 0, padding: 0 }}
       />

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -1,15 +1,19 @@
 import { equals, includes } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { FormGroup } from '@mui/material';
+import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
+import { TypographyTypeMap } from '@mui/material/Typography';
 
 import Checkbox, { LabelPlacement } from '../Checkbox';
 
 interface Props {
+  className?: string;
   dataTestId?: string;
   direction?: 'horizontal' | 'vertical';
   disabled?: boolean;
+  formGroupProps?: FormGroupProps;
   labelPlacement?: LabelPlacement;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
   options: Array<string>;
   values: Array<string>;
@@ -34,27 +38,32 @@ const CheckboxGroup = ({
   onChange,
   labelPlacement = 'end',
   disabled = false,
-  dataTestId
+  dataTestId,
+  className,
+  labelProps,
+  formGroupProps
 }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const row = !equals(direction, 'vertical');
 
   return (
     <FormGroup
-      className={classes.container}
+      classes={{ root: classes.container }}
       data-testid={dataTestId || ''}
       row={row}
+      {...formGroupProps}
     >
       {options.map((value) => {
         return (
           <Checkbox
             checked={includes(value, values)}
-            className={classes.checkbox}
+            className={cx(classes.checkbox, className)}
             disabled={disabled}
             key={value}
             label={value}
             labelPlacement={labelPlacement}
+            labelProps={labelProps}
             onChange={onChange}
           />
         );

package/src/Dashboard/Dashboard.styles.ts

@@ -69,6 +69,9 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
 export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
   (theme, { hasHeader }) => ({
     widgetContainer: {
+      '&[data-padding="false"]': {
+        padding: 0
+      },
       background: theme.palette.background.widget,
       border: 'none',
       borderRadius: theme.spacing(1),

package/src/Dashboard/Item.tsx

@@ -67,7 +67,10 @@ const Item = forwardRef(
             width: `calc(${prop('width', style) || '0px'} - 12px)`
           }}
         >
-          <Card className={classes.widgetContainer}>
+          <Card
+            className={classes.widgetContainer}
+            data-padding={!disablePadding}
+          >
             {header && (
               <div
                 {...listeners}

package/src/PopoverMenu/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -9,6 +9,7 @@ import {
   PopperPlacementType,
   useTheme
 } from '@mui/material';
+import { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
@@ -19,15 +20,22 @@ const useStyles = makeStyles()(() => ({
   }
 }));
 
+interface PopoverData {
+  anchorEl: HTMLElement | undefined;
+  setAnchorEl: Dispatch<SetStateAction<HTMLElement | undefined>>;
+}
+
 interface Props {
   canOpen?: boolean;
   children: (props?) => JSX.Element;
   className?: string;
   dataTestId?: string;
+  getPopoverData?: (data: PopoverData) => void;
   icon: JSX.Element;
   onClose?: () => void;
   onOpen?: () => void;
   popperPlacement?: PopperPlacementType;
+  popperProps?: Partial<PopperProps>;
   title?: string;
 }
 
@@ -40,20 +48,21 @@ const PopoverMenu = ({
   onClose,
   canOpen = true,
   className,
-  dataTestId
+  dataTestId,
+  getPopoverData,
+  popperProps
 }: Props): JSX.Element => {
   const theme = useTheme();
   const { classes, cx } = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
-
   const isOpen = Boolean(anchorEl);
 
   const close = (reason?): void => {
     const isClosedByInputClick = reason?.type === 'mousedown';
-
     if (isClosedByInputClick) {
       return;
     }
+
     onClose?.();
     setAnchorEl(undefined);
   };
@@ -75,6 +84,10 @@ const PopoverMenu = ({
     }
   }, [canOpen]);
 
+  useEffect(() => {
+    getPopoverData?.({ anchorEl, setAnchorEl });
+  }, [anchorEl]);
+
   return (
     <>
       <IconButton
@@ -97,6 +110,7 @@ const PopoverMenu = ({
             style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
+            {...popperProps}
           >
             <Paper>{children({ close })}</Paper>
           </Popper>

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -21,7 +21,7 @@ import {
   GetConditionsSearchQueryParameterValueState
 } from './models';
 
-const getFoundFields = ({
+export const getFoundFields = ({
   value,
   fields
 }: RegexSearchParameter): Array<SearchMatch> => {
@@ -108,7 +108,7 @@ const getConditionsSearchQueryParameterValue = (
   };
 };
 
-const getSearchQueryParameterValue = (
+export const getSearchQueryParameterValue = (
   search: SearchParameter | undefined
 ): SearchQueryParameterValue => {
   if (search === undefined) {
@@ -134,5 +134,3 @@ const getSearchQueryParameterValue = (
 
   return { $and: result };
 };
-
-export default getSearchQueryParameterValue;

package/src/api/buildListingEndpoint/index.ts

@@ -1,7 +1,7 @@
 import toRawQueryParameters from '../../queryParameters';
 import { QueryParameter } from '../../queryParameters/models';
 
-import getSearchQueryParameterValue from './getSearchQueryParameterValue';
+import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
 import { Parameters, BuildListingEndpointParameters } from './models';
 
 const getQueryParameters = ({

package/src/api/useFetchQuery/index.ts

@@ -14,6 +14,7 @@ import { has, includes, not, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
+import { useDeepCompare } from '../../utils';
 
 export interface UseFetchQueryProps<T> {
   catchError?: (props: CatchErrorProps) => void;
@@ -162,7 +163,7 @@ const useFetchQuery = <T extends object>({
 
   useEffect(() => {
     manageError();
-  }, [queryData.data]);
+  }, useDeepCompare([queryData.data]));
 
   return {
     ...omit(['data'], queryData),

package/src/api/useMutationQuery/index.ts

@@ -12,6 +12,7 @@ import { includes } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
+import { useDeepCompare } from '../../utils';
 
 export enum Method {
   DELETE = 'DELETE',
@@ -98,7 +99,7 @@ const useMutationQuery = <T extends object, TMeta>({
 
   useEffect(() => {
     manageError();
-  }, [queryData.data]);
+  }, useDeepCompare([queryData.data]));
 
   return {
     ...queryData,

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -14,6 +14,7 @@ import {
 } from '@mui/icons-material';
 
 import { IconButton } from '../../Button';
+import { ConfirmationTooltip } from '../../Tooltip/ConfirmationTooltip';
 
 import { useStyles } from './DataTableItem.styles';
 
@@ -21,6 +22,13 @@ export interface DataTableItemProps {
   description?: string;
   hasActions?: boolean;
   hasCardAction?: boolean;
+  labelsDelete: {
+    cancel: string;
+    confirm: {
+      label: string;
+      secondaryLabel?: string;
+    };
+  };
   onClick?: () => void;
   onDelete?: () => void;
   onEdit?: () => void;
@@ -38,7 +46,8 @@ const DataTableItem = forwardRef(
       onClick,
       onEdit,
       onDelete,
-      onEditAccessRights
+      onEditAccessRights,
+      labelsDelete
     }: DataTableItemProps,
     ref
   ): ReactElement => {
@@ -67,14 +76,24 @@ const DataTableItem = forwardRef(
         {hasActions && (
           <MuiCardActions>
             <span>
-              <IconButton
-                aria-label="delete"
-                data-testid="delete"
-                icon={<DeleteIcon />}
-                size="small"
-                variant="ghost"
-                onClick={() => onDelete?.()}
-              />
+              {onDelete && (
+                <ConfirmationTooltip
+                  confirmVariant="error"
+                  labels={labelsDelete}
+                  onConfirm={onDelete}
+                >
+                  {(openTooltip) => (
+                    <IconButton
+                      aria-label="delete"
+                      data-testid="delete"
+                      icon={<DeleteIcon />}
+                      size="small"
+                      variant="ghost"
+                      onClick={openTooltip}
+                    />
+                  )}
+                </ConfirmationTooltip>
+              )}
             </span>
             <span>
               <IconButton

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.styles.tsx

@@ -15,5 +15,8 @@ export const useStyles = makeStyles()((theme) => ({
     boxShadow: theme.shadows[3],
     marginLeft: theme.spacing(2),
     maxWidth: '350px'
+  },
+  popper: {
+    zIndex: theme.zIndex.tooltip + 1
   }
 }));

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -52,6 +52,7 @@ export const ConfirmationTooltip = ({
         {children(isOpen ? close : open)}
         <Popper
           anchorEl={anchorElement}
+          className={classes.popper}
           open={isOpen}
           popperOptions={{
             placement: 'bottom-start'

package/src/components/Tooltip/ConfirmationTooltip/index.ts

@@ -0,0 +1 @@
+export * from './ConfirmationTooltip';

package/src/components/Tooltip/index.ts

@@ -1 +1,2 @@
 export * from './Tooltip';
+export * from './ConfirmationTooltip';

package/src/index.ts

@@ -75,7 +75,10 @@ export { default as useCancelTokenSource } from './api/useCancelTokenSource';
 export { getData, patchData, postData, putData, deleteData } from './api';
 export { default as useRequest } from './api/useRequest';
 export { default as buildListingEndpoint } from './api/buildListingEndpoint';
-export { default as getSearchQueryParameterValue } from './api/buildListingEndpoint/getSearchQueryParameterValue';
+export {
+  getSearchQueryParameterValue,
+  getFoundFields
+} from './api/buildListingEndpoint/getSearchQueryParameterValue';
 export type {
   Parameters as ListingParameters,
   BuildListingEndpointParameters,
@@ -140,7 +143,12 @@ export * from './TopCounterElements';
 export { default as Image, ImageVariant } from './Image/Image';
 export { default as WallpaperPage } from './WallpaperPage';
 export { RichTextEditor } from './RichTextEditor';
-export { default as ActionsList } from './ActionsList';
+export {
+  default as ActionsList,
+  ActionsListActionDivider
+} from './ActionsList';
+export type { ActionsListActions } from './ActionsList';
+export type { ActionVariants } from './ActionsList/models';
 
 export type { ResponseError, CatchErrorProps } from './api/customFetch';
 

package/src/utils/useDebounce.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 
 interface Props {
   functionToDebounce: (...args) => void;
@@ -12,6 +12,11 @@ export const useDebounce = ({
   memoProps = []
 }: Props): ((...args) => void) => {
   const timeoutRef = useRef<number | null>(null);
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = functionToDebounce;
+  }, [functionToDebounce]);
 
   return useCallback((...args): void => {
     if (timeoutRef.current) {
@@ -19,7 +24,7 @@ export const useDebounce = ({
     }
 
     timeoutRef.current = setTimeout(() => {
-      functionToDebounce(...args);
+      ref.current?.(...args);
     }, wait);
   }, memoProps);
 };