ERA-11237: Conditional display of event detail location markers on map

public/locales/en-US/reports.json

@@ -173,7 +173,8 @@
                   "doneButton": "Done"
                 },
                 "formPreview": {
-                  "collectionHumanizedValue": "{{collectionLength}} items"
+                  "collectionHumanizedValue": "{{collectionLength}} items",
+                  "jumpToLocationButtonLabel": "Jump to {{field}} location"
                 },
                 "chevronButtonLabel": {
                   "closed": "Open the {{itemTitle}} form preview",

public/locales/es/reports.json

@@ -162,7 +162,8 @@
                   "doneButton": "Hecho"
                 },
                 "formPreview": {
-                  "collectionHumanizedValue": "{{collectionLength}} elementos"
+                  "collectionHumanizedValue": "{{collectionLength}} elementos",
+                  "jumpToLocationButtonLabel": "Ir a la ubicación de {{field}}"
                 },
                 "chevronButtonLabel": {
                   "closed": "Abrir la vista previa del formulario {{itemTitle}}",

public/locales/fr/reports.json

@@ -162,7 +162,8 @@
                   "doneButton": "Terminé"
                 },
                 "formPreview": {
-                  "collectionHumanizedValue": "{{collectionLength}} éléments"
+                  "collectionHumanizedValue": "{{collectionLength}} éléments",
+                  "jumpToLocationButtonLabel": "Aller à l'emplacement de {{field}}"
                 },
                 "chevronButtonLabel": {
                   "closed": "Ouvrir l'aperçu du formulaire {{itemTitle}}",

public/locales/ne-NP/reports.json

@@ -170,8 +170,9 @@
                           "doneButton": "सम्पन्न"
                         },
                         "formPreview": {
-                          "collectionHumanizedValue": "{{collectionLength}} वस्तुहरू"
-                          },
+                          "collectionHumanizedValue": "{{collectionLength}} वस्तुहरू",
+                          "jumpToLocationButtonLabel": "{{field}} स्थानमा जानुहोस्"
+                        },
                         "chevronButtonLabel": {
                           "closed": "{{itemTitle}} फारमको पूर्वावलोकन खोल्नुहोस्",
                           "open": "{{itemTitle}} फारमको पूर्वावलोकन बन्द गर्नुहोस्"

public/locales/pt/reports.json

@@ -162,7 +162,8 @@
                           "doneButton": "Concluído"
                         },
                         "formPreview": {
-                          "collectionHumanizedValue": "{{collectionLength}} itens"
+                          "collectionHumanizedValue": "{{collectionLength}} itens",
+                          "jumpToLocationButtonLabel": "Ir para a localização de {{field}}"
                         },
                         "chevronButtonLabel": {
                           "closed": "Abrir a visualização do formulário {{itemTitle}}",

public/locales/sw/reports.json

@@ -173,7 +173,8 @@
                   "doneButton": "Imekamilika"
                 },
                 "formPreview": {
-                    "collectionHumanizedValue": "{{collectionLength}} vitu"
+                    "collectionHumanizedValue": "{{collectionLength}} vitu",
+                    "jumpToLocationButtonLabel": "Ruka kwenye eneo la {{field}}"
                 },
                 "chevronButtonLabel": {
                   "closed": "Fungua muhtasari wa fomu ya {{itemTitle}}",

src/CursorGpsDisplay/MenuPopover/index.js

@@ -59,6 +59,12 @@ const MenuPopover = ({ buttonRef, className, onClose, ...otherProps }, ref) => {
     }
   };
 
+  const onGpsInputButtonClick = (event) => {
+    event.stopPropagation();
+
+    onJumpToCoordinates();
+  };
+
   useEffect(() => {
     // Select the GPS input on mount so user can type away or navigate.
     gpsInputRef.current.select();
@@ -115,7 +121,7 @@ const MenuPopover = ({ buttonRef, className, onClose, ...otherProps }, ref) => {
         aria-label={t('gpsInputButtonLabel')}
         className={styles.gpsInputButton}
         disabled={!gpsInputValue}
-        onClick={() => onJumpToCoordinates()}
+        onClick={onGpsInputButtonClick}
         ref={gpsInputButtonRef}
         title={t('gpsInputButtonLabel')}
         type="button"

src/LocationPicker/MenuPopover/index.js

@@ -22,6 +22,7 @@ const eventReportTracker = trackEventFactory(EVENT_REPORT_CATEGORY);
 const MenuPopover = ({
   className,
   id,
+  onBlur,
   onChange,
   onClose,
   setLocationButtonRef,
@@ -104,14 +105,34 @@ const MenuPopover = ({
   }, []);
 
   useEffect(() => {
-    const onMouseDown = (event) => !wrapperRef.current.contains(event.target)
-      && !setLocationButtonRef.current.contains(event.target)
-      && onClose();
+    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);
+        }
+      }
+    };
 
     document.addEventListener('mousedown', onMouseDown);
 
     return () => document.removeEventListener('mousedown', onMouseDown);
-  }, [onClose, setLocationButtonRef]);
+  }, [onBlur, onClose, setLocationButtonRef, target]);
 
   return <Popover
       className={`${className} ${styles.menuPopover}`}

src/LocationPicker/MenuPopover/index.test.js

@@ -23,6 +23,7 @@ jest.mock('mapbox-gl', () => ({
 }));
 
 describe('LocationPicker - MenuPopover', () => {
+  const onBlur = jest.fn();
   const onChange = jest.fn();
   const onClose = jest.fn();
   const setLocationButtonRefFocus = jest.fn();
@@ -48,6 +49,7 @@ describe('LocationPicker - MenuPopover', () => {
         <MenuPopover
           className="className"
           id="locationPicker"
+          onBlur={onBlur}
           onChange={onChange}
           onClose={onClose}
           setLocationButtonRef={{
@@ -59,6 +61,7 @@ describe('LocationPicker - MenuPopover', () => {
           style={{}}
           target={{
             current: {
+              contains: () => false,
               offsetWidth: 100,
             },
           }}
@@ -166,7 +169,47 @@ describe('LocationPicker - MenuPopover', () => {
     expect(setLocationButtonRefFocus).toHaveBeenCalledTimes(1);
   });
 
-  test('closes the menu if the user clicks outside', () => {
+  test('closes the menu if the user clicks outside and triggers the blur callback if the click was outside of the picker', () => {
+    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>
+    </>);
+
+    expect(onClose).not.toHaveBeenCalled();
+    expect(onBlur).not.toHaveBeenCalled();
+
+    userEvent.click(screen.getByTestId('outside'));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  test('closes the menu if the user clicks outside but does not trigger the blur callback if the click was inside the picker', () => {
     render(<>
       <div data-testid="outside" />
 
@@ -175,6 +218,7 @@ describe('LocationPicker - MenuPopover', () => {
           <MenuPopover
             className="className"
             id="locationPicker"
+            onBlur={onBlur}
             onChange={onChange}
             onClose={onClose}
             setLocationButtonRef={{
@@ -186,6 +230,7 @@ describe('LocationPicker - MenuPopover', () => {
             style={{}}
             target={{
               current: {
+                contains: () => true,
                 offsetWidth: 100,
               },
             }}
@@ -200,5 +245,6 @@ describe('LocationPicker - MenuPopover', () => {
     userEvent.click(screen.getByTestId('outside'));
 
     expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onBlur).not.toHaveBeenCalled();
   });
 });

src/LocationPicker/index.js

@@ -18,6 +18,7 @@ const LocationPicker = ({
   disabled = false,
   id,
   inputProps = {},
+  jumpToLocationButtonZoom = undefined,
   name = '',
   onBlur = null,
   onChange,
@@ -71,6 +72,7 @@ const LocationPicker = ({
           className={`${styles.input} ${readOnly ? styles.readOnly : ''}`}
           disabled={disabled}
           id={id}
+          onFocus={() => setLocationButtonRef.current.focus()}
           placeholder={placeholder || t('defaultPlaceholder')}
           readOnly
           required={required}
@@ -97,7 +99,7 @@ const LocationPicker = ({
         aria-label={t('jumpToLocationButtonLabel')}
         className={styles.jumpToLocationButton}
         disabled={!value || disabled}
-        onClick={() => jumpToLocation([value.longitude, value.latitude])}
+        onClick={() => jumpToLocation([value.longitude, value.latitude], jumpToLocationButtonZoom)}
         title={t('jumpToLocationButtonLabel')}
         type="button"
       >
@@ -116,6 +118,7 @@ const LocationPicker = ({
       <MenuPopover
         id={id}
         onChange={onChange}
+        onBlur={onBlur}
         onClose={() => setIsMenuPopoverOpen(false)}
         setLocationButtonRef={setLocationButtonRef}
         target={innerRef}

src/LocationPicker/index.test.js

@@ -163,6 +163,14 @@ describe('LocationPicker', () => {
     expect(screen.getByLabelText('Location')).toBeRequired();
   });
 
+  test('forwards the focusing of the input to the set location button', () => {
+    renderLocationPicker();
+
+    fireEvent.focus(screen.getByLabelText('Location'));
+
+    expect(screen.getByLabelText('Open the location picker menu to set a value')).toHaveFocus();
+  });
+
   test('shows a display value in the input', () => {
     renderLocationPicker({
       value: {
@@ -221,7 +229,24 @@ describe('LocationPicker', () => {
     userEvent.click(screen.getByLabelText('Jump to location'));
 
     expect(jumpToLocationMock).toHaveBeenCalledTimes(1);
-    expect(jumpToLocationMock).toHaveBeenCalledWith([10, 15]);
+    expect(jumpToLocationMock).toHaveBeenCalledWith([10, 15], undefined);
+  });
+
+  test('jumps to the location with a custom zoom', () => {
+    renderLocationPicker({
+      jumpToLocationButtonZoom: 20,
+      value: {
+        latitude: 15,
+        longitude: 10,
+      },
+    });
+
+    expect(jumpToLocationMock).not.toHaveBeenCalled();
+
+    userEvent.click(screen.getByLabelText('Jump to location'));
+
+    expect(jumpToLocationMock).toHaveBeenCalledTimes(1);
+    expect(jumpToLocationMock).toHaveBeenCalledWith([10, 15], 20);
   });
 
   test('opens the menu popover', () => {

src/LocationPicker/styles.module.scss

@@ -50,7 +50,7 @@
       background-color: colors.$disabled-field-gray;
     }
 
-    &:focus-visible:not(:disabled) {
+    &:focus:not(:disabled) {
       border: 2px solid colors.$bright-blue;
     }
 

src/ReportManager/DetailsSection/SchemaForm/constants.js

@@ -32,6 +32,8 @@ export const HEADER_ELEMENT_SIZES = {
   SMALL: 'SMALL',
 };
 
+export const JUMP_TO_LOCATION_BUTTON_ZOOM = 20;
+
 export const ROOT_CANVAS_ID = 'root';
 
 export const TEXT_ELEMENT_INPUT_TYPES = {

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/Item/FormModal/index.js

@@ -12,6 +12,7 @@ const FormModal = ({
   breadcrumbs,
   columns,
   errors,
+  focusLocationMarker,
   formData,
   isOpen,
   itemName,
@@ -74,6 +75,7 @@ const FormModal = ({
             formData[fieldId],
             onFieldChange,
             errors?.[fieldId],
+            focusLocationMarker,
             [...breadcrumbs, { display: title, id: fieldId }]
           ))}
         </div>
@@ -87,6 +89,7 @@ const FormModal = ({
             formData[fieldId],
             onFieldChange,
             errors?.[fieldId],
+            focusLocationMarker,
             [...breadcrumbs, { display: title, id: fieldId }]
           ))}
         </div>}

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/Item/FormModal/index.test.js

@@ -8,6 +8,7 @@ import { mockStore } from '../../../../../../../../__test-helpers/MockStore';
 import FormModal from './';
 
 describe('ReportManager - DetailsSection - SchemaForm - fields - Collection - SortableList - Item - FormModal', () => {
+  const focusLocationMarker = jest.fn();
   const onCancel = jest.fn();
   const onDeleteItem = jest.fn();
   const onDone = jest.fn();
@@ -31,6 +32,7 @@ describe('ReportManager - DetailsSection - SchemaForm - fields - Collection - So
         breadcrumbs={[{ id: '1', display: 'Item 1' }, { id: '2', display: 'Item 2' }]}
         columns={1}
         errors={{}}
+        focusLocationMarker={focusLocationMarker}
         formData={{ 'field-1': 'Value 1', 'field-2': 'Value 2' }}
         isOpen
         itemName="Item"
@@ -115,13 +117,15 @@ describe('ReportManager - DetailsSection - SchemaForm - fields - Collection - So
       'Value 1',
       onFieldChange,
       undefined,
+      focusLocationMarker,
       [{ id: '1', display: 'Item 1' }, { id: '2', display: 'Item 2' }, { id: 'field-1', display: 'Item 3' }]
     );
     expect(renderField).toHaveBeenCalledWith(
       'field-2',
       'Value 2',
       onFieldChange,
       undefined,
+      focusLocationMarker,
       [{ id: '1', display: 'Item 1' }, { id: '2', display: 'Item 2' }, { id: 'field-2', display: 'Item 3' }]
     );
   });