update document title and change filename of downloaded data

src/components/Orchestrator/CustomPages/EndPage.tsx

@@ -1,5 +1,5 @@
-export function EndPage(props: { date: number }) {
-  const { date } = props
+export function EndPage(props: { date: number | undefined }) {
+  const { date = Date.now() } = props
   const formatedData = new Date(date).toLocaleString()
   return (
     <>

src/components/Orchestrator/Orchestrator.tsx

@@ -4,7 +4,6 @@ import {
   type LunaticSource,
   type LunaticError,
 } from '@inseefr/lunatic'
-import { slotComponents } from '@inseefr/lunatic-dsfr'
 import { fr } from '@codegouvfr/react-dsfr'
 import { downloadAsJson } from 'utils/downloadAsJson'
 import { useNavigate } from '@tanstack/react-router'
@@ -19,6 +18,7 @@ import { assert } from 'tsafe/assert'
 import type { SurveyUnitData } from 'model/SurveyUnitData'
 import type { StateData } from 'model/StateData'
 import { isBlockingError, isSameErrors } from './utils/controls'
+import { slotComponents } from './slotComponents'
 
 export function Orchestrator(props: {
   source: LunaticSource
@@ -95,7 +95,7 @@ export function Orchestrator(props: {
     },
   })
 
-  const getStateData = (): StateData => {
+  const getCurrentStateData = (): StateData => {
     switch (currentPage) {
       case 'endPage':
         return { date: Date.now(), currentPage, state: 'VALIDATED' }
@@ -115,9 +115,11 @@ export function Orchestrator(props: {
     downloadAsJson<SurveyUnitData>({
       dataToDownload: {
         data: getData(false),
-        stateData: getStateData(),
+        stateData: getCurrentStateData(),
         personalization: surveyUnitData?.personalization,
       },
+      //The label of source is not dynamic 
+      filename: `${source.label.value}-${new Date().toLocaleDateString()}`,
     })
   }
 
@@ -158,7 +160,9 @@ export function Orchestrator(props: {
                 />
               )}
               {currentPage === 'validationPage' && <Validation />}
-              {currentPage === 'endPage' && <EndPage date={Date.now()} />}
+              {currentPage === 'endPage' && (
+                <EndPage date={surveyUnitData?.stateData?.date} />
+              )}
               <ValidationModal actions={validationModalActions} />
             </div>
           </Navigation>

src/components/Orchestrator/slotComponents.tsx

@@ -0,0 +1,16 @@
+import type { LunaticSlotComponents } from '@inseefr/lunatic'
+import { slotComponents as dsfrSlotsComponents } from '@inseefr/lunatic-dsfr'
+import { useSequenceTitle } from 'hooks/useDocumentTitle'
+import { assert } from 'tsafe/assert'
+
+const Sequence: LunaticSlotComponents['Sequence'] = (props) => {
+  const DsfrSequence = dsfrSlotsComponents['Sequence']
+
+  assert(DsfrSequence !== undefined)
+
+  useSequenceTitle(props.label)
+
+  return <DsfrSequence {...props} />
+}
+
+export const slotComponents = { ...dsfrSlotsComponents, Sequence }

src/hooks/useDocumentTitle.ts

@@ -1,11 +1,26 @@
-import { useEffect } from 'react'
+import { useEffect, type ReactNode } from 'react'
+import { renderToString } from 'react-dom/server'
 
 export function useDocumentTitle(title: string) {
   useEffect(() => {
+
     const prevTitle = document.title
+
     document.title = title
+
     return () => {
       document.title = prevTitle
     }
   })
 }
+
+export function useSequenceTitle(sequenceLabel: ReactNode) {
+  //TODO get the name of the site (in metadata.json I hope)
+  /**
+   * This is a dirty, sequenceLabel is today a LabelType VTL|MD,
+   * it will be replaced by VTL only so we will be able to just sequenceLabel.toString()
+   */
+  return useDocumentTitle(
+    `${renderToString(sequenceLabel)} | Filière d'Enquête`
+  )
+}

src/pages/Accessibility/route.ts

@@ -7,6 +7,7 @@ export const accessibilityRoute = createRoute({
   path: 'accessibilite',
   component: AccessibilityPage,
   loader: () => {
-    document.title = 'Accessibilité'
+    //TODO get name (Filière d'Enquête) in metadata
+    document.title = "Accessibilité | Filière d'Enquête"
   },
 })

src/pages/Legals/route.ts

@@ -7,6 +7,7 @@ export const legalsRoute = createRoute({
   path: 'mentions-legales',
   component: LegalPage,
   loader: () => {
-    document.title = 'Mentions Légales'
+    //TODO get name (Filière d'Enquête) in metadata
+    document.title = "Mentions Légales | Filière d'Enquête"
   },
 })

src/pages/NavigationAssistance/route.ts

@@ -7,6 +7,7 @@ export const navigationAssistanceRoute = createRoute({
   path: 'aide-a-la-navigation',
   component: NavigationAssistancePage,
   loader: () => {
-    document.title = 'Aide à la navigation'
+    //TODO get name (Filière d'Enquête) in metadata
+    document.title = "Aide à la navigation | Filière d'Enquête"
   },
 })

src/pages/Security/route.ts

@@ -7,6 +7,7 @@ export const securityRoute = createRoute({
   path: 'securite',
   component: SecurityPage,
   loader: () => {
-    document.title = 'Sécurité'
+    //TODO get name (Filière d'Enquête) in metadata
+    document.title = "Sécurité | Filière d'Enquête"
   },
 })

src/pages/SiteMap/route.ts

@@ -7,6 +7,7 @@ export const siteMapRoute = createRoute({
   path: 'plan-du-site',
   component: SiteMapPage,
   loader: () => {
-    document.title = 'Plan du site'
+    //TODO get name (Filière d'Enquête) in metadata
+    document.title = "Plan du site | Filière d'Enquête"
   },
 })

src/pages/Visualize/route.ts

@@ -29,7 +29,8 @@ export const visualizeRoute = createRoute({
     context: { queryClient },
     deps: { sourceUrl, surveyUnitDataUrl, metadataUrl, nomenclature },
   }) => {
-    document.title = 'Visualisation'
+    //TODO get name (Filière d'Enquête) in metadata
+    document.title = "Visualisation | Filière d'Enquête"
 
     if (!sourceUrl) {
       return