@centreon/ui 24.4.21 → 24.4.23

package/src/Dashboard/Layout.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+
+import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+
+import {
+  Responsive as ResponsiveHeight,
+  ParentSize,
+  useMemoComponent
+} from '..';
+
+import { useDashboardLayoutStyles } from './Dashboard.styles';
+import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
+import Grid from './Grid';
+
+const ReactGridLayout = WidthProvider(GridLayout);
+
+interface DashboardLayoutProps<T> {
+  changeLayout?: (newLayout: Array<Layout>) => void;
+  children: Array<JSX.Element>;
+  displayGrid?: boolean;
+  isStatic?: boolean;
+  layout: Array<T>;
+}
+
+const Layout = <T extends Layout>({
+  children,
+  changeLayout,
+  displayGrid,
+  layout,
+  isStatic = false
+}: DashboardLayoutProps<T>): JSX.Element => {
+  const { classes } = useDashboardLayoutStyles(isStatic);
+
+  const [columns, setColumns] = useState(getColumnsFromScreenSize());
+
+  const resize = (): void => {
+    setColumns(getColumnsFromScreenSize());
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', resize);
+
+    return (): void => {
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return useMemoComponent({
+    Component: (
+      <ResponsiveHeight margin={40}>
+        <ParentSize>
+          {({ width, height }): JSX.Element => (
+            <div className={classes.container}>
+              {displayGrid && (
+                <Grid columns={columns} height={height} width={width} />
+              )}
+              <ReactGridLayout
+                cols={columns}
+                containerPadding={[4, 0]}
+                layout={getLayout(layout)}
+                margin={[20, 20]}
+                resizeHandles={['s', 'e', 'se']}
+                rowHeight={rowHeight}
+                width={width}
+                onLayoutChange={changeLayout}
+              >
+                {children}
+              </ReactGridLayout>
+            </div>
+          )}
+        </ParentSize>
+      </ResponsiveHeight>
+    ),
+    memoProps: [columns, layout, displayGrid, isStatic]
+  });
+};
+
+export default Layout;

package/src/Dashboard/index.tsx

@@ -0,0 +1,9 @@
+import Layout from './Layout';
+import Item from './Item';
+
+export * from './utils';
+
+export const DashboardLayout = {
+  Item,
+  Layout
+};

package/src/Dashboard/utils.ts

@@ -0,0 +1,28 @@
+import { lt } from 'ramda';
+import { Layout } from 'react-grid-layout';
+
+export const maxColumns = 12;
+const minColumns = 1;
+const breakpoint = 768;
+
+export const rowHeight = 64;
+
+export const getIsSmallScreenSize = (): boolean =>
+  lt(window.innerWidth, breakpoint);
+
+export const getColumnsFromScreenSize = (): number =>
+  getIsSmallScreenSize() ? minColumns : maxColumns;
+
+export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
+  const isSmallScreenSize = getIsSmallScreenSize();
+  if (!isSmallScreenSize) {
+    return layout;
+  }
+
+  return layout
+    .sort((a, b) => a.x + a.y - (b.x + b.y))
+    .map((widget) => ({
+      ...widget,
+      w: 1
+    }));
+};

package/src/Dialog/Confirm/index.tsx

@@ -1,12 +1,25 @@
-import DialogContentText from '@mui/material/DialogContentText';
+import { DialogContentText, Typography } from '@mui/material';
 
 import Dialog, { Props as DialogProps } from '..';
 
-type Props = DialogProps & { labelMessage?: string | null };
+type Props = DialogProps & {
+  children?: JSX.Element;
+  labelMessage?: string | null;
+  labelSecondMessage?: string | null;
+};
 
-const Confirm = ({ labelMessage, ...rest }: Props): JSX.Element => (
+const Confirm = ({
+  labelMessage,
+  labelSecondMessage,
+  children,
+  ...rest
+}: Props): JSX.Element => (
   <Dialog {...rest}>
-    {labelMessage && <DialogContentText>{labelMessage}</DialogContentText>}
+    <DialogContentText>
+      {labelMessage && <Typography>{labelMessage}</Typography>}
+      {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}
+      {children}
+    </DialogContentText>
   </Dialog>
 );
 

package/src/Dialog/Duplicate/index.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '../../testRenderer';
+import { render, fireEvent } from '../../../test/testRenderer';
 
 import DialogDuplicate from '.';
 

package/src/Dialog/index.tsx

@@ -12,6 +12,8 @@ import {
   CircularProgress
 } from '@mui/material';
 
+import { DataTestAttributes } from '../@types/data-attributes';
+
 interface StylesProps {
   contentWidth?: number;
 }
@@ -35,6 +37,7 @@ export type Props = {
   confirmDisabled?: boolean;
   contentWidth?: number;
   dialogActionsClassName?: string;
+  dialogConfirmButtonClassName?: string;
   dialogContentClassName?: string;
   dialogPaperClassName?: string;
   dialogTitleClassName?: string;
@@ -46,7 +49,8 @@ export type Props = {
   onConfirm: (event, value?) => void;
   open: boolean;
   submitting?: boolean;
-} & DialogProps;
+} & DialogProps &
+  DataTestAttributes;
 
 const Dialog = ({
   open,
@@ -65,6 +69,7 @@ const Dialog = ({
   dialogTitleClassName,
   dialogContentClassName,
   dialogActionsClassName,
+  dialogConfirmButtonClassName,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -91,13 +96,20 @@ const Dialog = ({
       )}
       <DialogActions className={dialogActionsClassName}>
         {onCancel && (
-          <Button color="primary" disabled={cancelDisabled} onClick={onCancel}>
+          <Button
+            color="primary"
+            data-testid="Cancel"
+            disabled={cancelDisabled}
+            onClick={onCancel}
+          >
             {labelCancel}
           </Button>
         )}
         <Button
           aria-label={labelConfirm || ''}
+          className={dialogConfirmButtonClassName}
           color="primary"
+          data-testid="Confirm"
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}

package/src/FallbackPage/FallbackPage.tsx

@@ -7,8 +7,8 @@ import { Typography } from '@mui/material';
 
 import LoadingSkeleton from '../LoadingSkeleton';
 import { CentreonLogo } from '../Logo/CentreonLogo';
-import NotAuthorizedTemplateBackgroundDark from '../../assets/not-authorized-template-background-dark.svg';
-import NotAuthorizedTemplateBackgroundLight from '../../assets/not-authorized-template-background-light.svg';
+import NotAuthorizedTemplateBackgroundDark from '../@assets/images/not-authorized-template-background-dark.svg';
+import NotAuthorizedTemplateBackgroundLight from '../@assets/images/not-authorized-template-background-light.svg';
 import { Image } from '..';
 import { useThemeMode } from '../utils/useThemeMode';
 import { typedMemo } from '../utils/typedMemo';

package/src/FileDropZone/index.tsx

@@ -17,7 +17,7 @@ import { alpha, Box, FormHelperText, Typography } from '@mui/material';
 
 import { userAtom } from '@centreon/ui-context';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import { labelDropOr, labelSelectAFile } from './translatedLabels';
 import useDropzone, { UseDropzoneState } from './useDropzone';

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,13 @@ const CollapsibleGroup = ({
         <ContainerComponent>
           {isCollapsible && <CollapseIcon />}
           <div className={classes.groupTitleIcon}>
-            <Typography variant="h5">{t(group?.name as string)}</Typography>
+            <Typography
+              className="groupText"
+              variant="h5"
+              {...group?.titleAttributes}
+            >
+              {t(group?.name as string)}
+            </Typography>
             {group?.EndIcon && (
               <Tooltip
                 classes={{

package/src/Form/{index.stories.tsx → Form.stories.tsx}

@@ -8,8 +8,7 @@ import {
   basicFormValidationSchema,
   CustomButton
 } from './storiesData';
-
-import Form, { GroupDirection } from '.';
+import { Form, GroupDirection } from './Form';
 
 export default { title: 'Form' };
 
@@ -72,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.styles.ts

@@ -0,0 +1,11 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2)
+  }
+}));
+
+export { useStyles };

package/src/Form/{index.tsx → Form.tsx}

@@ -1,19 +1,29 @@
-import { Formik, FormikHelpers, FormikValues } from 'formik';
+import {
+  Formik,
+  FormikHelpers,
+  FormikSharedConfig,
+  FormikValues
+} from 'formik';
 import * as Yup from 'yup';
 
 import FormButtons from './FormButtons';
 import Inputs from './Inputs';
 import { Group, InputProps } from './Inputs/models';
+import { useStyles } from './Form.styles';
 
 export enum GroupDirection {
   Horizontal = 'horizontal',
   Vertical = 'vertical'
 }
 
-interface Props<T> {
+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;
@@ -21,9 +31,13 @@ interface Props<T> {
   submit: (values: T, bag: FormikHelpers<T>) => void | Promise<void>;
   validate?: (values: FormikValues) => void;
   validationSchema: Yup.SchemaOf<T>;
-}
+} & Omit<FormikSharedConfig<T>, 'isInitialValid'>;
 
 const Form = <T extends object>({
+  children,
+  className,
+  groupsClassName,
+  areGroupsOpen,
   initialValues,
   validate,
   validationSchema,
@@ -33,13 +47,18 @@ const Form = <T extends object>({
   Buttons = FormButtons,
   isLoading = false,
   isCollapsible = false,
-  groupDirection = GroupDirection.Vertical
-}: Props<T>): JSX.Element => {
+  groupDirection = GroupDirection.Vertical,
+  ...formikSharedConfig
+}: FormProps<T>): JSX.Element => {
+  const { cx, classes } = useStyles();
+
   if (isLoading) {
     return (
       <Inputs
         isLoading
+        areGroupsOpen={areGroupsOpen}
         groups={groups}
+        groupsClassName={groupsClassName}
         inputs={inputs}
         isCollapsible={isCollapsible}
       />
@@ -48,25 +67,28 @@ const Form = <T extends object>({
 
   return (
     <Formik<T>
-      enableReinitialize
-      validateOnBlur
-      validateOnMount
       initialValues={initialValues}
       validate={validate}
       validationSchema={validationSchema}
       onSubmit={submit}
+      {...formikSharedConfig}
     >
       <div>
-        <Inputs
-          groupDirection={groupDirection}
-          groups={groups}
-          inputs={inputs}
-          isCollapsible={isCollapsible}
-        />
-        <Buttons />
+        {children}
+        <div className={cx(className, classes.form)}>
+          <Inputs
+            areGroupsOpen={areGroupsOpen}
+            groupDirection={groupDirection}
+            groups={groups}
+            groupsClassName={groupsClassName}
+            inputs={inputs}
+            isCollapsible={isCollapsible}
+          />
+          <Buttons />
+        </div>
       </div>
     </Formik>
   );
 };
 
-export default Form;
+export { Form };

package/src/Form/FormButtons.tsx

@@ -8,8 +8,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Button } from '@mui/material';
 
 import SaveButton from '../Button/Save';
-import useMemoComponent from '../utils/useMemoComponent';
-import getNormalizedId from '../utils/getNormalizedId';
+import { useMemoComponent, getNormalizedId } from '../utils';
 
 import {
   labelReset,
@@ -24,8 +23,7 @@ const useStyles = makeStyles()((theme) => ({
     columnGap: theme.spacing(2),
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'flex-end',
-    marginTop: theme.spacing(2)
+    justifyContent: 'flex-end'
   }
 }));
 

package/src/Form/Inputs/Autocomplete.tsx

@@ -9,7 +9,7 @@ import { FormHelperText, Stack } from '@mui/material';
 import SingleAutocompleteField from '../../InputField/Select/Autocomplete';
 import { labelPressEnterToAccept } from '../translatedLabels';
 import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
-import useMemoComponent from '../../utils/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 import { SelectEntry } from '../../InputField/Select';
 
 import { InputPropsWithoutGroup, InputType } from './models';

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/ConnectedAutocomplete.tsx

@@ -25,7 +25,8 @@ const ConnectedAutocomplete = ({
   connectedAutocomplete,
   change,
   additionalMemoProps,
-  type
+  type,
+  disableSortedOptions = false
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
@@ -106,6 +107,7 @@ const ConnectedAutocomplete = ({
       <AutocompleteField
         dataTestId={dataTestId}
         disableClearable={false}
+        disableSortedOptions={disableSortedOptions}
         disabled={disabled}
         error={error}
         field={filterKey}

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);
 

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}
             />
           ))}