@centreon/ui 25.3.3 → 25.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.3.3",
+  "version": "25.4.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/ActionsList/index.tsx

@@ -59,6 +59,7 @@ const ActionsList = ({
         return (
           <MenuItem
             aria-label={label}
+            data-testid={label}
             className={classes.item}
             data-variant={variant}
             id={label}

package/src/Button/Icon/index.tsx

@@ -19,6 +19,7 @@ const useStyles = makeStyles()((theme) => ({
 
 type Props = {
   ariaLabel?: string;
+  dataTestid?: string;
   className?: string;
   onClick: (event) => void;
   title?: string | JSX.Element;
@@ -42,6 +43,7 @@ export const IconButton = ({
   title = '',
   ariaLabel,
   className,
+  dataTestid,
   tooltipPlacement,
   tooltipClassName,
   ...props
@@ -59,7 +61,7 @@ export const IconButton = ({
           aria-label={ariaLabel}
           className={cx(classes.button, className)}
           color="primary"
-          data-testid={ariaLabel}
+          data-testid={dataTestid || ariaLabel}
           id={getNormalizedId(ariaLabel || '')}
           {...props}
         />

package/src/Graph/Chart/InteractiveComponents/Annotations/Annotation/index.tsx

@@ -43,7 +43,7 @@ const Annotation = ({
 
   const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
 
-  const content = `${truncate(event.content)} (${t(labelBy)} ${
+  const content = `${truncate({ content: event.content })} (${t(labelBy)} ${
     event.contact?.name
   })`;
 

package/src/Graph/Chart/helpers/index.ts

@@ -38,9 +38,10 @@ export const getXAxisTickFormat = (graphInterval: GraphInterval): string => {
   return gte(numberDays, 2) ? dateFormat : timeFormat;
 };
 
-export const truncate = (content?: string): string => {
-  const maxLength = 180;
-
+export const truncate = ({
+  content,
+  maxLength = 180
+}: { content?: string; maxLength?: number }): string => {
   if (isNil(content)) {
     return '';
   }

package/src/Listing/Cell/index.tsx

@@ -25,6 +25,18 @@ interface GetBackgroundColorProps extends Omit<Props, 'isRowHighlighted'> {
   theme: Theme;
 }
 
+interface StylesProps extends Props {
+  isRowHighlighted?: boolean;
+  listingVariant?: ListingVariant;
+}
+
+interface GetRowHighlightStyleProps {
+  isRowHighlighted?: boolean;
+  theme: Theme;
+  disableRowCondition;
+  row;
+}
+
 const getBackgroundColor = ({
   isRowHovered,
   row,
@@ -51,25 +63,20 @@ const getBackgroundColor = ({
   return 'unset';
 };
 
-interface StylesProps extends Props {
-  isRowHighlighted?: boolean;
-  listingVariant?: ListingVariant;
-}
-
-interface GetRowHighlightStyleProps {
-  isRowHighlighted?: boolean;
-  theme: Theme;
-}
-
-const getRowHighlightStyle = ({
+const getRowTextColor = ({
   isRowHighlighted,
-  theme
-}: GetRowHighlightStyleProps): CSSObject | undefined =>
-  isRowHighlighted
-    ? {
-        color: theme.palette.text.primary
-      }
-    : undefined;
+  theme,
+  disableRowCondition,
+  row
+}: GetRowHighlightStyleProps): CSSObject | undefined => {
+  if (isRowHighlighted) {
+    return { color: theme.palette.text.primary };
+  }
+
+  if (disableRowCondition(row)) {
+    return { color: alpha(theme.palette.text.secondary, 0.5) };
+  }
+};
 
 const useStyles = makeStyles<StylesProps>()(
   (
@@ -112,7 +119,7 @@ const useStyles = makeStyles<StylesProps>()(
       height: '100%',
       overflow: 'hidden',
       ...getTextStyleByViewMode({ listingVariant, theme }),
-      p: getRowHighlightStyle({ isRowHighlighted, theme }),
+      p: getRowTextColor({ isRowHighlighted, disableRowCondition, row, theme }),
       padding: theme.spacing(0, 1),
       whiteSpace: 'nowrap'
     }

package/src/ThemeProvider/palettes.ts

@@ -211,7 +211,7 @@ export const lightPalette: PaletteOptions = {
           default: '#696969'
         }
       },
-      border: '#4A4A4A',
+      border: '#EDEDED',
       description: '#4A4A4A',
       title: '#000000'
     }
@@ -353,7 +353,7 @@ export const darkPalette: PaletteOptions = {
           default: '#696969'
         }
       },
-      border: '#bdbdbd',
+      border: '#666666',
       description: '#bdbdbd',
       title: '#fff'
     }

package/src/api/customFetch.ts

@@ -95,15 +95,6 @@ export const customFetch = <T>({
             };
           }
 
-          if (equals(response.status, 207)) {
-            return {
-              data: data.results,
-              isError: false,
-              message: '',
-              statusCode: response.status
-            };
-          }
-
           if (decoder) {
             return decoder.decodeToPromise(data).catch((error: string) => {
               catchError({

package/src/api/useBulkResponse.ts

@@ -0,0 +1,58 @@
+import {
+  complement,
+  includes,
+  isEmpty,
+  isNil,
+  last,
+  length,
+  prop,
+  propEq,
+  split
+} from 'ramda';
+import useSnackbar from '../Snackbar/useSnackbar';
+
+const useBulkResponse = () => {
+  const { showSuccessMessage, showErrorMessage, showWarningMessage } =
+    useSnackbar();
+
+  const handleBulkResponse = ({
+    data,
+    labelSuccess,
+    labelWarning,
+    labelFailed,
+    items
+  }) => {
+    const successfullResponses =
+      data?.filter(propEq(204, 'status')) || isNil(data);
+
+    const failedResponses = data?.filter(complement(propEq(204, 'status')));
+
+    const failedResponsesIds = failedResponses
+      ?.map(prop('href'))
+      ?.map((item: string) =>
+        Number.parseInt(last(split('/', item || '')) as string, 10)
+      );
+
+    if (isEmpty(successfullResponses)) {
+      showErrorMessage(labelFailed);
+
+      return;
+    }
+
+    if (length(successfullResponses) < length(data)) {
+      const failedResponsesNames = items
+        ?.filter((item) => includes(item.id, failedResponsesIds))
+        .map((item) => item.name);
+
+      showWarningMessage(`${labelWarning}: ${failedResponsesNames.join(', ')}`);
+
+      return;
+    }
+
+    showSuccessMessage(labelSuccess);
+  };
+
+  return handleBulkResponse;
+};
+
+export default useBulkResponse;

package/src/components/CrudPage/Actions/Actions.styles.ts

@@ -2,7 +2,21 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useActionsStyles = makeStyles()((theme) => ({
   search: {
-    maxWidth: theme.spacing(50)
+    maxWidth: theme.spacing(60),
+    minWidth: theme.spacing(20),
+    width: '100%'
+  },
+  filters: {
+    width: '100%',
+    paddingInline: theme.spacing(1),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  actions: {
+    display: 'grid',
+    gridTemplateColumns: 'min-content auto',
+    gap: theme.spacing(1)
   },
   clearButton: {
     alignSelf: 'flex-start'

package/src/components/CrudPage/Actions/Actions.tsx

@@ -1,4 +1,5 @@
 import { Box } from '@mui/material';
+import { useActionsStyles } from './Actions.styles';
 import AddButton from './AddButton';
 import Search from './Search';
 
@@ -11,12 +12,14 @@ interface Props {
 }
 
 const Actions = ({ labels, filters }: Props): JSX.Element => {
+  const { classes } = useActionsStyles();
+
   return (
-    <Box
-      sx={{ display: 'grid', gridTemplateColumns: 'min-content auto', gap: 2 }}
-    >
+    <Box className={classes.actions}>
       <AddButton label={labels.add} />
-      <Search label={labels.search} filters={filters} />
+      <div className={classes.filters}>
+        <Search label={labels.search} filters={filters} />
+      </div>
     </Box>
   );
 };

package/src/components/CrudPage/Actions/Search.tsx

@@ -14,21 +14,22 @@ const Search = ({ label, filters }: Props): JSX.Element => {
   const { change } = useSearch();
 
   return (
-    <SearchField
-      className={classes.search}
-      debounced
-      fullWidth
-      dataTestId={label}
-      placeholder={label}
-      onChange={change}
-      textFieldSlotsAndSlotProps={{
-        slotProps: {
-          input: {
-            endAdornment: <Filters label="filters" filters={filters} />
+    <div className={classes.search}>
+      <SearchField
+        debounced
+        fullWidth
+        dataTestId={label}
+        placeholder={label}
+        onChange={change}
+        textFieldSlotsAndSlotProps={{
+          slotProps: {
+            input: {
+              endAdornment: <Filters label="filters" filters={filters} />
+            }
           }
-        }
-      }}
-    />
+        }}
+      />
+    </div>
   );
 };
 

package/src/components/Header/PageHeader/PageHeader.styles.ts

@@ -25,9 +25,10 @@ const useStyles = makeStyles()((theme) => ({
   },
   pageHeader: {
     alignItems: 'center',
-    borderBottom: `1px solid ${theme.palette.header.page.border}`,
+    borderBottom: `2px solid ${theme.palette.header.page.border}`,
     display: 'flex',
-    gap: theme.spacing(4)
+    gap: theme.spacing(4),
+    paddingBottom: theme.spacing(0.5)
   },
   pageHeaderActions: {
     '& > button': {
@@ -46,8 +47,7 @@ const useStyles = makeStyles()((theme) => ({
   pageHeaderMain: {
     display: 'flex',
     flexGrow: 1,
-    gap: theme.spacing(1),
-    minHeight: theme.spacing(4.5)
+    gap: theme.spacing(1)
   },
   pageHeaderMenu: {
     alignItems: 'flex-start',
@@ -96,7 +96,7 @@ const useStyles = makeStyles()((theme) => ({
     alignSelf: 'flex-start',
     h1: {
       ...theme.typography.h5,
-      fontWeight: theme.typography.fontWeightMedium,
+      fontWeight: theme.typography.fontWeightBold,
       margin: theme.spacing(0),
       lineHeight: '1'
     }

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -29,7 +29,7 @@ export const useStyles = makeStyles()((theme) => ({
     display: 'grid',
     gridTemplateRows: 'auto',
     overflow: 'hidden',
-    padding: theme.spacing(1.5, 3, 1.5)
+    padding: theme.spacing(0, 3, 1.5)
   },
   pageLayoutHeader: {
     '[data-variant="fixed-header"] &': {

package/src/index.ts

@@ -133,6 +133,7 @@ export {
 } from './api/useGraphQuery';
 export { WidgetResourceType as ResourceType } from './api/useGraphQuery/models';
 export { default as QueryProvider, client } from './api/QueryProvider';
+export { default as useBulkResponse } from './api/useBulkResponse';
 export {
   default as FileDropZone,
   transformFileListToArray