Merge pull request #1662 from solita-sabinaf/TIS-736/locate_stop_point

Add button to locate a stop point from the editor form on the map

src/components/StopPointsEditor/Generic/GenericStopPointEditor.tsx

@@ -7,7 +7,7 @@ import DeleteButton from 'components/DeleteButton/DeleteButton';
 import { getErrorFeedback } from 'helpers/errorHandling';
 import { validateStopPoint } from 'helpers/validation';
 import usePristine from 'hooks/usePristine';
-import { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useIntl } from 'react-intl';
 import {
   BoardingTypeSelect,
@@ -20,6 +20,7 @@ import {
 } from '../common/FrontTextTextField';
 import { QuayRefField, useOnQuayRefChange } from '../common/QuayRefField';
 import { StopPointEditorProps } from '../common/StopPointEditorProps';
+import SandboxFeature from '../../../ext/SandboxFeature';
 
 export const GenericStopPointEditor = ({
   order,
@@ -31,6 +32,7 @@ export const GenericStopPointEditor = ({
   onDelete,
   canDelete,
   flexibleLineType,
+  onFocusedQuayIdUpdate,
 }: StopPointEditorProps) => {
   const { formatMessage } = useIntl();
   const {
@@ -48,6 +50,10 @@ export const GenericStopPointEditor = ({
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
+  const onDeleteDialogOpen = useCallback((isOpen: boolean) => {
+    setDeleteDialogOpen(isOpen);
+  }, []);
+
   return (
     <div className="stop-point">
       <div className="stop-point-element">
@@ -80,10 +86,23 @@ export const GenericStopPointEditor = ({
           />
         </div>
 
-        <DeleteButton
-          disabled={!canDelete}
-          onClick={() => setDeleteDialogOpen(true)}
-          title={formatMessage({ id: 'editorDeleteButtonText' })}
+        <SandboxFeature
+          feature={'JourneyPatternStopPointMap/StopPointButtonGroup'}
+          renderFallback={() => (
+            <DeleteButton
+              thin={true}
+              disabled={!canDelete}
+              onClick={() => {
+                onDeleteDialogOpen(true);
+              }}
+              title={formatMessage({ id: 'editorDeleteButtonText' })}
+            />
+          )}
+          stopPoint={stopPoint}
+          onDeleteDialogOpen={onDeleteDialogOpen}
+          flexibleLineType={flexibleLineType}
+          onFocusedQuayIdUpdate={onFocusedQuayIdUpdate}
+          canDelete={canDelete}
         />
 
         <ConfirmDialog

src/components/StopPointsEditor/Generic/GenericStopPointsEditor.tsx

@@ -9,7 +9,7 @@ import SandboxFeature from '../../../ext/SandboxFeature';
 import { useConfig } from '../../../config/ConfigContext';
 import { SmallAlertBox } from '@entur/alert';
 import '../styles.scss';
-import { useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export const GenericStopPointsEditor = ({
   pointsInSequence,
@@ -24,6 +24,9 @@ export const GenericStopPointsEditor = ({
   const { formatMessage } = useIntl();
   const { sandboxFeatures } = useConfig();
   const isMapEnabled = sandboxFeatures?.JourneyPatternStopPointMap;
+  const [focusedQuayId, setFocusedQuayId] = useState<string | undefined | null>(
+    undefined,
+  );
 
   useEffect(() => {
     // if map isn't enabled, let's produce two empty stop points
@@ -32,6 +35,13 @@ export const GenericStopPointsEditor = ({
     }
   }, []);
 
+  const onFocusedQuayIdUpdate = useCallback(
+    (quayId: string | undefined | null) => {
+      setFocusedQuayId(quayId);
+    },
+    [],
+  );
+
   return (
     <section style={{ marginTop: '2em' }}>
       <Heading3>{formatMessage({ id: 'editorStopPoints' })}</Heading3>
@@ -64,6 +74,7 @@ export const GenericStopPointsEditor = ({
               onDelete={() => deleteStopPoint(pointIndex)}
               canDelete={pointsInSequence.length > 2}
               flexibleLineType={flexibleLineType}
+              onFocusedQuayIdUpdate={onFocusedQuayIdUpdate}
             />
           ))}
         </div>
@@ -73,6 +84,8 @@ export const GenericStopPointsEditor = ({
           addStopPoint={addStopPoint}
           deleteStopPoint={deleteStopPoint}
           transportMode={transportMode}
+          focusedQuayId={focusedQuayId}
+          onFocusedQuayIdUpdate={onFocusedQuayIdUpdate}
         />
       </div>
       <AddButton

src/components/StopPointsEditor/common/StopPointEditorProps.ts

@@ -13,4 +13,5 @@ export type StopPointEditorProps = {
   canDelete?: boolean;
   flexibleStopPlaces?: FlexibleStopPlace[];
   flexibleLineType?: FlexibleLineType;
+  onFocusedQuayIdUpdate?: (quayId: string | undefined | null) => void;
 };

src/components/StopPointsEditor/styles.scss

@@ -75,11 +75,30 @@
         > :last-child {
           margin-right: 0;
         }
+
+        .buttons-group {
+          display: flex;
+          flex-direction: column;
+          min-width: fit-content;
+          margin-left: 0.25rem;
+        }
       }
     }
 
     > :last-child {
       border-bottom: none;
     }
   }
+
+  #locate-button {
+    margin: 0;
+    padding: 0 0.5rem;
+    min-width: fit-content;
+    width: fit-content;
+    margin-top: 1.5rem;
+
+    svg {
+      margin-right: 0;
+    }
+  }
 }

src/ext/Fintraffic/CustomStyle/styles.scss

@@ -589,6 +589,10 @@ section .notices {
   margin-left: 1rem;
 }
 
+.stop-point #locate-button {
+  margin-left: 1rem;
+}
+
 .modal-content .eds-form-control-wrapper {
   margin-top: 1.5rem;
 }

src/ext/JourneyPatternStopPointMap/ClusterMarker.tsx

@@ -1,5 +1,5 @@
 import { Marker, useMap } from 'react-leaflet';
-import { getClusterIcon } from './markers';
+import { getClusterIcon } from './markerIcons';
 
 interface ClusterMarkerProps {
   longitude: number;