front: remove modal for pathfindingjson detail

Author: nicolaswurtz

front/src/common/Pathfinding/Pathfinding.tsx

@@ -4,16 +4,14 @@ import { Position } from 'geojson';
 import bbox from '@turf/bbox';
 import { useTranslation } from 'react-i18next';
 import { compact, isEqual } from 'lodash';
-import { BiCheckCircle, BiXCircle, BiErrorCircle } from 'react-icons/bi';
+import { GoAlert, GoCheckCircle, GoStop } from 'react-icons/go';
 
 import { setFailure } from 'reducers/main';
 
 import { ArrayElement } from 'utils/types';
 import { conditionalStringConcat, formatKmValue } from 'utils/strings';
-import { lengthFromLineCoordinates } from 'utils/geometry';
 
 import { Path, PathQuery, osrdEditoastApi } from 'common/api/osrdEditoastApi';
-import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
 import { PointOnMap } from 'applications/operationalStudies/consts';
 
 import {
@@ -31,8 +29,6 @@ import {
   getPathfindingID,
   getGeojson,
 } from 'reducers/osrdconf/selectors';
-
-import ModalPathJSONDetail from 'modules/trainschedule/components/ManageTrainSchedule/Itinerary/ModalPathJSONDetail';
 import infraLogo from 'assets/pictures/components/tracks.svg';
 import InfraLoadingState from 'applications/operationalStudies/components/Scenario/InfraLoadingState';
 import { Spinner } from '../Loader';
@@ -265,7 +261,6 @@ function Pathfinding({ zoomToFeature }: PathfindingProps) {
   const { t } = useTranslation(['operationalStudies/manageTrainSchedule']);
   const [pathfindingRequest, setPathfindingRequest] =
     useState<ReturnType<typeof postPathfinding>>();
-  const { openModal } = useModal();
   const dispatch = useDispatch();
   const infraID = useSelector(getInfraID, isEqual);
   const origin = useSelector(getOrigin, isEqual);
@@ -345,7 +340,7 @@ function Pathfinding({ zoomToFeature }: PathfindingProps) {
   const displayInfraSoftError = () => (
     <div className="content pathfinding-error my-2">
       <span className="lead">
-        <BiXCircle />
+        <GoStop />
       </span>
       {reloadCount <= 5 ? (
         <span className="flex-grow-1">{t('errorMessages.unableToLoadInfra', { reloadCount })}</span>
@@ -358,7 +353,7 @@ function Pathfinding({ zoomToFeature }: PathfindingProps) {
   const displayInfraHardError = () => (
     <div className="content pathfinding-error my-2">
       <span className="lead">
-        <BiXCircle />
+        <GoStop />
       </span>
       <span className="flex-grow-1">{t('errorMessages.hardErrorInfra')}</span>
     </div>
@@ -475,17 +470,6 @@ function Pathfinding({ zoomToFeature }: PathfindingProps) {
     }
   }, [origin, destination, rollingStockID]);
 
-  const pathDetailsToggleButton = (
-    <button
-      type="button"
-      onClick={() => openModal(<ModalPathJSONDetail />, 'lg')}
-      className="btn btn-link details"
-      data-testid="result-pathfinding-distance"
-    >
-      {formatKmValue(lengthFromLineCoordinates(geojson?.geographic?.coordinates))}
-    </button>
-  );
-
   const loaderPathfindingInProgress = (
     <div className="pathfinding-in-progress">
       <div className="pathfinding-in-progress-card">
@@ -543,18 +527,20 @@ function Pathfinding({ zoomToFeature }: PathfindingProps) {
           {pathfindingState.done && !pathfindingState.error && (
             <div className="content pathfinding-done">
               <span className="lead">
-                <BiCheckCircle />
+                <GoCheckCircle />
               </span>
               <span className="flex-grow-1">{t('pathfindingDone')}</span>
-              {pathDetailsToggleButton}
+              <small className="text-secondary">
+                {geojson?.length && formatKmValue(geojson?.length / 1000, 3)}
+              </small>
             </div>
           )}
           {pathfindingState.error && (
             <div
               className={`content pathfinding-error ${infra && infra.state !== 'CACHED' && 'mt-2'}`}
             >
               <span className="lead">
-                <BiXCircle />
+                <GoStop />
               </span>
               <span className="flex-grow-1">
                 {t('pathfindingError', { errorMessage: t(pathfindingState.error) })}
@@ -564,7 +550,7 @@ function Pathfinding({ zoomToFeature }: PathfindingProps) {
           {pathfindingState.missingParam && (
             <div className="content missing-params">
               <span className="lead">
-                <BiErrorCircle />
+                <GoAlert />
               </span>
               <span className="flex-grow-1">
                 {t('pathfindingMissingParams', { missingElements })}

front/src/common/Pathfinding/TypeAndPath.tsx

@@ -5,7 +5,7 @@ import {
   SearchResultItemOperationalPoint,
   osrdEditoastApi,
 } from 'common/api/osrdEditoastApi';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { getInfraID, getRollingStockID } from 'reducers/osrdconf/selectors';
@@ -52,28 +52,29 @@ function OpTooltips({ opList }: { opList: SearchResultItemOperationalPoint[] })
 
 export default function TypeAndPath({ zoomToFeature }: PathfindingProps) {
   const dispatch = useDispatch();
-  const [inputText, setInputText] = useState<string>('');
+  const [inputText, setInputText] = useState('');
   const [opList, setOpList] = useState<SearchResultItemOperationalPoint[]>([]);
   const infraId = useSelector(getInfraID);
   const rollingStockId = useSelector(getRollingStockID);
-  const [postSearch] = osrdEditoastApi.usePostSearchMutation();
-  const [postPathfinding] = osrdEditoastApi.usePostPathfindingMutation();
+  const [postSearch] = osrdEditoastApi.endpoints.postSearch.useMutation();
+  const [postPathfinding] = osrdEditoastApi.endpoints.postPathfinding.useMutation();
   const { t } = useTranslation('operationalStudies/manageTrainSchedule');
 
   const debouncedInputText = useDebounce(inputText.trimEnd(), 500);
 
   const handleInput = (text: string) => {
-    // setInputText(text.trimStart().toUpperCase());
     setInputText(text.trimStart());
   };
 
   function getOpNames() {
     if (infraId !== undefined) {
-      const opTrigrams = inputText.toUpperCase().split(' ');
+      const opTrigrams = inputText.toUpperCase().trimEnd().split(' ');
       const constraint = opTrigrams.reduce(
         (res, trigram) => [...res, ['=', ['trigram'], trigram]],
         ['or'] as (string | SearchConstraintType)[]
       );
+      // SNCF trigrams come with a yard name, for main station it could be nothing '',
+      // 'BV' (as Bâtiment Voyageurs) or '00', all are the same signification: this is the main station.
       const limitToMainStationConstraint = [
         'or',
         ['=', ['ch'], ''],
@@ -100,7 +101,7 @@ export default function TypeAndPath({ zoomToFeature }: PathfindingProps) {
     }
   }
 
-  const isInvalid = !opList.every((op) => op.name || op.trigram === '');
+  const isInvalid = useMemo(() => opList.some((op) => !op.name && op.trigram !== ''), [opList]);
 
   function launchPathFinding() {
     if (infraId && rollingStockId && opList.length > 0) {
@@ -169,7 +170,7 @@ export default function TypeAndPath({ zoomToFeature }: PathfindingProps) {
           className="btn btn-sm btn-success"
           type="button"
           onClick={launchPathFinding}
-          disabled={isInvalid}
+          disabled={isInvalid || opList.length < 2}
         >
           <GoTriangleRight />
         </button>