WIP : front: add id support on EEX routes, need to replace modal cont…

…ext by react createPortal hook
OpenRailAssociation · Nov 6, 2023 · 4bfb614 · 4bfb614
1 parent e08d0e1
commit 4bfb614
Show file tree

Hide file tree

Showing 21 changed files with 223 additions and 161 deletions.
diff --git a/front/package.json b/front/package.json
@@ -71,8 +71,10 @@
     "jwt-decode": "^3.1.2",
     "keycloak-js": "^20.0.3",
     "license-checker-rseidelsohn": "~3.3.0",
+    "localforage": "^1.10.0",
     "lodash": "^4.17.15",
     "maplibre-gl": "^3.3.0",
+    "match-sorter": "^6.3.1",
     "openapi-typescript-codegen": "^0.24.0",
     "party-js": "^2.2.0",
     "prop-types": "^15.8.1",
@@ -93,7 +95,7 @@
     "react-modal": "^3.15.1",
     "react-redux": "^8.0.4",
     "react-rnd": "^10.3.7",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^6.17.0",
     "react-select": "^5.7.2",
     "react-spreadsheet": "^0.8.3",
     "react-tether": "^2.0.8",
@@ -108,6 +110,7 @@
     "sass": "^1.60.0",
     "sass-loader": "^13.2.2",
     "scheduler": "^0.23.0",
+    "sort-by": "^1.2.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.4.1",
     "uuid": "^8.3.2",

diff --git a/front/src/applications/editor/Home.tsx b/front/src/applications/editor/Home.tsx
@@ -8,6 +8,7 @@ import logo from 'assets/pictures/home/editor.svg';
 import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
 import { getInfraID } from 'reducers/osrdconf/selectors';
+import { ModalProvider } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
 import Editor from './Editor';
 
 export default function HomeEditorUnplugged() {
@@ -26,7 +27,7 @@ export default function HomeEditorUnplugged() {
   }, [infraID, getInfraById]);
 
   return (
-    <>
+    <ModalProvider>
       <NavBarSNCF
         appName={
           <>
@@ -53,6 +54,6 @@ export default function HomeEditorUnplugged() {
           <Route path="/:urlInfra" element={<Editor />} />
         </Routes>
       </div>
-    </>
+    </ModalProvider>
   );
 }
diff --git a/front/src/applications/operationalStudies/Home.tsx b/front/src/applications/operationalStudies/Home.tsx
@@ -26,7 +26,7 @@ type SortOptions =
   | 'LastModifiedAsc'
   | 'LastModifiedDesc';
 
-export default function Home() {
+export default function HomeOperationalStudies() {
   const { t } = useTranslation('operationalStudies/home');
   const safeWord = useSelector(getUserSafeWord);
   const [sortOption, setSortOption] = useState<SortOptions>('LastModifiedDesc');

diff --git a/front/src/applications/operationalStudies/components/BreadCrumbs.tsx b/front/src/applications/operationalStudies/components/BreadCrumbs.tsx
@@ -1,41 +1,44 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { Project, StudyResult, ScenarioResult } from 'common/api/osrdEditoastApi';
 
 type Props = {
-  projectName?: string;
-  studyName?: string;
-  scenarioName?: string;
+  project?: Project;
+  study?: StudyResult;
+  scenario?: ScenarioResult;
 };
 
-export default function BreadCrumbs({ projectName, studyName, scenarioName }: Props) {
+export default function BreadCrumbs({ project, study, scenario }: Props) {
   const { t } = useTranslation('operationalStudies/project');
   return (
     <div className="navbar-breadcrumbs">
-      {!projectName && !studyName && !scenarioName ? (
+      {!project && !study && !scenario ? (
         t('projectsList')
       ) : (
         <>
-          <Link to="/operational-studies">{t('projectsList')}</Link>
+          <Link to="/operational-studies/projects">{t('projectsList')}</Link>
           <i className="icons-arrow-next icons-size-x75 text-muted" />
         </>
       )}
 
-      {projectName && !studyName && !scenarioName && projectName}
+      {project && !study && !scenario && project.name}
 
-      {projectName && studyName && (
+      {project && study && (
         <>
-          <Link to="/operational-studies/project">{projectName}</Link>
+          <Link to={`/operational-studies/projects/${project.id}`}>{project.name}</Link>
           <i className="icons-arrow-next icons-size-x75 text-muted" />
         </>
       )}
-      {projectName && studyName && !scenarioName && studyName}
+      {project && study && !scenario && study.name}
 
-      {projectName && studyName && scenarioName && (
+      {project && study && scenario && (
         <>
-          <Link to="/operational-studies/study">{studyName}</Link>
+          <Link to={`/operational-studies/projects/${project.id}/studies/${study.id}`}>
+            {study.name}
+          </Link>
           <i className="icons-arrow-next icons-size-x75 text-muted" />
-          {scenarioName}
+          {scenario.name}
         </>
       )}
     </div>

diff --git a/front/src/applications/operationalStudies/views/Project.tsx b/front/src/applications/operationalStudies/views/Project.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
 import logo from 'assets/pictures/views/studies.svg';
 import { useTranslation } from 'react-i18next';
@@ -14,8 +14,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { budgetFormat } from 'utils/numbers';
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
-import { getProjectID } from 'reducers/osrdconf/selectors';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import FilterTextField from 'applications/operationalStudies/components/FilterTextField';
 import {
   PostSearchApiArg,
@@ -68,7 +67,7 @@ export default function Project() {
   const [imageUrl, setImageUrl] = useState('');
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const projectId = useSelector(getProjectID);
+  const { projectId } = useParams();
   const [postSearch] = osrdEditoastApi.usePostSearchMutation();
   const [getStudies] = osrdEditoastApi.useLazyGetProjectsByProjectIdStudiesQuery();
 
@@ -84,7 +83,7 @@ export default function Project() {
   ];
 
   const { data: project, isError: isProjectError } = osrdEditoastApi.useGetProjectsByProjectIdQuery(
-    { projectId: projectId as number },
+    { projectId: Number(projectId) },
     {
       skip: !projectId,
     }
@@ -139,7 +138,11 @@ export default function Project() {
         }
       } else {
         try {
-          const { data } = await getStudies({ projectId, ordering: sortOption, pageSize: 1000 });
+          const { data } = await getStudies({
+            projectId: Number(projectId),
+            ordering: sortOption,
+            pageSize: 1000,
+          });
           if (data?.results) setStudiesList(data.results);
         } catch (error) {
           console.error(error);
@@ -179,7 +182,7 @@ export default function Project() {
 
   return (
     <>
-      <NavBarSNCF appName={<BreadCrumbs projectName={project && project.name} />} logo={logo} />
+      <NavBarSNCF appName={<BreadCrumbs project={project} />} logo={logo} />
       <main className="mastcontainer mastcontainer-no-mastnav">
         <div className="p-3">
           {project ? (

diff --git a/front/src/applications/operationalStudies/views/Scenario.tsx b/front/src/applications/operationalStudies/views/Scenario.tsx
@@ -9,17 +9,11 @@ import { MODES, MANAGE_TRAIN_SCHEDULE_TYPES } from 'applications/operationalStud
 import { updateInfraID, updateMode, updateTimetableID } from 'reducers/osrdconf';
 import TimetableManageTrainSchedule from 'modules/trainschedule/components/Timetable/TimetableManageTrainSchedule';
 import BreadCrumbs from 'applications/operationalStudies/components/BreadCrumbs';
-import {
-  getInfraID,
-  getProjectID,
-  getScenarioID,
-  getStudyID,
-  getTimetableID,
-} from 'reducers/osrdconf/selectors';
+import { getInfraID, getTimetableID } from 'reducers/osrdconf/selectors';
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
 import { FaEye, FaEyeSlash, FaPencilAlt } from 'react-icons/fa';
 import { GiElectric } from 'react-icons/gi';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
 import AddAndEditScenarioModal from 'modules/scenario/components/AddOrEditScenarioModal';
 import ScenarioLoaderMessage from 'modules/scenario/components/ScenarioLoaderMessage';
@@ -30,6 +24,12 @@ import ManageTrainSchedule from './ManageTrainSchedule';
 import SimulationResults from './SimulationResults';
 import InfraLoadingState from '../components/Scenario/InfraLoadingState';
 
+type SimulationParams = {
+  projectId: string;
+  studyId: string;
+  scenarioId: string;
+};
+
 export default function Scenario() {
   const dispatch = useDispatch();
   const { t } = useTranslation('operationalStudies/scenario');
@@ -44,31 +44,29 @@ export default function Scenario() {
 
   const { openModal } = useModal();
   const navigate = useNavigate();
-  const projectId = useSelector(getProjectID);
-  const studyId = useSelector(getStudyID);
-  const scenarioId = useSelector(getScenarioID);
+  const { projectId, studyId, scenarioId } = useParams() as SimulationParams;
   const infraId = useSelector(getInfraID);
   const timetableId = useSelector(getTimetableID);
 
   const { data: project } = osrdEditoastApi.endpoints.getProjectsByProjectId.useQuery(
     {
-      projectId: projectId as number,
+      projectId: +projectId,
     },
     { skip: !projectId }
   );
   const { data: study } =
     osrdEditoastApi.endpoints.getProjectsByProjectIdStudiesAndStudyId.useQuery(
-      { projectId: projectId as number, studyId: studyId as number },
+      { projectId: +projectId, studyId: +studyId },
       {
         skip: !projectId || !studyId,
       }
     );
   const { data: scenario } =
     osrdEditoastApi.endpoints.getProjectsByProjectIdStudiesAndStudyIdScenariosScenarioId.useQuery(
       {
-        projectId: projectId as number,
-        studyId: studyId as number,
-        scenarioId: scenarioId as number,
+        projectId: +projectId,
+        studyId: +studyId,
+        scenarioId: +scenarioId,
       },
       { skip: !projectId || !studyId || !scenarioId }
     );
@@ -145,13 +143,7 @@ export default function Scenario() {
   return scenario && infraId && timetableId ? (
     <>
       <NavBarSNCF
-        appName={
-          <BreadCrumbs
-            projectName={project?.name}
-            studyName={study?.name}
-            scenarioName={scenario.name}
-          />
-        }
+        appName={<BreadCrumbs project={project} study={study} scenario={scenario} />}
         logo={logo}
       />
       <main className="mastcontainer mastcontainer-no-mastnav">

diff --git a/front/src/applications/operationalStudies/views/Study.tsx b/front/src/applications/operationalStudies/views/Study.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
 import logo from 'assets/pictures/views/study.svg';
 import { useTranslation } from 'react-i18next';
@@ -13,8 +13,7 @@ import { VscLink, VscFile, VscFiles } from 'react-icons/vsc';
 import { FaPencilAlt } from 'react-icons/fa';
 import { budgetFormat } from 'utils/numbers';
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
-import { useSelector, useDispatch } from 'react-redux';
-import { getProjectID, getStudyID } from 'reducers/osrdconf/selectors';
+import { useDispatch } from 'react-redux';
 import DateBox from 'applications/operationalStudies/components/Study/DateBox';
 import StateStep from 'applications/operationalStudies/components/Study/StateStep';
 import {
@@ -80,11 +79,10 @@ export default function Study() {
   const [sortOption, setSortOption] = useState<SortOptions>('LastModifiedDesc');
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const projectId = useSelector(getProjectID);
-  const studyId = useSelector(getStudyID);
+  const { projectId, studyId } = useParams();
 
   const { data: project, isError: isProjectError } = osrdEditoastApi.useGetProjectsByProjectIdQuery(
-    { projectId: projectId as number },
+    { projectId: Number(projectId) },
     {
       skip: !projectId,
     }
@@ -93,8 +91,8 @@ export default function Study() {
   const { data: study, isError: isCurrentStudyError } =
     osrdEditoastApi.useGetProjectsByProjectIdStudiesAndStudyIdQuery(
       {
-        projectId: projectId as number,
-        studyId: studyId as number,
+        projectId: Number(projectId),
+        studyId: Number(studyId),
       },
       {
         skip: !projectId || !studyId,
@@ -217,8 +215,8 @@ export default function Study() {
       } else {
         try {
           const { data } = await getScenarios({
-            projectId,
-            studyId,
+            projectId: +projectId,
+            studyId: +studyId,
             ordering: sortOption,
             pageSize: 1000,
           });
@@ -237,15 +235,7 @@ export default function Study() {
 
   return (
     <>
-      <NavBarSNCF
-        appName={
-          <BreadCrumbs
-            projectName={project?.name && project.name}
-            studyName={study?.name && study.name}
-          />
-        }
-        logo={logo}
-      />
+      <NavBarSNCF appName={<BreadCrumbs project={project} study={study} />} logo={logo} />
       <main className="mastcontainer mastcontainer-no-mastnav">
         <div className="p-3">
           {project && study ? (

diff --git a/front/src/applications/referenceMap/Home.tsx b/front/src/applications/referenceMap/Home.tsx
@@ -8,6 +8,7 @@ import logo from 'assets/pictures/home/map.svg';
 import { getInfraID } from 'reducers/osrdconf/selectors';
 import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
+import { ModalProvider } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
 import Map from './Map';
 
 const HomeReferenceMap: FC = () => {
@@ -26,7 +27,7 @@ const HomeReferenceMap: FC = () => {
   }, [infraID, getInfraById]);
 
   return (
-    <>
+    <ModalProvider>
       <NavBarSNCF
         appName={
           <>
@@ -49,7 +50,7 @@ const HomeReferenceMap: FC = () => {
           <Route path="/:urlLat/:urlLon/:urlZoom/:urlBearing/:urlPitch" element={<Map />} />
         </Routes>
       </div>
-    </>
+    </ModalProvider>
   );
 };
 

diff --git a/front/src/applications/rollingStockEditor/Home.tsx b/front/src/applications/rollingStockEditor/Home.tsx
@@ -4,6 +4,7 @@ import { enhancedEditoastApi } from 'common/api/enhancedEditoastApi';
 
 import logo from 'assets/pictures/home/rollingstockeditor.svg';
 import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
+import { ModalProvider } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
 import RollingStockEditor from './views/RollingStockEditor';
 
 const HomeRollingStockEditor: FC = () => {
@@ -15,10 +16,10 @@ const HomeRollingStockEditor: FC = () => {
     });
 
   return (
-    <>
+    <ModalProvider>
       <NavBarSNCF appName={<>{t('rollingStockEditor')}</>} logo={logo} />
       <RollingStockEditor rollingStocks={rollingStocks} />
-    </>
+    </ModalProvider>
   );
 };
 

diff --git a/front/src/common/BootstrapSNCF/ModalSNCF/ModalProvider.tsx b/front/src/common/BootstrapSNCF/ModalSNCF/ModalProvider.tsx
@@ -10,7 +10,7 @@ import React, {
   useEffect,
   useRef,
 } from 'react';
-import { useLocation } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import cx from 'classnames';
 
 /**
@@ -160,6 +160,7 @@ export const ModalProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
         <div className={cx('modal-backdrop fade', modalContext.isOpen && 'show')} />
       )}
       <ModalSNCF />
+      <Outlet />
     </ModalContext.Provider>
   );
 };