front: add suggestions using existing list of tags

Author: theocrsb

front/public/locales/en/translation.json

@@ -420,6 +420,7 @@
           "save-speed-section": "Save the speed limit"
         },
         "add-new-speed-limit": "Add new speed limit",
+        "add-new-tag": "Add a new composition code",
         "add-sign": "Add a sign from {{signType}} type",
         "add-track-range": "Click to link to:",
         "additional-speed-limit": "Additional speed limits",

front/public/locales/fr/translation.json

@@ -403,6 +403,7 @@
           "save-speed-section": "Sauvegarder la vitesse limite"
         },
         "add-new-speed-limit": "Ajouter une nouvelle limitation",
+        "add-new-tag": "Ajouter un nouveau code de composition",
         "add-sign": "Ajouter un panneau de type {{signType}}",
         "add-track-range": "Cliquer pour lier à :",
         "additional-speed-limit": "Limitation de vitesse additionnelles",

front/src/applications/editor/tools/rangeEdition/components/RangeEditionLeftPanel.tsx

@@ -99,6 +99,14 @@ const RangeEditionLeftPanel = () => {
     { skip: !infraID }
   );
 
+  const { data: speedLimitTags } =
+    osrdEditoastApi.endpoints.getInfraByInfraIdSpeedLimitTags.useQuery(
+      {
+        infraId: infraID as number,
+      },
+      { skip: !infraID }
+    );
+
   const updateSpeedSectionExtensions = (
     extensions: SpeedSectionEntity['properties']['extensions']
   ) => {
@@ -212,11 +220,9 @@ const RangeEditionLeftPanel = () => {
       <legend className="mb-4">
         {t(`Editor.obj-types.${isSpeedSection ? 'SpeedSection' : 'Electrification'}`)}
       </legend>
-      {initialEntity.objType === 'SpeedSection' ? (
-        <SpeedSectionMetadataForm />
-      ) : (
-        voltages && <ElectrificationMetadataForm voltages={voltages} />
-      )}
+      {initialEntity.objType === 'SpeedSection'
+        ? speedLimitTags && <SpeedSectionMetadataForm speedLimitTags={speedLimitTags} />
+        : voltages && <ElectrificationMetadataForm voltages={voltages} />}
       <hr />
       {initialEntity.objType === 'SpeedSection' && (
         <>

front/src/applications/editor/tools/rangeEdition/speedSection/SpeedSectionMetadataForm.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, useContext, useEffect, useMemo, useState } from 'react';
+import React, { type FC, useContext, useEffect, useState } from 'react';
 
 import { cloneDeep, isEmpty, isEqual, map, size } from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -13,6 +13,7 @@ import type {
   SpeedSectionEntity,
 } from 'applications/editor/tools/rangeEdition/types';
 import type { ExtendedEditorContextType } from 'applications/editor/types';
+import SelectImprovedSNCF from 'common/BootstrapSNCF/SelectImprovedSNCF';
 
 import SpeedInput from './SpeedInput';
 
@@ -29,7 +30,9 @@ const getNewSpeedLimitTag = (
   return newSpeedLimitTag;
 };
 
-const SpeedSectionMetadataForm: FC = () => {
+type SpeedSectionMetadataFormProps = { speedLimitTags: string[] };
+
+const SpeedSectionMetadataForm: FC<SpeedSectionMetadataFormProps> = ({ speedLimitTags }) => {
   const { t } = useTranslation();
   const {
     state: { entity, error },
@@ -40,15 +43,6 @@ const SpeedSectionMetadataForm: FC = () => {
     { id: string; tag: string; value?: number }[]
   >(map(entity.properties.speed_limit_by_tag, (value, tag) => ({ tag, value, id: nextId() })));
 
-  const tagCounts = useMemo(
-    () =>
-      tagSpeedLimits.reduce(
-        (iter: Record<string, number>, { tag }) => ({ ...iter, [tag]: (iter[tag] || 0) + 1 }),
-        {}
-      ),
-    [tagSpeedLimits]
-  );
-
   useEffect(() => {
     const newState: Partial<RangeEditionState<SpeedSectionEntity>> = {};
     const newSpeedLimitByTags = tagSpeedLimits.reduce(
@@ -103,24 +97,24 @@ const SpeedSectionMetadataForm: FC = () => {
         )}
         {tagSpeedLimits.map(({ id, tag, value }, currentIndex) => (
           <div key={id} className="form-group field field-string">
-            <div className="d-flex flex-row align-items-center">
-              <input
-                required
-                className="form-control flex-grow-2 flex-shrink-1 mr-2 px-2"
-                placeholder=""
-                type="text"
-                value={tag}
-                pattern={
-                  // Insert an invalid pattern to force the error appearance when tag is redundant
-                  tagCounts[tag] && tagCounts[tag] > 1 ? `not ${tag}` : undefined
-                }
-                onChange={(e) => {
-                  const newKey = e.target.value;
-                  setTagSpeedLimits((state) =>
-                    state.map((pair, i) => (i === currentIndex ? { ...pair, tag: newKey } : pair))
-                  );
-                }}
-              />
+            <div className="d-flex flex-row align-items-center my-1">
+              <div className="flex-grow-1 mr-2">
+                <SelectImprovedSNCF
+                  options={speedLimitTags}
+                  value={tag}
+                  onChange={(tagSelected) => {
+                    setTagSpeedLimits((state) =>
+                      state.map((pair, i) =>
+                        i === currentIndex ? { ...pair, tag: tagSelected } : pair
+                      )
+                    );
+                  }}
+                  withSearch
+                  withNewValueInput
+                  addButtonTitle={t('Editor.tools.speed-edition.add-new-tag')}
+                  bgWhite
+                />
+              </div>
               <SpeedInput
                 className="form-control flex-shrink-0 px-2"
                 style={{ width: '5em' }}