@centreon/ui 26.10.7 → 26.10.9

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

@@ -1,8 +1,9 @@
-import { Box } from '@mui/material';
+import { Box, Chip } from '@mui/material';
 
 import { type FormikValues, useFormikContext } from 'formik';
 import { equals, includes, path, reject, split } from 'ramda';
 import type { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useMemoComponent } from '../..';
 import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
@@ -19,6 +20,7 @@ const ExclusiveCheckboxGroup = ({
   getDisabled,
   dataTestId
 }: InputPropsWithoutGroup): JSX.Element => {
+  const { t } = useTranslation();
   const { values, setFieldValue } = useFormikContext<FormikValues>();
 
   const fieldNamePath = split('.', fieldName);
@@ -53,10 +55,63 @@ const ExclusiveCheckboxGroup = ({
     );
   };
 
+  const toggleChip = (option: string) => (): void => {
+    setFieldValue(
+      fieldName,
+      includes(option, value)
+        ? reject(equals(option), value)
+        : [...value, option]
+    );
+  };
+
   const baseTestId = dataTestId || fieldName;
 
+  const isChips = equals(exclusiveCheckboxGroup?.variant, 'chips');
+
+  const exclusiveToggle = (
+    <Switch
+      change={changeToggle}
+      dataTestId={`${baseTestId}-exclusive`}
+      fieldName={fieldName}
+      getDisabled={() => disabled}
+      label={exclusiveCheckboxGroup?.exclusiveLabel as string}
+      switchInput={{
+        getChecked: (fieldValue) =>
+          includes(exclusiveOption, (fieldValue as Array<string>) ?? [])
+      }}
+      type={InputType.Switch}
+    />
+  );
+
   return useMemoComponent({
-    Component: (
+    Component: isChips ? (
+      <div
+        className="flex flex-wrap items-center gap-x-6 gap-y-3"
+        data-testid={baseTestId}
+      >
+        {options.map((option) => {
+          const isSelected = !isExclusive && includes(option, value);
+
+          return (
+            <Chip
+              aria-pressed={isSelected}
+              // The theme sizes chips for status badges, 12px or 20px tall.
+              className="h-6 rounded-3xl text-sm [&_.MuiChip-label]:px-3 [&_.MuiChip-label]:leading-[21px]"
+              clickable
+              color={isSelected ? 'primary' : 'default'}
+              data-testid={`${baseTestId}-${option}`}
+              disabled={disabled || isExclusive}
+              key={option}
+              label={t(option)}
+              onClick={toggleChip(option)}
+              size="small"
+              variant={isSelected ? 'filled' : 'outlined'}
+            />
+          );
+        })}
+        {exclusiveToggle}
+      </div>
+    ) : (
       <Box sx={{ alignItems: 'center', columnGap: 2, display: 'flex' }}>
         <CheckboxGroupComponent
           dataTestId={baseTestId}
@@ -67,18 +122,7 @@ const ExclusiveCheckboxGroup = ({
           options={options}
           values={isExclusive ? [] : value}
         />
-        <Switch
-          change={changeToggle}
-          dataTestId={`${baseTestId}-exclusive`}
-          fieldName={fieldName}
-          getDisabled={() => disabled}
-          label={exclusiveCheckboxGroup?.exclusiveLabel as string}
-          switchInput={{
-            getChecked: (fieldValue) =>
-              includes(exclusiveOption, (fieldValue as Array<string>) ?? [])
-          }}
-          type={InputType.Switch}
-        />
+        {exclusiveToggle}
       </Box>
     ),
     memoProps: [
@@ -88,7 +132,8 @@ const ExclusiveCheckboxGroup = ({
       exclusiveOption,
       exclusiveCheckboxGroup?.exclusiveLabel,
       exclusiveCheckboxGroup?.direction,
-      exclusiveCheckboxGroup?.labelPlacement
+      exclusiveCheckboxGroup?.labelPlacement,
+      exclusiveCheckboxGroup?.variant
     ]
   });
 };

package/src/Form/Inputs/LoadingSkeleton.tsx

@@ -12,6 +12,10 @@ const getSkeleton = cond<Array<InputType>, JSX.Element>([
     equals(InputType.Radio) as (b: InputType) => boolean,
     always(<LoadingSkeleton height={104} />)
   ],
+  [
+    equals(InputType.SegmentedButtons) as (b: InputType) => boolean,
+    always(<LoadingSkeleton height={56} />)
+  ],
   [
     equals(InputType.Text) as (b: InputType) => boolean,
     always(<LoadingSkeleton height={52} />)

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

@@ -0,0 +1,71 @@
+import { Button, ButtonGroup, FormGroup, FormLabel } from '@mui/material';
+
+import { type FormikValues, useFormikContext } from 'formik';
+import { equals, path, split } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { useMemoComponent } from '../..';
+import type { InputPropsWithoutGroup } from './models';
+
+const SegmentedButtons = ({
+  dataTestId,
+  fieldName,
+  label,
+  segmentedButtons,
+  getDisabled,
+  additionalMemoProps
+}: InputPropsWithoutGroup): JSX.Element => {
+  const { t } = useTranslation();
+
+  const { values, setFieldValue, setFieldTouched } =
+    useFormikContext<FormikValues>();
+
+  const value = path(split('.', fieldName), values);
+
+  const disabled = getDisabled?.(values) || false;
+
+  const select = (optionValue: string) => (): void => {
+    setFieldTouched(fieldName, true, false);
+    setFieldValue(fieldName, optionValue);
+  };
+
+  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);
+
+              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>
+      </FormGroup>
+    ),
+    memoProps: [value, disabled, segmentedButtons, additionalMemoProps]
+  });
+};
+
+export default SegmentedButtons;

package/src/Form/Inputs/index.tsx

@@ -48,6 +48,7 @@ import {
   InputType
 } from './models';
 import RadioInput from './Radio';
+import SegmentedButtons from './SegmentedButtons';
 import { SubgroupDivider } from './SubGroupDivider';
 import SwitchInput from './Switch';
 import TextInput from './Text';
@@ -89,6 +90,10 @@ export const getInput = cond<
     equals(InputType.ExclusiveCheckboxGroup) as (b: InputType) => boolean,
     always(ExclusiveCheckboxGroup)
   ],
+  [
+    equals(InputType.SegmentedButtons) as (b: InputType) => boolean,
+    always(SegmentedButtons)
+  ],
   [equals(InputType.List) as (b: InputType) => boolean, always(List)],
   [equals(InputType.File) as (b: InputType) => boolean, always(File)],
   [equals(InputType.Text) as (b: InputType) => boolean, always(TextInput)],

package/src/Form/Inputs/models.ts

@@ -51,7 +51,8 @@ export enum InputType {
   List = 13,
   File = 14,
   Divider = 15,
-  ExclusiveCheckboxGroup = 16
+  ExclusiveCheckboxGroup = 16,
+  SegmentedButtons = 17
 }
 
 interface FieldsTableGetRequiredProps {
@@ -88,6 +89,12 @@ export interface InputProps {
     useNewAPIFormat?: boolean;
     additionalConditionParameters: Array<ConditionsSearchParameter>;
     customQueryParameters: Array<QueryParameter>;
+    // The API the options are read from. Left out, the request goes to the
+    // default `./api/latest` as it always has.
+    baseEndpoint?: string;
+    // What the options are cached under. Left out, the field's label is used,
+    // which two fields reading different endpoints can share.
+    queryKey?: string;
     chipColor?: string;
     endpoint?: string;
     filterKey?: string;
@@ -105,6 +112,8 @@ export interface InputProps {
     exclusiveOption: string;
     labelPlacement?: LabelPlacement;
     options: Array<string>;
+    // The options as chips instead of checkboxes; the exclusive one stays a switch.
+    variant?: 'checkboxes' | 'chips';
   };
   file?: {
     multiple?: boolean;
@@ -161,6 +170,12 @@ export interface InputProps {
     row?: boolean;
   };
   required?: boolean;
+  segmentedButtons?: {
+    options: Array<{
+      label: string;
+      value: string;
+    }>;
+  };
   switchInput?: {
     getChecked?: (value: unknown) => boolean;
   };