@centreon/ui 24.7.11 → 24.8.1

package/package.json

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

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isEmpty, path, split } from 'ramda';
+import { equals, isEmpty, path, propEq, reject, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -102,9 +102,21 @@ const ConnectedAutocomplete = ({
     [isMultiple]
   );
 
+  const deleteItem = (_, option): void => {
+    const newValue = reject(propEq(option.id, 'id'), value);
+
+    setFieldValue(fieldName, newValue);
+  };
+
+  const chipProps = connectedAutocomplete && {
+    color: connectedAutocomplete?.chipColor || 'default',
+    onDelete: deleteItem
+  };
+
   return useMemoComponent({
     Component: (
       <AutocompleteField
+        chipProps={chipProps}
         dataTestId={dataTestId}
         disableClearable={false}
         disableSortedOptions={disableSortedOptions}

package/src/Form/Inputs/models.ts

@@ -46,6 +46,7 @@ export interface InputProps {
   };
   connectedAutocomplete?: {
     additionalConditionParameters: Array<ConditionsSearchParameter>;
+    chipColor?: string;
     endpoint?: string;
     filterKey?: string;
     getRenderedOptionText?: (option) => string | JSX.Element;

package/src/Graph/index.ts

@@ -12,4 +12,6 @@ export { PieChart } from './PieChart';
 export * from './Tree';
 export type { LineChartData } from './common/models';
 export * from './common/timeSeries';
+export type { Metric } from './common/timeSeries/models';
 export * from './LineChart/models';
+export * from './PieChart/models';

package/src/Listing/ActionBar/index.tsx

@@ -107,8 +107,7 @@ const MemoListingActionBar = ({
   widthToMoveTablePagination = 550,
   actionsBarMemoProps = [],
   viewerModeConfiguration,
-  listingVariant,
-  visualizationActions
+  listingVariant
 }: Props): JSX.Element => {
   const marginWidthTableListing = 30;
   const { classes, cx } = useStyles({
@@ -137,7 +136,6 @@ const MemoListingActionBar = ({
         <div className={classes.actions}>
           <div>{actions}</div>
         </div>
-        {visualizationActions && <div>{visualizationActions}</div>}
         <div className={classes.subContainer}>
           {!isEmpty(viewerModeConfiguration) &&
             !isNil(viewerModeConfiguration) && (
@@ -225,7 +223,6 @@ const MemoListingActionBar = ({
       ),
       columnConfiguration,
       customPaginationClassName,
-      visualizationActions,
       ...actionsBarMemoProps
     ]
   });
@@ -248,8 +245,7 @@ const ListingActionBar = ({
   widthToMoveTablePagination,
   customPaginationClassName,
   listingVariant,
-  viewerModeConfiguration,
-  visualizationActions
+  viewerModeConfiguration
 }: Props): JSX.Element | null => {
   if (
     not(paginated) &&
@@ -273,7 +269,6 @@ const ListingActionBar = ({
       paginated={paginated}
       totalRows={totalRows}
       viewerModeConfiguration={viewerModeConfiguration}
-      visualizationActions={visualizationActions}
       widthToMoveTablePagination={widthToMoveTablePagination}
       onLimitChange={onLimitChange}
       onPaginate={onPaginate}

package/src/Listing/index.tsx

@@ -131,7 +131,6 @@ export interface Props<TRow> {
   };
   totalRows?: number;
   viewerModeConfiguration?: ViewerModeConfiguration;
-  visualizationActions?: JSX.Element;
   widthToMoveTablePagination?: number;
 }
 
@@ -145,7 +144,6 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
   customListingComponent,
   displayCustomListing,
   limit = 10,
-  visualizationActions,
   columns,
   columnConfiguration = defaultColumnConfiguration,
   customPaginationClassName,
@@ -529,7 +527,6 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
             paginated={paginated}
             totalRows={totalRows}
             viewerModeConfiguration={viewerModeConfiguration}
-            visualizationActions={visualizationActions}
             widthToMoveTablePagination={widthToMoveTablePagination}
             onLimitChange={changeLimit}
             onPaginate={onPaginate}

package/src/components/ItemComposition/Item.tsx

@@ -10,8 +10,8 @@ type Props = {
   children: ReactElement | Array<ReactElement>;
   className?: string;
   deleteButtonHidden?: boolean;
-  labelDelete: string;
-  onDeleteItem: () => void;
+  labelDelete?: string;
+  onDeleteItem?: () => void;
 };
 
 export const Item = ({

package/src/components/ItemComposition/ItemComposition.tsx

@@ -16,8 +16,8 @@ export type Props = {
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;
   displayItemsAsLinked?: boolean;
-  labelAdd: string;
-  onAddItem: () => void;
+  labelAdd?: string;
+  onAddItem?: () => void;
   secondaryLabel?: string;
 };
 

package/src/components/Modal/Modal.styles.ts

@@ -35,8 +35,8 @@ const useStyles = makeStyles<{
       transition: theme.transitions.create('left')
     },
     '&[data-size="large"] .MuiDialog-paper': {
-      maxWidth: '604px',
-      width: '604px'
+      maxWidth: '704px',
+      width: '704px'
     },
     '&[data-size="medium"] .MuiDialog-paper': {
       width: '520px'