@centreon/ui 26.10.8 → 26.10.10

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

@@ -0,0 +1,304 @@
+import { Typography } from '@mui/material';
+
+import { rs } from '@rstest/core';
+import { render } from '@test-setup/render';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useFormikContext } from 'formik';
+import { object } from 'yup';
+
+import { Form } from '../Form';
+import { InputType } from './models';
+
+const options = ['Down', 'Unreachable', 'Recovery', 'None'];
+
+const ValueDisplay = (): JSX.Element => {
+  const { values } = useFormikContext<{
+    notificationOptions: Array<string> | null;
+  }>();
+
+  return (
+    <Typography data-testid="value">
+      {JSON.stringify(values.notificationOptions)}
+    </Typography>
+  );
+};
+
+interface InitializeProps {
+  disabled?: boolean;
+  notificationOptions?: Array<string> | null;
+  variant?: 'checkboxes' | 'chips';
+}
+
+const initialize = ({
+  notificationOptions = [],
+  disabled = false,
+  variant
+}: InitializeProps = {}): void => {
+  render(
+    <Form
+      initialValues={{ notificationOptions }}
+      inputs={[
+        {
+          dataTestId: 'notification-options',
+          exclusiveCheckboxGroup: {
+            direction: 'horizontal',
+            exclusiveLabel: 'No notifications',
+            exclusiveOption: 'None',
+            options,
+            variant
+          },
+          fieldName: 'notificationOptions',
+          getDisabled: () => disabled,
+          group: '',
+          label: 'Notification options',
+          type: InputType.ExclusiveCheckboxGroup
+        },
+        {
+          custom: { Component: ValueDisplay },
+          fieldName: 'value',
+          group: '',
+          label: 'value',
+          type: InputType.Custom
+        }
+      ]}
+      submit={rs.fn()}
+      validationSchema={object()}
+    />
+  );
+};
+
+const toggle = (): Promise<HTMLElement> =>
+  screen.findByLabelText('No notifications');
+
+const checkbox = (option: string): HTMLElement =>
+  screen.getByRole('checkbox', { name: option });
+
+const expectValue = async (value: Array<string> | null): Promise<void> => {
+  await waitFor(() => {
+    expect(screen.getByTestId('value')).toHaveTextContent(
+      new RegExp(`^${JSON.stringify(value).replace(/[[\]]/g, '\\$&')}$`)
+    );
+  });
+};
+
+describe('Exclusive checkbox group', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('displays the toggle and every option except the exclusive one', async () => {
+    initialize();
+
+    expect(await toggle()).not.toBeChecked();
+    expect(screen.getByLabelText('Down')).toBeInTheDocument();
+    expect(screen.getByLabelText('Unreachable')).toBeInTheDocument();
+    expect(screen.getByLabelText('Recovery')).toBeInTheDocument();
+    expect(screen.queryByLabelText('None')).not.toBeInTheDocument();
+
+    // The three options in order, then the toggle,
+    // all unticked and usable, and the empty value.
+    expect(
+      screen
+        .getAllByRole('checkbox')
+        .map((element) => element.getAttribute('aria-label') ?? element.id)
+    ).toEqual(['Down', 'Unreachable', 'Recovery', 'No notifications']);
+    ['Down', 'Unreachable', 'Recovery'].forEach((option) => {
+      expect(checkbox(option)).not.toBeChecked();
+      expect(checkbox(option)).toBeEnabled();
+    });
+    expect(await toggle()).toBeEnabled();
+    expect(screen.getByText('No notifications')).toBeVisible();
+    await expectValue([]);
+  });
+
+  it('keeps the inherited state when nothing is selected', async () => {
+    initialize();
+
+    expect(await toggle()).not.toBeChecked();
+    expect(screen.getByLabelText('Down')).not.toBeChecked();
+    expect(screen.getByLabelText('Down')).toBeEnabled();
+    await expectValue([]);
+  });
+
+  it('treats a null value as the inherited state', async () => {
+    initialize({ notificationOptions: null });
+
+    expect(await toggle()).not.toBeChecked();
+    expect(screen.getByLabelText('Down')).not.toBeChecked();
+    expect(screen.getByLabelText('Down')).toBeEnabled();
+  });
+
+  it('displays the exclusive state from the initial value', async () => {
+    initialize({ notificationOptions: ['None'] });
+
+    expect(await toggle()).toBeChecked();
+    expect(screen.getByLabelText('Down')).not.toBeChecked();
+    expect(screen.getByLabelText('Down')).toBeDisabled();
+    await expectValue(['None']);
+
+    // Every option is unticked and greyed out.
+    ['Unreachable', 'Recovery'].forEach((option) => {
+      expect(checkbox(option)).not.toBeChecked();
+      expect(checkbox(option)).toBeDisabled();
+    });
+    expect(await toggle()).toBeEnabled();
+  });
+
+  it('displays a selection from the initial value', async () => {
+    initialize({ notificationOptions: ['Down', 'Recovery'] });
+
+    expect(await toggle()).not.toBeChecked();
+    expect(screen.getByLabelText('Down')).toBeChecked();
+    expect(screen.getByLabelText('Unreachable')).not.toBeChecked();
+    expect(screen.getByLabelText('Recovery')).toBeChecked();
+    await expectValue(['Down', 'Recovery']);
+  });
+
+  it('goes from the inherited state to a selection and back', async () => {
+    initialize();
+
+    await userEvent.click(await screen.findByLabelText('Down'));
+    await userEvent.click(screen.getByLabelText('Recovery'));
+    await expectValue(['Down', 'Recovery']);
+
+    await userEvent.click(screen.getByLabelText('Down'));
+    await userEvent.click(screen.getByLabelText('Recovery'));
+    await expectValue([]);
+    expect(await toggle()).not.toBeChecked();
+  });
+
+  it('goes from the inherited state to the exclusive state and back', async () => {
+    initialize();
+
+    await userEvent.click(await toggle());
+    await waitFor(async () => {
+      expect(await toggle()).toBeChecked();
+    });
+    await expectValue(['None']);
+
+    await userEvent.click(await toggle());
+    await waitFor(async () => {
+      expect(await toggle()).not.toBeChecked();
+    });
+    await expectValue([]);
+  });
+
+  it('clears the selection when the toggle is turned on and leaves it empty when turned off', async () => {
+    initialize({ notificationOptions: ['Down', 'Recovery'] });
+
+    await userEvent.click(await toggle());
+    await expectValue(['None']);
+    await waitFor(() => {
+      expect(screen.getByLabelText('Down')).not.toBeChecked();
+    });
+    expect(screen.getByLabelText('Down')).toBeDisabled();
+    expect(screen.getByLabelText('Recovery')).not.toBeChecked();
+    expect(screen.getByLabelText('Recovery')).toBeDisabled();
+
+    await userEvent.click(await toggle());
+    await expectValue([]);
+    await waitFor(() => {
+      expect(screen.getByLabelText('Down')).toBeEnabled();
+    });
+    expect(screen.getByLabelText('Down')).not.toBeChecked();
+
+    await userEvent.click(screen.getByLabelText('Unreachable'));
+    await expectValue(['Unreachable']);
+  });
+
+  it('prevents ticking a box while the toggle is on', async () => {
+    initialize({ notificationOptions: ['None'] });
+
+    // The checkbox is natively disabled, so the click never reaches its
+    // handler (`userEvent` would refuse it): it checks the box cannot be ticked.
+    fireEvent.click(await screen.findByLabelText('Down'));
+    expect(screen.getByLabelText('Down')).not.toBeChecked();
+    await expectValue(['None']);
+  });
+
+  it('disables both the toggle and the checkboxes when the input is disabled', async () => {
+    initialize({ disabled: true, notificationOptions: ['Down'] });
+
+    expect(await toggle()).toBeDisabled();
+    expect(screen.getByLabelText('Down')).toBeChecked();
+    expect(screen.getByLabelText('Down')).toBeDisabled();
+    await expectValue(['Down']);
+  });
+});
+
+describe('Exclusive checkbox group, as chips', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  const chip = (option: string): Promise<HTMLElement> =>
+    screen.findByTestId(`notification-options-${option}`);
+
+  it('displays the options as chips and the exclusive one as the toggle', async () => {
+    initialize({ variant: 'chips' });
+
+    for (const option of ['Down', 'Unreachable', 'Recovery']) {
+      expect(await chip(option)).toHaveAttribute('aria-pressed', 'false');
+    }
+    expect(
+      screen.queryByTestId('notification-options-None')
+    ).not.toBeInTheDocument();
+    expect(await toggle()).not.toBeChecked();
+    expect(
+      screen.queryByRole('checkbox', { name: 'Down' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('toggles a chip on and off', async () => {
+    initialize({ variant: 'chips' });
+
+    await userEvent.click(await chip('Down'));
+    await userEvent.click(await chip('Recovery'));
+
+    await expectValue(['Down', 'Recovery']);
+    await waitFor(async () => {
+      expect(await chip('Down')).toHaveAttribute('aria-pressed', 'true');
+    });
+
+    await userEvent.click(await chip('Down'));
+
+    await expectValue(['Recovery']);
+  });
+
+  it('clears and disables the chips while the toggle is on', async () => {
+    initialize({ notificationOptions: ['Down', 'Recovery'], variant: 'chips' });
+
+    await userEvent.click(await toggle());
+
+    await expectValue(['None']);
+    await waitFor(async () => {
+      expect(await chip('Down')).toHaveAttribute('aria-pressed', 'false');
+    });
+    expect(await chip('Down')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('leaves the chips empty and usable once the toggle is off', async () => {
+    initialize({ notificationOptions: ['None'], variant: 'chips' });
+
+    await userEvent.click(await toggle());
+
+    await expectValue([]);
+    await waitFor(async () => {
+      expect(await chip('Unreachable')).not.toHaveAttribute(
+        'aria-disabled',
+        'true'
+      );
+    });
+    await userEvent.click(await chip('Unreachable'));
+
+    await expectValue(['Unreachable']);
+  });
+
+  it('disables the chips and the toggle when the input is disabled', async () => {
+    initialize({ disabled: true, variant: 'chips' });
+
+    expect(await chip('Down')).toHaveAttribute('aria-disabled', 'true');
+    expect(await toggle()).toBeDisabled();
+  });
+});

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>
         );
       })}

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');
+  });
+});