@centreon/ui 24.10.8 → 24.10.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.10.8",
+  "version": "24.10.10",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

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

package/src/Form/Inputs/Radio.tsx

@@ -1,5 +1,5 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { path, equals, includes, split, type } from 'ramda';
+import { equals, includes, path, split, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -26,12 +26,20 @@ const Radio = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
+  const { values, setFieldValue, setFieldTouched, setValues, setTouched } =
+    useFormikContext<FormikValues>();
 
   const changeRadio = (_, value): void => {
     if (includes(value, ['true', 'false'])) {
       if (change) {
-        change({ setFieldValue, value: equals(value, 'true') });
+        change({
+          setFieldValue,
+          value: equals(value, 'true'),
+          values,
+          setFieldTouched,
+          setValues,
+          setTouched
+        });
 
         return;
       }
@@ -42,7 +50,7 @@ const Radio = ({
     }
 
     if (change) {
-      change({ setFieldValue, value });
+      change({ setFieldValue, value, values, setFieldTouched, setValues });
 
       return;
     }

package/src/Form/Inputs/Switch.tsx

@@ -22,11 +22,19 @@ const Switch = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
+  const { values, setFieldValue, setFieldTouched, setValues, setTouched } =
+    useFormikContext<FormikValues>();
 
   const changeSwitchValue = (event: ChangeEvent<HTMLInputElement>): void => {
     if (change) {
-      change({ setFieldValue, value: event.target.checked });
+      change({
+        setFieldValue,
+        value: event.target.checked,
+        values,
+        setFieldTouched,
+        setValues,
+        setTouched
+      });
 
       return;
     }

package/src/Form/Inputs/Text.tsx

@@ -2,11 +2,11 @@ import { ChangeEvent, useCallback, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
 import {
-  path,
   equals,
   gt,
   isEmpty,
   not,
+  path,
   split,
   type as variableType
 } from 'ramda';
@@ -42,7 +42,9 @@ const Text = ({
     touched,
     errors,
     handleBlur,
-    setFieldTouched
+    setFieldTouched,
+    setValues,
+    setTouched
   } = useFormikContext<FormikValues>();
 
   const fieldNamePath = split('.', fieldName);
@@ -50,7 +52,14 @@ const Text = ({
   const changeText = (event: ChangeEvent<HTMLInputElement>): void => {
     const { value } = event.target;
     if (change) {
-      change({ setFieldValue, value, setFieldTouched });
+      change({
+        setFieldValue,
+        value,
+        setFieldTouched,
+        setValues,
+        values,
+        setTouched
+      });
 
       return;
     }
@@ -113,7 +122,7 @@ const Text = ({
   return useMemoComponent({
     Component: (
       <TextField
-        fullWidth
+        fullWidth={text?.fullWidth ?? true}
         EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
         autoFocus={autoFocus}

package/src/Form/Inputs/index.tsx

@@ -36,6 +36,7 @@ import CheckboxGroup from './CheckboxGroup';
 import ConnectedAutocomplete from './ConnectedAutocomplete';
 import Custom from './Custom';
 import FieldsTable from './FieldsTable/FieldsTable';
+import File from './File';
 import Grid from './Grid';
 import List from './List/List';
 import LoadingSkeleton from './LoadingSkeleton';
@@ -78,6 +79,7 @@ export const getInput = cond<
     always(CheckboxGroup)
   ],
   [equals(InputType.List) as (b: InputType) => boolean, always(List)],
+  [equals(InputType.File) as (b: InputType) => boolean, always(File)],
   [T, always(TextInput)]
 ]);
 
@@ -113,7 +115,8 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
     display: 'flex',
     flexDirection: 'column',
     marginTop: theme.spacing(1),
-    rowGap: theme.spacing(2)
+    rowGap: theme.spacing(2),
+    marginBottom: theme.spacing(1)
   }
 }));
 
@@ -165,7 +168,7 @@ const Inputs = ({
     );
 
     return pluck('name', usedGroups);
-  }, []);
+  }, [inputsByGroup, groups]);
 
   const sortedInputsByGroup = useMemo(
     () =>

package/src/Form/Inputs/models.ts

@@ -19,7 +19,8 @@ export enum InputType {
   Custom = 10,
   Checkbox = 11,
   CheckboxGroup = 12,
-  List = 13
+  List = 13,
+  File = 14
 }
 
 interface FieldsTableGetRequiredProps {
@@ -37,8 +38,16 @@ export interface InputProps {
   autocomplete?: {
     creatable?: boolean;
     options: Array<SelectEntry>;
+    fullWidth?: boolean;
   };
-  change?: ({ setFieldValue, value, setFieldTouched }) => void;
+  change?: ({
+    setFieldValue,
+    value,
+    setFieldTouched,
+    setValues,
+    values,
+    setTouched
+  }) => void;
   checkbox?: {
     direction?: 'horizontal' | 'vertical';
     labelPlacement?: LabelPlacement;
@@ -51,6 +60,12 @@ export interface InputProps {
     filterKey?: string;
     getRenderedOptionText?: (option) => string | JSX.Element;
   };
+  file?: {
+    multiple?: boolean;
+    accept?: string;
+    maxFileSize?: number;
+    CustomDropZoneContent: ({ files }) => JSX.Element;
+  };
   custom?: {
     Component: React.ComponentType<InputPropsWithoutGroup>;
   };
@@ -103,6 +118,7 @@ export interface InputProps {
     placeholder?: string;
     type?: string;
     min?: number;
+    fullWidth?: boolean;
   };
   type: InputType;
 }

package/src/Form/storiesData.tsx

@@ -8,7 +8,7 @@ import { Typography } from '@mui/material';
 import { SelectEntry } from '../InputField/Select';
 import { Listing } from '../api/models';
 
-import { array, boolean, number, object, string } from 'yup';
+import { array, boolean, mixed, number, object, string } from 'yup';
 import {
   Group,
   InputProps,
@@ -78,7 +78,8 @@ export const basicFormValidationSchema = object().shape({
     })
   ),
   scopes: array().of(string().min(3, '3 characters min').required('Required')),
-  sports: array().of(selectEntryValidationSchema.required('Required'))
+  sports: array().of(selectEntryValidationSchema.required('Required')),
+  file: mixed()
 });
 
 const roleEntries: Array<SelectEntry> = [
@@ -134,7 +135,8 @@ export const basicFormInitialValues = {
     }
   ],
   scopes: [],
-  sports: []
+  sports: [],
+  file: null
 };
 
 export const classOptions = [...Array(10).keys()].map((idx) => ({
@@ -444,6 +446,16 @@ export const basicFormInputs: Array<InputProps> = [
       multilineRows: 4
     },
     type: InputType.Text
+  },
+  {
+    fieldName: 'file',
+    group: 'First group',
+    label: 'File',
+    type: InputType.File,
+    file: {
+      accept: 'image/*',
+      multiple: true
+    }
   }
 ];
 

package/src/Form/translatedLabels.ts

@@ -5,3 +5,4 @@ export const labelSaved = 'Saved';
 export const labelReset = 'Reset';
 export const labelDisplayThePassword = 'Display the password';
 export const labelHideThePassword = 'Hide the password';
+export const labelDropOrSelectAFile = 'Drop or select a file';

package/src/components/DataTable/DataTable.cypress.spec.tsx

@@ -53,7 +53,8 @@ const initializeDataTableEmpty = (canCreate = false): void => {
             actions: {
               create: 'Create'
             },
-            title: 'Welcome'
+            title: 'Welcome',
+            description: 'Description'
           }}
           onCreate={cy.stub()}
         />

package/src/components/DataTable/DataTable.stories.tsx

@@ -48,6 +48,23 @@ export const AsEmptyState: Story = {
   }
 };
 
+export const AsEmptyStateWithDescription: Story = {
+  args: {
+    children: (
+      <DataTable.EmptyState
+        labels={{
+          actions: {
+            create: 'Create item'
+          },
+          title: 'No items found',
+          description: 'Description'
+        }}
+      />
+    ),
+    isEmpty: true
+  }
+};
+
 export const withFixedHeightContainer: Story = {
   args: { ...Default.args },
   render: (args) => (

package/src/components/DataTable/EmptyState/DataTableEmptyState.styles.ts

@@ -10,7 +10,6 @@ const useStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(4),
-
     h2: {
       color: theme.palette.text.primary,
       font: 'normal normal 600 34px/36px Roboto',

package/src/components/Modal/Modal.styles.ts

@@ -45,7 +45,7 @@ const useStyles = makeStyles<{
       width: '400px'
     },
     '&[data-size="xlarge"] .MuiDialog-paper': {
-      maxWidth: '1400px',
+      maxWidth: '900px',
       width: 'calc(100% - 64px)'
     }
   },