From 5b48a875e196e27dc51ea4d4529a75b87e450104 Mon Sep 17 00:00:00 2001
From: SarahBellaha <sarah.bellaha@sncf.fr>
Date: Tue, 5 Nov 2024 15:41:12 +0100
Subject: [PATCH] front: refacto stdcm linked train search props

Signed-off-by: SarahBellaha <sarah.bellaha@sncf.fr>
---
 front/public/locales/en/stdcm.json            | 12 +++--
 front/public/locales/fr/stdcm.json            | 10 +++-
 .../components/StdcmForm/StdcmConfig.tsx      | 15 ++----
 .../StdcmForm/StdcmLinkedTrainResults.tsx     |  8 +--
 .../StdcmForm/StdcmLinkedTrainSearch.tsx      | 50 +++++++++----------
 front/src/applications/stdcm/types.ts         |  2 +
 .../styles/scss/applications/stdcm/_card.scss |  4 +-
 .../scss/applications/stdcm/_linkedTrain.scss | 16 +++---
 8 files changed, 61 insertions(+), 56 deletions(-)

diff --git a/front/public/locales/en/stdcm.json b/front/public/locales/en/stdcm.json
index f271eac2e70..1a1bb22837d 100644
--- a/front/public/locales/en/stdcm.json
+++ b/front/public/locales/en/stdcm.json
@@ -23,9 +23,11 @@
       "invalidDate": "Select a date between {{startDate}} and {{endDate}}"
     }
   },
-  "indicateAnteriorPath": "Indicate anterior path",
-  "indicatePosteriorPath": "Indicate posterior path",
   "leaveAt": "Leave at {{ time }}",
+  "linkedTrainDefaultCard": {
+    "anterior": "Indicate anterior path",
+    "posterior": "Indicate posterior path"
+  },
   "loaderImageLegend": "Morning view of the locomotive shed at Le Bourget depot",
   "noConfigurationFound": {
     "title": "A configuration problem prevents you from performing a search",
@@ -98,14 +100,16 @@
   "stdcmSimulationReport": "Path simulation report",
   "trainPath": {
     "addVia": "Add intermediate OP",
-    "anteriorPath": "Anterior path",
     "asSoonAsPossible": "as soon as possible",
     "ch": "CH",
     "ci": "CI",
     "date": "Date",
     "destination": "Destination",
+    "linkedTrain": {
+      "anterior": "Anterior path",
+      "posterior": "Posterior path"
+    },
     "origin": "Origin",
-    "posteriorPath": "Posterior path",
     "preciseTime": "precise time",
     "stopFor": "Minimum stop time",
     "stopType": {
diff --git a/front/public/locales/fr/stdcm.json b/front/public/locales/fr/stdcm.json
index 82eb238f7a6..814dbc95fe2 100644
--- a/front/public/locales/fr/stdcm.json
+++ b/front/public/locales/fr/stdcm.json
@@ -26,6 +26,10 @@
   "indicateAnteriorPath": "Indiquer le sillon antérieur",
   "indicatePosteriorPath": "Indiquer le sillon postérieur",
   "leaveAt": "Partir à {{ time }}",
+  "linkedTrainDefaultCard": {
+    "anterior": "Indiquer le sillon antérieur",
+    "posterior": "Indiquer le sillon postérieur"
+  },
   "loaderImageLegend": "Vue matinale du relais de locomotives du dépôt du Bourget",
   "noConfigurationFound": {
     "title": "Un problème de configuration vous empêche de faire une recherche",
@@ -98,14 +102,16 @@
   "stdcmSimulationReport": "Fiche simulation",
   "trainPath": {
     "addVia": "Ajouter un PR intermédiaire",
-    "anteriorPath": "Sillon antérieur",
     "asSoonAsPossible": "dès que possible",
     "ch": "CH",
     "ci": "CI",
     "date": "Date",
     "destination": "Destination",
+    "linkedTrain": {
+      "anterior": "Sillon antérieur",
+      "posterior": "Sillon postérieur"
+    },
     "origin": "Origine",
-    "posteriorPath": "Sillon postérieur",
     "preciseTime": "horaire précis",
     "stopFor": "Temps d'arrêt minimum",
     "stopType": {
diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx
index a33de1b4606..3459cec367e 100644
--- a/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx
+++ b/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 
 import { Button } from '@osrd-project/ui-core';
-import { ArrowDown, ArrowUp } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import { compact } from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -145,11 +144,8 @@ const StdcmConfig = ({
         <div className="d-flex flex-column">
           <StdcmLinkedTrainSearch
             disabled={disabled}
-            defaultCardText={t('indicateAnteriorPath')}
-            cardName={t('trainPath.anteriorPath')}
-            cardIcon={<ArrowUp size="lg" />}
-            className="anterior-linked-path"
-            linkedOp={{ extremityType: 'destination', id: origin.id }}
+            linkedTrainType="anterior"
+            linkedOpId={origin.id}
           />
           <div className="stdcm-simulation-inputs">
             <div className="stdcm-consist-container">
@@ -162,11 +158,8 @@ const StdcmConfig = ({
               <StdcmDestination disabled={disabled} />
               <StdcmLinkedTrainSearch
                 disabled={disabled}
-                defaultCardText={t('indicatePosteriorPath')}
-                cardName={t('trainPath.posteriorPath')}
-                cardIcon={<ArrowDown size="lg" />}
-                className="posterior-linked-path"
-                linkedOp={{ extremityType: 'origin', id: destination.id }}
+                linkedTrainType="posterior"
+                linkedOpId={destination.id}
               />
               <div
                 className={cx('stdcm-launch-request', {
diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmLinkedTrainResults.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmLinkedTrainResults.tsx
index fd40d1809cd..b8b111183f9 100644
--- a/front/src/applications/stdcm/components/StdcmForm/StdcmLinkedTrainResults.tsx
+++ b/front/src/applications/stdcm/components/StdcmForm/StdcmLinkedTrainResults.tsx
@@ -19,13 +19,13 @@ const StdcmLinkedTrainResults = ({
   const dispatch = useDispatch();
   const { updateLinkedPathStep } = useOsrdConfActions() as StdcmConfSliceActions;
   return (
-    <div className="stdcm-linked-path-results">
+    <div className="stdcm-linked-train-results">
       {linkedTrainResults.map(({ trainName, origin, destination }, index) => (
         <button
-          key={`linked-path-${index}`}
+          key={`linked-train-${index}`}
           tabIndex={0}
           type="button"
-          className="linked-path-result-infos"
+          className="linked-train-result-infos"
           onClick={() => {
             if (linkedTrainResults.length === 1)
               dispatch(
@@ -43,7 +43,7 @@ const StdcmLinkedTrainResults = ({
               label={trainName}
               id={`${extremityType}-${index}`}
               value={`${index}`}
-              name={`linked-path-radio-buttons-${extremityType}`}
+              name={`linked-train-radio-buttons-${extremityType}`}
               onClick={({ target }) => {
                 const resultIndex = Number((target as HTMLInputElement).value);
                 dispatch(
diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmLinkedTrainSearch.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmLinkedTrainSearch.tsx
index e51f6d247c4..59289e85af4 100644
--- a/front/src/applications/stdcm/components/StdcmForm/StdcmLinkedTrainSearch.tsx
+++ b/front/src/applications/stdcm/components/StdcmForm/StdcmLinkedTrainSearch.tsx
@@ -1,7 +1,7 @@
-import { useState, type ReactNode } from 'react';
+import { useState } from 'react';
 
 import { DatePicker, Input } from '@osrd-project/ui-core';
-import { Gear } from '@osrd-project/ui-icons';
+import { ArrowDown, ArrowUp, Gear } from '@osrd-project/ui-icons';
 import { useTranslation } from 'react-i18next';
 
 import useLinkedTrainSearch from 'applications/stdcm/hooks/useLinkedTrainSearch';
@@ -9,24 +9,18 @@ import useLinkedTrainSearch from 'applications/stdcm/hooks/useLinkedTrainSearch'
 import StdcmCard from './StdcmCard';
 import StdcmDefaultCard from './StdcmDefaultCard';
 import StdcmLinkedTrainResults from './StdcmLinkedTrainResults';
-import type { ExtremityPathStepType } from '../../types';
+import type { LinkedTrainType } from '../../types';
 
 type StdcmLinkedTrainSearchProps = {
   disabled: boolean;
-  cardIcon: ReactNode;
-  cardName: string;
-  className?: string;
-  defaultCardText: string;
-  linkedOp: { extremityType: ExtremityPathStepType; id: string };
+  linkedTrainType: LinkedTrainType;
+  linkedOpId: string;
 };
 
 const StdcmLinkedTrainSearch = ({
   disabled,
-  cardIcon,
-  cardName,
-  className = '',
-  defaultCardText,
-  linkedOp,
+  linkedTrainType,
+  linkedOpId,
 }: StdcmLinkedTrainSearchProps) => {
   const { t } = useTranslation('stdcm');
   const [displayLinkedTrainSearch, setShowLinkedTrainSearch] = useState(false);
@@ -45,30 +39,30 @@ const StdcmLinkedTrainSearch = ({
   } = useLinkedTrainSearch();
 
   return (
-    <div className={`stdcm-linked-path-search-container ${className}`}>
+    <div className={`stdcm-linked-train-search-container ${linkedTrainType}-linked-train`}>
       {!displayLinkedTrainSearch ? (
         <div tabIndex={0} role="button" onClick={() => setShowLinkedTrainSearch(true)}>
           <StdcmDefaultCard
             disabled={disabled}
-            text={defaultCardText}
-            Icon={cardIcon}
-            className="add-linked-path"
+            text={t(`linkedTrainDefaultCard.${linkedTrainType}`)}
+            Icon={linkedTrainType === 'anterior' ? <ArrowUp size="lg" /> : <ArrowDown size="lg" />}
+            className="add-linked-train"
           />
         </div>
       ) : (
         <StdcmCard
           disabled={disabled}
-          name={cardName}
+          name={t(`trainPath.linkedTrain.${linkedTrainType}`)}
           title={
             <button type="button" onClick={() => setShowLinkedTrainSearch(false)}>
               {t('translation:common.delete').toLowerCase()}
             </button>
           }
-          className="linked-path"
+          className="linked-train"
         >
           <div className="d-flex pr-1 pl-3">
             <Input
-              id="linked-path-id"
+              id="linked-train-id"
               type="text"
               value={trainNameInput}
               onChange={(e) => {
@@ -79,7 +73,7 @@ const StdcmLinkedTrainSearch = ({
             />
             <DatePicker
               inputProps={{
-                id: 'linked-path-date',
+                id: 'linked-train-date',
                 label: 'Date',
                 name: 'op-date',
               }}
@@ -92,7 +86,7 @@ const StdcmLinkedTrainSearch = ({
           </div>
           {displaySearchButton && (
             <button
-              className="stdcm-linked-path-button"
+              className="stdcm-linked-train-button"
               type="button"
               onClick={launchTrainScheduleSearch}
             >
@@ -100,12 +94,18 @@ const StdcmLinkedTrainSearch = ({
             </button>
           )}
           {!displaySearchButton && !linkedTrainResults.length && (
-            <div className="stdcm-linked-path-button white">
-              <Gear size="lg" className="stdcm-linked-path-loading" />
+            <div className="stdcm-linked-train-button white">
+              <Gear size="lg" className="stdcm-linked-train-loading" />
             </div>
           )}
           {linkedTrainResults.length > 0 ? (
-            <StdcmLinkedTrainResults linkedTrainResults={linkedTrainResults} linkedOp={linkedOp} />
+            <StdcmLinkedTrainResults
+              linkedTrainResults={linkedTrainResults}
+              linkedOp={{
+                extremityType: linkedTrainType === 'anterior' ? 'destination' : 'origin',
+                id: linkedOpId,
+              }}
+            />
           ) : (
             hasSearchBeenLaunched && (
               <p className="text-center mb-0">{t('noCorrespondingResults')}</p>
diff --git a/front/src/applications/stdcm/types.ts b/front/src/applications/stdcm/types.ts
index cc85acced3e..aa25881c1a4 100644
--- a/front/src/applications/stdcm/types.ts
+++ b/front/src/applications/stdcm/types.ts
@@ -200,3 +200,5 @@ export type StdcmLinkedTrainResult = {
 };
 
 export type ExtremityPathStepType = 'origin' | 'destination';
+
+export type LinkedTrainType = 'anterior' | 'posterior';
diff --git a/front/src/styles/scss/applications/stdcm/_card.scss b/front/src/styles/scss/applications/stdcm/_card.scss
index 38c90624c17..339182c81ff 100644
--- a/front/src/styles/scss/applications/stdcm/_card.scss
+++ b/front/src/styles/scss/applications/stdcm/_card.scss
@@ -63,8 +63,8 @@
   .stdcm-card__body {
     padding: 14px 24px 24px 8px;
 
-    &.add-linked-path,
-    &.linked-path {
+    &.add-linked-train,
+    &.linked-train {
       width: 450px;
       padding: 11px 8px 13px;
     }
diff --git a/front/src/styles/scss/applications/stdcm/_linkedTrain.scss b/front/src/styles/scss/applications/stdcm/_linkedTrain.scss
index 3bd3eb80b3e..e3081992161 100644
--- a/front/src/styles/scss/applications/stdcm/_linkedTrain.scss
+++ b/front/src/styles/scss/applications/stdcm/_linkedTrain.scss
@@ -1,11 +1,11 @@
-.stdcm-linked-path-search-container {
+.stdcm-linked-train-search-container {
   align-self: flex-end;
 
-  &.anterior-linked-path {
+  &.anterior-linked-train {
     margin-bottom: 18px;
   }
 
-  &.posterior-linked-path {
+  &.posterior-linked-train {
     margin-top: 18px;
   }
 
@@ -17,8 +17,8 @@
     }
   }
 
-  .linked-path {
-    .stdcm-linked-path-button {
+  .linked-train {
+    .stdcm-linked-train-button {
       text-align: center;
       width: 402px;
       height: 40px;
@@ -29,18 +29,18 @@
       &.white {
         background-color: var(--white);
       }
-      .stdcm-linked-path-loading {
+      .stdcm-linked-train-loading {
         color: var(--primary90);
         align-self: center;
       }
     }
 
-    .stdcm-linked-path-results {
+    .stdcm-linked-train-results {
       padding: 10px 17px 0;
       border-top: 1px solid var(--grey20);
       margin-top: 21px;
 
-      .linked-path-result-infos {
+      .linked-train-result-infos {
         width: 100%;
         margin-bottom: 7px;