fixup! front: select op with map when add train

Author: theocrsb

front/src/modules/trainschedule/components/ManageTrainSchedule/ManageTrainScheduleMap/AddPathStepPopup.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useState } from 'react';
 
-import { Select } from '@osrd-project/ui-core';
 import { point } from '@turf/helpers';
 import { omit } from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -24,6 +23,7 @@ import { type PathStep } from 'reducers/osrdconf/types';
 import { getPointCoordinates } from 'utils/geometry';
 
 import type { FeatureInfoClick } from '../types';
+import OperationalPointPopupDetails from './OperationalPointPopupDetails';
 
 type AddPathStepPopupProps = {
   pathProperties?: ManageTrainSchedulePathProperties;
@@ -177,34 +177,22 @@ const AddPathStepPopup = ({
       closeOnClick={false}
       className="map-popup-click-select"
     >
-      <div className="details">
-        <div className="details-track">
-          {featureInfoClick.isOperationalPoint &&
-            featureInfoClick.feature.properties.extensions_sncf_track_name}
-          <small>{featureInfoClick.feature.properties.extensions_sncf_line_code}</small>
-        </div>
-        <div className="details-line">
-          {featureInfoClick.isOperationalPoint ? (
-            <>
-              {featureInfoClick.feature.properties.extensions_identifier_name} <br />
-              {featureInfoClick.feature.properties.extensions_sncf_trigram}{' '}
-              {featureInfoClick.feature.properties.extensions_sncf_ch}
-            </>
-          ) : (
-            featureInfoClick.feature.properties.extensions_sncf_line_name
-          )}
-        </div>
-      </div>
-
-      {featureInfoClick.isOperationalPoint && clickedOp?.tracks && (
-        <Select
-          getOptionLabel={(option) => option?.trackName || t('anyTrack')}
-          getOptionValue={(option) => option?.trackName || ''}
-          id="select-track"
-          onChange={(selectedOption) => setSelectedTrack(selectedOption)}
-          options={clickedOp.tracks}
-          value={selectedTrack}
+      {featureInfoClick.isOperationalPoint ? (
+        <OperationalPointPopupDetails
+          operationalPoint={featureInfoClick}
+          clickedOp={clickedOp!}
+          selectedTrack={selectedTrack!}
+          setSelectedTrack={setSelectedTrack}
         />
+      ) : (
+        <div className="details">
+          <div className="details-track">
+            <small>{featureInfoClick.feature.properties.extensions_sncf_line_code}</small>
+          </div>
+          <div className="details-line">
+            {featureInfoClick.feature.properties.extensions_sncf_line_name}
+          </div>
+        </div>
       )}
 
       <div className="actions">

front/src/modules/trainschedule/components/ManageTrainSchedule/ManageTrainScheduleMap/OperationalPointPopupDetails.tsx

@@ -0,0 +1,60 @@
+import React, { type SetStateAction } from 'react';
+
+import { Select } from '@osrd-project/ui-core';
+import { useTranslation } from 'react-i18next';
+
+import type { PathStep } from 'reducers/osrdconf/types';
+
+import type { FeatureInfoClick } from '../types';
+
+type OperationalPointPopupDetailsProps = {
+  operationalPoint: FeatureInfoClick;
+  clickedOp: Extract<PathStep, { uic: number }> & {
+    tracks: {
+      trackName?: string;
+      coordinates?: number[];
+    }[];
+  };
+  selectedTrack: {
+    trackName?: string;
+    coordinates?: number[];
+  };
+  setSelectedTrack: React.Dispatch<
+    SetStateAction<{ trackName?: string; coordinates?: number[] } | undefined>
+  >;
+};
+
+const OperationalPointPopupDetails: React.FC<OperationalPointPopupDetailsProps> = ({
+  operationalPoint,
+  clickedOp,
+  selectedTrack,
+  setSelectedTrack,
+}) => {
+  const { t } = useTranslation(['operationalStudies/manageTrainSchedule']);
+
+  return (
+    <>
+      <div className="details">
+        <div className="details-track">
+          {operationalPoint.feature.properties!.extensions_sncf_track_name}
+          <small>{operationalPoint.feature.properties!.extensions_sncf_line_code}</small>
+        </div>
+        <div className="details-line">
+          {operationalPoint.feature.properties!.extensions_identifier_name} <br />
+          {operationalPoint.feature.properties!.extensions_sncf_trigram}{' '}
+          {operationalPoint.feature.properties!.extensions_sncf_ch}
+        </div>
+      </div>
+      <Select
+        getOptionLabel={(option) => option?.trackName || t('anyTrack')}
+        getOptionValue={(option) => option?.trackName || ''}
+        id="select-track"
+        onChange={(selectedOption) => setSelectedTrack(selectedOption)}
+        options={clickedOp.tracks}
+        value={selectedTrack}
+      />
+    </>
+  );
+};
+
+export default OperationalPointPopupDetails;