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

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/index.js

@@ -71,6 +71,7 @@ const LocationPicker = ({
           className={`${styles.input} ${readOnly ? styles.readOnly : ''}`}
           disabled={disabled}
           id={id}
+          onFocus={() => setLocationButtonRef.current.focus()}
           placeholder={placeholder || t('defaultPlaceholder')}
           readOnly
           required={required}

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/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/index.js

@@ -21,6 +21,7 @@ const Item = ({
   collectionDetails,
   errors,
   fields,
+  focusLocationMarker,
   formData,
   id,
   isDragging = false,
@@ -118,7 +119,13 @@ const Item = ({
     + (isDragging ? ` ${styles.isDragging}` : '')
     + (isDragOverlay ? ` ${styles.dragOverlay}` : '')
     + (hasError ? ` ${styles.error}` : '');
-  return <li className={itemClassName} data-testid="schema-form-collection-item" ref={ref} {...otherProps}>
+  return <li
+      className={itemClassName}
+      data-testid="schema-form-collection-item"
+      id={`${collectionDetails.value}.${id}`}
+      ref={ref}
+      {...otherProps}
+    >
     <div className={styles.header}>
       <div
         aria-controls={`collectionForm-${title}`}
@@ -189,6 +196,7 @@ const Item = ({
     {!isDragOverlay && <FormModal
       breadcrumbs={breadcrumbs}
       columns={collectionDetails.columns}
+      focusLocationMarker={focusLocationMarker}
       formData={formData}
       errors={errors}
       isOpen={isFormModalOpen}

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/Item/styles.module.scss

@@ -21,7 +21,7 @@
     }
   }
 
-  &:focus-visible:not(.isDragging) {
+  &:focus:not(.isDragging) {
     outline: colors.$bright-blue auto 1px;
 
     .header {

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

@@ -41,6 +41,7 @@ const SortableList = ({
   breadcrumbs,
   collectionDetails,
   fields,
+  focusLocationMarker,
   items,
   onItemChange,
   onItemDelete,
@@ -144,6 +145,7 @@ const SortableList = ({
           collectionDetails={collectionDetails}
           errors={item.error}
           fields={fields}
+          focusLocationMarker={focusLocationMarker(index)}
           formData={item.formData}
           id={item.id}
           isFormModalOpen={item.isFormModalOpen}

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/index.js

@@ -20,6 +20,7 @@ const Collection = ({
   details,
   error,
   fields,
+  focusLocationMarker,
   id,
   onFieldChange,
   renderField,
@@ -131,6 +132,11 @@ const Collection = ({
     setItems([...items, { id: lastAddedItemIdRef.current, isFormModalOpen: true, isFormPreviewOpen: false }]);
   };
 
+  // If a location field from an item requests to focus its location marker, prefix the marker id with the collection
+  // id and the item index.
+  const focusLocationMarkerFromItem = (itemIndex) => (markerId) =>
+    focusLocationMarker(`${id}.${itemIndex}.${markerId}`);
+
   return <div
       aria-errormessage={hasError ? `${id}-description` : undefined}
       aria-labelledby={`${id}-label`}
@@ -168,6 +174,7 @@ const Collection = ({
             breadcrumbs={breadcrumbs}
             collectionDetails={details}
             fields={fields}
+            focusLocationMarker={focusLocationMarkerFromItem}
             // Merge the value, error and items array into a single array of item objects.
             items={items
               .filter((_, index) => !!value[index])

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

@@ -1,13 +1,14 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect } from 'react';
 
 import LocationPicker from '../../../../../LocationPicker';
 
 import styles from './styles.module.scss';
 
 const Location = ({
-  autofillDefaultInput: _autofillDefaultInput,
+  blurLocationMarker,
   details,
   error,
+  focusLocationMarker,
   id,
   onFieldChange,
   value = null,
@@ -16,6 +17,10 @@ const Location = ({
   const hasDescription = !!details.description && !hasError;
   const label = details.isRequired ? `${details.label} *` : details.label;
 
+  // When closing a collection item form modal, the location fields get unmounted without triggering the blur event, so
+  // we need to blur the location markers manually.
+  useEffect(() => () => blurLocationMarker(), [blurLocationMarker]);
+
   return <div className={styles.text} data-testid={`schema-form-location-field-${id}`}>
     <label className={`${styles.label} ${hasError ? styles.error : ''}`} htmlFor={id}>{label}</label>
 
@@ -27,7 +32,9 @@ const Location = ({
         'aria-invalid': hasError,
         'aria-required': details.isRequired,
       }}
+      onBlur={() => blurLocationMarker()}
       onChange={(newLocation) => onFieldChange(id, newLocation || undefined)}
+      onFocus={() => focusLocationMarker(id)}
       value={value}
     />
 

src/ReportManager/DetailsSection/SchemaForm/fields/Section/index.js

@@ -4,7 +4,16 @@ import styles from './styles.module.scss';
 
 // Sections are just visual elements that are not present in the form data structure. Thus, fields contained by
 // sections are in the root objects of form data and field errors.
-const Section = ({ details, fieldErrors, formData, id, onFieldChange, onFieldErrorsChange, renderField }) => {
+const Section = ({
+  details,
+  fieldErrors,
+  focusLocationMarker,
+  formData,
+  id,
+  onFieldChange,
+  onFieldErrorsChange,
+  renderField,
+}) => {
   const onColumnFieldChange = (fieldId, value, error) => {
     onFieldChange(fieldId, value);
     onFieldErrorsChange({ ...fieldErrors, [fieldId]: error });
@@ -25,7 +34,8 @@ const Section = ({ details, fieldErrors, formData, id, onFieldChange, onFieldErr
           fieldId,
           formData[fieldId],
           onColumnFieldChange,
-          fieldErrors[fieldId]
+          fieldErrors[fieldId],
+          focusLocationMarker
         ))}
       </div>
 
@@ -37,7 +47,8 @@ const Section = ({ details, fieldErrors, formData, id, onFieldChange, onFieldErr
           fieldId,
           formData[fieldId],
           onColumnFieldChange,
-          fieldErrors[fieldId]
+          fieldErrors[fieldId],
+          focusLocationMarker
         ))}
       </div>}
     </div>

src/ReportManager/DetailsSection/SchemaForm/index.js

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { FORM_ELEMENT_TYPES, ROOT_CANVAS_ID } from './constants';
 import makeFieldsFromSchema from './utils/makeFieldsFromSchema';
+import useLocationMarkersLayer from './utils/useLocationMarkersLayer';
 import useSchemaValidations from './utils/useSchemaValidations';
 
 import Collection from './fields/Collection';
@@ -16,13 +17,13 @@ import Text from './fields/Text';
 export const FIELDS = {
   [FORM_ELEMENT_TYPES.CHOICE_LIST]: ChoiceList,
   [FORM_ELEMENT_TYPES.DATE_TIME]: DateTime,
-  [FORM_ELEMENT_TYPES.LOCATION]: Location,
   [FORM_ELEMENT_TYPES.NUMERIC]: Numeric,
   [FORM_ELEMENT_TYPES.TEXT]: Text,
 };
 
 const SchemaForm = ({
   autofillDefaultInputs,
+  eventLocation,
   initialFormData,
   onFormDataChange,
   onFormSubmit,
@@ -31,6 +32,27 @@ const SchemaForm = ({
 }) => {
   const runValidations = useSchemaValidations(schema);
 
+  const onLocationMarkerClick = useCallback((markerId) => {
+    const locationField = document.getElementById(markerId);
+    if (locationField) {
+      // If the location field that corresponds to the clicked marker is contained directly by a section, its element
+      // will be focusable.
+      locationField.focus();
+    } else {
+      // If the location field is nested in a collection, we try to calculate the id of the collection item that
+      // contains it to focus it.
+      const markerIdPathParts = markerId.split('.');
+      const collectionItemId = `${markerIdPathParts[0]}.${markerIdPathParts[1]}`;
+      document.getElementById(collectionItemId)?.focus();
+    }
+  }, []);
+
+  const {
+    blurLocationMarker,
+    focusLocationMarker,
+    updateLocationMarkers
+  } = useLocationMarkersLayer(eventLocation, onLocationMarkerClick);
+
   // This ref works as a flag to trigger a useEffect and call onFormDataChange asynchronously when there are changes in
   // the form data, so we can keep the onSectionFieldChange dependency array empty.
   const shouldSendFormDataChangeRef = useRef(false);
@@ -65,8 +87,9 @@ const SchemaForm = ({
   };
 
   // This method is designed to render fields inside sections and collections. In order to support recursion we let the
-  // parents handle the propagation of values, change callbacks, errors, breadcrumbs (only for collections), etc...
-  const renderField = (id, value, onChange, error, breadcrumbs = []) => {
+  // parents handle the propagation of values, change callbacks, errors, focusing of location markers and breadcrumbs
+  // (only for collections).
+  const renderField = (id, value, onChange, error, focusLocationMarker, breadcrumbs = []) => {
     switch (fields[id].type) {
     case FORM_ELEMENT_TYPES.HEADER:
       return <Header details={fields[id].details} id={id} key={id} />;
@@ -77,13 +100,26 @@ const SchemaForm = ({
         details={fields[id].details}
         error={error}
         fields={fields}
+        focusLocationMarker={focusLocationMarker}
         id={id}
         key={id}
         onFieldChange={onChange}
         renderField={renderField}
         value={value}
       />;
 
+    case FORM_ELEMENT_TYPES.LOCATION:
+      return <Location
+        blurLocationMarker={blurLocationMarker}
+        details={fields[id].details}
+        error={error}
+        focusLocationMarker={focusLocationMarker}
+        id={id}
+        key={id}
+        onFieldChange={onChange}
+        value={value}
+      />;
+
     default:
       const Field = FIELDS[fields[id].type];
       return <Field
@@ -106,10 +142,34 @@ const SchemaForm = ({
     }
   }, [formData, onFormDataChange]);
 
+  useEffect(() => {
+    // Update the location markers whenever there is a change.
+    const locationMarkers = {};
+    const addLocationMarkersFromFormDataRecursively = (formData, idPrefix = '') => {
+      // Iterate the fields.
+      Object.entries(formData).forEach(([fieldId, fieldValue]) => {
+        if (fields[fieldId]?.type === FORM_ELEMENT_TYPES.LOCATION && fieldValue) {
+          // If the field is a location with a value, add it to the location markers.
+          locationMarkers[`${idPrefix}${fieldId}`] = fieldValue;
+        } else if (fields[fieldId]?.type === FORM_ELEMENT_TYPES.COLLECTION) {
+          // If the field is a collection, add the location markers for each collection item.
+          fieldValue.forEach((itemFormData, index) => addLocationMarkersFromFormDataRecursively(
+            itemFormData,
+            `${idPrefix}${fieldId}.${index}.`
+          ));
+        }
+      });
+    };
+    addLocationMarkersFromFormDataRecursively(formData);
+
+    updateLocationMarkers(locationMarkers);
+  }, [fields, formData, updateLocationMarkers]);
+
   return <form onSubmit={onSubmit}>
     {fields[ROOT_CANVAS_ID]?.details.fields.map((sectionId) => <Section
       details={fields[sectionId].details}
       fieldErrors={fieldErrors}
+      focusLocationMarker={focusLocationMarker}
       formData={formData}
       id={sectionId}
       key={sectionId}