@centreon/ui 26.10.2 → 26.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.10.2",
+  "version": "26.10.4",
   "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/ThemeProvider/tailwindcss.css

@@ -53,6 +53,12 @@
   --color-background-tooltip: #434e58;
   --color-background-widget: #f8f8f8;
 
+  /* Brand colors. Deliberately not overridden in the dark variant: they paint
+     brand surfaces that stay the same in both themes. */
+  --color-brand-navy: #131d5a;
+  --color-brand-navy-action: #cde7fc;
+  --color-brand-navy-action-text: #2e68aa;
+
   /* Chip colors */
   --color-chip-error: #ff6666;
   --color-chip-info: #1588d1;
@@ -105,6 +111,9 @@
   --color-secondary-light: #e5a5f0;
   --color-secondary-dark: #ac28c1;
 
+  /* Section title color */
+  --color-section-title: #131d5a;
+
   /* Status colors */
   --color-status-background-error: #ff6e6e;
   --color-status-background-none: --alpha(#2e68aa / 10%);
@@ -199,6 +208,7 @@
     --color-primary-dark: #4974a5;
     --color-primary-contrastText: #000;
     --color-secondary-main: #7c1fa2;
+    --color-section-title: #ffffff;
     --color-status-background-error: #ff4a4a;
     --color-status-background-none: --alpha(#2e68aa / 10%);
     --color-status-background-pending: #1ebeb3;