@centreon/ui 23.10.26-MON-19396-update-dashboard-rights.0 → 23.10.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.26-MON-19396-update-dashboard-rights.0",
+  "version": "23.10.26",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Button/Save/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Theme } from '@mui/material';
@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-export default {
+const meta = {
   argTypes: {
     labelLoading: { control: 'text' },
     labelSave: { control: 'text' },
@@ -26,8 +26,13 @@ export default {
 
   component: ButtonSave,
 
+  parameters: {
+    chromatic: { delay: 300 }
+  },
   title: 'Button/Save'
-} as ComponentMeta<typeof ButtonSave>;
+};
+
+export default meta;
 
 const TemplateButtonSave: ComponentStory<typeof ButtonSave> = (args) => (
   <ButtonSave {...args} />
@@ -42,7 +47,7 @@ export const loading = (): JSX.Element => <ButtonSave loading />;
 export const succeeded = (): JSX.Element => <ButtonSave succeeded />;
 
 export const normalWithText = (): JSX.Element => (
-  <ButtonSave labelSave="Save" />
+  <ButtonSave labelSave="Save" size="medium" />
 );
 
 export const largeWithText = (): JSX.Element => (
@@ -50,7 +55,7 @@ export const largeWithText = (): JSX.Element => (
 );
 
 export const loadingWithTextAndMediumSize = (): JSX.Element => (
-  <ButtonSave loading labelLoading="Loading" />
+  <ButtonSave loading labelLoading="Loading" size="medium" />
 );
 
 export const succeededWithText = (): JSX.Element => (

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,107 @@
+import { makeStyles } from 'tss-react/mui';
+import { T, always, cond, equals } from 'ramda';
+
+import { SvgIconComponent } from '@mui/icons-material';
+import {
+  FormControlLabel,
+  Checkbox as MuiCheckbox,
+  Box,
+  Typography
+} from '@mui/material';
+
+export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
+
+interface StyleProps {
+  disabled: boolean;
+  hasIcon: boolean;
+  labelPlacement: LabelPlacement;
+}
+
+const getLabelSpacing = (labelPlacement, theme): string => {
+  return cond([
+    [equals('top'), always(theme.spacing(0, 0, 0.5))],
+    [equals('end'), always(theme.spacing(0, 0, 0, 0.5))],
+    [T, always(0)]
+  ])(labelPlacement);
+};
+
+const useStyles = makeStyles<StyleProps>()(
+  (theme, { disabled, hasIcon, labelPlacement }) => ({
+    container: hasIcon
+      ? {
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          minHeight: theme.spacing(11)
+        }
+      : {},
+    icon: {
+      fontSize: theme.spacing(10)
+    },
+    label: {
+      color: disabled
+        ? theme.palette.action.disabled
+        : theme.palette.text.secondary,
+      fontSize: theme.typography.body1.fontSize,
+      fontWeight: equals(labelPlacement, 'top')
+        ? theme.typography.fontWeightBold
+        : theme.typography.fontWeightMedium,
+      padding: getLabelSpacing(labelPlacement, theme)
+    }
+  })
+);
+
+interface Props {
+  Icon?: SvgIconComponent;
+  checked: boolean;
+  className?: string;
+  dataTestId?: string;
+  disabled?: boolean;
+  label: string;
+  labelPlacement?: LabelPlacement;
+  onChange?: (e) => void;
+}
+
+const Checkbox = ({
+  Icon,
+  checked,
+  label,
+  onChange,
+  className,
+  disabled = false,
+  labelPlacement = 'end',
+  dataTestId
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({
+    disabled,
+    hasIcon: !!Icon,
+    labelPlacement
+  });
+
+  return (
+    <Box className={cx(classes.container, className)}>
+      {Icon && <Icon className={classes.icon} />}
+      <FormControlLabel
+        control={
+          <MuiCheckbox
+            checked={checked}
+            color="primary"
+            disabled={disabled}
+            id={label}
+            size="small"
+            sx={{ padding: 0 }}
+            onChange={onChange}
+          />
+        }
+        data-testid={dataTestId || ''}
+        key={label}
+        label={<Typography className={classes.label}>{label}</Typography>}
+        labelPlacement={labelPlacement}
+        sx={{ margin: 0, padding: 0 }}
+      />
+    </Box>
+  );
+};
+
+export default Checkbox;

package/src/Checkbox/CheckboxGroup/index.stories.tsx

@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import CheckboxGroup from '.';
+
+const options = ['ok', 'warning', 'critical', 'unknown'];
+
+const values = ['ok', 'critical'];
+
+export default {
+  argTypes: {},
+  component: CheckboxGroup,
+  title: 'Checkbox/Multi'
+} as ComponentMeta<typeof CheckboxGroup>;
+
+const Template: ComponentStory<typeof CheckboxGroup> = (args) => (
+  <CheckboxGroup {...args} />
+);
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+  options,
+  values
+};
+
+export const Horizontal = Template.bind({});
+
+Horizontal.args = {
+  direction: 'horizontal',
+  options,
+  values
+};
+
+export const LabelOnTop = Template.bind({});
+
+LabelOnTop.args = {
+  direction: 'horizontal',
+  labelPlacement: 'top',
+  options,
+  values
+};

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -0,0 +1,66 @@
+import { equals, includes } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import { FormGroup } from '@mui/material';
+
+import Checkbox, { LabelPlacement } from '../Checkbox';
+
+interface Props {
+  dataTestId?: string;
+  direction?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+  labelPlacement?: LabelPlacement;
+  onChange?: (e) => void;
+  options: Array<string>;
+  values: Array<string>;
+}
+
+const useStyles = makeStyles()((theme) => ({
+  checkbox: {
+    display: 'flex',
+    justifyContent: 'center',
+    minWidth: theme.spacing(10)
+  },
+  container: {
+    display: 'flex',
+    gap: 1
+  }
+}));
+
+const CheckboxGroup = ({
+  options,
+  values,
+  direction = 'vertical',
+  onChange,
+  labelPlacement = 'end',
+  disabled = false,
+  dataTestId
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const row = !equals(direction, 'vertical');
+
+  return (
+    <FormGroup
+      className={classes.container}
+      data-testid={dataTestId || ''}
+      row={row}
+    >
+      {options.map((value) => {
+        return (
+          <Checkbox
+            checked={includes(value, values)}
+            className={classes.checkbox}
+            disabled={disabled}
+            key={value}
+            label={value}
+            labelPlacement={labelPlacement}
+            onChange={onChange}
+          />
+        );
+      })}
+    </FormGroup>
+  );
+};
+
+export default CheckboxGroup;

package/src/Checkbox/index.stories.tsx

@@ -0,0 +1,39 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import MailIcon from '@mui/icons-material/MailOutline';
+
+import Checkbox from './Checkbox';
+
+export default {
+  argTypes: {},
+  component: Checkbox,
+  title: 'Checkbox/Single'
+} as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = (args) => (
+  <Checkbox {...args} />
+);
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+  checked: true,
+  label: 'Up'
+};
+
+export const WithIcon = Template.bind({});
+
+WithIcon.args = {
+  Icon: MailIcon,
+  checked: true,
+  label: 'Mail',
+  labelPlacement: 'end'
+};
+
+export const LabelOnTop = Template.bind({});
+
+LabelOnTop.args = {
+  checked: true,
+  label: 'Down',
+  labelPlacement: 'top'
+};

package/src/Checkbox/index.tsx

@@ -0,0 +1,2 @@
+export { default as CheckboxGroup } from './CheckboxGroup';
+export { default as Checkbox } from './Checkbox';

package/src/Form/CollapsibleGroup.tsx

@@ -18,6 +18,7 @@ import { Group } from './Inputs/models';
 
 interface Props {
   children: React.ReactNode;
+  className?: string;
   defaultIsOpen?: boolean;
   group?: Group;
   hasGroupTitle: boolean;
@@ -50,9 +51,10 @@ const CollapsibleGroup = ({
   isCollapsible,
   group,
   hasGroupTitle,
-  defaultIsOpen = false
+  defaultIsOpen = false,
+  className
 }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const { t } = useTranslation();
 
   const [isOpen, setIsOpen] = useState(isCollapsible && defaultIsOpen);
@@ -61,6 +63,8 @@ const CollapsibleGroup = ({
     setIsOpen((currentIsOpen) => !currentIsOpen);
   };
 
+  const containerClassName = className || '';
+
   const CollapseIcon = isOpen ? ExpandMore : ChevronRightIcon;
   const ContainerComponent = useCallback(
     ({
@@ -72,13 +76,13 @@ const CollapsibleGroup = ({
           disableGutters
           disableRipple
           aria-label={group?.name}
-          className={classes.groupTitleContainer}
+          className={cx(classes.groupTitleContainer, containerClassName)}
           onClick={toggle}
         >
           {containerComponentChildren}
         </ListItemButton>
       ) : (
-        <Box className={classes.groupTitleContainer}>
+        <Box className={cx(classes.groupTitleContainer, containerClassName)}>
           {containerComponentChildren}
         </Box>
       ),
@@ -91,7 +95,9 @@ const CollapsibleGroup = ({
         <ContainerComponent>
           {isCollapsible && <CollapseIcon />}
           <div className={classes.groupTitleIcon}>
-            <Typography variant="h5">{t(group?.name as string)}</Typography>
+            <Typography className="groupText" variant="h5">
+              {t(group?.name as string)}
+            </Typography>
             {group?.EndIcon && (
               <Tooltip
                 classes={{

package/src/Form/Form.stories.tsx

@@ -71,7 +71,7 @@ export const basicFormWithHorizontalGroups = (): JSX.Element => (
     <Form<BasicForm>
       {...mandatoryProps}
       groupDirection={GroupDirection.Horizontal}
-      groups={basicFormGroups}
+      groups={basicFormGroups.filter((group) => group.order !== 3)}
     />
   </Paper>
 );

package/src/Form/Form.tsx

@@ -18,8 +18,12 @@ export enum GroupDirection {
 
 export type FormProps<T> = {
   Buttons?: React.ComponentType;
+  areGroupsOpen?: boolean;
+  children?: JSX.Element;
+  className?: string;
   groupDirection?: GroupDirection;
   groups?: Array<Group>;
+  groupsClassName?: string;
   initialValues: T;
   inputs: Array<InputProps>;
   isCollapsible?: boolean;
@@ -30,6 +34,10 @@ export type FormProps<T> = {
 } & Omit<FormikSharedConfig<T>, 'isInitialValid'>;
 
 const Form = <T extends object>({
+  children,
+  className,
+  groupsClassName,
+  areGroupsOpen,
   initialValues,
   validate,
   validationSchema,
@@ -42,13 +50,15 @@ const Form = <T extends object>({
   groupDirection = GroupDirection.Vertical,
   ...formikSharedConfig
 }: FormProps<T>): JSX.Element => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   if (isLoading) {
     return (
       <Inputs
         isLoading
+        areGroupsOpen={areGroupsOpen}
         groups={groups}
+        groupsClassName={groupsClassName}
         inputs={inputs}
         isCollapsible={isCollapsible}
       />
@@ -63,14 +73,19 @@ const Form = <T extends object>({
       onSubmit={submit}
       {...formikSharedConfig}
     >
-      <div className={classes.form}>
-        <Inputs
-          groupDirection={groupDirection}
-          groups={groups}
-          inputs={inputs}
-          isCollapsible={isCollapsible}
-        />
-        <Buttons />
+      <div>
+        {children}
+        <div className={cx(className, classes.form)}>
+          <Inputs
+            areGroupsOpen={areGroupsOpen}
+            groupDirection={groupDirection}
+            groups={groups}
+            groupsClassName={groupsClassName}
+            inputs={inputs}
+            isCollapsible={isCollapsible}
+          />
+          <Buttons />
+        </div>
       </div>
     </Formik>
   );

package/src/Form/Inputs/Checkbox.tsx

@@ -0,0 +1,57 @@
+import { ChangeEvent } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import { path, split } from 'ramda';
+
+import { Box } from '@mui/material';
+
+import { Checkbox as CheckboxComponent } from '../../Checkbox';
+import { useMemoComponent } from '../..';
+
+import { InputPropsWithoutGroup } from './models';
+
+const Checkbox = ({
+  checkbox,
+  fieldName,
+  getDisabled,
+  hideInput,
+  dataTestId
+}: InputPropsWithoutGroup): JSX.Element => {
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+
+  const fieldNamePath = split('.', fieldName);
+
+  const value = path(fieldNamePath, values);
+
+  const disabled = getDisabled?.(values) || false;
+  const hideCheckbox = hideInput?.(values) || false;
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    const newValue = {
+      ...value,
+      checked: event.target.checked,
+      label: event.target.id
+    };
+
+    setFieldValue(fieldName, newValue);
+  };
+
+  return useMemoComponent({
+    Component: hideCheckbox ? (
+      <Box />
+    ) : (
+      <CheckboxComponent
+        Icon={value?.Icon}
+        checked={value?.checked}
+        dataTestId={dataTestId || ''}
+        disabled={disabled}
+        label={value?.label}
+        labelPlacement={checkbox?.labelPlacement || 'end'}
+        onChange={handleChange}
+      />
+    ),
+    memoProps: [value, disabled, hideCheckbox]
+  });
+};
+
+export default Checkbox;

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -0,0 +1,76 @@
+import { ChangeEvent, useEffect } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import { equals, includes, path, split } from 'ramda';
+
+import { Box, Typography } from '@mui/material';
+
+import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
+import { useMemoComponent } from '../..';
+
+import { InputPropsWithoutGroup } from './models';
+
+const CheckboxGroup = ({
+  checkbox,
+  fieldName,
+  additionalLabel,
+  getDisabled,
+  hideInput,
+  dataTestId
+}: InputPropsWithoutGroup): JSX.Element => {
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+
+  const fieldNamePath = split('.', fieldName);
+
+  const value = path(fieldNamePath, values);
+
+  const disabled = getDisabled?.(values) || false;
+  const hideCheckbox = hideInput?.(values) || false;
+
+  useEffect(() => {
+    if (!disabled && !hideCheckbox) {
+      return;
+    }
+    const resetedValue = value?.map((element) => ({
+      ...element,
+      checked: false
+    }));
+    setFieldValue(fieldName, resetedValue);
+  }, [disabled, hideCheckbox]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    const label = event.target.id;
+    if (!includes(label, value)) {
+      setFieldValue(fieldName, [...value, label]);
+
+      return;
+    }
+
+    setFieldValue(
+      fieldName,
+      value?.filter((elm) => !equals(elm, label))
+    );
+  };
+
+  return useMemoComponent({
+    Component: hideCheckbox ? (
+      <Box />
+    ) : (
+      <Box>
+        {additionalLabel && <Typography>{additionalLabel}</Typography>}
+        <CheckboxGroupComponent
+          dataTestId={dataTestId || ''}
+          direction={checkbox?.direction}
+          disabled={disabled}
+          labelPlacement={checkbox?.labelPlacement || 'end'}
+          options={checkbox?.options as Array<string>}
+          values={value}
+          onChange={handleChange}
+        />
+      </Box>
+    ),
+    memoProps: [value, disabled, hideCheckbox]
+  });
+};
+
+export default CheckboxGroup;

package/src/Form/Inputs/Grid.tsx

@@ -23,14 +23,16 @@ const useStyles = makeStyles<StylesProps>()(
 );
 
 const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
-  const { classes } = useStyles({
+  const { classes, cx } = useStyles({
     alignItems: grid?.alignItems,
     columns: grid?.columns.length,
     gridTemplateColumns: grid?.gridTemplateColumns
   });
 
+  const className = grid?.className || '';
+
   return (
-    <div className={classes.gridFields}>
+    <div className={cx(classes.gridFields, className)}>
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);