Move substation creation form to commons-ui

src/components/index.ts

@@ -29,3 +29,4 @@ export * from './parameters';
 export * from './menus';
 export * from './muiTable';
 export * from './resizablePanels';
+export * from './network-modifications';

src/components/inputs/reactHookForm/CountrySelectionInput.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { useIntl } from 'react-intl';
+import { AutocompleteInput, AutocompleteInputProps } from './autocompleteInputs';
+import { useLocalizedCountries } from '../../../hooks';
+import { GsLang } from '../../../utils';
+
+interface CountrySelectionInputProps extends Omit<AutocompleteInputProps, 'options' | 'getOptionLabel'> {}
+
+export function CountrySelectionInput(props: Readonly<CountrySelectionInputProps>) {
+    const { locale } = useIntl();
+    const { translate, countryCodes } = useLocalizedCountries(locale as GsLang);
+
+    return (
+        <AutocompleteInput
+            options={countryCodes}
+            // TODO: the way Option is managed in AutocompleteInput is confusing, maybe make AutocompleteInput more generic in the future
+            getOptionLabel={(countryCode) => translate(countryCode as string)}
+            {...props}
+        />
+    );
+}

src/components/inputs/reactHookForm/autocompleteInputs/AutocompleteInput.tsx

@@ -85,7 +85,7 @@ export function AutocompleteInput({
 
     return (
         <Autocomplete
-            value={selectedValues}
+            value={selectedValues ?? null} // Ensure null instead of undefined otherwise it switches to uncontrolled mode
             onChange={(_, data) => handleChange(data as Option)}
             {...(allowNewValue && {
                 freeSolo: true,

src/components/inputs/reactHookForm/expandableInput/DeletableRow.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { PropsWithChildren, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Grid, IconButton, Tooltip } from '@mui/material';
+import { Delete as DeleteIcon, RestoreFromTrash as RestoreFromTrashIcon } from '@mui/icons-material';
+
+export interface DeletableRowProps extends PropsWithChildren {
+    alignItems: string;
+    onClick: () => void;
+    deletionMark?: boolean | null;
+    disabledDeletion?: boolean | null;
+}
+
+export function DeletableRow({
+    alignItems,
+    onClick,
+    deletionMark,
+    disabledDeletion,
+    children,
+}: Readonly<DeletableRowProps>) {
+    const intl = useIntl();
+    const [isMouseHover, setIsMouseHover] = useState(false);
+
+    return (
+        <Grid
+            container
+            spacing={2}
+            item
+            alignItems={alignItems}
+            onMouseEnter={() => setIsMouseHover(true)}
+            onMouseLeave={() => setIsMouseHover(false)}
+        >
+            {children}
+            <Grid item xs={1}>
+                {isMouseHover && !disabledDeletion && (
+                    <Tooltip
+                        title={intl.formatMessage({
+                            id: deletionMark ? 'button.restore' : 'DeleteRows',
+                        })}
+                    >
+                        <IconButton onClick={onClick}>
+                            {deletionMark ? <RestoreFromTrashIcon /> : <DeleteIcon />}
+                        </IconButton>
+                    </Tooltip>
+                )}
+            </Grid>
+        </Grid>
+    );
+}

src/components/inputs/reactHookForm/expandableInput/ExpandableInput.tsx

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2023, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { useFieldArray } from 'react-hook-form';
+import { Button, Grid } from '@mui/material';
+import { ControlPoint as AddIcon } from '@mui/icons-material';
+import { FormattedMessage } from 'react-intl';
+import { DeletableRow } from './DeletableRow';
+import { ErrorInput, MidFormError } from '../errorManagement';
+import { mergeSx, type MuiStyles } from '../../../../utils';
+
+const styles = {
+    button: (theme) => ({
+        justifyContent: 'flex-start',
+        fontSize: 'small',
+        marginTop: theme.spacing(1),
+    }),
+    paddingButton: (theme) => ({
+        paddingLeft: theme.spacing(2),
+    }),
+} as const satisfies MuiStyles;
+
+export interface ExpandableInputProps {
+    name: string;
+    Field: React.ComponentType<any>;
+    fieldProps?: any;
+    addButtonLabel?: string;
+    initialValue?: any;
+    getDeletionMark?: (idx: number) => boolean;
+    deleteCallback?: (idx: number) => boolean;
+    alignItems?: string;
+    watchProps?: boolean;
+    disabled?: boolean;
+    disabledDeletion?: (idx: number) => boolean;
+}
+
+// This component is used to display Array of objects.
+// We can manage 2 states for deletion:
+// - only 1 state and 1 delete icon that removes the current line
+// - a second state "mark for deletion" with a second icon: the line is not removed
+// and we can cancel this mark to go back to normal state.
+export function ExpandableInput({
+    name,
+    Field, // Used to display each object of an array
+    fieldProps, // Props to pass to Field
+    addButtonLabel,
+    initialValue, // Initial value to display when we add a new entry to array
+    getDeletionMark,
+    deleteCallback,
+    alignItems = 'stretch', // default value for a flex container
+    watchProps = true,
+    disabled = false,
+    disabledDeletion,
+}: Readonly<ExpandableInputProps>) {
+    const {
+        fields: values,
+        append,
+        remove,
+    } = useFieldArray({
+        name,
+    });
+
+    return (
+        <Grid item container spacing={2}>
+            <Grid item xs={12}>
+                <ErrorInput name={name} InputField={MidFormError} />
+            </Grid>
+            {watchProps &&
+                values.map((value, idx) => (
+                    <DeletableRow
+                        key={value.id}
+                        alignItems={alignItems}
+                        onClick={() => {
+                            const shouldRemove = deleteCallback ? deleteCallback(idx) : true;
+                            if (shouldRemove) {
+                                remove(idx);
+                            }
+                        }}
+                        deletionMark={getDeletionMark?.(idx)}
+                        disabledDeletion={disabledDeletion?.(idx)}
+                    >
+                        <Field name={name} index={idx} {...fieldProps} />
+                    </DeletableRow>
+                ))}
+            <span>
+                <Button
+                    disabled={disabled}
+                    fullWidth
+                    sx={mergeSx(styles.button, styles.paddingButton)}
+                    startIcon={<AddIcon />}
+                    onClick={() => append(initialValue)}
+                >
+                    {addButtonLabel && <FormattedMessage id={addButtonLabel} />}
+                </Button>
+            </span>
+        </Grid>
+    );
+}

src/components/inputs/reactHookForm/expandableInput/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+export * from './ExpandableInput';

src/components/inputs/reactHookForm/index.ts

@@ -21,3 +21,5 @@ export * from './tableInputs';
 export * from './text';
 export * from './utils';
 export * from './constants';
+export * from './expandableInput';
+export * from './CountrySelectionInput';

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

@@ -102,7 +102,7 @@ export function TextInput({
             fullWidth
             id={id ?? label}
             label={fieldLabel}
-            value={transformedValue}
+            value={transformedValue ?? ''}
             onChange={handleValueChanged}
             disabled={disabled}
             InputProps={{

src/components/network-modifications/common/form.utils.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2022, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { FilledTextFieldProps, StandardTextFieldProps } from '@mui/material';
+
+export const filledTextField: FilledTextFieldProps = {
+    variant: 'filled',
+};
+
+export const standardTextField: StandardTextFieldProps = {
+    variant: 'standard',
+};
+
+export const italicFontTextField = {
+    style: { fontStyle: 'italic' },
+};

src/components/network-modifications/common/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2026, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+export * from './properties';
+export * from './form.utils';

src/components/network-modifications/common/properties/PropertiesForm.tsx

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { Grid } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { fetchPredefinedProperties, initializedProperty } from './propertyUtils';
+import { PropertyForm } from './PropertyForm';
+import GridSection from '../../../grid/grid-section';
+import { FieldConstants, PredefinedProperties } from '../../../../utils';
+import { ExpandableInput } from '../../../inputs';
+
+type PropertiesFormProps = {
+    id?: string;
+    networkElementType?: string;
+    isModification?: boolean;
+};
+
+export function PropertiesForm({ id, networkElementType, isModification = false }: Readonly<PropertiesFormProps>) {
+    const additionalProperties = id
+        ? `${id}.${FieldConstants.ADDITIONAL_PROPERTIES}`
+        : FieldConstants.ADDITIONAL_PROPERTIES;
+    const watchProps = useWatch({
+        name: additionalProperties,
+    });
+    const { getValues, setValue } = useFormContext();
+    const [predefinedProperties, setPredefinedProperties] = useState<PredefinedProperties>({});
+
+    useEffect(() => {
+        if (networkElementType) {
+            fetchPredefinedProperties(networkElementType).then((res) => {
+                if (res) {
+                    setPredefinedProperties(res);
+                }
+            });
+        }
+    }, [networkElementType]);
+
+    const getDeletionMark = useCallback(
+        (idx: number) => {
+            const properties = getValues(`${additionalProperties}`);
+            if (properties && typeof properties[idx] !== 'undefined') {
+                return watchProps && properties[idx][FieldConstants.DELETION_MARK];
+            }
+            return false;
+        },
+        [getValues, watchProps, additionalProperties]
+    );
+
+    const deleteCallback = useCallback(
+        (idx: number) => {
+            let markedForDeletion = false;
+            const properties = getValues(`${additionalProperties}`);
+            if (properties && typeof properties[idx] !== 'undefined') {
+                markedForDeletion = properties[idx][FieldConstants.DELETION_MARK];
+            } else {
+                return false;
+            }
+
+            let canRemoveLine = true;
+            if (markedForDeletion) {
+                // just unmark
+                setValue(`${additionalProperties}.${idx}.${FieldConstants.DELETION_MARK}`, false, {
+                    shouldDirty: true,
+                });
+                canRemoveLine = false;
+            } else if (
+                properties[idx][FieldConstants.PREVIOUS_VALUE] &&
+                properties[idx][FieldConstants.ADDED] === false
+            ) {
+                // we should mark for deletion a property that actually exists in the network and not delete the property line straight away
+                setValue(`${additionalProperties}.${idx}.${FieldConstants.DELETION_MARK}`, true, {
+                    shouldDirty: true,
+                });
+                canRemoveLine = false;
+            }
+            // otherwise just delete the line
+            return canRemoveLine;
+        },
+        [getValues, setValue, additionalProperties]
+    );
+
+    const modificationProperties = isModification
+        ? {
+              getDeletionMark,
+              deleteCallback,
+              watchProps,
+          }
+        : {};
+
+    const additionalProps = (
+        <ExpandableInput
+            name={additionalProperties}
+            Field={PropertyForm}
+            fieldProps={{ predefinedProperties }}
+            addButtonLabel="AddProperty"
+            initialValue={initializedProperty()}
+            {...modificationProperties}
+        />
+    );
+
+    return (
+        <Grid container>
+            <GridSection title="AdditionalInformation" />
+            {additionalProps}
+        </Grid>
+    );
+}