From 6e20d1130c4c849630759d268034a87238aafcf2 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Tue, 15 Oct 2024 10:21:52 +0200
Subject: [PATCH] review: verifying if dashboard has default name

---
 .../components/DashboardForm/Footer/index.tsx | 25 +++++++++++--------
 frontend/src/features/Dashboard/slice.ts      |  9 ++++++-
 .../Dashboard/useCases/createDashboard.ts     |  7 +++---
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Footer/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Footer/index.tsx
index 29facc237..beb9600e6 100644
--- a/frontend/src/features/Dashboard/components/DashboardForm/Footer/index.tsx
+++ b/frontend/src/features/Dashboard/components/DashboardForm/Footer/index.tsx
@@ -12,7 +12,7 @@ export function Footer() {
   const dashboardForm = useAppSelector(state =>
     activeDashboardId ? state.dashboard.dashboards[activeDashboardId] : undefined
   )
-  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [updatedName, setUpdatedName] = useState<string | undefined>(dashboardForm?.dashboard.name)
   if (!dashboardForm) {
     return null
@@ -20,12 +20,22 @@ export function Footer() {
 
   const save = () => {
     dispatch(saveDashboard({ ...dashboardForm.dashboard, name: updatedName ?? dashboardForm.dashboard.name }))
-    setIsModalOpen(false)
+    setIsDialogOpen(false)
+  }
+
+  const handleSave = () => {
+    const hasDefaultName =
+      dashboardForm.defaultName === dashboardForm.dashboard.name && !dashboardForm.dashboard.createdAt
+    if (hasDefaultName) {
+      setIsDialogOpen(true)
+    } else {
+      dispatch(saveDashboard({ ...dashboardForm.dashboard }))
+    }
   }
 
   return (
     <>
-      {isModalOpen && (
+      {isDialogOpen && (
         <Dialog isAbsolute>
           <Dialog.Title as="h2">Enregistrer le tableau de bord</Dialog.Title>
           <Dialog.Body $color={THEME.color.gunMetal}>
@@ -41,7 +51,7 @@ export function Footer() {
             />
           </Dialog.Body>
           <StyledDialogActions>
-            <Button accent={Accent.SECONDARY} onClick={() => setIsModalOpen(false)}>
+            <Button accent={Accent.SECONDARY} onClick={() => setIsDialogOpen(false)}>
               Annuler
             </Button>
             <Button Icon={Icon.Save} onClick={save}>
@@ -51,12 +61,7 @@ export function Footer() {
         </Dialog>
       )}
       <Wrapper>
-        <SaveButton
-          accent={Accent.SECONDARY}
-          disabled={!activeDashboardId}
-          Icon={Icon.Save}
-          onClick={() => setIsModalOpen(true)}
-        >
+        <SaveButton accent={Accent.SECONDARY} disabled={!activeDashboardId} Icon={Icon.Save} onClick={handleSave}>
           Enregistrer le tableau
         </SaveButton>
       </Wrapper>
diff --git a/frontend/src/features/Dashboard/slice.ts b/frontend/src/features/Dashboard/slice.ts
index b7e326948..ad2b82e22 100644
--- a/frontend/src/features/Dashboard/slice.ts
+++ b/frontend/src/features/Dashboard/slice.ts
@@ -26,6 +26,7 @@ const initialDashboard: DashboardType = {
     reportings: [],
     vigilanceAreas: []
   },
+  defaultName: '',
   extractedArea: undefined,
   filters: {},
   isBannerDisplayed: false,
@@ -66,6 +67,7 @@ export type DashboardType = {
   ampIdsToDisplay: number[]
   controlUnitFilters: ControlUnitFilters
   dashboard: Dashboard.Dashboard
+  defaultName: string | undefined
   extractedArea?: Dashboard.ExtractedArea
   filters: DashboardFilters
   isBannerDisplayed: boolean
@@ -177,13 +179,18 @@ export const dashboardSlice = createSlice({
 
     createDashboard(
       state,
-      action: PayloadAction<{ dashboard: Dashboard.Dashboard; extractedArea: Dashboard.ExtractedArea }>
+      action: PayloadAction<{
+        dashboard: Dashboard.Dashboard
+        defaultName: string
+        extractedArea: Dashboard.ExtractedArea
+      }>
     ) {
       state.activeDashboardId = action.payload.dashboard.id
 
       state.dashboards[action.payload.dashboard.id] = {
         ...initialDashboard,
         dashboard: action.payload.dashboard,
+        defaultName: action.payload.defaultName,
         extractedArea: action.payload.extractedArea
       }
     },
diff --git a/frontend/src/features/Dashboard/useCases/createDashboard.ts b/frontend/src/features/Dashboard/useCases/createDashboard.ts
index 2f8b4fc72..55977039e 100644
--- a/frontend/src/features/Dashboard/useCases/createDashboard.ts
+++ b/frontend/src/features/Dashboard/useCases/createDashboard.ts
@@ -5,8 +5,8 @@ import { customDayjs, Level } from '@mtes-mct/monitor-ui'
 import { sideWindowPaths } from 'domain/entities/sideWindow'
 import { generatePath } from 'react-router'
 
-import { dashboardActions } from '../slice'
 import { closeDrawDashboard } from './closeDrawDashboard'
+import { dashboardActions } from '../slice'
 
 import type { HomeAppThunk } from '@store/index'
 import type { GeoJSON } from 'domain/types/GeoJSON'
@@ -20,8 +20,7 @@ export const createDashboard =
     if (data) {
       dispatch(closeDrawDashboard())
       const newId = `new-${Object.keys(getState().dashboard.dashboards).length}`
-      const date = customDayjs().format('DD/MM/YYYY')
-      const newDashboardName = `Tab ${date}`
+      const newDashboardName = `Tab ${customDayjs().format('DD/MM/YYYY')}`
       const dashboard = {
         amps: [],
         controlUnits: [],
@@ -33,7 +32,7 @@ export const createDashboard =
         reportings: [],
         vigilanceAreas: []
       }
-      dispatch(dashboardActions.createDashboard({ dashboard, extractedArea: data }))
+      dispatch(dashboardActions.createDashboard({ dashboard, defaultName: newDashboardName, extractedArea: data }))
       dispatch(sideWindowActions.focusAndGoTo(generatePath(sideWindowPaths.DASHBOARD, { id: newId })))
     }
     if (error) {