lmr: add messages during pathfinding and when its done

- fix padding, add translations
- refacto using isfetching from rtk
- add transition in css to avoid two settimeout
- add eventlistener for the animation

Signed-off-by: Mathieu <mathieu.coulibaly@sncf.fr>
Co-authored-by: romainvalls <romain.valls95@gmail.com>

Author: 2 people

front/public/locales/en/stdcm.json

@@ -50,6 +50,10 @@
   },
   "noCorrespondingResults": "No results matching your search.",
   "notificationTitle": "Phase 1: from D-7 to D-1 5pm, on the Perrigny-Miramas axis.",
+  "pathfindingStatus": {
+    "calculating": "Validating path...",
+    "success": "The requested path is valid."
+  },
   "pleaseWait": "Please wait…",
   "simulation": {
     "calculatingSimulation": "Calculation in progress...",

front/public/locales/fr/stdcm.json

@@ -50,6 +50,10 @@
   },
   "noCorrespondingResults": "Aucun résultat ne correspond à votre recherche.",
   "notificationTitle": "Phase 1 : de J-7 à J-1 17h, sur l’axe Perrigny—Miramas.",
+  "pathfindingStatus": {
+    "calculating": "Validation de l'itinéraire en cours...",
+    "success": "L'itinéraire demandé est valide."
+  },
   "pleaseWait": "Veuillez patientez…",
   "simulation": {
     "calculatingSimulation": "Calcul en cours...",

front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { Button } from '@osrd-project/ui-core';
 import cx from 'classnames';
@@ -90,8 +90,12 @@ const StdcmConfig = ({
   const totalLength = useSelector(getTotalLength);
   const maxSpeed = useSelector(getMaxSpeed);
 
-  const pathfinding = useStaticPathfinding(infra);
+  const [showMessage, setShowMessage] = useState(false);
+
+  const { pathfinding, isPathFindingLoading } = useStaticPathfinding(infra);
+
   const formRef = useRef<HTMLDivElement>(null);
+  const pathfindingBannerRef = useRef<HTMLDivElement>(null);
 
   const [formErrors, setFormErrors] = useState<StdcmConfigErrors>();
 
@@ -145,6 +149,13 @@ const StdcmConfig = ({
     );
   };
 
+  const getStatusMessage = () => {
+    if (isPathFindingLoading) {
+      return t('pathfindingStatus.calculating');
+    }
+    return t('pathfindingStatus.success');
+  };
+
   useEffect(() => {
     if (pathfinding) {
       const formErrorsStatus = checkStdcmConfigErrors(
@@ -177,6 +188,31 @@ const StdcmConfig = ({
     }
   }, []);
 
+  useEffect(() => {
+    if (isPathFindingLoading) {
+      setShowMessage(true);
+    }
+
+    if (pathfinding?.status === 'failure') {
+      setShowMessage(false);
+    }
+  }, [isPathFindingLoading, pathfinding?.status]);
+
+  useLayoutEffect(() => {
+    const handleAnimationEnd = () => {
+      setShowMessage(false);
+    };
+
+    if (!showMessage || formErrors) {
+      return undefined;
+    }
+    pathfindingBannerRef.current!.addEventListener('animationend', handleAnimationEnd);
+
+    return () => {
+      pathfindingBannerRef.current?.removeEventListener('animationend', handleAnimationEnd);
+    };
+  }, [showMessage, formErrors]);
+
   return (
     <div className="stdcm__body">
       {isDebugMode && (
@@ -238,6 +274,20 @@ const StdcmConfig = ({
                 )}
               </div>
 
+              {!formErrors && showMessage && (
+                <div className="simulation-status-banner">
+                  <div className="banner-content">
+                    <div
+                      ref={pathfindingBannerRef}
+                      className={cx('pathFinding-status', {
+                        'pathFinding-status-success': pathfinding?.status === 'success',
+                      })}
+                    >
+                      {getStatusMessage()}
+                    </div>
+                  </div>
+                </div>
+              )}
               {isPending && (
                 <StdcmLoader
                   cancelStdcmRequest={cancelStdcmRequest}

front/src/applications/stdcm/hooks/useStaticPathfinding.ts

@@ -32,7 +32,7 @@ const useStaticPathfinding = (infra?: InfraWithState) => {
 
   const [pathfinding, setPathfinding] = useState<PathfindingResult>();
 
-  const [postPathfindingBlocks] =
+  const [postPathfindingBlocks, { isFetching }] =
     osrdEditoastApi.endpoints.postInfraByInfraIdPathfindingBlocks.useLazyQuery();
 
   // When pathSteps changed
@@ -84,7 +84,7 @@ const useStaticPathfinding = (infra?: InfraWithState) => {
     [pathfinding, pathProperties]
   );
 
-  return result;
+  return { pathfinding: result, isPathFindingLoading: isFetching };
 };
 
 export default useStaticPathfinding;

front/src/styles/scss/_variables.scss

@@ -67,6 +67,7 @@ $colors: (
   'primary80': #1f0f96,
   'primary90': #180f47,
   'selection20': #fff2b3,
+  'success5': #e6f7ee,
   'success30': #3cca80,
   'success60': #0b723c,
   'warning5': #fdf5e1,

front/src/styles/scss/applications/stdcm/_home.scss

@@ -258,6 +258,9 @@
     .banner-content {
       padding: 0 0 16px 378px;
       background: linear-gradient(180deg, rgba(239, 243, 245) 40px, rgba(233, 239, 242) 40px);
+      &:has(.pathFinding-status) {
+        padding: 0;
+      }
       .status {
         width: 466px;
         display: flex;
@@ -294,6 +297,53 @@
         line-height: 24px;
         text-align: center;
       }
+
+      .pathFinding-status {
+        left: -8px;
+        position: absolute;
+        bottom: -95px;
+        width: 466px;
+        display: flex;
+        font-weight: 400;
+        justify-content: center;
+        line-height: 24px;
+        height: 72px;
+        border-radius: 8px;
+        color: var(--info60);
+        background-color: var(--info5);
+        margin-top: 16px;
+        padding-top: 23px;
+        box-shadow:
+          0 0 0 4px rgba(255, 255, 255, 1) inset,
+          0 0 0 5px rgb(112, 193, 229) inset,
+          0 3px 7px -3px rgba(28, 28, 217, 0.4);
+        &-success {
+          color: var(--success60);
+          background-color: var(--success5);
+          opacity: 0;
+          box-shadow:
+            0 0 0 4px rgba(255, 255, 255, 1) inset,
+            0 0 0 5px rgb(60, 202, 128) inset,
+            0 3px 7px -3px rgba(11, 114, 60, 0.4);
+          animation: pathfinding-success 2.7s;
+        }
+      }
+      @keyframes pathfinding-success {
+        0% {
+          opacity: 1;
+        }
+        74% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+
+      .fade-out {
+        opacity: 0;
+        transition: opacity 0.3s ease-out;
+      }
     }
   }
 }