@centreon/ui 26.10.9 → 26.10.11

package/README.md

@@ -57,9 +57,8 @@ To start Storybook server, run:
 
 # Tests architecture
 
-There are two kinds of tests in Centreon UI.
+Centreon UI tests are component tests:
 - Jest + RTL and Cypress: Component testing. We want to migrate from Jest to Cypress
-- Chromatic: Chromatic is a tool that snapshots our stories and better handle snapshots changes using a review process
 
 
 ### Run Jest tests

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.10.9",
+  "version": "26.10.11",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -153,7 +153,6 @@
     "@visx/visx": "3.12.0",
     "@visx/zoom": "^3.12.0",
     "anylogger": "^1.0.11",
-    "chromatic": "^13.3.3",
     "d3-array": "3.2.4",
     "dayjs": "^1.11.13",
     "highlight.js": "^11.11.1",

package/src/Button/Save/index.stories.tsx

@@ -27,9 +27,6 @@ const meta = {
 
   component: ButtonSave,
 
-  parameters: {
-    chromatic: { delay: 300 }
-  },
   title: 'Button/Save'
 };
 

package/src/Form/CollapsibleGroup.tsx

@@ -10,7 +10,6 @@ import {
 
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
 
 import type { Group } from './Inputs/models';
 
@@ -23,22 +22,6 @@ interface Props {
   isCollapsible: boolean;
 }
 
-const useStyles = makeStyles()((theme) => ({
-  expandCollapseIcon: {
-    justifySelf: 'flex-end'
-  },
-  groupTitleContainer: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  title: {},
-  tooltip: {
-    maxWidth: theme.spacing(60)
-  }
-}));
-
 const CollapsibleGroup = ({
   children,
   isCollapsible,
@@ -47,7 +30,6 @@ const CollapsibleGroup = ({
   defaultIsOpen = false,
   className
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
   const { t } = useTranslation();
 
   const [isOpen, setIsOpen] = useState(isCollapsible && defaultIsOpen);
@@ -56,7 +38,7 @@ const CollapsibleGroup = ({
     setIsOpen((currentIsOpen) => !currentIsOpen);
   };
 
-  const containerClassName = className || '';
+  const containerClassName = `flex items-center gap-x-2 ${className || ''}`;
 
   const CollapseIcon = isOpen ? ExpandLess : ExpandMore;
   const ContainerComponent = useCallback(
@@ -66,7 +48,7 @@ const CollapsibleGroup = ({
       isCollapsible ? (
         <ListItemButton
           aria-label={group?.name}
-          className={`${cx(classes.groupTitleContainer, containerClassName)} bg-background-listing-header`}
+          className={`${containerClassName} bg-background-listing-header rounded-lg`}
           dense
           disableGutters
           disableRipple
@@ -75,18 +57,9 @@ const CollapsibleGroup = ({
           {containerComponentChildren}
         </ListItemButton>
       ) : (
-        <Box className={cx(classes.groupTitleContainer, containerClassName)}>
-          {containerComponentChildren}
-        </Box>
+        <Box className={containerClassName}>{containerComponentChildren}</Box>
       ),
-    [
-      isCollapsible,
-      classes.groupTitleContainer,
-      containerClassName,
-      cx,
-      group?.name,
-      toggle
-    ]
+    [isCollapsible, containerClassName, group?.name, toggle]
   );
 
   return (
@@ -100,7 +73,7 @@ const CollapsibleGroup = ({
             data-testid={`${group?.name}-header`}
           >
             <Typography
-              className="groupText scroll-m-12 snap-start"
+              className="groupText scroll-m-12 snap-start text-base font-medium"
               variant="h6"
               {...group?.titleAttributes}
               data-section-group-form-id={group?.name}
@@ -110,7 +83,7 @@ const CollapsibleGroup = ({
             {group?.EndIcon && (
               <Tooltip
                 classes={{
-                  tooltip: classes.tooltip
+                  tooltip: 'max-w-120'
                 }}
                 placement="top"
                 title={group?.TooltipContent ? <group.TooltipContent /> : ''}

package/src/Form/Form.browser.test.tsx

@@ -1,15 +1,19 @@
 import { Typography } from '@mui/material';
 
+import { ThemeMode, userAtom } from '@centreon/ui-context';
+
 import { faker } from '@faker-js/faker';
 import { rs } from '@rstest/core';
 import { render } from '@test-setup/render';
 import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useFormikContext } from 'formik';
+import { createStore, Provider } from 'jotai';
 import { object } from 'yup';
 
 import type { SelectEntry } from '..';
 import { Button } from '../components';
+import ThemeProvider from '../ThemeProvider';
 import { Form } from './Form';
 import { type InputProps, InputType } from './Inputs/models';
 
@@ -443,3 +447,107 @@ describe('Form with sections', () => {
     );
   });
 });
+
+// The theme mode comes from the user atom, and the Tailwind tokens from the
+// `dark` class on the document.
+const initializeFormTitles = (themeMode: ThemeMode): void => {
+  const store = createStore();
+  store.set(userAtom, { ...store.get(userAtom), themeMode });
+
+  document.documentElement.classList.toggle(
+    'dark',
+    themeMode === ThemeMode.dark
+  );
+
+  render(
+    <Provider store={store}>
+      <ThemeProvider>
+        <Form
+          areGroupsOpen
+          groups={[{ name: 'Titles section', order: 1 }]}
+          initialValues={{ gridField: '', topLevelField: '' }}
+          inputs={[
+            {
+              additionalLabel: 'Top level block title',
+              fieldName: 'topLevelField',
+              group: 'Titles section',
+              label: 'Top level field',
+              type: InputType.Text
+            },
+            {
+              fieldName: '',
+              grid: {
+                columns: [
+                  {
+                    additionalLabel: 'Grid block title',
+                    fieldName: 'gridField',
+                    label: 'Grid field',
+                    type: InputType.Text
+                  }
+                ]
+              },
+              group: 'Titles section',
+              label: 'Grid',
+              type: InputType.Grid
+            }
+          ]}
+          isCollapsible
+          submit={rs.fn()}
+          validationSchema={object()}
+        />
+      </ThemeProvider>
+    </Provider>
+  );
+};
+
+const textPrimaryColor = {
+  [ThemeMode.dark]: 'rgb(255, 255, 255)',
+  [ThemeMode.light]: 'rgb(0, 0, 0)'
+};
+
+[ThemeMode.light, ThemeMode.dark].forEach((themeMode) => {
+  describe(`Form titles in ${themeMode} mode`, () => {
+    beforeEach(() => {
+      expect.hasAssertions();
+    });
+    beforeEach(() => initializeFormTitles(themeMode));
+
+    afterEach(() => {
+      document.documentElement.classList.remove('dark');
+    });
+
+    it('displays the section title in 16px medium on a 24px line', async () => {
+      const title = await screen.findByText('Titles section');
+
+      expect(title).toHaveStyle({
+        fontSize: '16px',
+        fontWeight: '500',
+        lineHeight: '24px'
+      });
+    });
+
+    it('rounds the collapsible section header with an 8px radius', async () => {
+      expect(await screen.findByLabelText('Titles section')).toHaveStyle({
+        borderRadius: '8px'
+      });
+    });
+
+    it('displays the grid block title in 16px bold with the text colour', async () => {
+      expect(await screen.findByText('Grid block title')).toHaveStyle({
+        color: textPrimaryColor[themeMode],
+        fontSize: '16px',
+        fontWeight: '700',
+        lineHeight: '24px'
+      });
+    });
+
+    it('displays the top level block title like the grid block title', async () => {
+      expect(await screen.findByText('Top level block title')).toHaveStyle({
+        color: textPrimaryColor[themeMode],
+        fontSize: '16px',
+        fontWeight: '700',
+        lineHeight: '24px'
+      });
+    });
+  });
+});

package/src/Form/Form.stories.tsx

@@ -1,7 +1,7 @@
 import { object } from 'yup';
 
 import { Form, GroupDirection } from './Form';
-import { InputType } from './Inputs/models';
+import { type InputProps, InputType } from './Inputs/models';
 import {
   type BasicForm,
   basicFormGroups,
@@ -110,3 +110,104 @@ export const exclusiveCheckboxGroup = (): JSX.Element => (
     validationSchema={object()}
   />
 );
+
+export const segmentedButtons = (): JSX.Element => (
+  <Form
+    initialValues={{
+      activeChecks: 'use_default',
+      updateMode: 'incremental'
+    }}
+    inputs={[
+      {
+        fieldName: 'activeChecks',
+        group: '',
+        label: 'Active checks enabled',
+        segmentedButtons: {
+          options: [
+            { label: 'Yes', value: 'true' },
+            { label: 'No', value: 'false' },
+            { label: 'Default', value: 'use_default' }
+          ]
+        },
+        type: InputType.SegmentedButtons
+      },
+      {
+        fieldName: 'updateMode',
+        group: '',
+        label: 'Update mode (long labels)',
+        segmentedButtons: {
+          options: [
+            { label: 'Incremental', value: 'incremental' },
+            { label: 'Replacement', value: 'replacement' },
+            { label: 'Inherit from the host template', value: 'inherit' }
+          ]
+        },
+        type: InputType.SegmentedButtons
+      }
+    ]}
+    submit={submit}
+    validationSchema={object()}
+  />
+);
+
+const getSeparatedFields = (count: number): Array<InputProps> =>
+  Array.from({ length: count }, (_, index) => ({
+    fieldName: `field${index + 1}`,
+    group: '',
+    label: `Field ${index + 1}`,
+    type: InputType.Text
+  }));
+
+const getSeparatedGrid = ({
+  className,
+  count,
+  name
+}: {
+  className: string;
+  count: number;
+  name: string;
+}): InputProps => ({
+  fieldName: name,
+  grid: {
+    className,
+    columnSeparator: true,
+    columns: getSeparatedFields(count).map(({ group, ...field }) => ({
+      ...field,
+      fieldName: `${name}-${field.fieldName}`
+    }))
+  },
+  group: '',
+  label: name,
+  type: InputType.Grid
+});
+
+// The grids of this story show 1, 2 or 3 columns as the panel is resized (drag
+// its bottom right corner): the lines only come between columns, on every row.
+export const columnSeparators = (): JSX.Element => (
+  <div className="@container resize-x overflow-auto border border-dashed p-4">
+    <Form
+      initialValues={{}}
+      inputs={[
+        getSeparatedGrid({
+          className: 'grid-cols-1 gap-x-8 @[500px]:grid-cols-2',
+          count: 2,
+          name: 'two-columns'
+        }),
+        getSeparatedGrid({
+          className:
+            'grid-cols-1 gap-x-8 @[500px]:grid-cols-2 @[900px]:grid-cols-3',
+          count: 3,
+          name: 'three-columns'
+        }),
+        getSeparatedGrid({
+          className:
+            'grid-cols-1 gap-x-8 @[500px]:grid-cols-2 @[900px]:grid-cols-3',
+          count: 5,
+          name: 'wrapping-rows'
+        })
+      ]}
+      submit={submit}
+      validationSchema={object()}
+    />
+  </div>
+);

package/src/Form/Form.tsx

@@ -4,7 +4,7 @@ import {
   type FormikSharedConfig,
   type FormikValues
 } from 'formik';
-import type { ComponentType } from 'react';
+import { type ComponentType, useRef } from 'react';
 import type { Schema } from 'yup';
 
 import { useStyles } from './Form.styles';
@@ -55,6 +55,7 @@ const Form = <T extends object>({
   ...formikSharedConfig
 }: FormProps<T>): JSX.Element => {
   const { cx, classes } = useStyles();
+  const containerRef = useRef<HTMLDivElement>(null);
 
   if (isLoading) {
     return (
@@ -79,8 +80,8 @@ const Form = <T extends object>({
       validationSchema={validationSchema}
       {...formikSharedConfig}
     >
-      <div>
-        <FormSection groups={groups} />
+      <div ref={containerRef}>
+        <FormSection containerRef={containerRef} groups={groups} />
         {children}
         <div className={cx(className, classes.form)}>
           <Inputs

package/src/Form/Inputs/Grid.browser.test.tsx

@@ -0,0 +1,186 @@
+import { rs } from '@rstest/core';
+import { render } from '@test-setup/render';
+import { screen } from '@testing-library/react';
+import { object } from 'yup';
+
+import { Form } from '../Form';
+import { type InputProps, InputType } from './models';
+
+const getField = (
+  name: string,
+  extra: Partial<InputProps> = {}
+): Omit<InputProps, 'group'> => ({
+  fieldName: name,
+  label: name,
+  type: InputType.Text,
+  ...extra
+});
+
+interface InitializeProps {
+  columnSeparator?: boolean;
+  // The tracks of the grid: what makes the number of columns follow the width.
+  columns: string;
+  fields: Array<Omit<InputProps, 'group'>>;
+  width: number;
+}
+
+const initialize = ({
+  columns,
+  columnSeparator,
+  fields,
+  width
+}: InitializeProps): void => {
+  render(
+    <div style={{ padding: 40, width }}>
+      <Form
+        initialValues={{}}
+        inputs={[
+          {
+            fieldName: 'layout',
+            grid: {
+              columnSeparator,
+              columns: fields,
+              gridTemplateColumns: columns
+            },
+            group: '',
+            label: 'layout',
+            type: InputType.Grid
+          }
+        ]}
+        submit={rs.fn()}
+        validationSchema={object()}
+      />
+    </div>
+  );
+};
+
+// The lines the grid draws, one for each of its items.
+const getLines = (): Array<HTMLElement> =>
+  Array.from(document.querySelectorAll('[data-column-separator]'));
+
+// A line is seen when what is painted at its place is the line itself: outside
+// the grid, where it is clipped, there is something else.
+const getVisibleLines = (): Array<boolean> =>
+  getLines().map((line) => {
+    const { left, top } = line.getBoundingClientRect();
+
+    return document.elementFromPoint(left + 0.5, top + 10) === line;
+  });
+
+const threeFields = ['one', 'two', 'three'].map((name) => getField(name));
+
+describe('Grid column separator', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('draws nothing unless asked to', async () => {
+    initialize({
+      columns: 'repeat(2, 1fr)',
+      fields: threeFields,
+      width: 800
+    });
+
+    await screen.findByLabelText('one');
+
+    expect(document.querySelectorAll('[data-column-separator]')).toHaveLength(
+      0
+    );
+  });
+
+  it('draws a dashed line between two columns, not left of the first', async () => {
+    initialize({
+      columnSeparator: true,
+      columns: 'repeat(2, 1fr)',
+      fields: [getField('one'), getField('two')],
+      width: 800
+    });
+
+    await screen.findByLabelText('one');
+
+    expect(getVisibleLines()).toEqual([false, true]);
+
+    const line = getComputedStyle(getLines()[1]);
+
+    expect(line.borderLeftStyle).toBe('dashed');
+    expect(line.borderLeftWidth).toBe('1px');
+  });
+
+  it('draws nothing when the layout has a single column', async () => {
+    initialize({
+      columnSeparator: true,
+      columns: 'repeat(auto-fill, minmax(500px, 1fr))',
+      fields: [getField('one'), getField('two')],
+      width: 400
+    });
+
+    await screen.findByLabelText('one');
+
+    expect(getVisibleLines()).toEqual([false, false]);
+  });
+
+  it('follows the number of columns the layout shows', async () => {
+    initialize({
+      columnSeparator: true,
+      columns: 'repeat(auto-fill, minmax(300px, 1fr))',
+      fields: threeFields,
+      width: 1100
+    });
+
+    await screen.findByLabelText('one');
+
+    expect(getVisibleLines()).toEqual([false, true, true]);
+  });
+
+  it('draws the lines of every row when the items wrap', async () => {
+    initialize({
+      columnSeparator: true,
+      columns: 'repeat(3, 1fr)',
+      fields: ['a', 'b', 'c', 'd', 'e'].map((name) => getField(name)),
+      width: 1100
+    });
+
+    await screen.findByLabelText('a');
+
+    expect(getVisibleLines()).toEqual([false, true, true, false, true]);
+  });
+
+  it('spans the height of the row, not of the item', async () => {
+    initialize({
+      columnSeparator: true,
+      columns: 'repeat(2, 1fr)',
+      fields: [
+        getField('short'),
+        getField('tall', { text: { multilineRows: 6 } })
+      ],
+      width: 800
+    });
+
+    await screen.findByLabelText('short');
+
+    const [short, tall] = getLines().map(
+      (item) => item.getBoundingClientRect().height
+    );
+
+    expect(tall).toBeGreaterThan(100);
+    expect(short).toBeCloseTo(tall, 0);
+  });
+
+  it('leaves no line for a hidden item and follows the items left', async () => {
+    initialize({
+      columnSeparator: true,
+      columns: 'repeat(2, 1fr)',
+      fields: [
+        getField('one'),
+        getField('hidden', { hideInput: () => true }),
+        getField('three')
+      ],
+      width: 800
+    });
+
+    await screen.findByLabelText('one');
+
+    expect(getLines()).toHaveLength(2);
+    expect(getVisibleLines()).toEqual([false, true]);
+  });
+});

package/src/Form/Inputs/Grid.tsx

@@ -2,10 +2,36 @@ import { Box, Typography } from '@mui/material';
 
 import { type FormikValues, useFormikContext } from 'formik';
 import { isNotEmpty, isNotNil } from 'ramda';
+import type { CSSProperties } from 'react';
 
 import { getInput } from '.';
 import type { InputPropsWithoutGroup } from './models';
 
+// The line is drawn left of every item, in the middle of the gap, and the grid
+// clips what falls out of it: the items of the first column lose theirs, so it
+// never shows in a single column nor left of the first one, whatever the number
+// of columns, without knowing it. The clip keeps 4px around the grid so that
+// nothing the items draw outside their box is cut.
+const columnGap = 'calc(var(--spacing) * 8)';
+
+const columnSeparatorGridStyle = {
+  '--form-grid-column-gap': columnGap,
+  columnGap: 'var(--form-grid-column-gap)',
+  overflowClipMargin: '4px',
+  overflowX: 'clip'
+} as CSSProperties;
+
+// The dashed line of an item: half a gap to its left, over the height of its
+// content.
+const ColumnSeparator = (): JSX.Element => (
+  <span
+    aria-hidden
+    className="absolute inset-y-0 border-l border-dashed border-divider"
+    data-column-separator
+    style={{ left: 'calc(var(--form-grid-column-gap) / -2)' }}
+  />
+);
+
 const Grid = ({
   grid,
   hideInput
@@ -17,6 +43,7 @@ const Grid = ({
   }
 
   const className = grid?.className || '';
+  const hasColumnSeparator = grid?.columnSeparator ?? false;
 
   return (
     <div
@@ -26,7 +53,8 @@ const Grid = ({
         gridTemplateColumns: className
           ? grid?.gridTemplateColumns || undefined
           : grid?.gridTemplateColumns ||
-            `repeat(${grid?.columns.length || 1}, 1fr)`
+            `repeat(${grid?.columns.length || 1}, 1fr)`,
+        ...(hasColumnSeparator && columnSeparatorGridStyle)
       }}
     >
       {grid?.columns.map((field) => {
@@ -41,18 +69,37 @@ const Grid = ({
           return null;
         }
 
+        const title = field.additionalLabel && (
+          <Typography
+            className={`mb-1 text-base font-bold text-text-primary ${field?.additionalLabelClassName || ''}`}
+            variant="h6"
+          >
+            {field.additionalLabel}
+          </Typography>
+        );
+
+        if (!hasColumnSeparator) {
+          return (
+            <Box key={key as string} sx={{ width: '100%' }}>
+              {title}
+              <Input {...field} />
+            </Box>
+          );
+        }
+
+        // The item stretches to the height of its row and its content fills
+        // what its title leaves, so the line spans the whole row.
         return (
-          <Box key={key as string} sx={{ width: '100%' }}>
-            {field.additionalLabel && (
-              <Typography
-                className={field?.additionalLabelClassName}
-                sx={{ color: 'primary.main', marginBottom: 0.5 }}
-                variant="h6"
-              >
-                {field.additionalLabel}
-              </Typography>
-            )}
-            <Input {...field} />
+          <Box
+            className="flex flex-col self-stretch"
+            key={key as string}
+            sx={{ width: '100%' }}
+          >
+            {title}
+            <div className="relative flex-1">
+              <ColumnSeparator />
+              <Input {...field} />
+            </div>
           </Box>
         );
       })}