@centreon/ui 26.11.6 → 26.11.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.11.6",
+  "version": "26.11.8",
   "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/ConnectedAutocomplete.tsx

@@ -45,14 +45,20 @@ const ConnectedAutocomplete = ({
   const isMultiple = equals(type, InputType.MultiConnectedAutocomplete);
 
   const getEndpoint = (parameters: GetEndpointParams): string => {
+    // Once a value is selected the field prepends a `$ni` condition excluding
+    // it, so the typed text is not necessarily the first condition -- and
+    // clearing the text leaves no `$lk` condition at all.
+    const searchedValue = parameters?.search?.conditions?.find(
+      (condition) => condition?.values?.$lk
+    )?.values?.$lk as string | undefined;
+
     const nameQueryParameters =
-      connectedAutocomplete?.useNewAPIFormat && parameters?.search
+      connectedAutocomplete?.useNewAPIFormat && searchedValue
         ? [
             {
               name: 'name[lk]',
-              value: (
-                parameters.search.conditions?.[0].values?.$lk as string
-              ).slice(1, -1)
+              // The field wraps the typed text in `%`.
+              value: searchedValue.slice(1, -1)
             }
           ]
         : [];
@@ -166,6 +172,7 @@ const ConnectedAutocomplete = ({
   return useMemoComponent({
     Component: (
       <TypedAutocompleteField
+        baseEndpoint={connectedAutocomplete?.baseEndpoint}
         chipProps={chipProps}
         dataTestId={dataTestId}
         decoder={connectedAutocomplete?.decoder}
@@ -187,6 +194,7 @@ const ConnectedAutocomplete = ({
         onBlur={blur}
         onChange={changeAutocomplete}
         optionProperty={connectedAutocomplete?.optionProperty}
+        queryKey={connectedAutocomplete?.queryKey}
         required={isRequired}
         searchConditions={connectedAutocomplete?.additionalConditionParameters}
         value={value ?? null}

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 {
@@ -87,6 +88,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;
@@ -98,6 +105,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/InputField/Select/Autocomplete/Connected/index.tsx

@@ -126,8 +126,11 @@ const ConnectedAutocompleteField = (
           search: searchParameter
         });
       },
+      // Two fields can carry the same label and read different APIs, and
+      // would otherwise share each other's options.
       getQueryKey: () => [
         `autocomplete-${queryKey || props.label}`,
+        baseEndpoint,
         page,
         searchParameter
       ],