@centreon/ui 24.10.11 → 24.10.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.10.11",
+  "version": "24.10.13",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -18,7 +18,6 @@
     "cypress:run": "cypress run --component --browser=chrome",
     "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"
   },
-  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -54,6 +53,8 @@
     "@cypress/webpack-dev-server": "^3.10.1",
     "@faker-js/faker": "^8.4.1",
     "@mdx-js/react": "^3.0.1",
+    "@modern-js/prod-server": "^2.58.1",
+    "@modern-js/storybook": "^2.58.1",
     "@simonsmith/cypress-image-snapshot": "^9.1.0",
     "@storybook/addon-a11y": "^8.2.9",
     "@storybook/addon-docs": "^8.2.9",

package/public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.5'
+const PACKAGE_VERSION = '2.2.14'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/src/Button/Icon/index.tsx

@@ -18,6 +18,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 type Props = {
+  dataTestid?: string;
   ariaLabel?: string;
   className?: string;
   onClick: (event) => void;
@@ -44,6 +45,7 @@ export const IconButton = ({
   className,
   tooltipPlacement,
   tooltipClassName,
+  dataTestid,
   ...props
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
@@ -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/Dashboard/Dashboard.styles.ts

@@ -40,7 +40,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         width: theme.spacing(1)
       },
       '& .react-resizable-handle.react-resizable-handle-s': {
-        bottom: 4,
+        bottom: 0,
         cursor: 'ns-resize',
         height: theme.spacing(1),
         left: 0,
@@ -49,7 +49,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         width: `calc(100% - ${theme.spacing(3)})`
       },
       '& .react-resizable-handle.react-resizable-handle-se': {
-        bottom: 4,
+        bottom: 0,
         cursor: 'nwse-resize',
         height: theme.spacing(2),
         right: 0,
@@ -62,8 +62,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
       '& .react-resizable-handle:hover': {
         opacity: 1
       },
-      position: 'relative',
-      height: '100%',
+      position: 'relative'
     }
   })
 );

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -95,7 +95,7 @@ export const normal = DashboardTemplate.bind({});
 
 export const withManyPanels = DashboardTemplate.bind({});
 withManyPanels.args = {
-  layout: generateLayout(100)
+  layout: generateLayout(1000)
 };
 
 export const withItemHeader = DashboardTemplate.bind({});

package/src/Dashboard/Grid.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, ReactElement, useMemo } from 'react';
+import { ReactElement, useMemo } from 'react';
 
 import { scaleLinear } from '@visx/scale';
 import { Grid as VisxGrid } from '@visx/visx';
@@ -13,15 +13,9 @@ interface Props {
   columns: number;
   height: number;
   width: number;
-  containerRef: MutableRefObject<HTMLDivElement | null>;
 }
 
-const Grid = ({
-  width,
-  height,
-  columns,
-  containerRef
-}: Props): ReactElement => {
+const Grid = ({ width, height, columns }: Props): ReactElement => {
   const theme = useTheme();
 
   const xScale = useMemo(
@@ -50,19 +44,19 @@ const Grid = ({
     .fill(0)
     .map((_, index) => index * tick);
 
-  const yTickValues = Array(numberOfRows)
-    .fill(0)
-    .map((_, index) => index);
-
   return useMemoComponent({
     Component: (
       <svg style={{ height, position: 'absolute', width }}>
-        <VisxGrid.Grid
-          columnTickValues={xTickValues}
-          rowTickValues={yTickValues}
+        <VisxGrid.GridColumns
+          height={height}
+          scale={xScale}
+          stroke={theme.palette.divider}
+          tickValues={xTickValues}
+          width={width}
+        />
+        <VisxGrid.GridRows
           height={height}
-          yScale={yScale}
-          xScale={xScale}
+          scale={yScale}
           stroke={theme.palette.divider}
           top={-10}
           width={width}

package/src/Dashboard/Layout.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { useSetAtom } from 'jotai';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
@@ -6,10 +6,10 @@ import 'react-grid-layout/css/styles.css';
 
 import {
   ParentSize,
+  Responsive as ResponsiveHeight,
   useMemoComponent
 } from '..';
 
-import { Box } from '@mui/material';
 import { useDashboardLayoutStyles } from './Dashboard.styles';
 import Grid from './Grid';
 import { isResizingItemAtom } from './atoms';
@@ -26,18 +26,6 @@ interface DashboardLayoutProps<T> {
   layout: Array<T>;
 }
 
-const bottom = (layout: Array<Layout>): number => {
-  let max = 0;
-  let bottomY = 0;
-
-  layout.forEach((panel) => {
-    bottomY = panel.y + panel.h;
-    if (bottomY > max) max = bottomY;
-  })
-
-  return max;
-}
-
 const DashboardLayout = <T extends Layout>({
   children,
   changeLayout,
@@ -46,8 +34,6 @@ const DashboardLayout = <T extends Layout>({
   isStatic = false,
   additionalMemoProps = []
 }: DashboardLayoutProps<T>): JSX.Element => {
-  const dashboardContainerRef = useRef<HTMLDivElement | null>(null);
-
   const { classes } = useDashboardLayoutStyles(isStatic);
 
   const [columns, setColumns] = useState(getColumnsFromScreenSize());
@@ -66,16 +52,6 @@ const DashboardLayout = <T extends Layout>({
     setIsResizingItem(null);
   }, []);
 
-  const containerHeight = useMemo((): number | undefined => {
-      const nbRow = bottom(getLayout(layout));
-      const containerPaddingY = 4
-      return (
-        nbRow * rowHeight +
-        (nbRow - 1) * 20 +
-        containerPaddingY * 2
-      );
-    }, [layout, rowHeight])
-
   useEffect(() => {
     window.addEventListener('resize', resize);
 
@@ -86,36 +62,31 @@ const DashboardLayout = <T extends Layout>({
 
   return useMemoComponent({
     Component: (
-      <Box ref={dashboardContainerRef} sx={{ overflowY: 'auto', overflowX: 'hidden' }}>
-          <ParentSize>
-            {({ width, height }): JSX.Element => (
-              <Box className={classes.container}>
-                {displayGrid && (
-                  <Grid
-                    columns={columns}
-                    height={(containerHeight || 0) > height ? containerHeight : height}
-                    width={width}
-                    containerRef={dashboardContainerRef}
-                  />
-                )}
-                <ReactGridLayout
-                  cols={columns}
-                  containerPadding={[4, 0]}
-                  layout={getLayout(layout)}
-                  margin={[20, 20]}
-                  resizeHandles={['s', 'e', 'se']}
-                  rowHeight={rowHeight}
-                  width={width}
-                  onLayoutChange={changeLayout}
-                  onResizeStart={startResize}
-                  onResizeStop={stopResize}
-                >
-                  {children}
-                </ReactGridLayout>
-              </Box>
-            )}
-          </ParentSize>
-        </Box>
+      <ResponsiveHeight margin={40}>
+        <ParentSize>
+          {({ width, height }): JSX.Element => (
+            <div className={classes.container}>
+              {displayGrid && (
+                <Grid columns={columns} height={height} width={width} />
+              )}
+              <ReactGridLayout
+                cols={columns}
+                containerPadding={[4, 0]}
+                layout={getLayout(layout)}
+                margin={[20, 20]}
+                resizeHandles={['s', 'e', 'se']}
+                rowHeight={rowHeight}
+                width={width}
+                onLayoutChange={changeLayout}
+                onResizeStart={startResize}
+                onResizeStop={stopResize}
+              >
+                {children}
+              </ReactGridLayout>
+            </div>
+          )}
+        </ParentSize>
+      </ResponsiveHeight>
     ),
     memoProps: [columns, layout, displayGrid, isStatic, ...additionalMemoProps]
   });

package/src/Dialog/UnsavedChanges/index.tsx

@@ -5,13 +5,13 @@ import { Modal } from '../../components/Modal';
 
 import {
   labelDiscard,
-  labelDoYouWantToQuitWithoutResolving,
-  labelDoYouWantToResolveErrors,
+  labelDoYouWantToQuit,
   labelDoYouWantToSaveChanges,
   labelIfYouClickOnDiscard,
-  labelResolve,
+  labelLeave,
   labelSave,
-  labelThereAreErrorsInTheForm
+  labelStay,
+  labelYourFormHasUnsavedChanges
 } from './translatedLabels';
 
 interface Props {
@@ -32,15 +32,17 @@ const UnsavedChangesDialog = ({
   dialogOpened
 }: Props): JSX.Element | null => {
   const { t } = useTranslation();
+
   const labelTitle = isValidForm
     ? labelDoYouWantToSaveChanges
-    : labelDoYouWantToResolveErrors;
+    : labelDoYouWantToQuit;
 
-  const labelConfirm = isValidForm ? labelSave : labelResolve;
+  const lebelConfirm = isValidForm ? labelSave : labelLeave;
+  const labelCancel = isValidForm ? labelDiscard : labelStay;
 
-  const labelMessage = `${
-    isValidForm ? labelIfYouClickOnDiscard : labelThereAreErrorsInTheForm
-  }. ${isValidForm ? '' : labelDoYouWantToQuitWithoutResolving}`;
+  const labelMessage = isValidForm
+    ? labelIfYouClickOnDiscard
+    : labelYourFormHasUnsavedChanges;
 
   if (not(dialogOpened)) {
     return null;
@@ -58,11 +60,11 @@ const UnsavedChangesDialog = ({
       <Modal.Actions
         disabled={isSubmitting}
         labels={{
-          cancel: t(labelDiscard),
-          confirm: t(labelConfirm)
+          cancel: t(labelCancel),
+          confirm: t(lebelConfirm)
         }}
-        onCancel={discardChanges}
-        onConfirm={isValidForm ? saveChanges : closeDialog}
+        onCancel={isValidForm ? discardChanges : closeDialog}
+        onConfirm={isValidForm ? saveChanges : discardChanges}
       />
     </Modal>
   );

package/src/Dialog/UnsavedChanges/translatedLabels.ts

@@ -1,22 +1,24 @@
 export const labelDiscard = 'Discard';
-export const labelResolve = 'Resolve';
+export const labelSave = 'Save';
+
+export const labelLeave = 'Leave';
+export const labelStay = 'Stay';
+
 export const labelIfYouClickOnDiscard =
   'If you click on Discard, your changes will not be saved.';
-export const labelThereAreErrorsInTheForm = 'There are errors in the form';
-export const labelDoYouWantToQuitWithoutResolving =
-  'Do you want to quit the form without resolving the errors?';
+export const labelDoYouWantToQuit = 'Do you want to leave this page?';
+
+export const labelYourFormHasUnsavedChanges =
+  'Your changes will not be saved if you leave this page.';
 export const labelDoYouWantToSaveChanges = 'Do you want to save the changes?';
-export const labelDoYouWantToResolveErrors =
-  'Do you want to resolve the errors?';
-export const labelSave = 'Save';
 
 export default {
   labelDiscard,
-  labelDoYouWantToQuitWithoutResolving,
-  labelDoYouWantToResolveErrors,
-  labelDoYouWantToSaveChanges,
-  labelIfYouClickOnDiscard,
-  labelResolve,
   labelSave,
-  labelThereAreErrorsInTheForm
+  labelLeave,
+  labelStay,
+  labelIfYouClickOnDiscard,
+  labelDoYouWantToQuit,
+  labelYourFormHasUnsavedChanges,
+  labelDoYouWantToSaveChanges
 };

package/src/Form/Inputs/Autocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isNil, map, not, path, prop, type } from 'ramda';
+import { path, equals, isNil, map, not, prop, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import { FormHelperText, Stack } from '@mui/material';

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isEmpty, path, propEq, reject, split } from 'ramda';
+import { path, equals, isEmpty, propEq, reject, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -134,15 +134,18 @@ const ConnectedAutocomplete = ({
         error={error}
         field={filterKey}
         getEndpoint={getEndpoint}
+        decoder={connectedAutocomplete?.decoder}
         getRenderedOptionText={connectedAutocomplete?.getRenderedOptionText}
         initialPage={1}
         isOptionEqualToValue={isOptionEqualToValue}
         label={t(label)}
         name={fieldName}
         required={isRequired}
-        value={value ?? null}
+        value={value ?? []}
         onBlur={blur}
         onChange={changeAutocomplete}
+        limitTags={connectedAutocomplete?.limitTags}
+        searchConditions={connectedAutocomplete?.additionalConditionParameters}
       />
     ),
     memoProps: [

package/src/Form/Inputs/Grid.tsx

@@ -4,6 +4,7 @@ import { InputPropsWithoutGroup } from './models';
 
 import { Box, Typography } from '@mui/material';
 import { FormikValues, useFormikContext } from 'formik';
+import { isNotEmpty, isNotNil } from 'ramda';
 import { getInput } from '.';
 
 interface StylesProps {
@@ -47,12 +48,17 @@ const Grid = ({
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);
 
+        const key =
+          isNotNil(field.label) || isNotEmpty(field.label)
+            ? field.label
+            : field.additionalLabel;
+
         if (field.hideInput?.(values) ?? false) {
           return null;
         }
 
         return (
-          <Box sx={{ width: '100%' }} key={field.fieldName}>
+          <Box sx={{ width: '100%' }} key={key}>
             {field.additionalLabel && (
               <Typography
                 sx={{ marginBottom: 0.5, color: 'primary.main' }}

package/src/Form/Inputs/Radio.tsx

@@ -1,5 +1,5 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split, type } from 'ramda';
+import { path, equals, includes, split, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {

package/src/Form/Inputs/Switch.tsx

@@ -67,7 +67,7 @@ const Switch = ({
         label={t(label) as string}
       />
     ),
-    memoProps: [value, disabled, additionalMemoProps]
+    memoProps: [value, disabled, additionalMemoProps, values]
   });
 };
 

package/src/Form/Inputs/Text.tsx

@@ -2,11 +2,11 @@ import { ChangeEvent, useCallback, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
 import {
+  path,
   equals,
   gt,
   isEmpty,
   not,
-  path,
   split,
   type as variableType
 } from 'ramda';

package/src/Form/Inputs/index.tsx

@@ -20,6 +20,8 @@ import {
   groupBy,
   isEmpty,
   isNil,
+  isNotEmpty,
+  isNotNil,
   keys,
   last,
   not,
@@ -114,9 +116,8 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
   inputs: {
     display: 'flex',
     flexDirection: 'column',
-    marginTop: theme.spacing(1),
-    rowGap: theme.spacing(2),
-    marginBottom: theme.spacing(1)
+    margin: theme.spacing(2, 0),
+    rowGap: theme.spacing(2)
   }
 }));
 
@@ -203,6 +204,7 @@ const Inputs = ({
           ? find(propEq(groupName, 'name'), groups)
           : ({} as Group);
 
+        const hasGroupDivider = !groups[index]?.isDividerHidden;
         const isFirstElement = areGroupsOpen || equals(index, 0);
 
         return (
@@ -217,22 +219,19 @@ const Inputs = ({
               >
                 <div className={classes.inputs}>
                   {groupedInputs.map((inputProps) => {
+                    const key =
+                      isNotNil(inputProps.label) || isNotEmpty(inputProps.label)
+                        ? inputProps.label
+                        : inputProps.additionalLabel;
+
                     if (isLoading) {
-                      return (
-                        <LoadingSkeleton
-                          input={inputProps}
-                          key={inputProps.label}
-                        />
-                      );
+                      return <LoadingSkeleton input={inputProps} key={key} />;
                     }
 
                     const Input = getInput(inputProps.type);
 
                     return (
-                      <div
-                        className={classes.inputWrapper}
-                        key={inputProps.label}
-                      >
+                      <div className={classes.inputWrapper} key={key}>
                         {inputProps.additionalLabel && (
                           <Typography
                             className={cx(
@@ -253,17 +252,19 @@ const Inputs = ({
                 </div>
               </CollapsibleGroup>
             </div>
-            {hasGroupTitle && not(equals(lastGroup, groupName as string)) && (
-              <Divider
-                flexItem
-                className={classes.divider}
-                orientation={
-                  equals(groupDirection, GroupDirection.Horizontal)
-                    ? 'vertical'
-                    : 'horizontal'
-                }
-              />
-            )}
+            {hasGroupDivider &&
+              hasGroupTitle &&
+              not(equals(lastGroup, groupName as string)) && (
+                <Divider
+                  flexItem
+                  className={classes.divider}
+                  orientation={
+                    equals(groupDirection, GroupDirection.Horizontal)
+                      ? 'vertical'
+                      : 'horizontal'
+                  }
+                />
+              )}
           </Fragment>
         );
       })}

package/src/Form/Inputs/models.ts

@@ -59,6 +59,8 @@ export interface InputProps {
     endpoint?: string;
     filterKey?: string;
     getRenderedOptionText?: (option) => string | JSX.Element;
+    decoder?;
+    limitTags: number;
   };
   file?: {
     multiple?: boolean;

package/src/Graph/BarChart/BarChart.cypress.spec.tsx

@@ -30,7 +30,7 @@ const initialize = ({
   tooltip,
   axis,
   orientation,
-  barStyle,
+  barStyle
 }: Pick<
   BarChartProps,
   'data' | 'legend' | 'axis' | 'barStyle' | 'orientation' | 'tooltip' | 'start'
@@ -61,14 +61,14 @@ const checkWidth = (orientation): void => {
     cy.get('g[class*="visx-rows"] > line')
       .eq(0)
       .should('have.attr', 'x2')
-      .and('equal', '1135');
+      .and('equal', '1145');
 
     return;
   }
   cy.get('g[class*="visx-rows"] > line')
     .eq(0)
     .should('have.attr', 'x2')
-    .and('equal', '1170');
+    .and('equal', '1180');
 };
 
 describe('Bar chart', () => {