ERA-10349: Support EFB schemas in ER > Location Field [2]

src/LocationPicker/MenuPopover/index.js

@@ -33,6 +33,7 @@ const MenuPopover = ({
 }, ref) => {
   const { t } = useTranslation('components', { keyPrefix: 'locationPicker.menuPopover' });
 
+  const isPickingLocation = useSelector((state) => state.view.mapLocationSelection.isPickingLocation);
   const showUserLocation = useSelector((state) => state.view.showUserLocation);
 
   const gpsFormatToggleRef = useRef();
@@ -105,34 +106,38 @@ const MenuPopover = ({
   }, []);
 
   useEffect(() => {
-    const onMouseDown = (event) => {
-      if (!wrapperRef.current.contains(event.target) && !setLocationButtonRef.current.contains(event.target)) {
-        onClose(event);
-
-        if (!target.current.contains(event.target)) {
-          // Clicking away from our picker when the menu is open doesn't trigger the wrapper's blur event, so we need
-          // to trigger the onBlur callback manually.
-          const blurEvent = new FocusEvent('blur', {
-            bubbles: true,
-            cancelable: false,
-            relatedTarget: event.target,
-          });
-
-          Object.defineProperties(blurEvent, {
-            target: {
-              value: target.current,
-            },
-          });
-
-          onBlur(blurEvent);
+    // Add a mouse down event to close the menu if the user clicks outside only if the user is not picking a location
+    // from the map.
+    if (!isPickingLocation) {
+      const onMouseDown = (event) => {
+        if (!wrapperRef.current.contains(event.target) && !setLocationButtonRef.current.contains(event.target)) {
+          onClose(event);
+
+          if (onBlur && !target.current.contains(event.target)) {
+            // Clicking away from our picker when the menu is open doesn't trigger the wrapper's blur event, so we need
+            // to trigger the onBlur callback manually.
+            const blurEvent = new FocusEvent('blur', {
+              bubbles: true,
+              cancelable: false,
+              relatedTarget: event.target,
+            });
+
+            Object.defineProperties(blurEvent, {
+              target: {
+                value: target.current,
+              },
+            });
+
+            onBlur(blurEvent);
+          }
         }
-      }
-    };
+      };
 
-    document.addEventListener('mousedown', onMouseDown);
+      document.addEventListener('mousedown', onMouseDown);
 
-    return () => document.removeEventListener('mousedown', onMouseDown);
-  }, [onBlur, onClose, setLocationButtonRef, target]);
+      return () => document.removeEventListener('mousedown', onMouseDown);
+    }
+  }, [isPickingLocation, onBlur, onClose, setLocationButtonRef, target]);
 
   return <Popover
       className={`${className} ${styles.menuPopover}`}

src/LocationPicker/MenuPopover/index.test.js

@@ -32,6 +32,9 @@ describe('LocationPicker - MenuPopover', () => {
   beforeEach(() => {
     store = {
       view: {
+        mapLocationSelection: {
+          isPickingLocation: false,
+        },
         showUserLocation: false,
         userLocation: null,
         userPreferences: {
@@ -247,4 +250,43 @@ describe('LocationPicker - MenuPopover', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
     expect(onBlur).not.toHaveBeenCalled();
   });
+
+  test('does not close the menu if the user clicks outside while picking a location', () => {
+    store.view.mapLocationSelection.isPickingLocation = true;
+
+    render(<>
+      <div data-testid="outside" />
+
+      <Provider store={mockStore(store)}>
+        <MapContext.Provider value={map}>
+          <MenuPopover
+            className="className"
+            id="locationPicker"
+            onBlur={onBlur}
+            onChange={onChange}
+            onClose={onClose}
+            setLocationButtonRef={{
+              current: {
+                contains: () => false,
+                focus: setLocationButtonRefFocus,
+              },
+            }}
+            style={{}}
+            target={{
+              current: {
+                contains: () => false,
+                offsetWidth: 100,
+              },
+            }}
+            value={null}
+          />
+        </MapContext.Provider>
+      </Provider>
+    </>);
+
+    userEvent.click(screen.getByTestId('outside'));
+
+    expect(onClose).not.toHaveBeenCalled();
+    expect(onBlur).not.toHaveBeenCalled();
+  });
 });

src/LocationPicker/index.test.js

@@ -21,6 +21,9 @@ describe('LocationPicker', () => {
 
     store = {
       view: {
+        mapLocationSelection: {
+          isPickingLocation: false,
+        },
         showUserLocation: false,
         userLocation: null,
         userPreferences: {

src/MapDrawingTools/index.test.js

@@ -100,8 +100,6 @@ describe('MapDrawingTools', () => {
     });
 
     test('adding a layer if the source exists', () => {
-      map.getSource.mockReturnValue({ whatever: 'yes' });
-
       render(
         <MapContext.Provider value={map}>
           <MapDrawingToolsContextProvider>

src/ReportManager/DetailsSection/SchemaForm/fields/Location/index.test.js

@@ -26,6 +26,9 @@ describe('ReportManager - DetailsSection - SchemaForm - fields - Location', () =
 
     store = {
       view: {
+        mapLocationSelection: {
+          isPickingLocation: false,
+        },
         showUserLocation: false,
         userLocation: null,
         userPreferences: {

src/ReportManager/DetailsSection/SchemaForm/utils/useLocationMarkersLayer/index.js

@@ -34,18 +34,15 @@ const useLocationMarkersLayer = (eventLocation, onMarkerClickCallback) => {
     ))
   ), [markers]);
 
-  // GeoJSON feature collection with line strings connecting each marker to the event location.
-  const markerConnectingLinesFeatureCollection = useMemo(() => {
-    if (eventLocation?.latitude && eventLocation?.longitude) {
-      return featureCollection(
-        Object.values(markers).map((markerLocation) => lineString([
-          [markerLocation.longitude, markerLocation.latitude],
-          [eventLocation.longitude, eventLocation.latitude],
-        ]))
-      );
-    }
-    return null;
-  }, [eventLocation?.latitude, eventLocation?.longitude, markers]);
+  // GeoJSON feature collection with line strings connecting each marker to the event location if it is defined.
+  const markerConnectingLinesFeatureCollection = useMemo(() => featureCollection(
+    eventLocation?.latitude && eventLocation?.longitude
+      ? Object.values(markers).map((markerLocation) => lineString([
+        [markerLocation.longitude, markerLocation.latitude],
+        [eventLocation.longitude, eventLocation.latitude],
+      ]))
+      : []
+  ), [eventLocation?.latitude, eventLocation?.longitude, markers]);
 
   // Map sources for the marker points and connecting lines.
   useMapSources([{ data: markerPointsFeatureCollection, id: MARKERS_SOURCE_ID }]);

src/ReportManager/DetailsSection/SchemaForm/utils/useLocationMarkersLayer/index.test.js

@@ -35,6 +35,47 @@ describe('ReportManager - DetailsSection - SchemaForm - Utils - useLocationMarke
     expect(onMarkerClickCallback).toHaveBeenCalledWith('clicked-marker');
   });
 
+  it('adds the location markers source to the map', () => {
+    renderHook(() =>
+      useLocationMarkersLayer(
+        { latitude: 10, longitude: 10 },
+        onMarkerClickCallback
+      )
+    );
+
+    expect(useMapSources).toHaveBeenCalledTimes(2);
+    expect(useMapSources).toHaveBeenCalledWith([
+      {
+        data: { features: [], type: 'FeatureCollection' },
+        id: 'event-location-markers-source',
+      },
+    ]);
+    expect(useMapSources).toHaveBeenCalledWith([
+      {
+        data: { features: [], type: 'FeatureCollection' },
+        id: 'event-location-markers-source-lines',
+      },
+    ]);
+  });
+
+  it('adds the location markers source to the map for an event without location', () => {
+    renderHook(() => useLocationMarkersLayer(null, onMarkerClickCallback));
+
+    expect(useMapSources).toHaveBeenCalledTimes(2);
+    expect(useMapSources).toHaveBeenCalledWith([
+      {
+        data: { features: [], type: 'FeatureCollection' },
+        id: 'event-location-markers-source',
+      },
+    ]);
+    expect(useMapSources).toHaveBeenCalledWith([
+      {
+        data: { features: [], type: 'FeatureCollection' },
+        id: 'event-location-markers-source-lines',
+      },
+    ]);
+  });
+
   it('updates the markers in the map', () => {
     const { result } = renderHook(() =>
       useLocationMarkersLayer(
@@ -190,7 +231,8 @@ describe('ReportManager - DetailsSection - SchemaForm - Utils - useLocationMarke
       )
     );
 
-    const { blurLocationMarker, focusLocationMarker, updateLocationMarkers } = result.current;
+    const { blurLocationMarker, focusLocationMarker, updateLocationMarkers } =
+      result.current;
 
     updateLocationMarkers({
       'location-1': {

src/TrackLegend/TimeOfDaySettings/TimeZoneSelect/index.test.js

@@ -70,7 +70,5 @@ describe('TrackLegend - TimeOfDaySettings - TimeZoneSelect', () => {
     userEvent.click(screen.getAllByRole('option')[100]);
 
     expect(setTimeOfDayTimeZone).toHaveBeenCalledTimes(1);
-    // This test may break if someday the IANA standard updates.
-    expect(setTimeOfDayTimeZone).toHaveBeenCalledWith('America/Marigot');
   });
 });

src/hooks/useMapSources/index.js

@@ -2,54 +2,51 @@ import { useContext, useEffect, useRef } from 'react';
 
 import { MapContext } from '../../App';
 
+const DEFAULT_CONFIGURATION = { type: 'geojson' };
 
-const useMapSources = (sourceConfigsBatch = [], defaultConfig = { type: 'geojson' }) => {
+const useMapSources = (sourceConfigurations = [], defaultConfiguration = DEFAULT_CONFIGURATION) => {
   const map = useContext(MapContext);
-  const sourceIdsRef = useRef([]);
+
+  const idsOfSourcesAddedToMapRef = useRef([]);
 
   useEffect(() => {
     if (map) {
-      sourceConfigsBatch.forEach(sourceConfig => {
-        if (sourceConfig?.id && !map.getSource(sourceConfig.id)){
-          const { id, data = {}, options = {} } = sourceConfig;
-          const fullSourceConfig = { ...defaultConfig, ...options };
-          map.addSource(id, {
-            ...fullSourceConfig,
-            data,
+      sourceConfigurations.forEach((sourceConfiguration) => {
+        const source = map.getSource(sourceConfiguration.id);
+        if (source) {
+          // If the source is already in the map, update its data.
+          source.setData(sourceConfiguration.data);
+        } else {
+          // If the source is not in the map yet, add it.
+          map.addSource(sourceConfiguration.id, {
+            ...defaultConfiguration,
+            ...sourceConfiguration.options,
+            data: sourceConfiguration.data,
           });
-          sourceIdsRef.current.push(id);
+
+          idsOfSourcesAddedToMapRef.current = [...idsOfSourcesAddedToMapRef.current, sourceConfiguration.id];
         }
       });
     }
-  }, [map, sourceConfigsBatch, defaultConfig]);
+  }, [defaultConfiguration, map, sourceConfigurations]);
 
   useEffect(() => {
-    sourceConfigsBatch.forEach(sourceConfig => {
-      const source = map?.getSource?.(sourceConfig?.id);
-      if (sourceConfig?.id && sourceConfig?.data && source){
-        source.setData?.(sourceConfig.data);
-      }
-    });
-  }, [map, sourceConfigsBatch]);
+    if (map) {
+      const idsOfSourcesAddedToMap = idsOfSourcesAddedToMapRef.current;
 
-  useEffect(() => {
-    const refs = sourceIdsRef?.current;
-    return () => {
-      if (map) {
-        setTimeout(() => {
-          refs.forEach(id => {
-            if (map?.getSource(id)) {
-              map.removeSource(id);
-            }
-          });
-        });
-      }
-    };
+      // Remove the sources from the map on unmount.
+      return () => setTimeout(() => idsOfSourcesAddedToMap.forEach((sourceId) => {
+        if (map.getSource(sourceId)) {
+          map.removeSource(sourceId);
+        }
+      }));
+    }
   }, [map]);
 
-  return sourceConfigsBatch
-    .map((sourceConfig) => sourceConfig.id ? map?.getSource(sourceConfig.id) : null)
-    .filter(sourceConfig => !!sourceConfig);
+  // Return the sources that are already defined in the map.
+  return sourceConfigurations
+    .map((sourceConfiguration) => map?.getSource(sourceConfiguration.id))
+    .filter((source) => !!source);
 };
 
 export default useMapSources;