@centreon/ui 26.12.6 → 26.12.8

package/package.json

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

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,
@@ -149,3 +149,65 @@ export const segmentedButtons = (): JSX.Element => (
     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/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,17 +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={`mb-1 text-base font-bold text-text-primary ${field?.additionalLabelClassName || ''}`}
-                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>
         );
       })}

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

@@ -0,0 +1,80 @@
+import { rs } from '@rstest/core';
+import { render } from '@test-setup/render';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { object } from 'yup';
+
+import { Form } from '../Form';
+import { InputType } from './models';
+
+const initialize = (): void => {
+  render(
+    <Form
+      initialValues={{ community: '', note: '' }}
+      inputs={[
+        {
+          dataTestId: 'note',
+          fieldName: 'note',
+          group: '',
+          label: 'Note',
+          type: InputType.Text
+        },
+        {
+          dataTestId: 'community',
+          fieldName: 'community',
+          group: '',
+          label: 'SNMP community',
+          type: InputType.Password
+        }
+      ]}
+      submit={rs.fn()}
+      validationSchema={object()}
+    />
+  );
+};
+
+const getInput = async (testId: string): Promise<HTMLInputElement> =>
+  (await screen.findAllByTestId(testId)).find(
+    (element) => element.tagName === 'INPUT'
+  ) as HTMLInputElement;
+
+describe('Password input', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('asks the browser and the password managers not to fill it', async () => {
+    initialize();
+
+    const password = await getInput('community');
+
+    expect(password).toHaveAttribute('type', 'password');
+    expect(password).toHaveAttribute('autocomplete', 'new-password');
+    expect(password).toHaveAttribute('data-1p-ignore', 'true');
+    expect(password).toHaveAttribute('data-bwignore', 'true');
+    expect(password).toHaveAttribute('data-lpignore', 'true');
+  });
+
+  it('keeps those hints while the password is shown', async () => {
+    initialize();
+
+    await userEvent.click(
+      await screen.findByRole('button', { name: /password|show|visib/i })
+    );
+
+    const password = await getInput('community');
+
+    expect(password).toHaveAttribute('type', 'text');
+    expect(password).toHaveAttribute('autocomplete', 'new-password');
+    expect(password).toHaveAttribute('data-1p-ignore', 'true');
+  });
+
+  it('leaves the other text inputs as they were', async () => {
+    initialize();
+
+    const note = await getInput('note');
+
+    expect(note).toHaveAttribute('autocomplete', 'off');
+    expect(note).not.toHaveAttribute('data-1p-ignore');
+  });
+});

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

@@ -79,7 +79,11 @@ describe('Segmented buttons', () => {
   it('displays every option and marks the current one', async () => {
     initialize();
 
-    expect(await screen.findByText('Notification Enabled')).toBeVisible();
+    const label = await screen.findByText('Notification Enabled');
+
+    expect(label).toBeVisible();
+    // Bold, as the design shows the label above the buttons.
+    expect(getComputedStyle(label).fontWeight).toBe('700');
     expect(await button('Yes')).toHaveAttribute('aria-pressed', 'false');
     expect(await button('No')).toHaveAttribute('aria-pressed', 'false');
     expect(await button('Default')).toHaveAttribute('aria-pressed', 'true');
@@ -110,42 +114,51 @@ describe('Segmented buttons', () => {
     expect(await button('No')).toHaveAttribute('aria-pressed', 'true');
   });
 
-  it('sizes to its labels, not to its column', async () => {
-    initialize({ columnWidth: 800 });
+  it('sizes each segment to its label, at least 104px, whatever the column', async () => {
+    initialize({
+      columnWidth: 800,
+      segmentedOptions: [
+        { label: 'Yes', value: 'true' },
+        { label: 'No', value: 'false' },
+        { label: 'Inherit from template', value: 'use_default' }
+      ]
+    });
 
     const group = await screen.findByTestId('enabled');
-    const widths = (
-      await Promise.all(['Yes', 'No', 'Default'].map(button))
+    const [yes, no, inherit] = (
+      await Promise.all(['Yes', 'No', 'Inherit from template'].map(button))
     ).map((element) => element.getBoundingClientRect().width);
 
-    // Three equal segments of at least 104px (26 spacing units), left aligned in the column
-    // (a pixel apart at most: the group overlaps the borders of its buttons).
-    expect(Math.max(...widths) - Math.min(...widths)).toBeLessThanOrEqual(1);
-    expect(Math.min(...widths)).toBeGreaterThanOrEqual(104);
-    expect(group.getBoundingClientRect().width).toBeLessThan(400);
+    // As in the design: Yes and No keep 104px, the longer label grows alone
+    // (the group overlaps the borders of its buttons, a pixel at most).
+    expect(yes).toBeGreaterThanOrEqual(104);
+    expect(Math.abs(yes - no)).toBeLessThanOrEqual(1);
+    expect(yes).toBeLessThan(110);
+    expect(inherit).toBeGreaterThan(yes + 20);
+    expect(group.getBoundingClientRect().width).toBeLessThan(500);
     expect(group.getBoundingClientRect().left).toBe(
       (await screen.findByText('Notification Enabled')).getBoundingClientRect()
         .left
     );
   });
 
-  it('stays inside a column narrower than its segments', async () => {
-    initialize({ columnWidth: 200 });
+  it('keeps three segments of 104px when the labels are short', async () => {
+    initialize({ columnWidth: 800 });
 
-    const group = await screen.findByTestId('enabled');
-    const wrapper = group.parentElement as HTMLElement;
+    const widths = (
+      await Promise.all(['Yes', 'No', 'Default'].map(button))
+    ).map((element) => element.getBoundingClientRect().width);
 
-    expect(wrapper.getBoundingClientRect().width).toBeLessThanOrEqual(200);
-    expect(wrapper.scrollWidth).toBeGreaterThan(wrapper.clientWidth);
-    expect((await button('Default')).scrollWidth).toBeLessThanOrEqual(
-      (await button('Default')).clientWidth
-    );
+    expect(Math.min(...widths)).toBeGreaterThanOrEqual(104);
+    expect(Math.max(...widths) - Math.min(...widths)).toBeLessThanOrEqual(1);
   });
 
-  it('widens every segment to the longest label, without wrapping', async () => {
-    const longLabel = 'Inherit from the host template';
+  it('cuts a label wider than the room left with an ellipsis', async () => {
+    const longLabel =
+      'Vorlage erben und alle Werte der Vorlage ohne Ausnahme übernehmen';
 
     initialize({
+      columnWidth: 420,
       segmentedOptions: [
         { label: 'Yes', value: 'true' },
         { label: 'No', value: 'false' },
@@ -153,16 +166,26 @@ describe('Segmented buttons', () => {
       ]
     });
 
-    const yes = await button('Yes');
     const long = await button(longLabel);
+    const text = long.firstElementChild as HTMLElement;
 
-    expect(
-      Math.abs(
-        yes.getBoundingClientRect().width - long.getBoundingClientRect().width
-      )
-    ).toBeLessThanOrEqual(1);
-    expect(long.scrollWidth).toBeLessThanOrEqual(long.clientWidth);
+    expect(text.scrollWidth).toBeGreaterThan(text.clientWidth);
+    expect(getComputedStyle(text).textOverflow).toBe('ellipsis');
+    expect(long).toHaveAttribute('title', longLabel);
     expect(long.getBoundingClientRect().height).toBe(28);
+    expect(
+      (await screen.findByTestId('enabled')).getBoundingClientRect().right
+    ).toBeLessThanOrEqual(420 + 1);
+  });
+
+  it('stays inside a column narrower than its segments', async () => {
+    initialize({ columnWidth: 200 });
+
+    const group = await screen.findByTestId('enabled');
+    const wrapper = group.parentElement as HTMLElement;
+
+    expect(wrapper.getBoundingClientRect().width).toBeLessThanOrEqual(200);
+    expect(wrapper.scrollWidth).toBeGreaterThan(wrapper.clientWidth);
   });
 
   it('does not change when disabled', async () => {

package/src/Form/Inputs/SegmentedButtons.tsx

@@ -32,15 +32,13 @@ const SegmentedButtons = ({
   return useMemoComponent({
     Component: (
       <FormGroup>
-        <FormLabel>{t(label)}</FormLabel>
-        {/* In a column narrower than the segments, the group scrolls inside it
-            rather than overflowing into what is next to it. */}
+        <FormLabel className="font-bold">{t(label)}</FormLabel>
+        {/* In a column narrower than the three minimum widths, the group scrolls
+            inside it rather than overflowing into what is next to it. */}
         <div className="max-w-full self-start overflow-x-auto">
           <ButtonGroup
             aria-label={t(label)}
-            // Equal segments, each as wide as the longest label (26 spacing
-            // units, 104px, at least), whatever the width of the column.
-            className="inline-grid auto-cols-[minmax(calc(var(--spacing)*26),1fr)] grid-flow-col"
+            className="max-w-full"
             color="primary"
             data-testid={dataTestId}
             disabled={disabled}
@@ -50,16 +48,21 @@ const SegmentedButtons = ({
               ({ label: optionLabel, value: optionValue }) => {
                 const isSelected = equals(value, optionValue);
 
+                // As in the design: every segment is 26 spacing units (104px)
+                // wide at least, and grows with its own label. A label wider
+                // than the room left is cut with an ellipsis, its full text
+                // in the tooltip.
                 return (
                   <Button
                     aria-pressed={isSelected}
-                    className="h-7 whitespace-nowrap px-3 py-0 font-medium text-sm leading-[21px] normal-case"
+                    className="h-7 min-w-26 px-3 py-0 font-medium text-sm leading-[21px] normal-case"
                     data-testid={`${dataTestId}-${optionValue}`}
                     key={optionValue}
                     onClick={select(optionValue)}
+                    title={t(optionLabel)}
                     variant={isSelected ? 'contained' : 'outlined'}
                   >
-                    {t(optionLabel)}
+                    <span className="min-w-0 truncate">{t(optionLabel)}</span>
                   </Button>
                 );
               }

package/src/Form/Inputs/Text.tsx

@@ -17,6 +17,17 @@ import { TextField, useMemoComponent } from '../..';
 import { type InputPropsWithoutGroup, InputType } from './models';
 import PasswordEndAdornment from './PasswordEndAdornment';
 
+// Keeps password managers from taking the text field before a password field
+// for a user name and filling it in, and from filling the password itself:
+// `new-password` for the browsers, the opt-out attributes for the extensions
+// (1Password, Bitwarden, LastPass).
+const passwordManagerOptOut = {
+  autoComplete: 'new-password',
+  'data-1p-ignore': true,
+  'data-bwignore': true,
+  'data-lpignore': true
+};
+
 const Text = ({
   dataTestId,
   label,
@@ -140,7 +151,8 @@ const Text = ({
             htmlInput: {
               'aria-label': label,
               'data-testid': dataTestId || label,
-              min: text?.min
+              min: text?.min,
+              ...(equals(type, InputType.Password) && passwordManagerOptOut)
             }
           }
         }}

package/src/Form/Inputs/models.ts

@@ -146,6 +146,10 @@ export interface InputProps {
   grid?: {
     alignItems?: string;
     className?: string;
+    // A dashed vertical line in the gap between two columns, never left of
+    // the first one, whatever the number of columns the layout shows. To set
+    // on the grids that place groups of fields side by side.
+    columnSeparator?: boolean;
     columns: Array<Omit<InputProps, 'group'>>;
     gridTemplateColumns?: string;
   };