filter ihm improvements

src/components/filter/HeaderFilterForm.tsx

@@ -7,14 +7,21 @@
 
 import { Grid } from '@mui/material';
 import { UUID } from 'crypto';
-import { FieldConstants } from '../../utils/constants/fieldConstants';
+import { FieldConstants, ElementType, MAX_CHAR_DESCRIPTION } from '../../utils';
 import { FilterType } from './constants/FilterConstants';
-import { UniqueNameInput } from '../inputs/reactHookForm/text/UniqueNameInput';
-import { ElementType } from '../../utils/types/elementType';
-import { DescriptionField } from '../inputs/reactHookForm/text/DescriptionField';
-import { RadioInput } from '../inputs/reactHookForm/booleans/RadioInput';
+import { UniqueNameInput, DescriptionField, RadioInput } from '../inputs';
 import yup from '../../utils/yupConfig';
-import { MAX_CHAR_DESCRIPTION } from '../../utils/constants/uiConstants';
+
+export const filterStyles = {
+    textField: {
+        minWidth: '250px',
+        width: '33%',
+    },
+    description: {
+        minWidth: '250px',
+        width: '50%',
+    },
+};
 
 export interface FilterFormProps {
     creation?: boolean;
@@ -50,11 +57,13 @@ export function HeaderFilterForm({
                     elementType={ElementType.FILTER}
                     autoFocus={creation}
                     activeDirectory={activeDirectory}
+                    sx={filterStyles.textField}
+                    fullWidth={false}
                 />
             </Grid>
             <>
                 <Grid item xs={12}>
-                    <DescriptionField />
+                    <DescriptionField expandingTextSx={filterStyles.description} />
                 </Grid>
                 {creation && !sourceFilterForExplicitNamingConversion && (
                     <Grid item>

src/components/filter/expert/ExpertFilterForm.tsx

@@ -32,6 +32,7 @@ import { CustomReactQueryBuilder } from '../../inputs/reactQueryBuilder/CustomRe
 import { unscrollableDialogStyles } from '../../dialogs';
 import { FieldType } from '../../../utils/types/fieldType';
 import { useFormatLabelWithUnit } from '../../../hooks/useFormatLabelWithUnit';
+import { filterStyles } from '../HeaderFilterForm';
 
 yup.setLocale({
     mixed: {
@@ -134,6 +135,7 @@ export function ExpertFilterForm() {
                     resetOnConfirmation={handleResetOnConfirmation}
                     message="changeTypeMessage"
                     validateButtonLabel="button.changeType"
+                    sx={filterStyles.textField}
                 />
             </Box>
             <Box sx={unscrollableDialogStyles.scrollableContent}>

src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx

@@ -28,6 +28,7 @@ import { exportFilter } from '../../../services/study';
 import { EquipmentType } from '../../../utils/types/equipmentType';
 import { unscrollableDialogStyles } from '../../dialogs';
 import { FILTER_EQUIPMENTS_ATTRIBUTES } from './ExplicitNamingFilterConstants';
+import { filterStyles } from '../HeaderFilterForm';
 
 function isGeneratorOrLoad(equipmentType: string): boolean {
     return equipmentType === Generator.type || equipmentType === Load.type;
@@ -223,6 +224,7 @@ export function ExplicitNamingFilterForm({ sourceFilterForExplicitNamingConversi
                     resetOnConfirmation={handleResetOnConfirmation}
                     message="changeTypeMessage"
                     validateButtonLabel="button.changeType"
+                    sx={filterStyles.textField}
                 />
                 {sourceFilterForExplicitNamingConversion && (
                     <ModifyElementSelection

src/components/inputs/reactHookForm/text/DescriptionField.tsx

@@ -7,14 +7,18 @@
 
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Box, Button } from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
+import { Box, Button, SxProps, Theme } from '@mui/material';
+import AddIcon from '@mui/icons-material/ControlPoint';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useFormContext } from 'react-hook-form'; // Import useFormContext
-import { FieldConstants } from '../../../../utils/constants/fieldConstants';
+import { FieldConstants } from '../../../../utils';
 import { ExpandingTextField } from './ExpandingTextField';
 
-export function DescriptionField() {
+export interface DescriptionFieldProps {
+    expandingTextSx?: SxProps<Theme>;
+}
+
+export function DescriptionField({ expandingTextSx }: Readonly<DescriptionFieldProps>) {
     const { setValue, getValues } = useFormContext();
     const description = getValues(FieldConstants.DESCRIPTION);
     const [isDescriptionFieldVisible, setIsDescriptionFieldVisible] = useState(!!description);
@@ -41,7 +45,7 @@ export function DescriptionField() {
                         label="descriptionProperty"
                         minRows={3}
                         rows={3}
-                        sx={{ flexGrow: 1 }}
+                        sx={expandingTextSx}
                     />
                     <Button
                         sx={{

src/components/inputs/reactHookForm/text/UniqueNameInput.tsx

@@ -7,14 +7,14 @@
 
 import { ChangeEvent, useCallback, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { InputAdornment, TextFieldProps } from '@mui/material';
+import { InputAdornment, SxProps, TextFieldProps, Theme } from '@mui/material';
 import CheckIcon from '@mui/icons-material/Check';
 import { useController, useFormContext } from 'react-hook-form';
 import CircularProgress from '@mui/material/CircularProgress';
 import TextField from '@mui/material/TextField';
 import { UUID } from 'crypto';
 import { useDebounce } from '../../../../hooks';
-import { ElementType, FieldConstants } from '../../../../utils';
+import { FieldConstants, ElementType } from '../../../../utils';
 import { elementAlreadyExists } from '../../../../services';
 
 export interface UniqueNameInputProps {
@@ -28,6 +28,8 @@ export interface UniqueNameInputProps {
         'value' | 'onChange' | 'name' | 'label' | 'inputRef' | 'inputProps' | 'InputProps'
     >;
     activeDirectory?: UUID;
+    sx?: SxProps<Theme>;
+    fullWidth?: boolean;
 }
 
 /**
@@ -41,6 +43,8 @@ export function UniqueNameInput({
     onManualChangeCallback,
     formProps,
     activeDirectory,
+    sx,
+    fullWidth = true,
 }: Readonly<UniqueNameInputProps>) {
     const {
         field: { onChange, onBlur, value, ref },
@@ -149,6 +153,7 @@ export function UniqueNameInput({
 
     return (
         <TextField
+            autoComplete="new-password" // turns off the browser autocomplete. May be replaced by "off" but it is not well supported by some browsers
             onChange={handleManualChange}
             onBlur={onBlur}
             value={value}
@@ -158,7 +163,8 @@ export function UniqueNameInput({
             type="text"
             autoFocus={autoFocus}
             margin="dense"
-            fullWidth
+            sx={sx}
+            fullWidth={fullWidth}
             error={!!error}
             helperText={translatedError}
             InputProps={{ endAdornment }}

src/translations/en/descriptionEn.ts

@@ -7,7 +7,8 @@
 
 export const descriptionEn = {
     description: 'Description',
-    descriptionProperty: 'Description (optional)',
+    descriptionProperty: 'Description',
     descriptionModificationError: 'An error occurred while editing the description',
     descriptionLimitError: 'Description exceeds character limit',
+    AddDescription: 'Add a description',
 };

src/translations/fr/descriptionFr.ts

@@ -7,7 +7,8 @@
 
 export const descriptionFr = {
     description: 'Description',
-    descriptionProperty: 'Description (optionnel)',
+    descriptionProperty: 'Description',
     descriptionModificationError: 'Erreur lors de la modification de la description',
     descriptionLimitError: 'La description dépasse la limite de caractères',
+    AddDescription: 'Ajouter une description',
 };