RC-T46 Map Updates for Custom Markers

.github/workflows/react-native-cicd.yml

@@ -146,19 +146,51 @@ jobs:
           sudo apt-get clean || true
           sudo rm -rf /var/lib/apt/lists/*
 
-          # Remove swap
+          # Replace the image's swap with a larger one. The native (CMake/clang) and Kotlin
+          # compiles run alongside 4 GB Gradle and Node heaps; with no swap the runner starves
+          # and GitHub drops it ("hosted runner lost communication"). Prefer the /mnt temp disk
+          # so swap doesn't eat into the root disk freed above.
           sudo swapoff -a || true
-          sudo rm -f /swapfile || true
+          sudo rm -f /swapfile /mnt/swapfile || true
+          SWAP_FILE=/swapfile
+          if mountpoint -q /mnt; then SWAP_FILE=/mnt/swapfile; fi
+          if sudo fallocate -l 8G "$SWAP_FILE" && sudo chmod 600 "$SWAP_FILE" && sudo mkswap "$SWAP_FILE" && sudo swapon "$SWAP_FILE"; then
+            echo "Enabled 8G swap at $SWAP_FILE"
+          else
+            echo "::warning::Could not enable swap at $SWAP_FILE"
+          fi
 
           echo "Disk space after cleanup:"
           df -h
+          free -h
+
+      # ubuntu-26.04 mounts /tmp as an ~8 GB RAM-backed tmpfs, and eas build --local works
+      # under /tmp by default, so the Gradle/CMake output fills it ("Disk quota exceeded").
+      # Move EAS's working dir and the general temp dir onto the runner's disk.
+      - name: 📂 Move build temp dirs off tmpfs (Android)
+        if: matrix.platform == 'android'
+        run: |
+          mkdir -p "${RUNNER_TEMP}/tmp" "${RUNNER_TEMP}/eas-build"
+          echo "TMPDIR=${RUNNER_TEMP}/tmp" >> "$GITHUB_ENV"
+          echo "EAS_LOCAL_BUILD_WORKINGDIR=${RUNNER_TEMP}/eas-build" >> "$GITHUB_ENV"
+          df -h /tmp "${RUNNER_TEMP}"
 
       - name: 🏗 Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: '24'
           cache: 'yarn'
 
+      # Pin the JDK instead of taking the runner default: ubuntu-latest (26.04) defaults to JDK 25,
+      # where AGP's prefab step emits "A restricted method in java.lang.System has been called" and
+      # fails configureCMake (react-native-worklets).
+      - name: ☕ Setup Java
+        if: matrix.platform == 'android'
+        uses: actions/setup-java@v5
+        with:
+          distribution: 'temurin'
+          java-version: '17'
+
       - name: Setup Expo
         uses: expo/expo-github-action@v8
         with:
@@ -248,6 +280,9 @@ jobs:
         run: |
           mkdir -p ~/.gradle/
           echo ${GRADLE_PROPERTIES} > ~/.gradle/gradle.properties
+          # Each Gradle worker can drive its own CMake/ninja native build, so cap workers to
+          # keep concurrent clang processes within the runner's memory.
+          echo "org.gradle.workers.max=2" >> ~/.gradle/gradle.properties
 
       - name: 📱 Build Development APK
         if: (matrix.platform == 'android' && (github.event.inputs.buildType == 'all' || github.event_name == 'push' || github.event.inputs.buildType == 'dev'))

src/__tests__/command-map-legend.test.tsx

@@ -0,0 +1,119 @@
+// Incident tactical map screen (src/app/command-map/[callId].tsx): the map legend control and sheet.
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import React from 'react';
+
+import CommandMapScreen from '@/app/command-map/[callId]';
+
+jest.mock('expo-router', () => ({
+  Stack: { Screen: () => null },
+  useLocalSearchParams: () => ({ callId: '101' }),
+}));
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+jest.mock('@/lib/logging', () => ({
+  logger: { info: jest.fn(), warn: jest.fn(), error: jest.fn(), debug: jest.fn() },
+}));
+jest.mock('@/components/maps/mapbox', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  const passthrough = (name: string) => (props: any) => React.createElement(View, { testID: props.testID ?? `mock-${name}` }, props.children);
+  return {
+    __esModule: true,
+    default: {
+      MapView: passthrough('map-view'),
+      Camera: passthrough('camera'),
+      ShapeSource: passthrough('shape-source'),
+      LineLayer: passthrough('line-layer'),
+      FillLayer: passthrough('fill-layer'),
+      MarkerView: passthrough('marker-view'),
+    },
+  };
+});
+jest.mock('@/components/command/incident-map-layers', () => ({
+  AnnotationLayers: () => null,
+  IncidentLocationMarkers: () => null,
+}));
+jest.mock('@/components/maps/map-pins', () => ({ __esModule: true, default: () => null }));
+jest.mock('@/api/mapping/mapping', () => ({
+  getMapDataAndMarkers: jest.fn(() => Promise.resolve({ Data: { MapMakerInfos: [] } })),
+}));
+jest.mock('@/hooks/use-map-signalr-updates', () => ({ useMapSignalRUpdates: jest.fn(() => jest.fn()) }));
+jest.mock('@/hooks/use-map-geolocation-updates', () => ({
+  useMapGeolocationUpdates: jest.fn(),
+  withLiveLocationsSince: (pins: unknown[]) => pins,
+}));
+jest.mock('@/hooks/use-command-map-overlay', () => ({ useCommandMapOverlay: () => ({}) }));
+jest.mock('@/lib/map-center', () => ({ useDepartmentMapCenter: () => ({ latitude: 39.5, longitude: -119.8 }) }));
+jest.mock('@/lib/map-style', () => ({ useDepartmentMapStyle: () => 'mapbox://styles/mapbox/streets-v12' }));
+jest.mock('@/stores/toast/store', () => {
+  const state = { showToast: jest.fn() };
+  return { useToastStore: (selector: any) => selector(state) };
+});
+jest.mock('@/stores/command/store', () => {
+  const state = {
+    boards: {
+      '101': {
+        board: {
+          Command: { IncidentCommandId: 'ic-1', CallId: 101, MapCenterLatitude: '39.5', MapCenterLongitude: '-119.8', MapZoomLevel: '14' },
+          Maps: [],
+          Annotations: [],
+        },
+      },
+    },
+    updateMapViewEntry: jest.fn(),
+    saveIncidentMapEntry: jest.fn(),
+    saveMapAnnotationEntry: jest.fn(),
+    deleteMapAnnotationEntry: jest.fn(),
+  };
+  return { useCommandStore: (selector: any) => selector(state) };
+});
+jest.mock('@/components/ui/bottom-sheet', () => ({
+  CustomBottomSheet: ({ children, isOpen }: any) => (isOpen ? children : null),
+}));
+jest.mock('@/components/ui/focus-aware-status-bar', () => ({ FocusAwareStatusBar: () => null }));
+
+const mockLegendProps: { current: { isOpen: boolean; onClose: () => void; showHydrant?: boolean } | null } = { current: null };
+jest.mock('@/components/maps/map-legend-sheet', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  return {
+    MapLegendSheet: (props: { isOpen: boolean; onClose: () => void; showHydrant?: boolean }) => {
+      mockLegendProps.current = props;
+      return props.isOpen ? React.createElement(View, { testID: 'mock-map-legend-sheet' }) : null;
+    },
+  };
+});
+
+describe('Command map: map legend', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockLegendProps.current = null;
+  });
+
+  it('shows a labelled legend button on the tactical map', async () => {
+    render(<CommandMapScreen />);
+
+    const button = await screen.findByTestId('map-legend-button');
+    expect(screen.getByTestId('command-map-screen')).toBeTruthy();
+    expect(button.props.accessibilityLabel).toBe('maps.legend.title');
+    expect(button).toHaveStyle({ position: 'absolute', right: 20, width: 48, height: 48 });
+    expect(mockLegendProps.current?.isOpen).toBe(false);
+  });
+
+  it('opens the legend sheet from the button and closes it again', async () => {
+    render(<CommandMapScreen />);
+
+    fireEvent.press(await screen.findByTestId('map-legend-button'));
+
+    expect(screen.getByTestId('mock-map-legend-sheet')).toBeTruthy();
+    expect(mockLegendProps.current?.isOpen).toBe(true);
+    // The tactical map draws only the incident's units and personnel, never hydrants.
+    expect(mockLegendProps.current?.showHydrant).toBeFalsy();
+
+    act(() => {
+      mockLegendProps.current?.onClose();
+    });
+    expect(screen.queryByTestId('mock-map-legend-sheet')).toBeNull();
+  });
+});

src/__tests__/map-screen-legend.test.tsx

@@ -0,0 +1,163 @@
+// Main map screen (src/app/(app)/index.tsx): the map legend control and sheet.
+jest.mock('nativewind', () => ({
+  styled: jest.fn((Component: any) => Component),
+  cssInterop: jest.fn((Component: any) => Component),
+  useColorScheme: jest.fn(() => ({
+    colorScheme: 'light',
+    get: jest.fn(() => 'light'),
+    setColorScheme: jest.fn(),
+    toggleColorScheme: jest.fn(),
+  })),
+  __esModule: true,
+}));
+
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import React from 'react';
+
+import Map from '@/app/(app)/index';
+import { useAppLifecycle } from '@/hooks/use-app-lifecycle';
+import { locationService } from '@/services/location';
+import { useLocationStore } from '@/stores/app/location-store';
+
+jest.mock('react-native-safe-area-context', () => ({
+  SafeAreaProvider: ({ children }: { children: React.ReactNode }) => children,
+  useSafeAreaInsets: () => ({ top: 44, bottom: 34, left: 0, right: 0 }),
+}));
+jest.mock('@/hooks/use-app-lifecycle');
+jest.mock('@/stores/app/location-store');
+jest.mock('@/services/location');
+jest.mock('@/hooks/use-map-signalr-updates', () => ({
+  useMapSignalRUpdates: jest.fn(),
+}));
+jest.mock('@/hooks/use-map-geolocation-updates', () => ({
+  useMapGeolocationUpdates: jest.fn(),
+  withLiveLocationsSince: (pins: unknown[]) => pins,
+}));
+const mockGetMapDataAndMarkers = jest.fn();
+jest.mock('@/api/mapping/mapping', () => ({
+  getMapDataAndMarkers: (...args: unknown[]) => mockGetMapDataAndMarkers(...args),
+}));
+jest.mock('@rnmapbox/maps', () => ({
+  setAccessToken: jest.fn(),
+  MapView: 'MapView',
+  Camera: 'Camera',
+  PointAnnotation: 'PointAnnotation',
+  ShapeSource: 'ShapeSource',
+  FillLayer: 'FillLayer',
+  LineLayer: 'LineLayer',
+  MarkerView: 'MarkerView',
+  StyleURL: { Street: 'mapbox://styles/mapbox/streets-v11' },
+  UserTrackingMode: { Follow: 'follow', FollowWithHeading: 'followWithHeading' },
+}));
+jest.mock('expo-router', () => ({
+  router: { push: jest.fn() },
+  Stack: { Screen: () => null },
+  useFocusEffect: jest.fn(),
+}));
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+jest.mock('@/stores/toast/store', () => {
+  const state = { showToast: jest.fn() };
+  const useToastStore = (selector: any) => (typeof selector === 'function' ? selector(state) : state);
+  useToastStore.getState = () => state;
+  return { useToastStore };
+});
+jest.mock('@/stores/app/core-store', () => {
+  const storeState = { setActiveCall: jest.fn(), isInitialized: true, config: null };
+  const mockFn = jest.fn((selector) => (typeof selector === 'function' ? selector(storeState) : storeState)) as jest.Mock & { getState: () => typeof storeState };
+  mockFn.getState = () => storeState;
+  return { useCoreStore: mockFn };
+});
+jest.mock('@/components/maps/map-pins', () => ({ __esModule: true, default: () => null }));
+jest.mock('@/components/maps/pin-detail-modal', () => ({ __esModule: true, default: () => null }));
+jest.mock('@/components/maps/map-layers-sheet', () => ({ MapLayersSheet: () => null }));
+jest.mock('@/components/weather-alerts/weather-alert-banner', () => ({ WeatherAlertBanner: () => null }));
+jest.mock('@/hooks/use-analytics', () => ({ useAnalytics: () => ({ trackEvent: jest.fn() }) }));
+jest.mock('@/components/ui/focus-aware-status-bar', () => ({ FocusAwareStatusBar: () => null }));
+
+// The legend sheet itself is covered by map-legend-sheet.test.tsx: here, only what the screen hands it.
+const mockLegendProps: { current: { isOpen: boolean; onClose: () => void; showHydrant?: boolean } | null } = { current: null };
+jest.mock('@/components/maps/map-legend-sheet', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  return {
+    MapLegendSheet: (props: { isOpen: boolean; onClose: () => void; showHydrant?: boolean }) => {
+      mockLegendProps.current = props;
+      return props.isOpen ? React.createElement(View, { testID: 'mock-map-legend-sheet' }) : null;
+    },
+  };
+});
+
+const locationState = { latitude: 40.7128, longitude: -74.006, heading: 0, isMapLocked: false };
+
+describe('Main map: map legend', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockLegendProps.current = null;
+    (useLocationStore as unknown as jest.Mock).mockImplementation((selector: any) => (typeof selector === 'function' ? selector(locationState) : locationState));
+    (useAppLifecycle as jest.Mock).mockReturnValue({ isActive: true, appState: 'active', isBackground: false, lastActiveTimestamp: Date.now() });
+    (locationService.startLocationUpdates as jest.Mock) = jest.fn().mockResolvedValue(undefined);
+    (locationService.stopLocationUpdates as jest.Mock) = jest.fn();
+    mockGetMapDataAndMarkers.mockResolvedValue({ Data: { MapMakerInfos: [] } });
+  });
+
+  it('shows a labelled legend button stacked above the layers button', async () => {
+    render(<Map />);
+
+    const button = await screen.findByTestId('map-legend-button');
+    expect(button.props.accessibilityLabel).toBe('maps.legend.title');
+    expect(button.props.accessibilityRole).toBe('button');
+    // 132 above the bottom safe-area inset (34): the slot above the layers control.
+    expect(button).toHaveStyle({ position: 'absolute', right: 20, bottom: 166, width: 48, height: 48 });
+    expect(screen.getByTestId('layers-button')).toBeTruthy();
+    expect(screen.queryByTestId('mock-map-legend-sheet')).toBeNull();
+    expect(mockLegendProps.current?.isOpen).toBe(false);
+  });
+
+  it('stacks recenter, layers and legend in their own slots, so none covers another', async () => {
+    render(<Map />);
+    await screen.findByTestId('map-legend-button');
+    expect(screen.queryByTestId('recenter-button')).toBeNull();
+
+    // The user pans the map: the recenter control appears in the bottom slot.
+    act(() => {
+      screen.UNSAFE_getByType('MapView' as any).props.onCameraChanged({ properties: { isUserInteraction: true } });
+    });
+
+    // Above the bottom safe-area inset (34): recenter 20, layers 76, legend 132.
+    expect(screen.getByTestId('recenter-button')).toHaveStyle({ bottom: 54 });
+    expect(screen.getByTestId('layers-button')).toHaveStyle({ bottom: 110 });
+    expect(screen.getByTestId('map-legend-button')).toHaveStyle({ bottom: 166 });
+  });
+
+  it('opens the legend sheet from the button and closes it again', async () => {
+    render(<Map />);
+
+    fireEvent.press(await screen.findByTestId('map-legend-button'));
+
+    expect(screen.getByTestId('mock-map-legend-sheet')).toBeTruthy();
+    expect(mockLegendProps.current?.isOpen).toBe(true);
+    expect(mockLegendProps.current?.showHydrant).toBe(false);
+
+    act(() => {
+      mockLegendProps.current?.onClose();
+    });
+    expect(screen.queryByTestId('mock-map-legend-sheet')).toBeNull();
+  });
+
+  it('asks the legend to list hydrants only when the map is drawing hydrant markers', async () => {
+    mockGetMapDataAndMarkers.mockResolvedValue({
+      Data: {
+        MapMakerInfos: [
+          { Id: 'u1', Type: 1, Title: 'Engine 1', Latitude: 40, Longitude: -74, ImagePath: 'Engine_Available' },
+          { Id: 'hydrant-9', Type: 5, Title: 'H-9', Latitude: 40, Longitude: -74, ImagePath: 'hydrant' },
+        ],
+      },
+    });
+
+    render(<Map />);
+
+    await waitFor(() => expect(mockLegendProps.current?.showHydrant).toBe(true));
+  });
+});