Migration Typescript - components/dialogs/parameters (#2400)

Signed-off-by: LE SAULNIER Kevin <[email protected]>

Author: klesaulnier

src/components/diagrams/singleLineDiagram/single-line-diagram-content.tsx

@@ -64,7 +64,7 @@ type EquipmentMenuState = {
 };
 interface SingleLineDiagramContentProps {
     readonly showInSpreadsheet: (menu: { equipmentId: string | null; equipmentType: EquipmentType | null }) => void;
-    readonly studyUuid: string;
+    readonly studyUuid: UUID;
     readonly svgType: DiagramType;
     readonly svg?: string;
     readonly svgMetadata?: SLDMetadata;
@@ -656,8 +656,6 @@ function SingleLineDiagramContent(props: SingleLineDiagramContentProps) {
             {equipmentToDelete && displayDeletionDialog()}
             {equipmentToConfigDynamicSimulationEvent && (
                 <DynamicSimulationEventDialog
-                    studyUuid={studyUuid}
-                    currentNodeId={currentNode?.id ?? ''}
                     equipmentId={equipmentToConfigDynamicSimulationEvent.equipmentId}
                     equipmentType={equipmentToConfigDynamicSimulationEvent.equipmentType}
                     onClose={() => handleCloseDynamicSimulationEventDialog()}

src/components/dialogs/dynamicsimulation/event/dynamic-simulation-event-dialog.tsx

@@ -21,10 +21,10 @@ import { fetchDynamicSimulationEvent, saveDynamicSimulationEvent } from '../../.
 import { CustomFormProvider, useSnackMessage } from '@gridsuite/commons-ui';
 import { FetchStatus } from '../../../../services/utils';
 import { EQUIPMENT_TYPES } from '../../../utils/equipment-types';
+import { useSelector } from 'react-redux';
+import { AppState } from 'redux/reducer';
 
 export type DynamicSimulationEventDialogProps = {
-    studyUuid: string;
-    currentNodeId: string;
     equipmentId: string;
     equipmentType: EQUIPMENT_TYPES;
     onClose: () => void;
@@ -33,18 +33,12 @@ export type DynamicSimulationEventDialogProps = {
 } & Omit<DialogProps, 'open'>;
 
 export const DynamicSimulationEventDialog = (props: DynamicSimulationEventDialogProps) => {
-    const {
-        studyUuid,
-        currentNodeId,
-        equipmentId,
-        equipmentType,
-        onClose,
-        title,
-        open: defaultOpen,
-        ...dialogProps
-    } = props;
+    const { equipmentId, equipmentType, onClose, title, open: defaultOpen, ...dialogProps } = props;
 
     const { snackError } = useSnackMessage();
+    const studyUuid = useSelector((state: AppState) => state.studyUuid);
+    const currentNode = useSelector((state: AppState) => state.currentTreeNode);
+    const currentNodeId = currentNode?.id;
     const [dataFetchStatus, setDataFetchStatus] = useState(FetchStatus.IDLE);
     const [event, setEvent] = useState<Event>();
 
@@ -92,6 +86,9 @@ export const DynamicSimulationEventDialog = (props: DynamicSimulationEventDialog
 
     // load event for equipment
     useEffect(() => {
+        if (!studyUuid || !currentNodeId) {
+            return;
+        }
         setDataFetchStatus(FetchStatus.RUNNING);
         fetchDynamicSimulationEvent(studyUuid, currentNodeId, equipmentId).then((event) => {
             setDataFetchStatus(FetchStatus.SUCCEED);
@@ -120,6 +117,9 @@ export const DynamicSimulationEventDialog = (props: DynamicSimulationEventDialog
     // submit form
     const handleSubmit = useCallback(
         (formObj: { [KEY in EventPropertyName]: any }) => {
+            if (!studyUuid || !currentNodeId) {
+                return;
+            }
             // formObj to EventProperty[]
             const propertyNames = Object.keys(formObj ?? {}) as EventPropertyName[];
 

src/components/dialogs/export-dialog.jsx

@@ -32,7 +32,7 @@ import { getExportUrl } from '../../services/study/network';
 import { isBlankOrEmpty } from 'components/utils/validation-functions';
 import TextField from '@mui/material/TextField';
 import { useSelector } from 'react-redux';
-import { useParameterState } from './parameters/parameters.jsx';
+import { useParameterState } from './parameters/parameters';
 import { PARAM_DEVELOPER_MODE } from '../../utils/config-params';
 
 const STRING_LIST = 'STRING_LIST';

src/components/dialogs/import-modification-dialog.tsx

@@ -38,8 +38,8 @@ const ImportModificationDialog: FunctionComponent<ImportModificationDialogProps>
         };
         const modificationUuidList = selectedElements.map((e) => e.id);
         // import selected modifications
-        if (modificationUuidList.length > 0) {
-            copyOrMoveModifications(studyUuid, currentNode?.id, modificationUuidList, copyInfos).catch((errmsg) => {
+        if (modificationUuidList.length > 0 && studyUuid && currentNode) {
+            copyOrMoveModifications(studyUuid, currentNode.id, modificationUuidList, copyInfos).catch((errmsg) => {
                 snackError({
                     messageTxt: errmsg,
                     headerId: 'errDuplicateModificationMsg',

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

@@ -12,7 +12,6 @@ import {
     PARAM_SA_LOW_VOLTAGE_PROPORTIONAL_THRESHOLD,
 } from 'utils/config-params';
 import yup from '../../../../utils/yup-config';
-import { NumberSchema } from 'yup';
 
 export const LIMIT_REDUCTIONS_FORM = 'limitReductionsForm';
 export const VOLTAGE_LEVELS_FORM = 'voltageLevelsForm';
@@ -79,19 +78,6 @@ export const COLUMNS_DEFINITIONS_LIMIT_REDUCTIONS = [
     },
 ];
 
-const getLimitDurationsFormSchema = (nbLimits: number) => {
-    let limitDurationsFormSchema: Record<string, NumberSchema> = {};
-    for (let i = 0; i < nbLimits; i++) {
-        limitDurationsFormSchema[LIMIT_DURATION_FORM + i] = yup
-            .number()
-            .min(0, 'RealPercentage')
-            .max(1, 'RealPercentage')
-            .nullable()
-            .required();
-    }
-    return limitDurationsFormSchema;
-};
-
 export const getLimitReductionsFormSchema = (nbTemporaryLimits: number) => {
     return yup
         .object()
@@ -100,14 +86,18 @@ export const getLimitReductionsFormSchema = (nbTemporaryLimits: number) => {
                 yup.object().shape({
                     [VOLTAGE_LEVELS_FORM]: yup.string(),
                     [IST_FORM]: yup.number().min(0, 'RealPercentage').max(1, 'RealPercentage').nullable().required(),
-                    ...getLimitDurationsFormSchema(nbTemporaryLimits),
+                    [LIMIT_DURATION_FORM]: yup
+                        .array()
+                        .length(nbTemporaryLimits)
+                        .of(yup.number().min(0, 'RealPercentage').max(1, 'RealPercentage').nullable().required())
+                        .required(),
                 })
             ),
         })
         .required();
 };
 
-export const getSAParametersFromSchema = (limitReductions: ILimitReductionsByVoltageLevel[]) => {
+export const getSAParametersFromSchema = (limitReductions?: ILimitReductionsByVoltageLevel[]) => {
     const limitReductionsSchema = getLimitReductionsFormSchema(
         limitReductions ? limitReductions[0].temporaryLimitReductions.length : 0
     );

src/components/dialogs/parameters/dynamicsimulation/curve-parameters.jsx renamed to src/components/dialogs/parameters/dynamicsimulation/curve-parameters.tsx

@@ -14,6 +14,9 @@ import CurveSelectorDialog from './curve/dialog/curve-selector-dialog';
 import { GlobalFilter } from '../../../spreadsheet/global-filter';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { CustomAGGrid } from '@gridsuite/commons-ui';
+import { AgGridReact } from 'ag-grid-react';
+import { Curve } from './curve/dialog/curve-preview';
+import { ValueFormatterParams } from 'ag-grid-community';
 
 const styles = {
     grid: {
@@ -44,27 +47,25 @@ export const emptyFormData = {
     [CURVES]: [],
 };
 
-const CurveParameters = ({ path }) => {
+const CurveParameters = ({ path }: { path: string }) => {
     const intl = useIntl();
     const [selectedRowsLength, setSelectedRowsLength] = useState(0);
 
     const { control } = useFormContext();
-    const {
-        fields: rowData,
-        append,
-        remove,
-    } = useFieldArray({
+    const { fields, append, remove } = useFieldArray({
         control,
         name: `${path}.${CURVES}`,
     });
 
+    const rowData = fields as unknown as Curve[]; //TODO fix in a better way if possible
+
     // handle open/close/append curve selector dialog
     const [open, setOpen] = useState(false);
     const handleClose = useCallback(() => {
         setOpen((prevState) => !prevState);
     }, []);
     const handleAppend = useCallback(
-        (newCurves) => {
+        (newCurves: Curve[]) => {
             // do save here
             const notYetAddedCurves = newCurves.filter(
                 // use functional keys to lookup
@@ -87,9 +88,9 @@ const CurveParameters = ({ path }) => {
     }, []);
 
     const handleDelete = useCallback(() => {
-        const selectedRows = gridRef.current.api.getSelectedRows();
+        const selectedRows = gridRef.current?.api.getSelectedRows();
 
-        const indexesToRemove = selectedRows.map((elem) =>
+        const indexesToRemove = selectedRows?.map((elem) =>
             // use functional keys to lookup
             rowData.findIndex(
                 (row) => elem[EQUIPMENT_ID] === row[EQUIPMENT_ID] && elem[VARIABLE_ID] === row[VARIABLE_ID]
@@ -106,7 +107,7 @@ const CurveParameters = ({ path }) => {
 
     // curve grid configuration
     const theme = useTheme();
-    const gridRef = useRef();
+    const gridRef = useRef<AgGridReact>(null);
 
     const columnDefs = useMemo(() => {
         return [
@@ -126,7 +127,7 @@ const CurveParameters = ({ path }) => {
                 headerName: intl.formatMessage({
                     id: 'DynamicSimulationCurveVariableHeader',
                 }),
-                valueFormatter: (params) =>
+                valueFormatter: (params: ValueFormatterParams) =>
                     intl.formatMessage({
                         id: `variables.${params.value}`,
                     }),
@@ -147,8 +148,8 @@ const CurveParameters = ({ path }) => {
     }, []);
 
     const onSelectionChanged = useCallback(() => {
-        const selectedRows = gridRef.current.api.getSelectedRows();
-        setSelectedRowsLength(selectedRows.length);
+        const selectedRows = gridRef.current?.api.getSelectedRows();
+        setSelectedRowsLength(selectedRows?.length ?? 0);
     }, []);
 
     return (
@@ -181,7 +182,6 @@ const CurveParameters = ({ path }) => {
                 <Grid item xs>
                     <Box sx={styles.grid}>
                         <CustomAGGrid
-                            name={`${path}.${CURVES}`}
                             ref={gridRef}
                             rowData={rowData}
                             columnDefs={columnDefs}

src/components/dialogs/parameters/dynamicsimulation/curve/common/checkbox-select.jsx renamed to src/components/dialogs/parameters/dynamicsimulation/curve/common/checkbox-select.tsx

@@ -5,9 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Checkbox, MenuItem, Select } from '@mui/material';
+import { Checkbox, MenuItem, Select, SelectChangeEvent } from '@mui/material';
 import ListItemText from '@mui/material/ListItemText';
-import { useCallback, useState } from 'react';
+import { FunctionComponent, useCallback, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 const ITEM_HEIGHT = 48;
@@ -25,7 +25,15 @@ const MenuProps = {
 const CHECK_ALL = { label: 'SelectAll', value: 'check_all' };
 const UNCHECK_ALL = { label: 'UnselectAll', value: 'uncheck_all' };
 
-const CheckboxSelect = ({
+interface CheckBoxSelectProps {
+    options: string[];
+    getOptionLabel: (label: string) => string;
+    onChange: (newSelectedOption: string[]) => void;
+    value: string[];
+    disabled: boolean;
+}
+
+const CheckboxSelect: FunctionComponent<CheckBoxSelectProps> = ({
     options,
     getOptionLabel: defaultGetOptionLabel,
     onChange,
@@ -43,11 +51,13 @@ const CheckboxSelect = ({
     }
 
     const handleChange = useCallback(
-        (event) => {
+        (event: SelectChangeEvent<string[]>) => {
             const {
-                target: { value: values },
+                target: { value: eventValue },
             } = event;
-            let newSelectedOptions;
+            const values = Array.isArray(eventValue) ? eventValue : [eventValue];
+
+            let newSelectedOptions: string[];
             if (values.find((elem) => elem === CHECK_ALL.value)) {
                 // must check all items
                 newSelectedOptions = options;
@@ -67,7 +77,7 @@ const CheckboxSelect = ({
     );
 
     const getOptionLabel = useCallback(
-        (option) => {
+        (option: string) => {
             return defaultGetOptionLabel(option);
         },
         [defaultGetOptionLabel]
@@ -94,14 +104,14 @@ const CheckboxSelect = ({
             sx={{ width: '100%' }}
             disabled={disabled}
         >
-            <MenuItem size={'small'} key={CHECK_ALL.value} value={CHECK_ALL.value}>
+            <MenuItem key={CHECK_ALL.value} value={CHECK_ALL.value}>
                 <ListItemText primary={intl.formatMessage({ id: CHECK_ALL.label })} />
             </MenuItem>
-            <MenuItem size={'small'} key={UNCHECK_ALL.value} value={UNCHECK_ALL.value}>
+            <MenuItem key={UNCHECK_ALL.value} value={UNCHECK_ALL.value}>
                 <ListItemText primary={intl.formatMessage({ id: UNCHECK_ALL.label })} />
             </MenuItem>
             {options.map((option) => (
-                <MenuItem size={'small'} key={option} value={option}>
+                <MenuItem key={option} value={option}>
                     <Checkbox checked={selectedOptions.indexOf(option) > -1} />
                     <ListItemText>{getOptionLabel(option)}</ListItemText>
                 </MenuItem>