@centreon/ui 23.10.94 → 23.10.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.94",
+  "version": "23.10.95",
   "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/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/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

@@ -140,7 +140,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';