@centreon/ui 24.11.2 → 24.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.11.2",
+  "version": "24.11.4",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -18,6 +18,7 @@
     "cypress:run": "cypress run --component --browser=chrome",
     "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"
   },
+  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -53,8 +54,6 @@
     "@cypress/webpack-dev-server": "^3.10.1",
     "@faker-js/faker": "^8.4.1",
     "@mdx-js/react": "^3.0.1",
-    "@modern-js/prod-server": "^2.58.1",
-    "@modern-js/storybook": "^2.58.1",
     "@simonsmith/cypress-image-snapshot": "^9.1.0",
     "@storybook/addon-a11y": "^8.2.9",
     "@storybook/addon-docs": "^8.2.9",

package/src/Dashboard/Dashboard.styles.ts

@@ -40,7 +40,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         width: theme.spacing(1)
       },
       '& .react-resizable-handle.react-resizable-handle-s': {
-        bottom: 0,
+        bottom: 4,
         cursor: 'ns-resize',
         height: theme.spacing(1),
         left: 0,
@@ -49,7 +49,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         width: `calc(100% - ${theme.spacing(3)})`
       },
       '& .react-resizable-handle.react-resizable-handle-se': {
-        bottom: 0,
+        bottom: 4,
         cursor: 'nwse-resize',
         height: theme.spacing(2),
         right: 0,
@@ -62,7 +62,8 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
       '& .react-resizable-handle:hover': {
         opacity: 1
       },
-      position: 'relative'
+      position: 'relative',
+      height: '100%',
     }
   })
 );

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -95,7 +95,7 @@ export const normal = DashboardTemplate.bind({});
 
 export const withManyPanels = DashboardTemplate.bind({});
 withManyPanels.args = {
-  layout: generateLayout(1000)
+  layout: generateLayout(100)
 };
 
 export const withItemHeader = DashboardTemplate.bind({});

package/src/Dashboard/Grid.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useMemo } from 'react';
+import { MutableRefObject, ReactElement, useMemo } from 'react';
 
 import { scaleLinear } from '@visx/scale';
 import { Grid as VisxGrid } from '@visx/visx';
@@ -13,9 +13,15 @@ interface Props {
   columns: number;
   height: number;
   width: number;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
 }
 
-const Grid = ({ width, height, columns }: Props): ReactElement => {
+const Grid = ({
+  width,
+  height,
+  columns,
+  containerRef
+}: Props): ReactElement => {
   const theme = useTheme();
 
   const xScale = useMemo(
@@ -44,19 +50,19 @@ const Grid = ({ width, height, columns }: Props): ReactElement => {
     .fill(0)
     .map((_, index) => index * tick);
 
+  const yTickValues = Array(numberOfRows)
+    .fill(0)
+    .map((_, index) => index);
+
   return useMemoComponent({
     Component: (
       <svg style={{ height, position: 'absolute', width }}>
-        <VisxGrid.GridColumns
-          height={height}
-          scale={xScale}
-          stroke={theme.palette.divider}
-          tickValues={xTickValues}
-          width={width}
-        />
-        <VisxGrid.GridRows
+        <VisxGrid.Grid
+          columnTickValues={xTickValues}
+          rowTickValues={yTickValues}
           height={height}
-          scale={yScale}
+          yScale={yScale}
+          xScale={xScale}
           stroke={theme.palette.divider}
           top={-10}
           width={width}

package/src/Dashboard/Layout.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useSetAtom } from 'jotai';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
@@ -6,10 +6,10 @@ import 'react-grid-layout/css/styles.css';
 
 import {
   ParentSize,
-  Responsive as ResponsiveHeight,
   useMemoComponent
 } from '..';
 
+import { Box } from '@mui/material';
 import { useDashboardLayoutStyles } from './Dashboard.styles';
 import Grid from './Grid';
 import { isResizingItemAtom } from './atoms';
@@ -26,6 +26,18 @@ interface DashboardLayoutProps<T> {
   layout: Array<T>;
 }
 
+const bottom = (layout: Array<Layout>): number => {
+  let max = 0;
+  let bottomY = 0;
+
+  layout.forEach((panel) => {
+    bottomY = panel.y + panel.h;
+    if (bottomY > max) max = bottomY;
+  })
+
+  return max;
+}
+
 const DashboardLayout = <T extends Layout>({
   children,
   changeLayout,
@@ -34,6 +46,8 @@ const DashboardLayout = <T extends Layout>({
   isStatic = false,
   additionalMemoProps = []
 }: DashboardLayoutProps<T>): JSX.Element => {
+  const dashboardContainerRef = useRef<HTMLDivElement | null>(null);
+
   const { classes } = useDashboardLayoutStyles(isStatic);
 
   const [columns, setColumns] = useState(getColumnsFromScreenSize());
@@ -52,6 +66,16 @@ const DashboardLayout = <T extends Layout>({
     setIsResizingItem(null);
   }, []);
 
+  const containerHeight = useMemo((): number | undefined => {
+      const nbRow = bottom(getLayout(layout));
+      const containerPaddingY = 4
+      return (
+        nbRow * rowHeight +
+        (nbRow - 1) * 20 +
+        containerPaddingY * 2
+      );
+    }, [layout, rowHeight])
+
   useEffect(() => {
     window.addEventListener('resize', resize);
 
@@ -62,31 +86,36 @@ const DashboardLayout = <T extends Layout>({
 
   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}
-                onResizeStart={startResize}
-                onResizeStop={stopResize}
-              >
-                {children}
-              </ReactGridLayout>
-            </div>
-          )}
-        </ParentSize>
-      </ResponsiveHeight>
+      <Box ref={dashboardContainerRef} sx={{ overflowY: 'auto', overflowX: 'hidden' }}>
+          <ParentSize>
+            {({ width, height }): JSX.Element => (
+              <Box className={classes.container}>
+                {displayGrid && (
+                  <Grid
+                    columns={columns}
+                    height={(containerHeight || 0) > height ? containerHeight : height}
+                    width={width}
+                    containerRef={dashboardContainerRef}
+                  />
+                )}
+                <ReactGridLayout
+                  cols={columns}
+                  containerPadding={[4, 0]}
+                  layout={getLayout(layout)}
+                  margin={[20, 20]}
+                  resizeHandles={['s', 'e', 'se']}
+                  rowHeight={rowHeight}
+                  width={width}
+                  onLayoutChange={changeLayout}
+                  onResizeStart={startResize}
+                  onResizeStop={stopResize}
+                >
+                  {children}
+                </ReactGridLayout>
+              </Box>
+            )}
+          </ParentSize>
+        </Box>
     ),
     memoProps: [columns, layout, displayGrid, isStatic, ...additionalMemoProps]
   });

package/src/FileDropZone/index.tsx

@@ -30,23 +30,15 @@ interface StylesProps {
 const useStyles = makeStyles<StylesProps>()(
   (theme, { hasCustomDropZoneContent, isDraggingOver }) => ({
     dropzone: {
-      '&:hover': hasCustomDropZoneContent
-        ? undefined
-        : {
-            backgroundColor: alpha(theme.palette.primary.main, 0.1),
-            border: `${theme.spacing(0.3)} dashed ${
-              theme.palette.primary.main
-            }`,
-            boxShadow: theme.shadows[3],
-            cursor: 'pointer'
-          },
-      border: `${theme.spacing(0.3)} dashed ${
-        hasCustomDropZoneContent && !isDraggingOver
-          ? 'transparent'
-          : theme.palette.primary.main
-      }`,
+      '&:hover': {
+        backgroundColor: alpha(theme.palette.primary.main, 0.1),
+        boxShadow: theme.shadows[3],
+        cursor: 'pointer'
+      },
+      border: `${theme.spacing(0.3)} dashed ${theme.palette.primary.main}`,
       boxShadow: isDraggingOver ? theme.shadows[3] : theme.shadows[0],
-      padding: hasCustomDropZoneContent ? undefined : theme.spacing(1),
+      borderRadius: `${theme.shape.borderRadius}px`,
+      padding: theme.spacing(0.5, 1),
       width: hasCustomDropZoneContent ? '100%' : theme.spacing(50)
     },
     dropzoneInfo: {
@@ -66,7 +58,7 @@ const useStyles = makeStyles<StylesProps>()(
 export type CustomDropZoneContentProps = Pick<
   UseDropzoneState,
   'openFileExplorer'
->;
+> & { files: FileList | null; label?: string };
 
 interface Props {
   CustomDropZoneContent?: ({
@@ -79,6 +71,7 @@ interface Props {
   maxFileSize?: number;
   multiple?: boolean;
   resetFilesStatusAndUploadData: () => void;
+  label?: string;
 }
 
 const getExtensions = cond([
@@ -115,7 +108,8 @@ const Dropzone = ({
   accept,
   CustomDropZoneContent,
   maxFileSize,
-  className
+  className,
+  label
 }: Props): JSX.Element => {
   const hasCustomDropZoneContent = !isNil(CustomDropZoneContent);
   const {
@@ -145,25 +139,29 @@ const Dropzone = ({
       <div>
         <Box
           className={cx(classes.dropzone, className)}
-          onClick={!hasCustomDropZoneContent ? openFileExplorer : undefined}
+          onClick={openFileExplorer}
           onDragLeave={dragOver(false)}
           onDragOver={dragOver(true)}
           onDrop={dropFiles}
         >
           <div className={classes.dropzoneInfo}>
             {hasCustomDropZoneContent ? (
-              <CustomDropZoneContent openFileExplorer={openFileExplorer} />
+              <CustomDropZoneContent
+                openFileExplorer={openFileExplorer}
+                files={files}
+                label={label}
+              />
             ) : (
-              <>
+              <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
                 <PostAddIcon color="primary" fontSize="large" />
                 <Typography>
                   {t(labelDropOr)} {t(labelSelectAFile)}
                 </Typography>
-              </>
+              </Box>
             )}
             <input
               accept={accept}
-              aria-label={t(labelSelectAFile) || ''}
+              aria-label={t(labelSelectAFile)}
               className={classes.input}
               multiple={multiple}
               ref={fileInputRef}

package/src/Form/CollapsibleGroup.tsx

@@ -43,7 +43,8 @@ const useStyles = makeStyles()((theme) => ({
   },
   tooltip: {
     maxWidth: theme.spacing(60)
-  }
+  },
+  title: {}
 }));
 
 const CollapsibleGroup = ({
@@ -97,7 +98,7 @@ const CollapsibleGroup = ({
           <div className={classes.groupTitleIcon}>
             <Typography
               className="groupText"
-              variant="h5"
+              variant="h6"
               {...group?.titleAttributes}
             >
               {t(group?.name as string)}

package/src/Form/Form.cypress.spec.tsx

@@ -131,3 +131,42 @@ describe('Form list', () => {
     cy.makeSnapshot();
   });
 });
+
+const initializeFile = (): void => {
+  cy.mount({
+    Component: (
+      <Form
+        initialValues={{
+          list: []
+        }}
+        inputs={[
+          {
+            fieldName: 'file',
+            group: '',
+            label: 'json',
+            type: InputType.File,
+            file: {
+              accept: '.json'
+            }
+          }
+        ]}
+        submit={cy.stub()}
+        validationSchema={object()}
+      />
+    )
+  });
+};
+
+describe('File', () => {
+  it('uploads a file when a file is selected', () => {
+    initializeFile();
+
+    cy.contains('Drop or select a file').should('be.visible');
+    cy.findByLabelText('select a file').selectFile('package.json', {
+      force: true
+    });
+    cy.contains('package.json').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Form/Form.tsx

@@ -68,6 +68,7 @@ const Form = <T extends object>({
 
   return (
     <Formik<T>
+      enableReinitialize
       initialValues={initialValues}
       validate={validate}
       validationSchema={validationSchema}

package/src/Form/Inputs/Autocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { path, equals, isNil, map, not, prop, type } from 'ramda';
+import { equals, isNil, map, not, path, prop, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import { FormHelperText, Stack } from '@mui/material';
@@ -53,7 +53,15 @@ const Autocomplete = ({
 
   const [inputText, setInputText] = useState('');
 
-  const { values, setFieldValue, errors } = useFormikContext<FormikValues>();
+  const {
+    values,
+    setFieldValue,
+    setFieldTouched,
+    errors,
+    touched,
+    setValues,
+    setTouched
+  } = useFormikContext<FormikValues>();
 
   const isMultiple = equals(inputType, InputType.MultiAutocomplete);
 
@@ -67,11 +75,20 @@ const Autocomplete = ({
     setInputText('');
 
     if (change) {
-      change({ setFieldValue, value: normalizedNewValues });
+      setFieldTouched(fieldName, true, false);
+      change({
+        setFieldValue,
+        value: normalizedNewValues,
+        setFieldTouched,
+        setValues,
+        values,
+        setTouched
+      });
 
       return;
     }
 
+    setFieldTouched(fieldName, true, false);
     setFieldValue(fieldName, normalizedNewValues);
   };
 
@@ -83,6 +100,10 @@ const Autocomplete = ({
   );
 
   const getError = useCallback((): Array<string> | undefined => {
+    if (!path([...fieldName.split('.')], touched)) {
+      return undefined;
+    }
+
     const error = path([...fieldName.split('.')], errors) as
       | Array<string>
       | string
@@ -111,7 +132,7 @@ const Autocomplete = ({
     const filteredError = formattedError?.filter(Boolean);
 
     return (filteredError as Array<string>) || undefined;
-  }, [errors, fieldName, isMultiple, selectedValues]);
+  }, [errors, fieldName, isMultiple, selectedValues, touched]);
 
   const textChange = useCallback(
     (event): void => setInputText(event.target.value),
@@ -167,6 +188,7 @@ const Autocomplete = ({
           value={getValues() ?? null}
           onChange={changeValues}
           onTextChange={textChange}
+          style={{ width: autocomplete?.fullWidth ?? true ? 'auto' : '180px' }}
         />
         {inputErrors && (
           <Stack>
@@ -180,6 +202,7 @@ const Autocomplete = ({
       </div>
     ),
     memoProps: [
+      values,
       getValues(),
       inputErrors,
       additionalLabel,

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { path, equals, isEmpty, propEq, reject, split } from 'ramda';
+import { equals, isEmpty, path, propEq, reject, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -30,8 +30,15 @@ const ConnectedAutocomplete = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, touched, errors, setFieldValue, setFieldTouched } =
-    useFormikContext<FormikValues>();
+  const {
+    values,
+    touched,
+    errors,
+    setFieldValue,
+    setFieldTouched,
+    setValues,
+    setTouched
+  } = useFormikContext<FormikValues>();
 
   const filterKey = connectedAutocomplete?.filterKey || defaultFilterKey;
 
@@ -58,18 +65,20 @@ const ConnectedAutocomplete = ({
   const changeAutocomplete = useCallback(
     (_, value): void => {
       if (change) {
-        change({ setFieldValue, value });
+        change({
+          setFieldValue,
+          value,
+          setFieldTouched,
+          setValues,
+          values,
+          setTouched
+        });
 
         return;
       }
 
+      setFieldTouched(fieldName, true, false);
       setFieldValue(fieldName, value);
-
-      if (path(fieldNamePath, touched)) {
-        return;
-      }
-
-      setFieldTouched(fieldName, true);
     },
     [fieldName, touched, additionalMemoProps]
   );
@@ -105,6 +114,7 @@ const ConnectedAutocomplete = ({
   const deleteItem = (_, option): void => {
     const newValue = reject(propEq(option.id, 'id'), value);
 
+    setFieldTouched(fieldName, true, false);
     setFieldValue(fieldName, newValue);
   };
 

package/src/Form/Inputs/File.tsx

@@ -0,0 +1,69 @@
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
+import { Box, Typography } from '@mui/material';
+import { FormikValues, useFormikContext } from 'formik';
+import { path, split } from 'ramda';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import FileDropZone, { transformFileListToArray } from '../../FileDropZone';
+import { InputPropsWithoutGroup } from './models';
+
+const File = ({
+  fieldName,
+  file,
+  change,
+  dataTestId,
+  label
+}: InputPropsWithoutGroup): JSX.Element => {
+  const { t } = useTranslation();
+
+  const { values, setFieldValue, setFieldTouched } =
+    useFormikContext<FormikValues>();
+
+  const fieldNamePath = split('.', fieldName);
+
+  const files = useMemo(
+    () => path(fieldNamePath, values),
+    [values]
+  ) as FileList;
+
+  const filesArray = transformFileListToArray(files);
+
+  const changeFiles = (newFiles: FileList | null): void => {
+    if (change) {
+      change({ setFieldValue, setFieldTouched, value: newFiles });
+
+      return;
+    }
+
+    setFieldValue(fieldName, newFiles);
+  };
+
+  return (
+    <Box data-testid={dataTestId} aria-label={t(label)}>
+      <Typography variant="h6">{t(label)}</Typography>
+      <Box sx={{ display: 'flex', gap: 1, flexDirection: 'column' }}>
+        <FileDropZone
+          {...file}
+          accept={file?.accept || '*'}
+          files={files || null}
+          changeFiles={changeFiles}
+          resetFilesStatusAndUploadData={() => undefined}
+          label={label}
+        />
+        <Box sx={{ display: 'flex', gap: 1, flexDirection: 'column' }}>
+          {filesArray.map((file) => (
+            <Box
+              key={file.name}
+              sx={{ display: 'flex', gap: 1, flexDirection: 'row' }}
+            >
+              <DescriptionOutlinedIcon color="success" fontSize="small" />
+              <Typography>{file.name}</Typography>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default File;

package/src/Form/Inputs/Grid.tsx

@@ -2,6 +2,8 @@ import { makeStyles } from 'tss-react/mui';
 
 import { InputPropsWithoutGroup } from './models';
 
+import { Box, Typography } from '@mui/material';
+import { FormikValues, useFormikContext } from 'formik';
 import { getInput } from '.';
 
 interface StylesProps {
@@ -22,13 +24,22 @@ const useStyles = makeStyles<StylesProps>()(
   })
 );
 
-const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
+const Grid = ({
+  grid,
+  hideInput
+}: InputPropsWithoutGroup): JSX.Element | null => {
   const { classes, cx } = useStyles({
     alignItems: grid?.alignItems,
     columns: grid?.columns.length,
     gridTemplateColumns: grid?.gridTemplateColumns
   });
 
+  const { values } = useFormikContext<FormikValues>();
+
+  if (hideInput?.(values) ?? false) {
+    return null;
+  }
+
   const className = grid?.className || '';
 
   return (
@@ -36,7 +47,24 @@ const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);
 
-        return <Input key={field.fieldName} {...field} />;
+        if (field.hideInput?.(values) ?? false) {
+          return null;
+        }
+
+        return (
+          <Box sx={{ width: '100%' }} key={field.fieldName}>
+            {field.additionalLabel && (
+              <Typography
+                sx={{ marginBottom: 0.5, color: 'primary.main' }}
+                className={cx(field?.additionalLabelClassName)}
+                variant="h6"
+              >
+                {field.additionalLabel}
+              </Typography>
+            )}
+            <Input {...field} />
+          </Box>
+        );
       })}
     </div>
   );