front: fix format time on arrival time column

front/public/locales/en/timesStops.json

@@ -5,5 +5,6 @@
   "receptionOnClosedSignal": "Reception on Closed Signal",
   "theoreticalMargin": "Theoretical Margin",
   "theoreticalMarginPlaceholder": "% or min/100km",
-  "waypoint": "Waypoint {{id}}"
+  "waypoint": "Waypoint {{id}}",
+  "noPathLoaded": "No path loaded"
 }

front/public/locales/fr/timesStops.json

@@ -5,5 +5,6 @@
   "receptionOnClosedSignal": "Réception sur signal fermé",
   "theoreticalMargin": "Marge théorique",
   "theoreticalMarginPlaceholder": "% ou min/100km",
-  "waypoint": "Via {{id}}"
+  "waypoint": "Via {{id}}",
+  "noPathLoaded": "Aucun chemin chargé"
 }

front/src/applications/operationalStudies/views/v2/ManageTrainScheduleV2.tsx

@@ -122,7 +122,7 @@ const ManageTrainScheduleV2 = () => {
       </div>
     ),
     label: t('tabs.timesStops'),
-    content: pathProperties && <TimesStops pathProperties={pathProperties} pathSteps={pathSteps} />,
+    content: <TimesStops pathProperties={pathProperties} pathSteps={pathSteps} />,
   };
 
   const tabSimulationSettings = {

front/src/modules/timesStops/TimeColumnComponent.tsx

@@ -1,37 +1,44 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
-import cx from 'classnames';
 import type { CellComponent, CellProps, Column } from 'react-datasheet-grid/dist/types';
 
 const TimeComponent = ({
   focus,
   rowData,
+  active,
   setRowData,
 }: CellProps<string | null | undefined, string>) => {
   const ref = useRef<HTMLInputElement>(null);
+  const [tempTimeValue, setTempTimeValue] = useState<string | null | undefined>(rowData);
 
-  useLayoutEffect(() => {
-    if (focus) {
+  useEffect(() => {
+    if (active) {
       ref.current?.select();
     } else {
       ref.current?.blur();
     }
-  }, [focus]);
+  }, [active]);
 
   return (
     <input
-      className={cx('dsg-input', !focus && 'dsg-hide-time-picker')}
+      className="dsg-input"
       type="time"
       tabIndex={-1}
       ref={ref}
+      step={2}
       style={{
         pointerEvents: focus ? 'auto' : 'none',
-        opacity: rowData || focus ? undefined : 0,
+        opacity: rowData || active ? undefined : 0,
       }}
-      value={rowData ?? ''}
+      value={tempTimeValue ?? ''}
       onChange={(e) => {
-        const time = e.target.value;
-        setRowData(time);
+        setTempTimeValue(e.target.value);
+      }}
+      onBlur={() => {
+        // To prevent the operational point to be transformed into a via if we leave the cell empty after focusing it
+        if (rowData !== tempTimeValue) {
+          setRowData(tempTimeValue);
+        }
       }}
     />
   );

front/src/modules/timesStops/TimesStops.tsx

@@ -22,7 +22,7 @@ import { removeElementAtIndex } from 'utils/array';
 import timeColumn from './TimeColumnComponent';
 
 type TimesStopsProps = {
-  pathProperties: ManageTrainSchedulePathProperties;
+  pathProperties: ManageTrainSchedulePathProperties | undefined;
   pathSteps?: (PathStep | null)[];
 };
 
@@ -63,6 +63,15 @@ const createDeleteViaButton = ({
 
 const TimesStops = ({ pathProperties, pathSteps = [] }: TimesStopsProps) => {
   const { t } = useTranslation('timesStops');
+
+  if (!pathProperties) {
+    return (
+      <div className="d-flex justify-content-center align-items-center h-100">
+        <p className="pt-1 px-5">{t('noPathLoaded')}</p>
+      </div>
+    );
+  }
+
   const dispatch = useAppDispatch();
   const { upsertViaFromSuggestedOP, updatePathSteps } = useOsrdConfActions();
 
@@ -103,6 +112,10 @@ const TimesStops = ({ pathProperties, pathSteps = [] }: TimesStopsProps) => {
           })
         ),
         title: `${t('stopTime')}`,
+
+        // We should not be able to edit the stopping time of the origin and destination
+        disabled: ({ rowIndex }) =>
+          rowIndex === 0 || rowIndex === pathProperties.allVias?.length - 1,
         grow: 0.6,
       },
       {
@@ -111,6 +124,8 @@ const TimesStops = ({ pathProperties, pathSteps = [] }: TimesStopsProps) => {
           checkboxColumn as Partial<Column<boolean | undefined>>
         ),
         title: t('receptionOnClosedSignal'),
+
+        // We should not be able to edit the reception on close signal of the origin
         grow: 0.6,
         disabled: ({ rowData }) => !rowData.stopFor,
       },