@centreon/ui 25.7.2 → 25.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.7.2",
+  "version": "25.8.0",
   "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/Graph/BarChart/BarChart.cypress.spec.tsx

@@ -30,10 +30,20 @@ const initialize = ({
   tooltip,
   axis,
   orientation,
-  barStyle
+  barStyle,
+  min,
+  max
 }: Pick<
   BarChartProps,
-  'data' | 'legend' | 'axis' | 'barStyle' | 'orientation' | 'tooltip' | 'start'
+  | 'data'
+  | 'legend'
+  | 'axis'
+  | 'barStyle'
+  | 'orientation'
+  | 'tooltip'
+  | 'start'
+  | 'min'
+  | 'max'
 >): void => {
   cy.adjustViewport();
 
@@ -47,6 +57,8 @@ const initialize = ({
           legend={legend}
           orientation={orientation ?? 'horizontal'}
           tooltip={tooltip}
+          min={min}
+          max={max}
           {...defaultArgs}
         />
       </div>
@@ -287,4 +299,17 @@ describe('Bar chart', () => {
     cy.contains('05/31/2023').should('be.visible');
     cy.contains('06/07/2023').should('be.visible');
   });
+
+  it('displays the bar chart according to min and max boundaries', () => {
+    initialize({
+      data: dataLastWeek,
+      min: -0.05,
+      max: 1
+    });
+
+    cy.contains('05/31/2023').should('be.visible');
+    cy.contains('06/07/2023').should('be.visible');
+    cy.contains('1 s').should('be.visible');
+    cy.contains('1%').should('be.visible');
+  });
 });

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -250,3 +250,13 @@ export const mixedStackedVertical: Story = {
   },
   render: Template
 };
+
+export const mixedStackedMinMax: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceMixedStacked,
+    min: 10,
+    max: 20
+  },
+  render: Template
+};

package/src/Graph/BarChart/BarChart.tsx

@@ -10,11 +10,11 @@ import { Provider } from 'jotai';
 
 import { Box } from '@mui/material';
 
+import Loading from '../../LoadingSkeleton';
 import LoadingSkeleton from '../Chart/LoadingSkeleton';
 import { LineChartProps } from '../Chart/models';
 import useChartData from '../Chart/useChartData';
 import { LineChartData, Thresholds } from '../common/models';
-import Loading from '../../LoadingSkeleton';
 
 import useResizeObserver from 'use-resize-observer';
 import ResponsiveBarChart from './ResponsiveBarChart';
@@ -26,7 +26,17 @@ dayjs.extend(timezonePlugin);
 
 export interface BarChartProps
   extends Partial<
-    Pick<LineChartProps, 'tooltip' | 'legend' | 'height' | 'axis' | 'header'>
+    Pick<
+      LineChartProps,
+      | 'tooltip'
+      | 'legend'
+      | 'height'
+      | 'axis'
+      | 'header'
+      | 'min'
+      | 'max'
+      | 'boundariesUnit'
+    >
   > {
   barStyle?: BarStyle;
   data?: LineChartData;
@@ -58,7 +68,10 @@ const BarChart = ({
     opacity: 1,
     radius: 0.2
   },
-  skipIntersectionObserver
+  skipIntersectionObserver,
+  min,
+  max,
+  boundariesUnit
 }: BarChartProps): JSX.Element => {
   const { adjustedData } = useChartData({ data, end, start });
   const { ref, width, height: responsiveHeight } = useResizeObserver();
@@ -93,6 +106,9 @@ const BarChart = ({
             tooltip={tooltip}
             width={width || 0}
             skipIntersectionObserver={skipIntersectionObserver}
+            min={min}
+            max={max}
+            boundariesUnit={boundariesUnit}
           />
         )}
       </Box>

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -40,6 +40,9 @@ interface Props
   thresholds?: ThresholdsModel;
   width: number;
   skipIntersectionObserver?: boolean;
+  min?: number;
+  max?: number;
+  boundariesUnit?: string;
 }
 
 const ResponsiveBarChart = ({
@@ -56,7 +59,10 @@ const ResponsiveBarChart = ({
   orientation,
   tooltip,
   barStyle,
-  skipIntersectionObserver
+  skipIntersectionObserver,
+  min,
+  max,
+  boundariesUnit
 }: Props): JSX.Element => {
   const { title, timeSeries, baseAxis, lines } = graphData || {};
 
@@ -131,7 +137,11 @@ const ResponsiveBarChart = ({
         thresholdUnit,
         thresholds: (thresholds?.enabled && thresholdValues) || [],
         valueGraphHeight:
-          (isHorizontal ? graphHeight : graphWidth) - margin.bottom
+          (isHorizontal ? graphHeight : graphWidth) - margin.bottom,
+        min,
+        max,
+        isBarChart: true,
+        boundariesUnit
       }),
     [
       displayedLines,