@centreon/ui 26.10.3 → 26.10.5

package/package.json

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

package/src/Form/Form.stories.tsx

@@ -1,4 +1,7 @@
+import { object } from 'yup';
+
 import { Form, GroupDirection } from './Form';
+import { InputType } from './Inputs/models';
 import {
   type BasicForm,
   basicFormGroups,
@@ -55,3 +58,55 @@ export const basicFormWithHorizontalGroups = (): JSX.Element => (
     groups={basicFormGroups.filter((group) => group.order !== 3)}
   />
 );
+
+export const exclusiveCheckboxGroup = (): JSX.Element => (
+  <Form
+    initialValues={{
+      hostNotificationOptions: ['Down', 'Recovery'],
+      serviceNotificationOptions: ['None']
+    }}
+    inputs={[
+      {
+        exclusiveCheckboxGroup: {
+          direction: 'horizontal',
+          exclusiveLabel: 'No notifications',
+          exclusiveOption: 'None',
+          options: [
+            'Down',
+            'Unreachable',
+            'Recovery',
+            'Flapping',
+            'Downtime Scheduled',
+            'None'
+          ]
+        },
+        fieldName: 'hostNotificationOptions',
+        group: '',
+        label: 'Host notification options',
+        type: InputType.ExclusiveCheckboxGroup
+      },
+      {
+        exclusiveCheckboxGroup: {
+          direction: 'horizontal',
+          exclusiveLabel: 'No notifications',
+          exclusiveOption: 'None',
+          options: [
+            'Warning',
+            'Unknown',
+            'Critical',
+            'Recovery',
+            'Flapping',
+            'Downtime Scheduled',
+            'None'
+          ]
+        },
+        fieldName: 'serviceNotificationOptions',
+        group: '',
+        label: 'Service notification options',
+        type: InputType.ExclusiveCheckboxGroup
+      }
+    ]}
+    submit={submit}
+    validationSchema={object()}
+  />
+);

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -29,11 +29,7 @@ const CheckboxGroup = ({
     if (!disabled && !hideCheckbox) {
       return;
     }
-    const resetedValue = (value ?? []).map((element) => ({
-      ...(element as unknown as Record<string, unknown>),
-      checked: false
-    }));
-    setFieldValue(fieldName, resetedValue);
+    setFieldValue(fieldName, []);
   }, [disabled, hideCheckbox, fieldName, setFieldValue]);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {

package/src/Form/Inputs/ExclusiveCheckboxGroup.cypress.spec.tsx

@@ -0,0 +1,174 @@
+import { Typography } from '@mui/material';
+
+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>
+  );
+};
+
+const initialize = ({
+  notificationOptions = [],
+  disabled = false
+}: {
+  disabled?: boolean;
+  notificationOptions?: Array<string> | null;
+} = {}): void => {
+  cy.mount({
+    Component: (
+      <Form
+        initialValues={{ notificationOptions }}
+        inputs={[
+          {
+            dataTestId: 'notification-options',
+            exclusiveCheckboxGroup: {
+              direction: 'horizontal',
+              exclusiveLabel: 'No notifications',
+              exclusiveOption: 'None',
+              options
+            },
+            fieldName: 'notificationOptions',
+            getDisabled: () => disabled,
+            group: '',
+            label: 'Notification options',
+            type: InputType.ExclusiveCheckboxGroup
+          },
+          {
+            custom: { Component: ValueDisplay },
+            fieldName: 'value',
+            group: '',
+            label: 'value',
+            type: InputType.Custom
+          }
+        ]}
+        submit={cy.stub()}
+        validationSchema={object()}
+      />
+    )
+  });
+};
+
+const toggle = (): Cypress.Chainable => cy.findByLabelText('No notifications');
+
+const expectValue = (value: Array<string> | null): void => {
+  cy.findByTestId('value').should('have.text', JSON.stringify(value));
+};
+
+describe('Exclusive checkbox group', () => {
+  it('displays the toggle and every option except the exclusive one', () => {
+    initialize();
+
+    toggle().should('not.be.checked');
+    cy.findByLabelText('Down').should('exist');
+    cy.findByLabelText('Unreachable').should('exist');
+    cy.findByLabelText('Recovery').should('exist');
+    cy.findByLabelText('None').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('keeps the inherited state when nothing is selected', () => {
+    initialize();
+
+    toggle().should('not.be.checked');
+    cy.findByLabelText('Down').should('not.be.checked').and('be.enabled');
+    expectValue([]);
+  });
+
+  it('treats a null value as the inherited state', () => {
+    initialize({ notificationOptions: null });
+
+    toggle().should('not.be.checked');
+    cy.findByLabelText('Down').should('not.be.checked').and('be.enabled');
+  });
+
+  it('displays the exclusive state from the initial value', () => {
+    initialize({ notificationOptions: ['None'] });
+
+    toggle().should('be.checked');
+    cy.findByLabelText('Down').should('not.be.checked').and('be.disabled');
+    expectValue(['None']);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a selection from the initial value', () => {
+    initialize({ notificationOptions: ['Down', 'Recovery'] });
+
+    toggle().should('not.be.checked');
+    cy.findByLabelText('Down').should('be.checked');
+    cy.findByLabelText('Unreachable').should('not.be.checked');
+    cy.findByLabelText('Recovery').should('be.checked');
+    expectValue(['Down', 'Recovery']);
+  });
+
+  it('goes from the inherited state to a selection and back', () => {
+    initialize();
+
+    cy.findByLabelText('Down').click();
+    cy.findByLabelText('Recovery').click();
+    expectValue(['Down', 'Recovery']);
+
+    cy.findByLabelText('Down').click();
+    cy.findByLabelText('Recovery').click();
+    expectValue([]);
+    toggle().should('not.be.checked');
+  });
+
+  it('goes from the inherited state to the exclusive state and back', () => {
+    initialize();
+
+    toggle().click();
+    toggle().should('be.checked');
+    expectValue(['None']);
+
+    toggle().click();
+    toggle().should('not.be.checked');
+    expectValue([]);
+  });
+
+  it('clears the selection when the toggle is turned on and leaves it empty when turned off', () => {
+    initialize({ notificationOptions: ['Down', 'Recovery'] });
+
+    toggle().click();
+    expectValue(['None']);
+    cy.findByLabelText('Down').should('not.be.checked').and('be.disabled');
+    cy.findByLabelText('Recovery').should('not.be.checked').and('be.disabled');
+
+    toggle().click();
+    expectValue([]);
+    cy.findByLabelText('Down').should('not.be.checked').and('be.enabled');
+
+    cy.findByLabelText('Unreachable').click();
+    expectValue(['Unreachable']);
+  });
+
+  it('prevents ticking a box while the toggle is on', () => {
+    initialize({ notificationOptions: ['None'] });
+
+    cy.findByLabelText('Down').click({ force: true });
+    cy.findByLabelText('Down').should('not.be.checked');
+    expectValue(['None']);
+  });
+
+  it('disables both the toggle and the checkboxes when the input is disabled', () => {
+    initialize({ disabled: true, notificationOptions: ['Down'] });
+
+    toggle().should('be.disabled');
+    cy.findByLabelText('Down').should('be.checked').and('be.disabled');
+    expectValue(['Down']);
+  });
+});

package/src/Form/Inputs/ExclusiveCheckboxGroup.tsx

@@ -0,0 +1,96 @@
+import { Box } from '@mui/material';
+
+import { type FormikValues, useFormikContext } from 'formik';
+import { equals, includes, path, reject, split } from 'ramda';
+import type { ChangeEvent } from 'react';
+
+import { useMemoComponent } from '../..';
+import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
+import {
+  type ChangeArgs,
+  type InputPropsWithoutGroup,
+  InputType
+} from './models';
+import Switch from './Switch';
+
+const ExclusiveCheckboxGroup = ({
+  exclusiveCheckboxGroup,
+  fieldName,
+  getDisabled,
+  dataTestId
+}: InputPropsWithoutGroup): JSX.Element => {
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+
+  const fieldNamePath = split('.', fieldName);
+
+  const value = (path(fieldNamePath, values) as Array<string> | null) ?? [];
+
+  const exclusiveOption = exclusiveCheckboxGroup?.exclusiveOption as string;
+  const options = reject(
+    equals(exclusiveOption),
+    exclusiveCheckboxGroup?.options ?? []
+  );
+
+  const isExclusive = includes(exclusiveOption, value);
+  const disabled = getDisabled?.(values) || false;
+
+  const changeToggle = ({ value: checked }: ChangeArgs): void => {
+    setFieldValue(fieldName, checked ? [exclusiveOption] : []);
+  };
+
+  const changeCheckbox = (event: ChangeEvent<HTMLInputElement>): void => {
+    if (disabled || isExclusive) {
+      return;
+    }
+
+    const option = event.target.id;
+
+    setFieldValue(
+      fieldName,
+      includes(option, value)
+        ? reject(equals(option), value)
+        : [...value, option]
+    );
+  };
+
+  const baseTestId = dataTestId || fieldName;
+
+  return useMemoComponent({
+    Component: (
+      <Box sx={{ alignItems: 'center', columnGap: 2, display: 'flex' }}>
+        <CheckboxGroupComponent
+          dataTestId={baseTestId}
+          direction={exclusiveCheckboxGroup?.direction}
+          disabled={disabled || isExclusive}
+          labelPlacement={exclusiveCheckboxGroup?.labelPlacement || 'end'}
+          onChange={changeCheckbox}
+          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}
+        />
+      </Box>
+    ),
+    memoProps: [
+      value,
+      disabled,
+      options,
+      exclusiveOption,
+      exclusiveCheckboxGroup?.exclusiveLabel,
+      exclusiveCheckboxGroup?.direction,
+      exclusiveCheckboxGroup?.labelPlacement
+    ]
+  });
+};
+
+export default ExclusiveCheckboxGroup;

package/src/Form/Inputs/index.tsx

@@ -35,6 +35,7 @@ import Checkbox from './Checkbox';
 import CheckboxGroup from './CheckboxGroup';
 import ConnectedAutocomplete from './ConnectedAutocomplete';
 import Custom from './Custom';
+import ExclusiveCheckboxGroup from './ExclusiveCheckboxGroup';
 import FieldsTable from './FieldsTable/FieldsTable';
 import File from './File';
 import Grid from './Grid';
@@ -84,6 +85,10 @@ export const getInput = cond<
     equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
     always(CheckboxGroup)
   ],
+  [
+    equals(InputType.ExclusiveCheckboxGroup) as (b: InputType) => boolean,
+    always(ExclusiveCheckboxGroup)
+  ],
   [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

@@ -50,7 +50,8 @@ export enum InputType {
   CheckboxGroup = 12,
   List = 13,
   File = 14,
-  Divider = 15
+  Divider = 15,
+  ExclusiveCheckboxGroup = 16
 }
 
 interface FieldsTableGetRequiredProps {
@@ -98,6 +99,13 @@ export interface InputProps {
     limitTags?: number;
     decoder?: JsonDecoder.Decoder<unknown>;
   };
+  exclusiveCheckboxGroup?: {
+    direction?: 'horizontal' | 'vertical';
+    exclusiveLabel: string;
+    exclusiveOption: string;
+    labelPlacement?: LabelPlacement;
+    options: Array<string>;
+  };
   file?: {
     multiple?: boolean;
     accept?: string;

package/src/components/SortableEntriesList/Row.tsx

@@ -0,0 +1,117 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { IconButton } from '../Button';
+import { Tooltip } from '../Tooltip';
+import type { RenderRowParams, RowParams, SortableRowAction } from './models';
+import { labelDelete, labelDragToReorder } from './translatedLabels';
+
+type RowButtonProps = ComponentPropsWithRef<typeof IconButton> & {
+  label: string;
+};
+
+// 30px buttons at a 32px pitch. The icon size is set here because the Tooltip
+// overrides IconButton's own small-size class, and consumer icons may be any size.
+const RowButton = ({
+  className = '',
+  label,
+  ...buttonProps
+}: RowButtonProps): JSX.Element => (
+  <Tooltip label={label}>
+    <IconButton
+      {...buttonProps}
+      aria-label={label}
+      className={`[&_.MuiSvgIcon-root]:text-xl ${className}`}
+      size="small"
+      variant="ghost"
+    />
+  </Tooltip>
+);
+
+interface Props<T> {
+  actions: Array<SortableRowAction>;
+  className?: string;
+  draggable: boolean;
+  id: string;
+  onDelete: (id: string) => void;
+  onUpdate: (id: string, update: (value: T) => T) => void;
+  renderRow: (params: RenderRowParams<T>) => ReactNode;
+  rowParams: RowParams<T>;
+}
+
+export const Row = <T,>({
+  actions,
+  className = '',
+  draggable,
+  id,
+  onDelete,
+  onUpdate,
+  renderRow,
+  rowParams
+}: Props<T>): JSX.Element => {
+  const { t } = useTranslation();
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setActivatorNodeRef,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({ disabled: !draggable, id });
+
+  const setValue = (value: T): void => onUpdate(id, () => value);
+  const setField = <K extends keyof T>(field: K, fieldValue: T[K]): void =>
+    onUpdate(
+      id,
+      (value) => ({ ...(value as object), [field]: fieldValue }) as T
+    );
+
+  return (
+    <li
+      className={`relative flex w-full items-center gap-2 ${isDragging ? 'z-1 opacity-70' : ''} ${className}`}
+      data-entry-id={id}
+      ref={setNodeRef}
+      style={{ transform: CSS.Translate.toString(transform), transition }}
+    >
+      <div className="min-w-0 flex-1" data-row-fields>
+        {renderRow({ ...rowParams, setField, setValue })}
+      </div>
+      <div className="flex flex-none items-center gap-0.5">
+        {actions.map(({ icon, id: actionId, isDisabled, label, onClick }) => (
+          <RowButton
+            data-testid={actionId}
+            disabled={isDisabled}
+            icon={icon}
+            key={actionId}
+            label={t(label)}
+            onClick={onClick}
+          />
+        ))}
+        <RowButton
+          className="text-error-main"
+          data-testid="delete-row"
+          icon={<DeleteIcon />}
+          label={t(labelDelete)}
+          onClick={(): void => onDelete(id)}
+        />
+        {draggable && (
+          <RowButton
+            {...attributes}
+            {...listeners}
+            className="cursor-grab touch-none active:cursor-grabbing"
+            data-testid="drag-handle"
+            icon={<DragIndicatorIcon />}
+            label={t(labelDragToReorder)}
+            ref={setActivatorNodeRef}
+          />
+        )}
+      </div>
+    </li>
+  );
+};