front: adapt invalid path item style in itinerary modal

Signed-off-by: SharglutDev <[email protected]>

Author: SharglutDev

front/src/applications/operationalStudies/views/Scenario/components/ManageTimetableItem/Itinerary/ItineraryModal.tsx

@@ -195,15 +195,24 @@ const ItineraryModal = ({
               <span>{t('secondaryCode')}</span>
               <span>{t('track')}</span>
             </div>
-            {pathSteps.map((pathStep, i) => (
-              <PathStepItem
-                key={pathStep.id}
-                pathStep={pathStep}
-                pathStepMetadata={pathStepsMetadataById.get(pathStep.id)}
-                index={i + 1}
-                categoryColors={categoryColors}
-              />
-            ))}
+            {pathSteps.map((pathStep, i) => {
+              const pathStepMetadata = pathStepsMetadataById.get(pathStep.id);
+              const previousPathStepMetadata = i
+                ? pathStepsMetadataById.get(pathSteps[i - 1].id)
+                : undefined;
+              return (
+                <PathStepItem
+                  key={pathStep.id}
+                  pathStep={pathStep}
+                  pathStepMetadata={pathStepMetadata}
+                  index={i + 1}
+                  categoryColors={categoryColors}
+                  hidePathfindingLine={
+                    pathStepMetadata?.isInvalid || previousPathStepMetadata?.isInvalid
+                  }
+                />
+              );
+            })}
             <PathStepItem
               hidePathfindingLine={pathSteps.length === 0}
               categoryColors={categoryColors}

front/src/applications/operationalStudies/views/Scenario/components/ManageTimetableItem/Itinerary/PathStepItem.tsx

@@ -135,20 +135,29 @@ const PathStepItem = ({
       >
         <div
           className={cx('path-step-counter', {
+            invalid: pathStepMetadata?.isInvalid,
             index,
             'pathfinding-line': !hidePathfindingLine,
             origin: index === 1,
             empty: !pathStep,
           })}
           style={{
-            borderColor: index ? categoryColors.background : categoryColors.normal,
+            borderColor: !pathStepMetadata?.isInvalid
+              ? index
+                ? categoryColors.background
+                : categoryColors.normal
+              : '',
             // @ts-expect-error: variable CSS custom property to be used to style ::before
             '--pathBackground': categoryColors.normal,
           }}
         >
           {index}
         </div>
-        <div className="path-step-op-name">
+        <div
+          className={cx('path-step-op-name', {
+            invalid: pathStepMetadata?.isInvalid,
+          })}
+        >
           <ComboBox
             id={`pathStep-name-${pathStep?.id ?? 'empty'}`}
             value={isOpRefMetadata(pathStepMetadata) ? pathStepMetadata.name : ''}
@@ -165,28 +174,40 @@ const PathStepItem = ({
           <div className="requested-point-block" />
         ) : (
           <>
-            <Select
-              id={`pathStep-type-${pathStep?.id ?? 'empty'}`}
-              value={selectedSecondaryCodeOption}
-              options={secondaryCodeSuggestions}
-              getOptionLabel={(option) => option.label}
-              getOptionValue={(option) => option.id}
-              onChange={() => {}}
-              small
-              narrow
-              readOnly
-            />
-            <Select
-              id={`pathStep-status-${pathStep?.id ?? 'empty'}`}
-              value={selectedTrackNameOption}
-              options={trackNameSuggestions}
-              getOptionLabel={(option) => option.label}
-              getOptionValue={(option) => option.id}
-              onChange={() => {}}
-              small
-              narrow
-              readOnly
-            />
+            <div
+              className={cx('secondary-code', {
+                invalid: pathStepMetadata?.isInvalid,
+              })}
+            >
+              <Select
+                id={`pathStep-type-${pathStep?.id ?? 'empty'}`}
+                value={selectedSecondaryCodeOption}
+                options={secondaryCodeSuggestions}
+                getOptionLabel={(option) => option.label}
+                getOptionValue={(option) => option.id}
+                onChange={() => {}}
+                small
+                narrow
+                readOnly
+              />
+            </div>
+            <div
+              className={cx('track-name', {
+                invalid: pathStepMetadata?.isInvalid,
+              })}
+            >
+              <Select
+                id={`pathStep-status-${pathStep?.id ?? 'empty'}`}
+                value={selectedTrackNameOption}
+                options={trackNameSuggestions}
+                getOptionLabel={(option) => option.label}
+                getOptionValue={(option) => option.id}
+                onChange={() => {}}
+                small
+                narrow
+                readOnly
+              />
+            </div>
           </>
         )}
         <div className="map-interactions">

front/src/styles/scss/applications/operationalStudies/_itineraryModal.scss

@@ -222,12 +222,29 @@
                   top: -2px; // relative element border width
                 }
               }
+
+              &.invalid {
+                background-color: var(--error60);
+                border-color: var(--error30);
+              }
             }
 
             .path-step-op-name {
               margin-left: 4px;
             }
 
+            .path-step-op-name,
+            .secondary-code,
+            .track-name {
+              &.invalid {
+                border-radius: 3px;
+                box-shadow:
+                  0 0 0 1.5px rgba(255, 104, 104, 1),
+                  0 0 0 0.5px inset rgba(0, 0, 0, 1),
+                  0 1px 3px 0 inset rgba(0, 0, 0, 0.5);
+              }
+            }
+
             .requested-point-block {
               height: 28px;
               background-color: var(--ambientB5);