@centreon/ui 25.7.3 → 25.8.1

package/package.json

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

package/src/Form/CollapsibleGroup.tsx

@@ -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)
   },
@@ -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/Grid.tsx

@@ -1,5 +1,3 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { InputPropsWithoutGroup } from './models';
 
 import { Box, Typography } from '@mui/material';
@@ -7,34 +5,10 @@ import { FormikValues, useFormikContext } from 'formik';
 import { isNotEmpty, isNotNil } from 'ramda';
 import { getInput } from '.';
 
-interface StylesProps {
-  alignItems?: string;
-  columns?: number;
-  gridTemplateColumns?: string;
-}
-
-const useStyles = makeStyles<StylesProps>()(
-  (theme, { columns, gridTemplateColumns, alignItems }) => ({
-    gridFields: {
-      alignItems: alignItems || 'flex-start',
-      columnGap: theme.spacing(4),
-      display: 'grid',
-      gridTemplateColumns: gridTemplateColumns || `repeat(${columns}, 1fr)`,
-      rowGap: theme.spacing(2)
-    }
-  })
-);
-
 const Grid = ({
   grid,
   hideInput
 }: InputPropsWithoutGroup): JSX.Element | null => {
-  const { classes, cx } = useStyles({
-    alignItems: grid?.alignItems,
-    columns: grid?.columns.length,
-    gridTemplateColumns: grid?.gridTemplateColumns
-  });
-
   const { values } = useFormikContext<FormikValues>();
 
   if (hideInput?.(values) ?? false) {
@@ -44,7 +18,15 @@ const Grid = ({
   const className = grid?.className || '';
 
   return (
-    <div className={cx(classes.gridFields, className)}>
+    <div
+      className={`${className} grid gap-3`}
+      style={{
+        gridTemplateColumns:
+          className ? grid?.gridTemplateColumns || undefined : grid?.gridTemplateColumns ||
+            `repeat(${grid?.columns.length || 1}, 1fr)`,
+        alignItems: grid?.alignItems || 'flex-start'
+      }}
+    >
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);
 
@@ -62,7 +44,7 @@ const Grid = ({
             {field.additionalLabel && (
               <Typography
                 sx={{ marginBottom: 0.5, color: 'primary.main' }}
-                className={cx(field?.additionalLabelClassName)}
+                className={field?.additionalLabelClassName}
                 variant="h6"
               >
                 {field.additionalLabel}

package/src/Form/Inputs/SubGroupDivider.tsx

@@ -0,0 +1,7 @@
+import Divider from '@mui/material/Divider';
+
+const SubgroupDivider = () => {
+  return <Divider className="border-dashed" />;
+};
+
+export { SubgroupDivider };

package/src/Form/Inputs/Text.tsx

@@ -127,6 +127,7 @@ const Text = ({
         ariaLabel={t(label) || ''}
         autoFocus={autoFocus}
         dataTestId={dataTestId || label}
+        data-testid-suffix={`test-${label}`}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}

package/src/Form/Inputs/index.tsx

@@ -43,6 +43,7 @@ import Grid from './Grid';
 import List from './List/List';
 import LoadingSkeleton from './LoadingSkeleton';
 import RadioInput from './Radio';
+import { SubgroupDivider } from './SubGroupDivider';
 import SwitchInput from './Switch';
 import TextInput from './Text';
 import { Group, InputProps, InputPropsWithoutGroup, InputType } from './models';
@@ -82,6 +83,11 @@ export const getInput = cond<
   ],
   [equals(InputType.List) as (b: InputType) => boolean, always(List)],
   [equals(InputType.File) as (b: InputType) => boolean, always(File)],
+  [equals(InputType.Text) as (b: InputType) => boolean, always(TextInput)],
+  [
+    equals(InputType.Divider) as (b: InputType) => boolean,
+    always(SubgroupDivider)
+  ],
   [T, always(TextInput)]
 ]);
 

package/src/Form/Inputs/models.ts

@@ -21,7 +21,8 @@ export enum InputType {
   Checkbox = 11,
   CheckboxGroup = 12,
   List = 13,
-  File = 14
+  File = 14,
+  Divider = 15
 }
 
 interface FieldsTableGetRequiredProps {

package/src/Form/Section/FormSection.tsx

@@ -0,0 +1,34 @@
+import { Box, TabsProps } from '@mui/material';
+import { isNil } from 'ramda';
+import { useMemo } from 'react';
+import { Tabs } from '../../components/Tabs';
+import { Group } from '../Inputs/models';
+import { groupToTab } from './PanelTabs';
+import { useNavigateToSection } from './navigateToSection';
+
+export interface FormSectionProps extends TabsProps {
+  groups?: Group[];
+}
+
+const FormSection = ({ groups }: FormSectionProps) => {
+  if (isNil(groups) || groups.length < 4) {
+    return null;
+  }
+
+  const navigateToSection = useNavigateToSection();
+  const tabMemo = useMemo(() => groupToTab(groups), [groups]);
+
+  return (
+    <Box className="sticky top-0 bg-background-paper z-100">
+      <Tabs
+        variant="scrollable"
+        scrollButtons={false}
+        tabs={tabMemo}
+        defaultTab={tabMemo[0].value}
+        onChange={navigateToSection}
+      />
+    </Box>
+  );
+};
+
+export { FormSection };

package/src/Form/Section/PanelTabs.tsx

@@ -0,0 +1,13 @@
+import { prop, sortBy } from 'ramda';
+import { TabI } from 'src/components/Tabs/Tabs';
+import { Group } from '../Inputs/models';
+
+const groupToTab = (groups: Array<Group>): Array<TabI> => {
+  const sortedGroups = sortBy(prop('order'), groups);
+
+  return sortedGroups.map((group) => {
+    return { value: group.name, label: group.name };
+  });
+};
+
+export { groupToTab };

package/src/Form/Section/navigateToSection.ts

@@ -0,0 +1,9 @@
+export const useNavigateToSection = () => {
+    return (sectionName: string) => {
+        const section = document.querySelector(
+            `[data-section-group-form-id="${sectionName}"]`
+        );
+
+        section?.scrollIntoView({ behavior: 'smooth' });
+    };
+};

package/src/Form/storiesData.tsx

@@ -157,12 +157,16 @@ export const basicFormGroups: Array<Group> = [
   {
     EndIcon: () => <HelpOutlineIcon />,
     TooltipContent: (): JSX.Element => <Typography>Tooltip content</Typography>,
+    name: 'Third group',
+    order: 3
+  },
+  {
     name: 'Second group',
     order: 2
   },
   {
-    name: 'Third group',
-    order: 3
+    name: 'Fourth group',
+    order: 4
   }
 ];
 
@@ -215,6 +219,12 @@ export const basicFormInputs: Array<InputProps> = [
     },
     type: InputType.Radio
   },
+  {
+    fieldName: 'div',
+    group: 'First group',
+    label: 'divider',
+    type: InputType.Divider
+  },
   {
     additionalLabel: 'Notifications',
     fieldName: '',

package/src/components/Modal/Modal.stories.tsx

@@ -4,6 +4,7 @@ import { Button } from '../Button';
 
 import { Modal } from '.';
 import '../../ThemeProvider/tailwindcss.css';
+import { basicFormWithCollapsibleGroups } from '../../Form/Form.stories';
 
 const meta: Meta<typeof Modal> = {
   argTypes: {
@@ -45,6 +46,25 @@ export const Default: Story = {
   )
 };
 
+export const WithForm: Story = {
+  args: {
+    ...Default.args
+  },
+
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>{basicFormWithCollapsibleGroups()}</Modal.Body>
+      <Modal.Actions
+        labels={{
+          cancel: 'Cancel',
+          confirm: 'Confirm'
+        }}
+      />
+    </Modal>
+  )
+};
+
 export const AsDangerAction: Story = {
   args: {
     ...Default.args

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

@@ -8,7 +8,7 @@ const useStyles = makeStyles<{
 }>()((theme, props) => ({
   modal: {
     '& .MuiDialog-paper': {
-      gap: theme.spacing(2),
+      gap: theme.spacing(3),
       padding: theme.spacing(2.5)
     },
     '&[data-size="fullscreen"]': {
@@ -65,15 +65,6 @@ const useStyles = makeStyles<{
     right: 0,
     zIndex: theme.zIndex.modal
   },
-  modalBody: {
-    '& > p': {
-      '&:first-of-type': {
-        margin: theme.spacing(0, 0, 1, 0)
-      },
-      margin: theme.spacing(1, 0, 1, 0),
-      width: '90%'
-    }
-  },
   modalCloseButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -82,19 +73,7 @@ const useStyles = makeStyles<{
     },
     top: theme.spacing(1)
   },
-  modalHeader: {
-    '& .MuiDialogTitle-root': {
-      padding: theme.spacing(0)
-    },
-    display: 'flex',
-    gap: theme.spacing(2),
-
-    justifyContent: 'space-between'
-  },
-  modalTitle: {
-    fontSize: theme.typography.h5.fontSize,
-    fontWeight: theme.typography.fontWeightBold
-  }
+  
 }));
 
 export { useStyles };

package/src/components/Modal/Modal.tsx

@@ -54,7 +54,7 @@ const Modal = ({
       TransitionProps={{
         direction: 'up'
       }}
-      className={classes.modal}
+      className={`${classes.modal} gap-6`}
       data-size={size}
       open={open}
       onClose={onClose}

package/src/components/Modal/ModalBody.tsx

@@ -1,15 +1,17 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { useStyles } from './Modal.styles';
+import { modalBody } from './modal.module.css';
 
 export type ModalHeaderProps = {
   children?: ReactNode;
 };
 
 const ModalBody = ({ children }: ModalHeaderProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <div className={classes.modalBody}>{children}</div>;
+  return (
+    <div className={modalBody} data-testid="modal-body">
+      {children}
+    </div>
+  );
 };
 
 export { ModalBody };

package/src/components/Modal/ModalHeader.tsx

@@ -2,7 +2,9 @@ import { ReactElement, ReactNode } from 'react';
 
 import { DialogTitleProps, DialogTitle as MuiDialogTitle } from '@mui/material';
 
-import { useStyles } from './Modal.styles';
+import '../../../src/ThemeProvider/tailwindcss.css';
+
+import { modalHeader } from './modal.module.css';
 
 export type ModalHeaderProps = {
   children?: ReactNode;
@@ -12,11 +14,9 @@ const ModalHeader = ({
   children,
   ...rest
 }: ModalHeaderProps & DialogTitleProps): ReactElement => {
-  const { classes } = useStyles();
-
   return (
-    <div className={classes.modalHeader}>
-      <MuiDialogTitle color="primary" className={classes.modalTitle} {...rest}>
+    <div className={modalHeader}>
+      <MuiDialogTitle className="p-0 font-bold text-2xl" color="primary" {...rest}>
         {children}
       </MuiDialogTitle>
     </div>

package/src/components/Modal/modal.module.css

@@ -0,0 +1,16 @@
+.modalHeader {
+  & .MuiDialogTitle-root {
+    padding: 0;
+  }
+
+  display: flex;
+  gap: var(--spacing-4);
+  justify-content: space-between;
+}
+
+.modalBody {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  padding-right: var(--spacing-4); /* To prevent scrollbar from overlapping content */
+}

package/src/components/Tabs/Tab.styles.ts

@@ -5,12 +5,6 @@ export const useTabsStyles = makeStyles()((theme) => ({
     bottom: 'unset'
   },
   tab: {
-    '&[aria-selected="true"]': {
-      color: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightBold
-    },
-    color: theme.palette.text.primary,
-    fontWeight: theme.typography.fontWeightRegular,
     marginRight: theme.spacing(2),
     minHeight: 0,
     minWidth: 0,

package/src/components/Tabs/Tabs.tsx

@@ -5,33 +5,53 @@ import { Tabs as MuiTabs, Tab, TabsProps } from '@mui/material';
 
 import { useTabsStyles } from './Tab.styles';
 
+import '../../ThemeProvider/tailwindcss.css';
+
+export interface TabI {
+  label: string;
+  value: string;
+}
+
 type Props = {
-  children: Array<JSX.Element>;
+  children?: Array<JSX.Element>;
   defaultTab: string;
   tabList?: TabsProps;
-  tabs: Array<{
-    label: string;
-    value: string;
-  }>;
+  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  scrollButtons?: boolean | 'auto';
+  tabs: TabI[];
+  onChange?: (newValue: string) => void;
 };
 
 export const Tabs = ({
   children,
   defaultTab,
   tabs,
-  tabList
+  tabList,
+  variant,
+  scrollButtons = 'auto',
+  onChange
 }: Props): JSX.Element => {
   const { classes } = useTabsStyles();
 
   const [selectedTab, setSelectedTab] = useState(defaultTab);
 
-  const changeTab = useCallback((_, newValue: string): void => {
-    setSelectedTab(newValue);
-  }, []);
+  const changeTab = useCallback(
+    (_, newValue: string): void => {
+      if (onChange) onChange(newValue);
+
+      setSelectedTab(newValue);
+    },
+    [onChange]
+  );
+
+  const selectedTabStyle = ' font-bold text-primary-main';
+  const defaultTabStyle = ' font-normal';
 
   return (
     <TabContext value={selectedTab}>
       <MuiTabs
+        scrollButtons={scrollButtons}
+        variant={variant}
         classes={{
           indicator: classes.indicator,
           root: classes.tabs
@@ -43,10 +63,11 @@ export const Tabs = ({
         {tabs.map(({ value, label }) => (
           <Tab
             aria-label={label}
-            className={classes.tab}
+            className={`${classes.tab} ${selectedTab === value ? selectedTabStyle : defaultTabStyle}`}
             key={value}
             label={label}
             value={value}
+            data-testid={`tab-${value}`}
           />
         ))}
       </MuiTabs>

package/src/index.ts

@@ -89,6 +89,7 @@ export type {
   SearchMatch
 } from './api/buildListingEndpoint/models';
 export { default as buildListingDecoder } from './api/buildListingDecoder';
+export { customFetch } from './api/customFetch';
 
 export { default as ContentWithCircularLoading } from './ContentWithCircularProgress';
 export {