fix margin and refacto

Signed-off-by: David BRAQUART <[email protected]>

Author: dbraquart

src/pages/profiles/modification/profile-modification-form.tsx

@@ -7,7 +7,7 @@
 
 import { ElementType, IntegerInput, TextInput } from '@gridsuite/commons-ui';
 import Grid from '@mui/material/Grid';
-import ConfigurationSelection from './configuration-selection';
+import ConfigurationSelection, { ConfigSelectionProps } from './configuration-selection';
 import { FormattedMessage } from 'react-intl';
 import React, { FunctionComponent } from 'react';
 
@@ -23,6 +23,19 @@ export const NETWORK_VISUALIZATION_PARAMETERS_ID = 'networkVisualizationParamete
 export const USER_QUOTA_CASE_NB = 'userQuotaCaseNb';
 export const USER_QUOTA_BUILD_NB = 'userQuotaBuildNb';
 
+const configList: ConfigSelectionProps[] = [
+    { selectionFormId: LOADFLOW_PARAM_ID, elementType: ElementType.LOADFLOW_PARAMETERS },
+    { selectionFormId: SECURITY_ANALYSIS_PARAM_ID, elementType: ElementType.SECURITY_ANALYSIS_PARAMETERS },
+    { selectionFormId: SENSITIVITY_ANALYSIS_PARAM_ID, elementType: ElementType.SENSITIVITY_PARAMETERS },
+    { selectionFormId: SHORTCIRCUIT_PARAM_ID, elementType: ElementType.SHORT_CIRCUIT_PARAMETERS },
+    { selectionFormId: VOLTAGE_INIT_PARAM_ID, elementType: ElementType.VOLTAGE_INIT_PARAMETERS },
+    { selectionFormId: SPREADSHEET_CONFIG_COLLECTION_ID, elementType: ElementType.SPREADSHEET_CONFIG_COLLECTION },
+    {
+        selectionFormId: NETWORK_VISUALIZATION_PARAMETERS_ID,
+        elementType: ElementType.NETWORK_VISUALIZATIONS_PARAMETERS,
+    },
+];
+
 const ProfileModificationForm: FunctionComponent = () => {
     return (
         <Grid container spacing={2} marginTop={'auto'}>
@@ -34,54 +47,22 @@ const ProfileModificationForm: FunctionComponent = () => {
                     <FormattedMessage id={'profiles.form.modification.defaultConfigurations'} />
                 </h3>
             </Grid>
-            <Grid item xs={12}>
-                <ConfigurationSelection
-                    elementType={ElementType.LOADFLOW_PARAMETERS}
-                    selectionFormId={LOADFLOW_PARAM_ID}
-                />
-            </Grid>
-            <Grid item xs={12}>
-                <ConfigurationSelection
-                    elementType={ElementType.SECURITY_ANALYSIS_PARAMETERS}
-                    selectionFormId={SECURITY_ANALYSIS_PARAM_ID}
-                />
-            </Grid>
-            <Grid item xs={12}>
-                <ConfigurationSelection
-                    elementType={ElementType.SENSITIVITY_PARAMETERS}
-                    selectionFormId={SENSITIVITY_ANALYSIS_PARAM_ID}
-                />
-            </Grid>
-            <Grid item xs={12}>
-                <ConfigurationSelection
-                    elementType={ElementType.SHORT_CIRCUIT_PARAMETERS}
-                    selectionFormId={SHORTCIRCUIT_PARAM_ID}
-                />
-            </Grid>
-            <Grid item xs={12}>
-                <ConfigurationSelection
-                    elementType={ElementType.VOLTAGE_INIT_PARAMETERS}
-                    selectionFormId={VOLTAGE_INIT_PARAM_ID}
-                />
-            </Grid>
-            <Grid item xs={12}>
-                <ConfigurationSelection
-                    elementType={ElementType.SPREADSHEET_CONFIG_COLLECTION}
-                    selectionFormId={SPREADSHEET_CONFIG_COLLECTION_ID}
-                />
-            </Grid>
-            <Grid item xs={12}>
-                <ConfigurationSelection
-                    elementType={ElementType.NETWORK_VISUALIZATIONS_PARAMETERS}
-                    selectionFormId={NETWORK_VISUALIZATION_PARAMETERS_ID}
-                />
-            </Grid>
+            {configList.map((config) => {
+                return (
+                    <Grid item xs={12} key={config.selectionFormId}>
+                        <ConfigurationSelection
+                            elementType={config.elementType}
+                            selectionFormId={config.selectionFormId}
+                        />
+                    </Grid>
+                );
+            })}
             <Grid item xs={12}>
                 <h3>
                     <FormattedMessage id={'profiles.form.modification.userQuotas'} />
                 </h3>
             </Grid>
-            <Grid container spacing={2}>
+            <Grid container spacing={2} direction="row" marginLeft={'auto'}>
                 <Grid item xs={4}>
                     <IntegerInput
                         name={USER_QUOTA_CASE_NB}