@centreon/ui 26.10.8 → 26.10.10

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

@@ -0,0 +1,197 @@
+import { Typography } from '@mui/material';
+
+import { rs } from '@rstest/core';
+import { render } from '@test-setup/render';
+import { 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 = [
+  { label: 'Yes', value: 'true' },
+  { label: 'No', value: 'false' },
+  { label: 'Default', value: 'use_default' }
+];
+
+const ValueDisplay = (): JSX.Element => {
+  const { values } = useFormikContext<{ enabled: string }>();
+
+  return (
+    <Typography data-testid="value">
+      {JSON.stringify(values.enabled)}
+    </Typography>
+  );
+};
+
+interface InitializeProps {
+  columnWidth?: number;
+  disabled?: boolean;
+  enabled?: string;
+  segmentedOptions?: Array<{ label: string; value: string }>;
+}
+
+const initialize = ({
+  enabled = 'use_default',
+  disabled = false,
+  columnWidth = 800,
+  segmentedOptions = options
+}: InitializeProps = {}): void => {
+  render(
+    <div style={{ width: columnWidth }}>
+      <Form
+        initialValues={{ enabled }}
+        inputs={[
+          {
+            dataTestId: 'enabled',
+            fieldName: 'enabled',
+            getDisabled: () => disabled,
+            group: '',
+            label: 'Notification Enabled',
+            segmentedButtons: { options: segmentedOptions },
+            type: InputType.SegmentedButtons
+          },
+          {
+            custom: { Component: ValueDisplay },
+            fieldName: 'value',
+            group: '',
+            label: 'value',
+            type: InputType.Custom
+          }
+        ]}
+        submit={rs.fn()}
+        validationSchema={object()}
+      />
+    </div>
+  );
+};
+
+const button = (label: string): Promise<HTMLElement> =>
+  screen.findByRole('button', { name: label });
+
+describe('Segmented buttons', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('displays every option and marks the current one', async () => {
+    initialize();
+
+    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');
+  });
+
+  it('stores the value of the clicked option as given', async () => {
+    initialize();
+
+    await userEvent.click(await button('Yes'));
+
+    // A string, not the boolean the radio would store.
+    await waitFor(() => {
+      expect(screen.getByTestId('value')).toHaveTextContent(/^"true"$/);
+    });
+    expect(await button('Yes')).toHaveAttribute('aria-pressed', 'true');
+    expect(await button('Default')).toHaveAttribute('aria-pressed', 'false');
+
+    await userEvent.click(await button('No'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('value')).toHaveTextContent(/^"false"$/);
+    });
+  });
+
+  it('starts on the initial value', async () => {
+    initialize({ enabled: 'false' });
+
+    expect(await button('No')).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  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 [yes, no, inherit] = (
+      await Promise.all(['Yes', 'No', 'Inherit from template'].map(button))
+    ).map((element) => element.getBoundingClientRect().width);
+
+    // 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('keeps three segments of 104px when the labels are short', async () => {
+    initialize({ columnWidth: 800 });
+
+    const widths = (
+      await Promise.all(['Yes', 'No', 'Default'].map(button))
+    ).map((element) => element.getBoundingClientRect().width);
+
+    expect(Math.min(...widths)).toBeGreaterThanOrEqual(104);
+    expect(Math.max(...widths) - Math.min(...widths)).toBeLessThanOrEqual(1);
+  });
+
+  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' },
+        { label: longLabel, value: 'use_default' }
+      ]
+    });
+
+    const long = await button(longLabel);
+    const text = long.firstElementChild as HTMLElement;
+
+    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 () => {
+    initialize({ disabled: true });
+
+    expect(await button('Yes')).toBeDisabled();
+    expect(screen.getByTestId('value')).toHaveTextContent(/^"use_default"$/);
+  });
+});

package/src/Form/Inputs/SegmentedButtons.tsx

@@ -32,36 +32,45 @@ const SegmentedButtons = ({
   return useMemoComponent({
     Component: (
       <FormGroup>
-        <FormLabel>{t(label)}</FormLabel>
-        <ButtonGroup
-          aria-label={t(label)}
-          // As wide as its column, up to what three labels need.
-          className="max-w-[412px]"
-          color="primary"
-          data-testid={dataTestId}
-          disabled={disabled}
-          fullWidth
-          size="small"
-        >
-          {segmentedButtons?.options.map(
-            ({ label: optionLabel, value: optionValue }) => {
-              const isSelected = equals(value, optionValue);
+        {!segmentedButtons?.hideLabel && (
+          <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)}
+            className="max-w-full"
+            color="primary"
+            data-testid={dataTestId}
+            disabled={disabled}
+            size="small"
+          >
+            {segmentedButtons?.options.map(
+              ({ label: optionLabel, value: optionValue }) => {
+                const isSelected = equals(value, optionValue);
 
-              return (
-                <Button
-                  aria-pressed={isSelected}
-                  className="h-7 px-3 py-0 font-medium text-sm leading-[21px] normal-case"
-                  data-testid={`${dataTestId}-${optionValue}`}
-                  key={optionValue}
-                  onClick={select(optionValue)}
-                  variant={isSelected ? 'contained' : 'outlined'}
-                >
-                  {t(optionLabel)}
-                </Button>
-              );
-            }
-          )}
-        </ButtonGroup>
+                // 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 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'}
+                  >
+                    <span className="min-w-0 truncate">{t(optionLabel)}</span>
+                  </Button>
+                );
+              }
+            )}
+          </ButtonGroup>
+        </div>
       </FormGroup>
     ),
     memoProps: [value, disabled, segmentedButtons, additionalMemoProps]

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/index.tsx

@@ -26,7 +26,6 @@ import {
   toPairs
 } from 'ramda';
 import { Fragment, useMemo } from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { GroupDirection } from '..';
 import CollapsibleGroup from '../CollapsibleGroup';
@@ -104,42 +103,6 @@ export const getInput = cond<
   [T, always(TextInput)]
 ]);
 
-interface StylesProps {
-  groupDirection?: GroupDirection;
-}
-
-const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
-  additionalLabel: {
-    marginBottom: theme.spacing(0.5)
-  },
-  buttons: {
-    columnGap: theme.spacing(2),
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-end'
-  },
-  divider: {
-    margin: equals(groupDirection, GroupDirection.Horizontal)
-      ? theme.spacing(0, 2)
-      : theme.spacing(2, 0)
-  },
-  groups: {
-    display: 'flex',
-    flexDirection: equals(groupDirection, GroupDirection.Horizontal)
-      ? 'row'
-      : 'column'
-  },
-  inputs: {
-    display: 'flex',
-    flexDirection: 'column',
-    margin: theme.spacing(2, 0),
-    rowGap: theme.spacing(2)
-  },
-  inputWrapper: {
-    width: '100%'
-  }
-}));
-
 interface Props {
   areGroupsOpen?: boolean;
   groupDirection?: GroupDirection;
@@ -161,7 +124,7 @@ const Inputs = ({
   areGroupsOpen,
   inputsClassName
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ groupDirection });
+  const isHorizontal = equals(groupDirection, GroupDirection.Horizontal);
   const formikContext = useFormikContext<FormikValues>();
 
   const groupsName = pluck('name', groups);
@@ -217,7 +180,7 @@ const Inputs = ({
   ) as Array<[string | null, Array<InputProps>]>;
 
   return (
-    <div className={classes.groups}>
+    <div className={`flex ${isHorizontal ? 'flex-row' : 'flex-col'}`}>
       {normalizedInputsByGroup.map(([groupName, groupedInputs], index) => {
         const hasGroupTitle = not(isNil(groupName));
 
@@ -238,7 +201,9 @@ const Inputs = ({
                 hasGroupTitle={hasGroupTitle}
                 isCollapsible={isCollapsible}
               >
-                <div className={cx(classes.inputs, inputsClassName)}>
+                <div
+                  className={`flex flex-col my-4 gap-y-4 ${inputsClassName || ''}`}
+                >
                   {groupedInputs.map((inputProps) => {
                     const key =
                       isNotNil(inputProps.label) || isNotEmpty(inputProps.label)
@@ -257,14 +222,11 @@ const Inputs = ({
                     const Input = getInput(inputProps.type);
 
                     return (
-                      <div className={classes.inputWrapper} key={key as string}>
+                      <div className="w-full" key={key as string}>
                         {inputProps.additionalLabel && (
                           <Typography
-                            className={cx(
-                              classes.additionalLabel,
-                              inputProps?.additionalLabelClassName
-                            )}
-                            variant="body1"
+                            className={`mb-1 text-base font-bold text-text-primary ${inputProps?.additionalLabelClassName || ''}`}
+                            variant="h6"
                           >
                             {inputProps.additionalLabel}
                           </Typography>
@@ -282,13 +244,9 @@ const Inputs = ({
               hasGroupTitle &&
               not(equals(lastGroup, groupName as string)) && (
                 <Divider
-                  className={classes.divider}
+                  className={isHorizontal ? 'my-0 mx-4' : 'my-4 mx-0'}
                   flexItem
-                  orientation={
-                    equals(groupDirection, GroupDirection.Horizontal)
-                      ? 'vertical'
-                      : 'horizontal'
-                  }
+                  orientation={isHorizontal ? 'vertical' : 'horizontal'}
                 />
               )}
           </Fragment>

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;
   };
@@ -171,6 +175,8 @@ export interface InputProps {
   };
   required?: boolean;
   segmentedButtons?: {
+    // Leaves the label out of the display; it stays the group's accessible name.
+    hideLabel?: boolean;
     options: Array<{
       label: string;
       value: string;

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

@@ -0,0 +1,174 @@
+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 { object } from 'yup';
+
+import { Form } from '../Form';
+import { InputType } from '../Inputs/models';
+
+const sectionNames = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo'];
+
+const SectionContent = (): JSX.Element => <div style={{ height: 400 }} />;
+
+const groups = sectionNames.map((name, index) => ({
+  name,
+  order: index + 1
+}));
+
+const inputs = sectionNames.map((name) => ({
+  custom: { Component: SectionContent },
+  fieldName: name,
+  group: name,
+  label: name,
+  type: InputType.Custom
+}));
+
+const FormInScrollArea = ({ testId }: { testId: string }): JSX.Element => (
+  <div
+    data-testid={testId}
+    style={{ height: 300, overflowY: 'auto', position: 'relative' }}
+  >
+    <Form
+      groups={groups}
+      initialValues={{}}
+      inputs={inputs}
+      submit={rs.fn()}
+      validationSchema={object()}
+    />
+  </div>
+);
+
+const getScrollArea = (testId = 'scroll-area'): HTMLElement =>
+  screen.getByTestId(testId);
+
+const getTab = (name: string, testId = 'scroll-area'): HTMLElement =>
+  within(getScrollArea(testId)).getByRole('tab', { name });
+
+const getSelectedTabs = (testId = 'scroll-area'): Array<string> =>
+  within(getScrollArea(testId))
+    .getAllByRole('tab')
+    .filter((tab) => tab.getAttribute('aria-selected') === 'true')
+    .map((tab) => tab.getAttribute('aria-label') as string);
+
+const scrollToSection = (name: string, testId = 'scroll-area'): void => {
+  const scrollArea = getScrollArea(testId);
+  const anchor = within(scrollArea).getByTestId(`${name}-header`);
+
+  scrollArea.scrollTop +=
+    anchor.getBoundingClientRect().top -
+    scrollArea.getBoundingClientRect().top -
+    48;
+};
+
+describe('Form section navigation', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('activates the first tab when the form is displayed', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+
+    expect(await screen.findByRole('tab', { name: 'Alpha' })).toBeVisible();
+    expect(getSelectedTabs()).toStrictEqual(['Alpha']);
+  });
+
+  it('activates the tab of the section in view when the form is scrolled down then up', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+    await screen.findByRole('tab', { name: 'Alpha' });
+
+    scrollToSection('Charlie');
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Charlie']);
+    });
+
+    scrollToSection('Bravo');
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Bravo']);
+    });
+  });
+
+  it('activates the last tab when the form is scrolled to the bottom', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+    await screen.findByRole('tab', { name: 'Alpha' });
+
+    const scrollArea = getScrollArea();
+    scrollArea.scrollTop = scrollArea.scrollHeight;
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Echo']);
+    });
+  });
+
+  it('scrolls to the section and keeps its tab active all along when a tab is clicked', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+    await screen.findByRole('tab', { name: 'Alpha' });
+
+    const tablist = within(getScrollArea()).getByRole('tablist');
+    const selectedWhileScrolling = new Set<string>();
+    const observer = new MutationObserver(() => {
+      for (const tab of getSelectedTabs()) {
+        selectedWhileScrolling.add(tab);
+      }
+    });
+    observer.observe(tablist, {
+      attributeFilter: ['aria-selected'],
+      attributes: true,
+      subtree: true
+    });
+
+    await userEvent.click(getTab('Delta'));
+
+    await waitFor(() => {
+      expect(getScrollArea().scrollTop).toBeGreaterThan(0);
+    });
+    await waitFor(() => {
+      expect(
+        within(getScrollArea())
+          .getByTestId('Delta-header')
+          .getBoundingClientRect().top -
+          getScrollArea().getBoundingClientRect().top
+      ).toBeLessThan(100);
+    });
+
+    // Reaching the section is not the end of the smooth scroll: keep observing
+    // until the scroll position stops moving.
+    let previousScrollTop = -1;
+    await waitFor(() => {
+      const { scrollTop } = getScrollArea();
+      const hasStopped = scrollTop === previousScrollTop;
+      previousScrollTop = scrollTop;
+
+      expect(hasStopped).toBe(true);
+    });
+    observer.disconnect();
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Delta']);
+    });
+    expect([...selectedWhileScrolling]).toStrictEqual(['Delta']);
+  });
+
+  it('only scrolls its own form when two forms share the same group names', async () => {
+    render(
+      <>
+        <FormInScrollArea testId="first-form" />
+        <FormInScrollArea testId="second-form" />
+      </>
+    );
+    await waitFor(() => {
+      expect(screen.getAllByRole('tab', { name: 'Alpha' })).toHaveLength(2);
+    });
+
+    await userEvent.click(getTab('Charlie', 'second-form'));
+
+    await waitFor(() => {
+      expect(getScrollArea('second-form').scrollTop).toBeGreaterThan(0);
+    });
+
+    expect(getScrollArea('first-form').scrollTop).toBe(0);
+    expect(getSelectedTabs('first-form')).toStrictEqual(['Alpha']);
+  });
+});

package/src/Form/Section/FormSection.tsx

@@ -1,22 +1,35 @@
 import { Box, type TabsProps } from '@mui/material';
 
 import { isNil } from 'ramda';
-import { useMemo } from 'react';
+import { type RefObject, useMemo } from 'react';
 
 import { Tabs } from '../../components/Tabs';
 import type { Group } from '../Inputs/models';
-import { useNavigateToSection } from './navigateToSection';
 import { groupToTab } from './PanelTabs';
+import { useActiveSection } from './useActiveSection';
 
 export interface FormSectionProps extends TabsProps {
+  containerRef: RefObject<HTMLElement | null>;
   groups?: Array<Group>;
 }
 
-const FormSection = ({ groups }: FormSectionProps) => {
-  const navigateToSection = useNavigateToSection();
+const FormSection = ({ groups, containerRef }: FormSectionProps) => {
   const tabMemo = useMemo(() => groupToTab(groups), [groups]);
 
-  if (isNil(groups) || groups.length < 4) {
+  const hasTabs = !isNil(groups) && groups.length >= 4;
+
+  const sectionNames = useMemo(
+    () => tabMemo.map(({ value }) => value),
+    [tabMemo]
+  );
+
+  const { activeSection, goToSection } = useActiveSection({
+    containerRef,
+    isEnabled: hasTabs,
+    sectionNames
+  });
+
+  if (!hasTabs) {
     return null;
   }
 
@@ -24,8 +37,9 @@ const FormSection = ({ groups }: FormSectionProps) => {
     <Box className="sticky top-0 bg-background-paper z-100">
       <Tabs
         defaultTab={tabMemo[0].value}
-        onChange={navigateToSection}
+        onChange={goToSection}
         scrollButtons={false}
+        selectedTab={activeSection}
         tabs={tabMemo}
         variant="scrollable"
       />