@centreon/ui 26.12.1 → 26.12.3

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

@@ -45,8 +45,7 @@ const Grid = ({
           <Box key={key as string} sx={{ width: '100%' }}>
             {field.additionalLabel && (
               <Typography
-                className={field?.additionalLabelClassName}
-                sx={{ color: 'primary.main', marginBottom: 0.5 }}
+                className={`mb-1 text-base font-bold text-text-primary ${field?.additionalLabelClassName || ''}`}
                 variant="h6"
               >
                 {field.additionalLabel}

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

@@ -0,0 +1,113 @@
+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 {
+  disabled?: boolean;
+  enabled?: string;
+}
+
+const initialize = ({
+  enabled = 'use_default',
+  disabled = false
+}: InitializeProps = {}): void => {
+  render(
+    <Form
+      initialValues={{ enabled }}
+      inputs={[
+        {
+          dataTestId: 'enabled',
+          fieldName: 'enabled',
+          getDisabled: () => disabled,
+          group: '',
+          label: 'Notification Enabled',
+          segmentedButtons: { options },
+          type: InputType.SegmentedButtons
+        },
+        {
+          custom: { Component: ValueDisplay },
+          fieldName: 'value',
+          group: '',
+          label: 'value',
+          type: InputType.Custom
+        }
+      ]}
+      submit={rs.fn()}
+      validationSchema={object()}
+    />
+  );
+};
+
+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();
+
+    expect(await screen.findByText('Notification Enabled')).toBeVisible();
+    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('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/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/InputField/Number/Number.browser.test.tsx

@@ -0,0 +1,109 @@
+import { rs } from '@rstest/core';
+import { render } from '@test-setup/render';
+import { waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import NumberField, { type NumberProps } from './Number';
+
+const initialize = (props: NumberProps): void => {
+  render(<NumberField {...props} />);
+};
+
+const getInput = (): HTMLInputElement =>
+  document.querySelector('input') as HTMLInputElement;
+
+const getFieldWidth = (): number =>
+  (
+    getInput().closest('.MuiTextField-root') as HTMLElement
+  ).getBoundingClientRect().width;
+
+describe('Number field', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('displays the placeholder when the field has no default or fallback values', () => {
+    initialize({ dataTestId: 'test', onChange: rs.fn() });
+
+    expect(getInput()).toHaveValue(null);
+    expect(getInput()).toHaveAttribute('placeholder', '0');
+  });
+
+  it('displays the fallback value as placeholder when the field as no default value', () => {
+    initialize({ dataTestId: 'test', fallbackValue: 25, onChange: rs.fn() });
+
+    expect(getInput()).toHaveValue(null);
+    expect(getInput()).toHaveAttribute('placeholder', '25');
+  });
+
+  it('displays the default value as placeholder when the field as default value', () => {
+    initialize({ dataTestId: 'test', defaultValue: 25, onChange: rs.fn() });
+
+    expect(getInput()).toHaveValue(25);
+    // The value only: no placeholder behind it.
+    expect(getInput()).not.toHaveAttribute('placeholder');
+  });
+
+  it('displays the fallback value when the field is cleared out', async () => {
+    const onChange = rs.fn();
+
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      fallbackValue: 10,
+      onChange
+    });
+
+    expect(getInput()).toHaveValue(25);
+    await userEvent.clear(getInput());
+    await waitFor(() => {
+      expect(getInput()).toHaveValue(null);
+    });
+    expect(getInput()).toHaveAttribute('placeholder', '10');
+    expect(onChange).toHaveBeenLastCalledWith(10);
+  });
+
+  it('displays the field using auto size', async () => {
+    initialize({
+      autoSize: true,
+      dataTestId: 'test',
+      defaultValue: 25,
+      onChange: rs.fn()
+    });
+
+    expect(getInput()).toHaveValue(25);
+
+    await userEvent.type(getInput(), '0');
+
+    await waitFor(() => {
+      expect(getInput()).toHaveValue(250);
+    });
+    // A narrow field sized on its value, where a field without auto size has
+    // the 178px default width.
+    expect(getFieldWidth()).toBeLessThan(100);
+  });
+
+  it('sets the value to the minimum value configured when a value less than the minimum value is typed in the field', async () => {
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      onChange: rs.fn(),
+      textFieldSlotsAndSlotProps: {
+        slotProps: {
+          htmlInput: {
+            min: 2
+          }
+        }
+      }
+    });
+
+    expect(getInput()).toHaveValue(25);
+
+    await userEvent.clear(getInput());
+    await userEvent.type(getInput(), '-1');
+
+    await waitFor(() => {
+      expect(getInput()).toHaveValue(2);
+    });
+  });
+});