front: editor: fixes #6439

Details:
- Adds the required attribute to the composition code input so that it
  is red when empty
- Adds a canSave optional function to rangeEdition/tool-factory, to
  allow disabling the save button when state is not correct
- Uses the new canSave function in SpeedEditionTool to disable the save
  button when there are empty composition codes

Author: jacomyal

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

@@ -78,6 +78,7 @@ const SpeedSectionMetadataForm: FC = () => {
           <div key={key} 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"

front/src/applications/editor/tools/rangeEdition/tool-factory.tsx

@@ -48,6 +48,7 @@ interface RangeEditionToolParams<T extends EditorRange> {
   messagesComponent: ComponentType;
   layersComponent: ComponentType<{ map: Map }>;
   leftPanelComponent: ComponentType;
+  canSave?: (state: RangeEditionState<T>) => boolean;
 }
 
 function getRangeEditionTool<T extends EditorRange>({
@@ -57,6 +58,7 @@ function getRangeEditionTool<T extends EditorRange>({
   messagesComponent,
   layersComponent,
   leftPanelComponent,
+  canSave,
 }: RangeEditionToolParams<T>): Tool<RangeEditionState<T>> {
   const layersEntity = getNewEntity();
   function getInitialState(): RangeEditionState<T> {
@@ -91,8 +93,10 @@ function getRangeEditionTool<T extends EditorRange>({
           id: `save-${objectTypeAction}`,
           icon: AiFillSave,
           labelTranslationKey: `Editor.tools.${objectTypeEdition}-edition.actions.save-${objectTypeAction}`,
-          isDisabled({ isLoading }) {
-            return isLoading || false;
+          isDisabled({ isLoading, state }) {
+            if (isLoading) return true;
+            if (canSave) return !canSave(state);
+            return false;
           },
           async onClick({ state, setState, dispatch, infraID }) {
             const { initialEntity, entity } = state;

front/src/applications/editor/tools/rangeEdition/tools.ts

@@ -20,6 +20,11 @@ export const SpeedEditionTool = getRangeEditionTool<SpeedSectionEntity | SpeedSe
   messagesComponent: SpeedSectionMessages,
   layersComponent: SpeedSectionEditionLayers,
   leftPanelComponent: RangeEditionLeftPanel,
+  canSave(state) {
+    const records = state.entity.properties.speed_limit_by_tag || {};
+    const compositionCodes = Object.keys(records);
+    return compositionCodes.every((code) => !!code);
+  },
 });
 
 export const ElectrificationEditionTool = getRangeEditionTool<ElectrificationEntity>({