@centreon/ui 24.5.12 → 24.5.13

package/src/Form/Inputs/List/useList.ts

@@ -0,0 +1,81 @@
+import { useMemo, useRef } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import {
+  append,
+  equals,
+  inc,
+  isEmpty,
+  pluck,
+  prop,
+  reject,
+  sortBy
+} from 'ramda';
+
+import { SelectEntry } from '../../..';
+
+interface UseListState {
+  addItem: (newItem: SelectEntry) => void;
+  deleteItem: (id: string) => () => void;
+  sortList: (items: Array<string>) => void;
+  sortedList: Array<unknown>;
+}
+
+export const useList = ({ fieldName }): UseListState => {
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+  const maxOrder = useRef(0);
+
+  const list = values[fieldName];
+
+  const sortedList = useMemo(
+    () =>
+      sortBy(prop('order'), list).map(({ id, ...props }) => ({
+        id: `${id}`,
+        ...props
+      })),
+    [list]
+  );
+
+  const addItem = (newItem: SelectEntry): void => {
+    setFieldValue(
+      fieldName,
+      append(
+        {
+          ...newItem,
+          id: (newItem as SelectEntry).id as number,
+          order: inc(maxOrder.current)
+        },
+        list
+      )
+    );
+  };
+
+  const deleteItem = (id: string) => (): void => {
+    const newItems = reject((item) => equals(Number(id), item.id))(list);
+
+    setFieldValue(fieldName, newItems);
+  };
+
+  const sortList = (items: Array<string>): void => {
+    const newOrderedList = items.map((itemId, idx) => {
+      const item = sortedList.find(({ id }) => equals(id, itemId));
+
+      return {
+        ...item,
+        id: Number(item?.id),
+        order: inc(idx)
+      };
+    });
+
+    setFieldValue(fieldName, newOrderedList);
+  };
+
+  maxOrder.current = isEmpty(list) ? 0 : Math.max(...pluck('order', list));
+
+  return {
+    addItem,
+    deleteItem,
+    sortList,
+    sortedList
+  };
+};

package/src/Form/Inputs/Radio.tsx

@@ -1,5 +1,5 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split } from 'ramda';
+import { equals, includes, path, split, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 
 import { useMemoComponent } from '../..';
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import { InputPropsWithoutGroup } from './models';
 
@@ -73,12 +73,23 @@ const Radio = ({
                   disabled={disabled}
                   id={getNormalizedId(`${dataTestId}${optionLabel}`)}
                   inputProps={{
-                    'aria-label': t(optionLabel) || ''
+                    'aria-label':
+                      (equals(type(optionLabel), 'String') &&
+                        t(optionLabel as string)) ||
+                      ''
                   }}
                 />
               }
-              key={optionLabel}
-              label={t(optionLabel) as string}
+              key={
+                equals(type(optionLabel), 'String')
+                  ? (optionLabel as string)
+                  : `${optionValue}`
+              }
+              label={
+                equals(type(optionLabel), 'String')
+                  ? (t(optionLabel as string) as string)
+                  : optionLabel
+              }
               value={optionValue}
             />
           ))}

package/src/Form/Inputs/Switch.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FormControlLabel, Switch as MUISwitch } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils/getNormalizedId';
 import { useMemoComponent } from '../..';
 
 import { InputPropsWithoutGroup } from './models';

package/src/Form/Inputs/Text.tsx

@@ -12,6 +12,8 @@ import {
   type as variableType
 } from 'ramda';
 
+import { InputAdornment } from '@mui/material';
+
 import { TextField, useMemoComponent } from '../..';
 
 import PasswordEndAdornment from './PasswordEndAdornment';
@@ -27,7 +29,8 @@ const Text = ({
   getRequired,
   change,
   additionalMemoProps,
-  text
+  text,
+  autoFocus
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
@@ -64,16 +67,24 @@ const Text = ({
     ? path(fieldNamePath, errors)
     : undefined;
 
-  const passwordEndAdornment = useCallback(
-    (): JSX.Element | null =>
-      equals(type, InputType.Password) ? (
+  const EndAdornment = useCallback((): JSX.Element | null => {
+    if (equals(type, InputType.Password)) {
+      return (
         <PasswordEndAdornment
           changeVisibility={changeVisibility}
           isVisible={isVisible}
         />
-      ) : null,
-    [isVisible]
-  );
+      );
+    }
+
+    if (text?.endAdornment) {
+      return (
+        <InputAdornment position="end">{text?.endAdornment}</InputAdornment>
+      );
+    }
+
+    return null;
+  }, [isVisible]);
 
   const getInputType = (): string => {
     if (text?.type) {
@@ -97,13 +108,15 @@ const Text = ({
     Component: (
       <TextField
         fullWidth
-        EndAdornment={passwordEndAdornment}
+        EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
+        autoFocus={autoFocus}
         dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}
         multiline={isMultiline}
+        placeholder={text?.placeholder}
         required={isRequired}
         rows={rows}
         type={getInputType()}

package/src/Form/Inputs/index.tsx

@@ -1,7 +1,6 @@
 import { Fragment, useMemo } from 'react';
 
 import * as R from 'ramda';
-import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 import { FormikValues, useFormikContext } from 'formik';
 
@@ -18,8 +17,11 @@ import TextInput from './Text';
 import ConnectedAutocomplete from './ConnectedAutocomplete';
 import FieldsTable from './FieldsTable/FieldsTable';
 import Grid from './Grid';
+import CheckboxGroup from './CheckboxGroup';
+import Checkbox from './Checkbox';
 import Custom from './Custom';
 import LoadingSkeleton from './LoadingSkeleton';
+import List from './List/List';
 
 export const getInput = R.cond<
   Array<InputType>,
@@ -33,7 +35,6 @@ export const getInput = R.cond<
     R.equals(InputType.Radio) as (b: InputType) => boolean,
     R.always(RadioInput)
   ],
-  [R.equals(InputType.Text) as (b: InputType) => boolean, R.always(TextInput)],
   [
     R.equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
     R.always(Autocomplete)
@@ -42,10 +43,6 @@ export const getInput = R.cond<
     R.equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
     R.always(Autocomplete)
   ],
-  [
-    R.equals(InputType.Password) as (b: InputType) => boolean,
-    R.always(TextInput)
-  ],
   [
     R.equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
     R.always(ConnectedAutocomplete)
@@ -61,7 +58,17 @@ export const getInput = R.cond<
     R.always(FieldsTable)
   ],
   [R.equals(InputType.Grid) as (b: InputType) => boolean, R.always(Grid)],
-  [R.equals(InputType.Custom) as (b: InputType) => boolean, R.always(Custom)]
+  [R.equals(InputType.Custom) as (b: InputType) => boolean, R.always(Custom)],
+  [
+    R.equals(InputType.Checkbox) as (b: InputType) => boolean,
+    R.always(Checkbox)
+  ],
+  [
+    R.equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
+    R.always(CheckboxGroup)
+  ],
+  [R.equals(InputType.List) as (b: InputType) => boolean, R.always(List)],
+  [R.T, R.always(TextInput)]
 ]);
 
 interface StylesProps {
@@ -89,7 +96,9 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
       ? 'row'
       : 'column'
   },
-  inputWrapper: { width: '100%' },
+  inputWrapper: {
+    width: '100%'
+  },
   inputs: {
     display: 'flex',
     flexDirection: 'column',
@@ -99,8 +108,10 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
 }));
 
 interface Props {
+  areGroupsOpen?: boolean;
   groupDirection?: GroupDirection;
   groups?: Array<Group>;
+  groupsClassName?: string;
   inputs: Array<InputProps>;
   isCollapsible: boolean;
   isLoading?: boolean;
@@ -111,10 +122,11 @@ const Inputs = ({
   groups = [],
   isLoading = false,
   isCollapsible,
-  groupDirection
+  groupDirection,
+  groupsClassName,
+  areGroupsOpen
 }: Props): JSX.Element => {
-  const { classes } = useStyles({ groupDirection });
-  const { t } = useTranslation();
+  const { classes, cx } = useStyles({ groupDirection });
   const formikContext = useFormikContext<FormikValues>();
 
   const groupsName = R.pluck('name', groups);
@@ -175,15 +187,16 @@ const Inputs = ({
         const hasGroupTitle = R.not(R.isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? R.find(R.propEq('name', groupName), groups)
+          ? R.find(R.propEq(groupName, 'name'), groups)
           : ({} as Group);
 
-        const isFirstElement = R.equals(index, 0);
+        const isFirstElement = areGroupsOpen || R.equals(index, 0);
 
         return (
           <Fragment key={groupName}>
             <div>
               <CollapsibleGroup
+                className={groupsClassName}
                 defaultIsOpen={isFirstElement}
                 group={groupProps}
                 hasGroupTitle={hasGroupTitle}
@@ -209,13 +222,18 @@ const Inputs = ({
                       >
                         {inputProps.additionalLabel && (
                           <Typography
-                            className={classes.additionalLabel}
+                            className={cx(
+                              classes.additionalLabel,
+                              inputProps?.additionalLabelClassName
+                            )}
                             variant="body1"
                           >
-                            {t(inputProps.additionalLabel)}
+                            {inputProps.additionalLabel}
                           </Typography>
                         )}
-                        <Input {...inputProps} />
+                        <div className={inputProps?.inputClassName || ''}>
+                          <Input {...inputProps} />
+                        </div>
                       </div>
                     );
                   })}

package/src/Form/Inputs/models.ts

@@ -1,6 +1,6 @@
 import { FormikValues } from 'formik';
 
-import { SvgIconProps } from '@mui/material';
+import { SvgIconProps, TypographyProps } from '@mui/material';
 
 import { SelectEntry } from '../../InputField/Select';
 import { ConditionsSearchParameter } from '../../api/buildListingEndpoint/models';
@@ -16,7 +16,10 @@ export enum InputType {
   MultiConnectedAutocomplete,
   FieldsTable,
   Grid,
-  Custom
+  Custom,
+  Checkbox,
+  CheckboxGroup,
+  List
 }
 
 interface FieldsTableGetRequiredProps {
@@ -24,14 +27,23 @@ interface FieldsTableGetRequiredProps {
   values: FormikValues;
 }
 
+export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
+
 export interface InputProps {
-  additionalLabel?: string;
+  additionalLabel?: string | JSX.Element;
+  additionalLabelClassName?: string;
   additionalMemoProps?: Array<unknown>;
+  autoFocus?: boolean;
   autocomplete?: {
     creatable?: boolean;
     options: Array<SelectEntry>;
   };
   change?: ({ setFieldValue, value }) => void;
+  checkbox?: {
+    direction?: 'horizontal' | 'vertical';
+    labelPlacement?: LabelPlacement;
+    options?: Array<string>;
+  };
   connectedAutocomplete?: {
     additionalConditionParameters: Array<ConditionsSearchParameter>;
     endpoint?: string;
@@ -42,6 +54,7 @@ export interface InputProps {
     Component: React.ComponentType<InputPropsWithoutGroup>;
   };
   dataTestId?: string;
+  disableSortedOptions?: boolean;
   fieldName: string;
   fieldsTable?: {
     additionalFieldsToMemoize?: Array<string>;
@@ -57,15 +70,24 @@ export interface InputProps {
   getRequired?: (values: FormikValues) => boolean;
   grid?: {
     alignItems?: string;
+    className?: string;
     columns: Array<Omit<InputProps, 'group'>>;
     gridTemplateColumns?: string;
   };
   group: string;
   hideInput?: (values: FormikValues) => boolean;
+  inputClassName?: string;
   label: string;
+  list?: {
+    AddItem: React.ComponentType<{ addItem }>;
+    SortContent: React.ComponentType<object>;
+    addItemLabel?: string;
+    itemProps: Array<string>;
+    sortLabel?: string;
+  };
   radio?: {
     options?: Array<{
-      label: string;
+      label: string | JSX.Element;
       value: boolean | string;
     }>;
     row?: boolean;
@@ -75,7 +97,9 @@ export interface InputProps {
     getChecked?: (value) => boolean;
   };
   text?: {
+    endAdornment?: JSX.Element;
     multilineRows?: number;
+    placeholder?: string;
     type?: string;
   };
   type: InputType;
@@ -90,4 +114,5 @@ export interface Group {
   TooltipContent?: () => JSX.Element;
   name: string;
   order: number;
+  titleAttributes?: TypographyProps;
 }

package/src/Form/index.ts

@@ -0,0 +1 @@
+export * from './Form';

package/src/Form/storiesData.tsx

@@ -4,6 +4,7 @@ import { equals, prop } from 'ramda';
 
 import { Typography } from '@mui/material';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import MailIcon from '@mui/icons-material/MailOutline';
 
 import { SelectEntry } from '../InputField/Select';
 import { Listing } from '../api/models';
@@ -81,9 +82,7 @@ export const basicFormValidationSchema = Yup.object().shape({
   scopes: Yup.array().of(
     Yup.string().min(3, '3 characters min').required('Required')
   ),
-  sports: Yup.array()
-    .of(selectEntryValidationSchema.required('Required'))
-    .min(2, 'Choose at least 2 sports')
+  sports: Yup.array().of(selectEntryValidationSchema.required('Required'))
 });
 
 const roleEntries: Array<SelectEntry> = [
@@ -115,6 +114,11 @@ export const basicFormInitialValues = {
   isForced: false,
   language: 'French',
   name: '',
+  notifications: {
+    channels: { Icon: MailIcon, checked: true, label: 'mail' },
+    hostevents: ['ok', 'warning'],
+    includeServices: { checked: true, label: 'Include services for this host' }
+  },
   password: '',
   roleMapping: [
     {
@@ -157,6 +161,10 @@ export const basicFormGroups: Array<Group> = [
     TooltipContent: (): JSX.Element => <Typography>Tooltip content</Typography>,
     name: 'Second group',
     order: 2
+  },
+  {
+    name: 'Third group',
+    order: 3
   }
 ];
 
@@ -171,6 +179,10 @@ export const basicFormInputs: Array<InputProps> = [
     fieldName: 'email',
     group: 'First group',
     label: 'Email',
+    text: {
+      endAdornment: <MailIcon />,
+      placeholder: 'Your email here'
+    },
     type: InputType.Text
   },
   {
@@ -205,6 +217,41 @@ export const basicFormInputs: Array<InputProps> = [
     },
     type: InputType.Radio
   },
+  {
+    additionalLabel: 'Notifications',
+    fieldName: '',
+    grid: {
+      alignItems: 'center',
+      columns: [
+        {
+          checkbox: {
+            direction: 'horizontal'
+          },
+          fieldName: 'notifications.channels',
+          label: 'channels',
+          type: InputType.Checkbox
+        },
+        {
+          fieldName: 'notifications.includeServices',
+          label: 'Iclude services',
+          type: InputType.Checkbox
+        },
+        {
+          checkbox: {
+            direction: 'horizontal',
+            labelPlacement: 'top',
+            options: ['ok', 'warning', 'critical', 'unknown']
+          },
+          fieldName: 'notifications.hostevents',
+          label: 'host events',
+          type: InputType.CheckboxGroup
+        }
+      ]
+    },
+    group: 'Third group',
+    label: 'Notifications',
+    type: InputType.Grid
+  },
   {
     fieldName: 'anotherText',
     group: 'First group',

package/src/Graph/BarStack/BarStack.cypress.spec.tsx

@@ -0,0 +1,139 @@
+import numeral from 'numeral';
+
+import BarStack from './BarStack';
+import { BarType, BarStackProps } from './models';
+
+const defaultData = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 13 },
+  { color: '#F7931A', label: 'Warning', value: 16 },
+  { color: '#FF6666', label: 'Down', value: 62 }
+];
+
+const total = Math.floor(
+  defaultData.reduce((acc, { value }) => acc + value, 0)
+);
+
+const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
+  return (
+    <div data-testid={`tooltip-${label}`} style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+const initialize = ({
+  width = '400px',
+  height = '400px',
+  data = defaultData,
+  ...args
+}: Omit<BarStackProps, 'data'> & {
+  data?;
+  height?: string;
+  width?: string;
+}): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height, width }}>
+        <BarStack {...args} data={data} />
+      </div>
+    )
+  });
+};
+
+describe('Bar stack', () => {
+  it('renders Bar stack correctly with provided data', () => {
+    initialize({});
+
+    defaultData.forEach(({ label }) => {
+      cy.findByTestId(label).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('adjusts size based on the provided width and height', () => {
+    initialize({ displayLegend: false, height: '300px', width: '300px' });
+
+    cy.findByTestId('barStack').should('have.css', 'height', '300px');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a horizontal bar when variant is set to "horizontal"', () => {
+    initialize({ variant: 'horizontal' });
+    cy.get('[data-variant="horizontal"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a vertical bar when variant is set to "vertical"', () => {
+    initialize({ variant: 'vertical' });
+    cy.get('[data-variant="vertical"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays tooltip with correct information on hover', () => {
+    initialize({ TooltipContent });
+
+    defaultData.forEach(({ label, value }) => {
+      cy.findByTestId(label).trigger('mouseover', { force: true });
+
+      cy.findByTestId(`tooltip-${label}`)
+        .should('contain', label)
+        .and('contain', numeral(value).format('0a').toUpperCase());
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('conditionally displays values on rects based on displayValues prop', () => {
+    initialize({ displayValues: true });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', value);
+    });
+
+    initialize({ displayValues: false });
+    cy.findAllByTestId('value').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays values on rects in percentage unit when displayValues is set to true and unit to percentage', () => {
+    initialize({ displayValues: true, unit: 'percentage' });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', `${((value * 100) / total).toFixed(1)}%`);
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays Legend component based on displayLegend prop', () => {
+    initialize({ displayLegend: true });
+    cy.findByTestId('Legend').should('be.visible');
+
+    initialize({ displayLegend: false });
+    cy.findByTestId('Legend').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title when the title is giving', () => {
+    initialize({ title: 'host' });
+    cy.findByTestId('Title').should('be.visible');
+
+    initialize({});
+    cy.findByTestId('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});