@centreon/ui 25.3.3 → 25.4.0-MON-191119-npm-develop.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.3.3",
+  "version": "25.4.0-MON-191119-npm-develop.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -12,10 +12,10 @@
     "test": "jest",
     "test:storybook:local": "test-storybook --url http://127.0.0.1:9001",
     "test:ci": "jest --silent --reporter=jest-junit",
-    "cypress:ui": "cypress open --component --browser=chrome",
-    "cypress:run:updateSnapshots": "cypress run --component --browser=chrome --env updateSnapshots=true",
-    "cypress:run:coverage": "cypress run --component --browser=chrome --env codeCoverageTasksRegistered=true",
-    "cypress:run": "cypress run --component --browser=chrome",
+    "cypress:ui": "cypress open --component --browser=chromium",
+    "cypress:run:updateSnapshots": "cypress run --component --browser=chromium --env updateSnapshots=true",
+    "cypress:run:coverage": "cypress run --component --browser=chromium --env codeCoverageTasksRegistered=true",
+    "cypress:run": "cypress run --component --browser=chromium",
     "cypress:install": "cypress install",
     "cypress:cli": "./cypress/scripts/cypress-cli.sh",
     "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts",
@@ -44,7 +44,8 @@
     ".": "./src/index.ts",
     "./components": "./src/components/index.ts",
     "./fonts/*": "./src/fonts/*",
-    "./test/testRenderer": "./test/testRenderer.tsx"
+    "./test/testRenderer": "./test/testRenderer.tsx",
+    "./tailwindcss": "./src/ThemeProvider/tailwindcss.css"
   },
   "files": [
     "package.json",
@@ -57,6 +58,8 @@
     "@cypress/webpack-dev-server": "^4.0.1",
     "@faker-js/faker": "^9.5.1",
     "@mdx-js/react": "^3.1.0",
+    "@rsbuild/core": "^1.3.21",
+    "@rsbuild/plugin-react": "^1.3.1",
     "@simonsmith/cypress-image-snapshot": "^9.1.0",
     "@storybook/addon-a11y": "^8.6.3",
     "@storybook/addon-docs": "^8.6.3",
@@ -72,6 +75,9 @@
     "@storybook/test": "^8.6.3",
     "@storybook/test-runner": "^0.22.0",
     "@storybook/theming": "^8.6.3",
+    "@tailwindcss/cli": "^4.1.7",
+    "@tailwindcss/postcss": "^4.1.7",
+    "@tailwindcss/vite": "^4.1.7",
     "@testing-library/cypress": "^10.0.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -84,7 +90,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@vitejs/plugin-react-swc": "^3.8.0",
     "chai": "^5.2.0",
-    "cypress": "^14.1.0",
+    "cypress": "^15.5.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
@@ -95,19 +101,21 @@
     "react-test-renderer": "^19.0.0",
     "remark-gfm": "^4.0.1",
     "speed-measure-vite-plugin": "^1.1.0",
-    "storybook": "^8.6.3",
+    "storybook": "^8.6.14",
     "storybook-addon-mock": "^5.0.0",
     "storybook-dark-mode": "^4.0.2",
+    "storybook-react-rsbuild": "^1.0.1",
     "style-dictionary": "^4.3.3",
+    "tailwindcss": "^4.1.7",
     "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",
-    "vite": "^6.2.0",
+    "vite": "^6.3.5",
     "vite-plugin-istanbul": "^7.0.0",
     "vite-plugin-svgr": "^4.3.0",
     "vite-plugin-turbosnap": "^1.0.3"
   },
   "peerDependencies": {
-    "@centreon/ui-context": "link:../ui-context"
+    "@centreon/ui-context": "workspace:*"
   },
   "dependencies": {
     "@lexical/html": "^0.27.0",
@@ -117,7 +125,7 @@
     "@lexical/rich-text": "^0.27.0",
     "@lexical/selection": "^0.27.0",
     "@lexical/utils": "^0.27.0",
-    "@mui/material": "^6.4.6",
+    "@mui/material": "^7.1.0",
     "@react-spring/web": "^9.7.5",
     "@visx/clip-path": "^3.12.0",
     "@visx/curve": "^3.12.0",
@@ -158,5 +166,11 @@
     "workerDirectory": [
       "public"
     ]
+  },
+  "nyc": {
+    "report-dir": "coverage",
+    "reporter": [
+      "json"
+    ]
   }
 }

package/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.7.3'
-const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
+const PACKAGE_VERSION = '2.2.14'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,12 +62,7 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
+        payload: true,
       })
       break
     }
@@ -160,10 +155,6 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
-  if (activeClientIds.has(event.clientId)) {
-    return client
-  }
-
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -192,26 +183,12 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    // Cast the request headers to a new Headers instance
-    // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers)
-
-    // Remove the "accept" header value that marked this request as passthrough.
-    // This prevents request alteration and also keeps it compliant with the
-    // user-defined CORS policies.
-    const acceptHeader = headers.get('accept')
-    if (acceptHeader) {
-      const values = acceptHeader.split(',').map((value) => value.trim())
-      const filteredValues = values.filter(
-        (value) => value !== 'msw/passthrough',
-      )
+    const headers = Object.fromEntries(requestClone.headers.entries())
 
-      if (filteredValues.length > 0) {
-        headers.set('accept', filteredValues.join(', '))
-      } else {
-        headers.delete('accept')
-      }
-    }
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
 
     return fetch(requestClone, { headers })
   }

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/Button/Save/index.stories.tsx

@@ -4,6 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material';
 
 import ButtonSave from '.';
+import '../../ThemeProvider/tailwindcss.css';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   root: {

package/src/Checkbox/Checkbox.tsx

@@ -55,12 +55,14 @@ interface Props {
   dataTestId?: string;
   disabled?: boolean;
   label: string;
+  id: string;
   labelPlacement?: LabelPlacement;
   labelProps?: TypographyProps;
   onChange?: (e) => void;
 }
 
 const Checkbox = ({
+  id,
   Icon,
   checked,
   label,
@@ -86,7 +88,7 @@ const Checkbox = ({
             className={classes.checkbox}
             color="primary"
             disabled={disabled}
-            id={label}
+            id={id}
             size="small"
             sx={{ padding: 0 }}
             onChange={onChange}

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -6,6 +6,8 @@ import { TypographyProps } from '@mui/material/Typography';
 
 import Checkbox, { LabelPlacement } from '../Checkbox';
 
+import { useTranslation } from 'react-i18next';
+
 interface Props {
   className?: string;
   dataTestId?: string;
@@ -45,6 +47,8 @@ const CheckboxGroup = ({
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
+  const { t } = useTranslation();
+
   const row = !equals(direction, 'vertical');
 
   return (
@@ -61,10 +65,11 @@ const CheckboxGroup = ({
             className={cx(classes.checkbox, className)}
             disabled={disabled}
             key={value}
-            label={value}
+            label={t(value)}
             labelPlacement={labelPlacement}
             labelProps={labelProps}
             onChange={onChange}
+            id={value}
           />
         );
       })}

package/src/Colors/index.tsx

@@ -55,7 +55,7 @@ const ContainerDescription = ({
         {toPairs(palette[keyTheme]).map(
           ([key, value]) =>
             !includes(key, keysToRemove) && (
-              <Grid item key={key} xs={6}>
+              <Grid item key={key} size={6}>
                 <div className={classes.headerContainer}>
                   <Typography variant="h6">{key}</Typography>
                   <Typography variant="button">{value}</Typography>

package/src/Dashboard/Dashboard.styles.ts

@@ -17,7 +17,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         boxShadow: theme.shadows[3]
       },
       '& .react-grid-item.react-grid-placeholder': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.4)
+        background: `${alpha(theme.palette.primary.main, 0.4)} !important`
       },
       '& .react-grid-item.resizing': {
         boxShadow: theme.shadows[3]

package/src/Dashboard/Layout.tsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useSetAtom } from 'jotai';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
-import 'react-grid-layout/css/styles.css';
 
 import { ParentSize, useMemoComponent } from '..';
 
@@ -10,6 +9,7 @@ import { Box } from '@mui/material';
 import { useDashboardLayoutStyles } from './Dashboard.styles';
 import { isResizingItemAtom } from './atoms';
 import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
+import 'react-grid-layout/css/styles.css';
 
 const ReactGridLayout = WidthProvider(GridLayout);
 

package/src/Dialog/UnsavedChanges/index.stories.tsx

@@ -4,6 +4,7 @@ import { useSnackbar } from '../..';
 import SnackbarProvider from '../../Snackbar/SnackbarProvider';
 
 import UnsavedChangesDialog from '.';
+import '../../ThemeProvider/tailwindcss.css';
 
 export default {
   argTypes: {

package/src/Form/CollapsibleGroup.tsx

@@ -3,8 +3,8 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import ExpandMore from '@mui/icons-material/ExpandMore';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+
 import {
   Box,
   Collapse,
@@ -35,12 +35,6 @@ const useStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexDirection: 'row'
   },
-  groupTitleIcon: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    flexDirection: 'row'
-  },
   tooltip: {
     maxWidth: theme.spacing(60)
   },
@@ -66,7 +60,7 @@ const CollapsibleGroup = ({
 
   const containerClassName = className || '';
 
-  const CollapseIcon = isOpen ? ExpandMore : ChevronRightIcon;
+  const CollapseIcon = isOpen ? ExpandLess : ExpandMore;
   const ContainerComponent = useCallback(
     ({
       children: containerComponentChildren
@@ -77,7 +71,7 @@ const CollapsibleGroup = ({
           disableGutters
           disableRipple
           aria-label={group?.name}
-          className={cx(classes.groupTitleContainer, containerClassName)}
+          className={`${cx(classes.groupTitleContainer, containerClassName)} bg-background-listing-header`}
           onClick={toggle}
         >
           {containerComponentChildren}
@@ -94,12 +88,17 @@ const CollapsibleGroup = ({
     <>
       {hasGroupTitle && (
         <ContainerComponent>
-          {isCollapsible && <CollapseIcon />}
-          <div className={classes.groupTitleIcon}>
+          <div
+            data-testid={`${group?.name}-header`}
+            className={
+              'snap-y flex flex-row justify-between w-full pl-3 pr-1 text-white items-center'
+            }
+          >
             <Typography
-              className="groupText"
+              className="groupText scroll-m-12 snap-start"
               variant="h6"
               {...group?.titleAttributes}
+              data-section-group-form-id={group?.name}
             >
               {t(group?.name as string)}
             </Typography>
@@ -116,6 +115,7 @@ const CollapsibleGroup = ({
                 </MuiIconButton>
               </Tooltip>
             )}
+            {isCollapsible && <CollapseIcon />}
           </div>
         </ContainerComponent>
       )}

package/src/Form/Form.cypress.spec.tsx

@@ -132,16 +132,129 @@ describe('Form list', () => {
   });
 });
 
-const initializeFile = (): void => {
+const initializeFormWithSections = (): void => {
   cy.mount({
     Component: (
       <Form
+        isCollapsible
         initialValues={{
           list: []
         }}
+        groups={[
+          {
+            name: 'First group',
+            order: 1
+          },
+          {
+            name: 'Third group',
+            order: 3
+          },
+          {
+            name: 'Second group',
+            order: 2
+          },
+          {
+            name: 'Fourth group',
+            order: 4
+          }
+        ]}
         inputs={[
           {
-            fieldName: 'file',
+            fieldName: 'First name',
+            group: 'First group',
+            label: 'Name',
+            type: InputType.Text
+          },
+          {
+            fieldName: 'Divider',
+            group: 'First group',
+            label: 'Divider',
+            type: InputType.Divider
+          },
+          {
+            fieldName: 'Second name',
+            group: 'First group',
+            label: 'Name',
+            type: InputType.Text
+          },
+          {
+            fieldName: 'Third name',
+            group: 'First group',
+            label: 'Name',
+            type: InputType.Text
+          },
+          {
+            fieldName: 'Fourth name',
+            group: 'First group',
+            label: 'Name',
+            type: InputType.Text
+          },
+          {
+            fieldName: 'Fifth name',
+            group: 'First group',
+            label: 'Name',
+            type: InputType.Text
+          },
+          {
+            fieldName: 'Sixth name',
+            group: 'First group',
+            label: 'Name',
+            type: InputType.Text
+          },
+          {
+            fieldName: 'Seventh name',
+            group: 'First group',
+            label: 'Name',
+            type: InputType.Text
+          },
+          {
+            fieldName: 'Eighth name',
+            group: 'First group',
+            label: 'Name',
+            type: InputType.Text
+          },
+          {
+            fieldName: 'Ninth name',
+            group: 'First group',
+            label: 'Name',
+            type: InputType.Text
+          },
+          {
+            fieldName: 'First second group name',
+            group: 'Second group',
+            label: 'Name',
+            type: InputType.Text
+          },
+          {
+            fieldName: 'First third group name',
+            group: 'Third group',
+            label: 'Name',
+            type: InputType.Text
+          },
+          {
+            fieldName: 'First fourth group name',
+            group: 'Fourth group',
+            label: 'Name',
+            type: InputType.Text
+          }
+        ]}
+        submit={cy.stub()}
+        validationSchema={object()}
+      />
+    )
+  });
+};
+
+const initializeFile = () => {
+  cy.mount({
+    Component: (
+      <Form
+        initialValues={{
+          list: []
+        }}
+        inputs={[
+          {
+            fieldName: 'list',
             group: '',
             label: 'json',
             type: InputType.File,
@@ -170,3 +283,25 @@ describe('File', () => {
     cy.makeSnapshot();
   });
 });
+
+describe('Form with sections', () => {
+  beforeEach(initializeFormWithSections);
+  it('displays sections when correct amount of sections', () => {
+    cy.contains('First group').should('be.visible');
+    cy.contains('Second group').should('be.visible');
+    cy.contains('Third group').should('be.visible');
+    cy.contains('Fourth group').should('be.visible');
+    cy.makeSnapshot();
+  });
+
+  it('scrolls correctly to section', () => {
+    cy.window().then((win) => {
+      const initialScrollY = win.scrollY;
+      cy.contains('Third group').click();
+      cy.window().its('scrollY').should('be.greaterThan', initialScrollY);
+    });
+
+    cy.wait(500); // Wait for the scroll animation to complete
+    cy.makeSnapshot();
+  });
+});

package/src/Form/Form.stories.tsx

@@ -1,5 +1,3 @@
-import { Paper } from '@mui/material';
-
 import { Form, GroupDirection } from './Form';
 import {
   BasicForm,
@@ -27,51 +25,33 @@ const mandatoryProps = {
 };
 
 export const basicForm = (): JSX.Element => (
-  <Paper elevation={0} sx={{ p: 1 }}>
-    <Form<BasicForm> {...mandatoryProps} />
-  </Paper>
+  <Form<BasicForm> {...mandatoryProps} />
 );
 
 export const basicFormWithGroups = (): JSX.Element => (
-  <Paper elevation={0} sx={{ p: 1 }}>
-    <Form<BasicForm> {...mandatoryProps} groups={basicFormGroups} />
-  </Paper>
+  <Form<BasicForm> {...mandatoryProps} groups={basicFormGroups} />
 );
 
 export const basicFormWithCollapsibleGroups = (): JSX.Element => (
-  <Paper elevation={0} sx={{ p: 1 }}>
-    <Form<BasicForm>
-      {...mandatoryProps}
-      isCollapsible
-      groups={basicFormGroups}
-    />
-  </Paper>
+  <Form<BasicForm> {...mandatoryProps} isCollapsible groups={basicFormGroups} />
 );
 
 export const basicFormWithCustomButton = (): JSX.Element => (
-  <Paper elevation={0} sx={{ p: 1 }}>
-    <Form<BasicForm> {...mandatoryProps} Buttons={CustomButton} />
-  </Paper>
+  <Form<BasicForm> {...mandatoryProps} Buttons={CustomButton} />
 );
 
 export const loadingForm = (): JSX.Element => (
-  <Paper elevation={0} sx={{ p: 1 }}>
-    <Form<BasicForm> {...mandatoryProps} isLoading />
-  </Paper>
+  <Form<BasicForm> {...mandatoryProps} isLoading />
 );
 
 export const loadingFormWithGroups = (): JSX.Element => (
-  <Paper elevation={0} sx={{ p: 1 }}>
-    <Form<BasicForm> {...mandatoryProps} isLoading groups={basicFormGroups} />
-  </Paper>
+  <Form<BasicForm> {...mandatoryProps} isLoading groups={basicFormGroups} />
 );
 
 export const basicFormWithHorizontalGroups = (): JSX.Element => (
-  <Paper elevation={0} sx={{ p: 1 }}>
-    <Form<BasicForm>
-      {...mandatoryProps}
-      groupDirection={GroupDirection.Horizontal}
-      groups={basicFormGroups.filter((group) => group.order !== 3)}
-    />
-  </Paper>
+  <Form<BasicForm>
+    {...mandatoryProps}
+    groupDirection={GroupDirection.Horizontal}
+    groups={basicFormGroups.filter((group) => group.order !== 3)}
+  />
 );

package/src/Form/Form.tsx

@@ -11,6 +11,7 @@ import { useStyles } from './Form.styles';
 import FormButtons from './FormButtons';
 import Inputs from './Inputs';
 import { Group, InputProps } from './Inputs/models';
+import { FormSection } from './Section/FormSection';
 
 export enum GroupDirection {
   Horizontal = 'horizontal',
@@ -76,6 +77,7 @@ const Form = <T extends object>({
       {...formikSharedConfig}
     >
       <div>
+        <FormSection groups={groups} />
         {children}
         <div className={cx(className, classes.form)}>
           <Inputs

package/src/Form/Inputs/Checkbox.tsx

@@ -15,7 +15,8 @@ const Checkbox = ({
   fieldName,
   getDisabled,
   hideInput,
-  dataTestId
+  dataTestId,
+  label
 }: InputPropsWithoutGroup): JSX.Element => {
   const { values, setFieldValue } = useFormikContext<FormikValues>();
 
@@ -45,7 +46,7 @@ const Checkbox = ({
         checked={value?.checked}
         dataTestId={dataTestId || ''}
         disabled={disabled}
-        label={value?.label}
+        label={label}
         labelPlacement={checkbox?.labelPlacement || 'end'}
         onChange={handleChange}
       />

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -57,7 +57,8 @@ const ConnectedAutocomplete = ({
           ...parameters.search
         },
         sort: { [filterKey]: 'ASC' }
-      }
+      },
+      customQueryParameters: connectedAutocomplete?.customQueryParameters || []
     });
 
   const fieldNamePath = split('.', fieldName);
@@ -134,6 +135,7 @@ const ConnectedAutocomplete = ({
         error={error}
         field={filterKey}
         getEndpoint={getEndpoint}
+        decoder={connectedAutocomplete?.decoder}
         getRenderedOptionText={connectedAutocomplete?.getRenderedOptionText}
         initialPage={1}
         isOptionEqualToValue={isOptionEqualToValue}
@@ -143,6 +145,9 @@ const ConnectedAutocomplete = ({
         value={value ?? null}
         onBlur={blur}
         onChange={changeAutocomplete}
+        disableSelectAll={connectedAutocomplete?.disableSelectAll}
+        limitTags={connectedAutocomplete?.limitTags}
+        searchConditions={connectedAutocomplete?.additionalConditionParameters}
       />
     ),
     memoProps: [