Move sensi parameters to commons ui (#798)

Signed-off-by: Hugo Marcellin <[email protected]>

Author: Meklo

src/components/inputs/reactHookForm/provider/CustomFormProvider.tsx

@@ -9,7 +9,7 @@ import { createContext, PropsWithChildren, useMemo } from 'react';
 import { type FieldValues, FormProvider, type UseFormReturn } from 'react-hook-form';
 import * as yup from 'yup';
 import { type ObjectSchema } from 'yup';
-import { getSystemLanguage } from '../../../../hooks';
+import { getSystemLanguage } from '../../../../hooks/useLocalizedCountries';
 
 type CustomFormContextProps<TFieldValues extends FieldValues = FieldValues> = {
     removeOptional?: boolean;

src/components/inputs/reactHookForm/provider/useCustomFormContext.ts

@@ -7,7 +7,7 @@
 
 import { useFormContext } from 'react-hook-form';
 import { useContext } from 'react';
-import { CustomFormContext, MergedFormContextProps } from './CustomFormProvider';
+import { CustomFormContext, type MergedFormContextProps } from './CustomFormProvider';
 
 // TODO found how to manage generic type
 export const useCustomFormContext = (): MergedFormContextProps => {

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

@@ -10,7 +10,7 @@ import { FormattedMessage } from 'react-intl';
 import { Box, Button, SxProps, Theme } from '@mui/material';
 import { ControlPoint as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
 import { useFormContext } from 'react-hook-form';
-import { FieldConstants } from '../../../../utils';
+import { FieldConstants } from '../../../../utils/constants/fieldConstants';
 import { ExpandingTextField } from './ExpandingTextField';
 
 export interface DescriptionFieldProps {

src/components/parameters/common/limitreductions/columns-definitions.ts

@@ -16,7 +16,7 @@ import {
     PARAM_SA_LOW_VOLTAGE_PROPORTIONAL_THRESHOLD,
     PARAM_SA_PROVIDER,
 } from '../constant';
-import { getDialogParametersFormSchema } from '../parameters-edition-dialog-props';
+import { getNameElementEditorSchema } from '../name-element-editor';
 
 export const LIMIT_REDUCTIONS_FORM = 'limitReductionsForm';
 export const VOLTAGE_LEVELS_FORM = 'voltageLevelsForm';
@@ -68,14 +68,14 @@ export const TAB_INFO = [
     { label: TabValues[TabValues.LimitReductions], developerModeOnly: false },
 ];
 
-export interface IColumnsDef {
+export interface LimitReductionIColumnsDef {
     label: string;
     dataKey: string;
     tooltip: string;
     width?: string;
 }
 
-export const COLUMNS_DEFINITIONS_LIMIT_REDUCTIONS: IColumnsDef[] = [
+export const COLUMNS_DEFINITIONS_LIMIT_REDUCTIONS: LimitReductionIColumnsDef[] = [
     {
         label: 'voltageRange',
         dataKey: VOLTAGE_LEVELS_FORM,
@@ -148,10 +148,12 @@ export const getSAParametersFromSchema = (name: string | null, limitReductions?:
         [PARAM_SA_HIGH_VOLTAGE_ABSOLUTE_THRESHOLD]: yup.number().required(),
     });
 
-    return yup.object().shape({
-        ...getDialogParametersFormSchema(name),
-        ...providerSchema.fields,
-        ...limitReductionsSchema.fields,
-        ...thresholdsSchema.fields,
-    });
+    return yup
+        .object()
+        .shape({
+            ...providerSchema.fields,
+            ...limitReductionsSchema.fields,
+            ...thresholdsSchema.fields,
+        })
+        .concat(getNameElementEditorSchema(name));
 };

src/components/parameters/common/limitreductions/limit-reduction-table-cell.tsx

@@ -6,10 +6,16 @@
  */
 
 import { TableCell } from '@mui/material';
-import { IColumnsDef, LIMIT_REDUCTIONS_FORM, VOLTAGE_LEVELS_FORM } from './columns-definitions';
+import { LimitReductionIColumnsDef, LIMIT_REDUCTIONS_FORM, VOLTAGE_LEVELS_FORM } from './columns-definitions';
 import { FloatInput, RawReadOnlyInput } from '../../../inputs';
 
-export function LimitReductionTableCell({ rowIndex, column }: Readonly<{ rowIndex: number; column: IColumnsDef }>) {
+export function LimitReductionTableCell({
+    rowIndex,
+    column,
+}: Readonly<{
+    rowIndex: number;
+    column: LimitReductionIColumnsDef;
+}>) {
     return (
         <TableCell sx={{ fontWeight: 'bold' }}>
             {column.dataKey === VOLTAGE_LEVELS_FORM ? (

src/components/parameters/common/limitreductions/limit-reduction-table-row.tsx

@@ -7,17 +7,17 @@
 
 import { TableRow } from '@mui/material';
 import { LimitReductionTableCell } from './limit-reduction-table-cell';
-import { IColumnsDef } from './columns-definitions';
+import { LimitReductionIColumnsDef } from './columns-definitions';
 
 interface TableRowComponentProps {
-    columnsDefinition: IColumnsDef[];
+    columnsDefinition: LimitReductionIColumnsDef[];
     index: number;
 }
 
 export function LimitReductionTableRow({ columnsDefinition, index }: Readonly<TableRowComponentProps>) {
     return (
         <TableRow>
-            {columnsDefinition.map((column: IColumnsDef) => (
+            {columnsDefinition.map((column: LimitReductionIColumnsDef) => (
                 <LimitReductionTableCell key={`${column.dataKey}`} rowIndex={index} column={column} />
             ))}
         </TableRow>

src/components/parameters/common/name-element-editor/name-element-editor-form.tsx

@@ -7,7 +7,8 @@
 
 import { UUID } from 'crypto';
 import { Grid } from '@mui/material';
-import { DescriptionField, UniqueNameInput } from '../../../inputs';
+import { DescriptionField } from '../../../inputs/reactHookForm/text/DescriptionField';
+import { UniqueNameInput } from '../../../inputs/reactHookForm/text/UniqueNameInput';
 import { ElementType, FieldConstants } from '../../../../utils';
 import { filterStyles } from '../../../filter/HeaderFilterForm';
 
@@ -23,7 +24,7 @@ export function NameElementEditorForm({
     elementType,
 }: Readonly<NameElementEditorFormProps>) {
     return (
-        <Grid item sx={{ height: '100%' }}>
+        <Grid item>
             <Grid container spacing={2} direction="column" marginBottom="8px">
                 <Grid item>
                     <UniqueNameInput

src/components/parameters/common/name-element-editor/name-element-editor-utils.ts

@@ -19,11 +19,14 @@ export function getNameElementEditorEmptyFormData(
 
 export function getNameElementEditorSchema(initialElementName: string | null) {
     return yup.object().shape({
-        [NAME]: yup.string().when('nameRequiredWhenInitialNameIsSet', {
-            is: () => initialElementName !== null,
-            then: () => yup.string().required(),
-            otherwise: () => yup.string(),
-        }),
-        [DESCRIPTION]: yup.string(),
+        [NAME]: yup
+            .string()
+            .nullable()
+            .when('nameRequiredWhenInitialNameIsSet', {
+                is: () => initialElementName !== null,
+                then: () => yup.string().required(),
+                otherwise: () => yup.string(),
+            }),
+        [DESCRIPTION]: yup.string().nullable(),
     });
 }

src/components/parameters/common/parameters-edition-dialog-props.ts

@@ -7,8 +7,6 @@
 
 import { UUID } from 'crypto';
 import { User } from 'oidc-client';
-import yup from '../../../utils/yupConfig';
-import { DESCRIPTION, NAME } from '../../inputs/reactHookForm/constants';
 
 export interface ParametersEditionDialogProps {
     id: UUID;
@@ -22,12 +20,3 @@ export interface ParametersEditionDialogProps {
     user: User | null;
     enableDeveloperMode?: boolean;
 }
-
-export const getDialogParametersFormSchema = (name: string | null) => {
-    const shape: { [key: string]: yup.AnySchema } = {};
-    if (name) {
-        shape[NAME] = yup.string().required();
-        shape[DESCRIPTION] = yup.string();
-    }
-    return shape;
-};

src/components/parameters/common/voltage-level-table/custom-voltage-level-table-cell.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { TableCell } from '@mui/material';
-import { IColumnsDef } from '../limitreductions/columns-definitions';
+import { LimitReductionIColumnsDef } from '../limitreductions/columns-definitions';
 import { VOLTAGE_LEVEL } from '../constant';
 import { FloatInput, RawReadOnlyInput } from '../../../inputs';
 
@@ -16,7 +16,7 @@ export function CustomVoltageLevelTableCell({
 }: Readonly<{
     formName: string;
     rowIndex: number;
-    column: IColumnsDef;
+    column: LimitReductionIColumnsDef;
 }>) {
     return (
         <TableCell sx={{ fontWeight: 'bold' }}>