From 28ec7a9b755d2182a0a1b8656cafe6b553742493 Mon Sep 17 00:00:00 2001
From: Florent MILLOT <florent.millot_externe@rte-france.com>
Date: Tue, 30 Jun 2026 16:35:54 +0200
Subject: [PATCH] feat(csv): move the generate-template button above the
 tabular table

Use the new CsvDownloadButton from commons-ui to render a contained
"Generate template" button above the table, next to "Define properties"
(tabular) / the temporary-limits count (limit sets), and group it with the
optional prefilled-model button. The imported file name now truncates
instead of pushing the import row.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: Florent MILLOT <florent.millot_externe@rte-france.com>
---
 .../limit-sets-tabular-modification-form.tsx  | 22 +++++--
 .../tabular/tabular-form.tsx                  | 59 +++++++++++--------
 2 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/src/components/dialogs/network-modifications/limit-sets/limit-sets-tabular-modification-form.tsx b/src/components/dialogs/network-modifications/limit-sets/limit-sets-tabular-modification-form.tsx
index a5ff0c581e..045a49b36d 100644
--- a/src/components/dialogs/network-modifications/limit-sets/limit-sets-tabular-modification-form.tsx
+++ b/src/components/dialogs/network-modifications/limit-sets/limit-sets-tabular-modification-form.tsx
@@ -11,6 +11,7 @@ import { type FieldValues, useFormContext, type UseFieldArrayReturn, useWatch }
 import {
     AutocompleteInput,
     BooleanNullableCellRenderer,
+    CsvDownloadButton,
     type CsvProps,
     CsvPicker,
     CustomAgGridTable,
@@ -277,20 +278,31 @@ export function LimitSetsTabularModificationForm({ dataFetching }: Readonly<Tabu
         () => ({
             fileName: 'limitset_modification_template',
             language,
-            getTemplateData,
             getTableData,
         }),
-        [language, getTemplateData, getTableData]
+        [language, getTableData]
     );
 
     return (
         <Grid container spacing={2} paddingTop={1} direction="column" wrap="nowrap" sx={[{ height: '100%' }]}>
             <Grid sx={{ width: 400, maxWidth: '100%' }}>{equipmentTypeField}</Grid>
             <Grid container justifyContent="space-between" alignItems="center">
-                <Grid>
-                    <IntegerInput name={AMOUNT_TEMPORARY_LIMITS} label={'amountTemporaryLimits'} />
+                <Grid container alignItems="center">
+                    <Grid>
+                        <IntegerInput name={AMOUNT_TEMPORARY_LIMITS} label={'amountTemporaryLimits'} />
+                    </Grid>
+                    <Grid>
+                        <CsvDownloadButton
+                            data={getTemplateData}
+                            fileName={csvProps.fileName}
+                            language={language}
+                            labelId="GenerateCSV"
+                            variant="contained"
+                            disabled={!equipmentType}
+                        />
+                    </Grid>
                 </Grid>
-                <Grid>
+                <Grid sx={{ flex: 1, minWidth: 0 }}>
                     <CsvPicker<Record<string, unknown>>
                         label="UploadCSV"
                         header={csvColumns.map((column) => column.id)}
diff --git a/src/components/dialogs/network-modifications/tabular/tabular-form.tsx b/src/components/dialogs/network-modifications/tabular/tabular-form.tsx
index 276952d74b..2d5d3276f5 100644
--- a/src/components/dialogs/network-modifications/tabular/tabular-form.tsx
+++ b/src/components/dialogs/network-modifications/tabular/tabular-form.tsx
@@ -10,6 +10,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { type FieldValues, type UseFieldArrayReturn, useFormContext, useWatch } from 'react-hook-form';
 import {
     AutocompleteInput,
+    CsvDownloadButton,
     type CsvProps,
     CsvPicker,
     CustomAgGridTable,
@@ -328,20 +329,9 @@ export function TabularForm({ dataFetching, dialogMode }: Readonly<TabularFormPr
                 (dialogMode === TabularModificationType.CREATION ? '_creation' : '_modification') +
                 '_template',
             language,
-            getTemplateData,
             getTableData,
-            extraButtons:
-                dialogMode === TabularModificationType.MODIFICATION ? (
-                    <Button
-                        variant="outlined"
-                        onClick={() => prefilledModelDialogOpen.setTrue()}
-                        disabled={!equipmentType}
-                    >
-                        <FormattedMessage id="GeneratePrefilledModel" />
-                    </Button>
-                ) : undefined,
         }),
-        [equipmentType, dialogMode, language, getTemplateData, getTableData, prefilledModelDialogOpen]
+        [equipmentType, dialogMode, language, getTableData]
     );
 
     const { handleGeneratePrefilledModel } = usePrefilledModelGenerator({
@@ -544,18 +534,41 @@ export function TabularForm({ dataFetching, dialogMode }: Readonly<TabularFormPr
         <Grid container spacing={2} paddingTop={1} direction="column" wrap="nowrap" sx={{ height: '100%' }}>
             <Grid sx={{ width: 400, maxWidth: '100%' }}>{equipmentTypeField}</Grid>
             <Grid container justifyContent="space-between" alignItems="center">
-                <Grid>
-                    <Button
-                        variant="contained"
-                        disabled={!equipmentType}
-                        onClick={() => {
-                            propertiesDialogOpen.setTrue();
-                        }}
-                    >
-                        <FormattedMessage id="DefinePropertiesButton" />
-                    </Button>
+                <Grid container alignItems="center">
+                    <Grid>
+                        <Button
+                            variant="contained"
+                            disabled={!equipmentType}
+                            onClick={() => {
+                                propertiesDialogOpen.setTrue();
+                            }}
+                        >
+                            <FormattedMessage id="DefinePropertiesButton" />
+                        </Button>
+                    </Grid>
+                    <Grid>
+                        <CsvDownloadButton
+                            data={getTemplateData}
+                            fileName={csvProps.fileName}
+                            language={language}
+                            labelId="GenerateCSV"
+                            variant="contained"
+                            disabled={!equipmentType}
+                        />
+                    </Grid>
+                    {dialogMode === TabularModificationType.MODIFICATION && (
+                        <Grid>
+                            <Button
+                                variant="contained"
+                                onClick={() => prefilledModelDialogOpen.setTrue()}
+                                disabled={!equipmentType}
+                            >
+                                <FormattedMessage id="GeneratePrefilledModel" />
+                            </Button>
+                        </Grid>
+                    )}
                 </Grid>
-                <Grid>
+                <Grid sx={{ flex: 1, minWidth: 0 }}>
                     <CsvPicker<Record<string, unknown>>
                         label="UploadCSV"
                         header={csvColumns}