RU-T46 PR#202 fixes

Author: ucswift

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

@@ -31,6 +31,10 @@ on:
           - ios
           - all
 
+# Set minimal permissions by default
+permissions:
+  contents: read
+
 env:
   EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
   EXPO_APPLE_ID: ${{ secrets.EXPO_APPLE_ID }}
@@ -115,6 +119,8 @@ jobs:
   build-mobile:
     needs: test
     if: (github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master')) || github.event_name == 'workflow_dispatch'
+    permissions:
+      contents: write  # Required for creating releases
     strategy:
       matrix:
         platform: [android, ios]
@@ -519,17 +525,29 @@ jobs:
   build-docker:
     needs: build-web
     if: (github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master')) || github.event_name == 'workflow_dispatch'
+    permissions:
+      contents: read
+      packages: write  # Required for pushing to GHCR
     runs-on: ubuntu-latest
     environment: RNBuild
     steps:
       - name: 🏗 Checkout repository
         uses: actions/checkout@v4
 
+      - name: � Check Docker Hub credentials availability
+        id: docker-creds
+        run: |
+          if [[ -n "${{ secrets.DOCKER_USERNAME }}" && -n "${{ secrets.DOCKER_PASSWORD }}" ]]; then
+            echo "available=true" >> $GITHUB_OUTPUT
+          else
+            echo "available=false" >> $GITHUB_OUTPUT
+          fi
+
       - name: 🐳 Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
       - name: 🐳 Log in to Docker Hub
-        if: ${{ secrets.DOCKER_USERNAME != '' && secrets.DOCKER_PASSWORD != '' }}
+        if: steps.docker-creds.outputs.available == 'true'
         uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
@@ -547,7 +565,7 @@ jobs:
         uses: docker/metadata-action@v5
         with:
           images: |
-            ${{ secrets.DOCKER_USERNAME != '' && format('{0}/resgrid-unit', secrets.DOCKER_USERNAME) || '' }}
+            ${{ steps.docker-creds.outputs.available == 'true' && format('{0}/resgrid-unit', secrets.DOCKER_USERNAME) || '' }}
             ghcr.io/${{ github.repository }}
           tags: |
             type=raw,value=7.${{ github.run_number }}
@@ -571,6 +589,8 @@ jobs:
   build-electron:
     needs: test
     if: (github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master')) || github.event_name == 'workflow_dispatch'
+    permissions:
+      contents: write  # Required for creating releases
     strategy:
       matrix:
         os: [windows-latest, macos-15, ubuntu-latest]

docker/docker-entrypoint.sh

@@ -4,27 +4,33 @@ set -e
 # Directory where the built web app is served
 HTML_DIR="/usr/share/nginx/html"
 
+# JavaScript escape function to safely escape strings for JSON/JS
+# Escapes quotes, backslashes, and newlines to prevent injection
+js_escape() {
+  printf '%s' "$1" | sed -e 's/\\/\\\\/g' -e 's/"/\\"/g' -e 's/$/\\n/' | tr -d '\n' | sed 's/\\n$//'
+}
+
 # Create the env-config.js file with environment variables
 cat > "${HTML_DIR}/env-config.js" << EOF
 // Runtime environment configuration - generated by docker-entrypoint.sh
 // This file is generated at container startup and injects environment variables
 window.__ENV__ = {
-  APP_ENV: "${APP_ENV:-production}",
-  NAME: "${UNIT_NAME:-Resgrid Unit}",
-  SCHEME: "${UNIT_SCHEME:-ResgridUnit}",
-  VERSION: "${UNIT_VERSION:-0.0.1}",
-  BASE_API_URL: "${UNIT_BASE_API_URL:-https://api.resgrid.com}",
-  API_VERSION: "${UNIT_API_VERSION:-v4}",
-  RESGRID_API_URL: "${UNIT_RESGRID_API_URL:-/api/v4}",
-  CHANNEL_HUB_NAME: "${UNIT_CHANNEL_HUB_NAME:-eventingHub}",
-  REALTIME_GEO_HUB_NAME: "${UNIT_REALTIME_GEO_HUB_NAME:-geolocationHub}",
-  LOGGING_KEY: "${UNIT_LOGGING_KEY:-}",
-  APP_KEY: "${UNIT_APP_KEY:-}",
-  UNIT_MAPBOX_PUBKEY: "${UNIT_MAPBOX_PUBKEY:-}",
-  IS_MOBILE_APP: false,
-  SENTRY_DSN: "${UNIT_SENTRY_DSN:-}",
-  COUNTLY_APP_KEY: "${UNIT_COUNTLY_APP_KEY:-}",
-  COUNTLY_SERVER_URL: "${UNIT_COUNTLY_SERVER_URL:-}"
+  APP_ENV: "$(js_escape "${APP_ENV:-production}")",
+  NAME: "$(js_escape "${UNIT_NAME:-Resgrid Unit}")",
+  SCHEME: "$(js_escape "${UNIT_SCHEME:-ResgridUnit}")",
+  VERSION: "$(js_escape "${UNIT_VERSION:-0.0.1}")",
+  BASE_API_URL: "$(js_escape "${UNIT_BASE_API_URL:-https://api.resgrid.com}")",
+  API_VERSION: "$(js_escape "${UNIT_API_VERSION:-v4}")",
+  RESGRID_API_URL: "$(js_escape "${UNIT_RESGRID_API_URL:-/api/v4}")",
+  CHANNEL_HUB_NAME: "$(js_escape "${UNIT_CHANNEL_HUB_NAME:-eventingHub}")",
+  REALTIME_GEO_HUB_NAME: "$(js_escape "${UNIT_REALTIME_GEO_HUB_NAME:-geolocationHub}")",
+  LOGGING_KEY: "$(js_escape "${UNIT_LOGGING_KEY:-}")",
+  APP_KEY: "$(js_escape "${UNIT_APP_KEY:-}")",
+  UNIT_MAPBOX_PUBKEY: "$(js_escape "${UNIT_MAPBOX_PUBKEY:-}")",
+  IS_MOBILE_APP: "false",
+  SENTRY_DSN: "$(js_escape "${UNIT_SENTRY_DSN:-}")",
+  COUNTLY_APP_KEY: "$(js_escape "${UNIT_COUNTLY_APP_KEY:-}")",
+  COUNTLY_SERVER_URL: "$(js_escape "${UNIT_COUNTLY_SERVER_URL:-}")"
 };
 EOF
 

electron/main.js

@@ -25,7 +25,7 @@ function createWindow() {
     // MacOS: use hidden title bar with traffic lights
     titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'default',
     // Windows/Linux: show frame
-    frame: process.platform !== 'darwin' || true,
+    frame: process.platform !== 'darwin',
     // Set the background color to match the app theme
     backgroundColor: nativeTheme.shouldUseDarkColors ? '#1a1a1a' : '#ffffff',
     icon: path.join(__dirname, '../assets/icon.png'),

electron/preload.js

@@ -10,10 +10,11 @@ contextBridge.exposeInMainWorld('electronAPI', {
   // Notification methods
   showNotification: (options) => ipcRenderer.invoke('show-notification', options),
   onNotificationClicked: (callback) => {
-    ipcRenderer.on('notification-clicked', (event, data) => callback(data));
-    // Return a cleanup function
+    const listener = (event, data) => callback(data);
+    ipcRenderer.on('notification-clicked', listener);
+    // Return a cleanup function that removes only this specific listener
     return () => {
-      ipcRenderer.removeAllListeners('notification-clicked');
+      ipcRenderer.removeListener('notification-clicked', listener);
     };
   },
 

env.js

@@ -88,7 +88,7 @@ const client = z.object({
   LOGGING_KEY: z.string(),
   APP_KEY: z.string(),
   UNIT_MAPBOX_PUBKEY: z.string(),
-  IS_MOBILE_APP: z.boolean(),
+  IS_MOBILE_APP: z.string(),
   SENTRY_DSN: z.string(),
   COUNTLY_APP_KEY: z.string(),
   COUNTLY_SERVER_URL: z.string(),
@@ -120,7 +120,7 @@ const _clientEnv = {
   REALTIME_GEO_HUB_NAME: process.env.UNIT_REALTIME_GEO_HUB_NAME || 'geolocationHub',
   LOGGING_KEY: process.env.UNIT_LOGGING_KEY || '',
   APP_KEY: process.env.UNIT_APP_KEY || '',
-  IS_MOBILE_APP: true, // or whatever default you want
+  IS_MOBILE_APP: 'true',
   UNIT_MAPBOX_PUBKEY: process.env.UNIT_MAPBOX_PUBKEY || '',
   SENTRY_DSN: process.env.UNIT_SENTRY_DSN || '',
   COUNTLY_APP_KEY: process.env.UNIT_COUNTLY_APP_KEY || '',

nginx.conf

@@ -44,6 +44,9 @@ http {
         location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
             expires 1y;
             add_header Cache-Control "public, immutable";
+            add_header X-Frame-Options "SAMEORIGIN" always;
+            add_header X-Content-Type-Options "nosniff" always;
+            add_header X-XSS-Protection "1; mode=block" always;
             try_files $uri =404;
         }
 

package.json

@@ -197,6 +197,7 @@
     "dotenv": "~16.4.5",
     "electron": "40.0.0",
     "electron-builder": "26.4.0",
+    "electron-squirrel-startup": "^1.0.1",
     "eslint": "~8.57.0",
     "eslint-config-expo": "~7.1.2",
     "eslint-config-prettier": "~9.1.0",

public/service-worker.js

@@ -8,6 +8,9 @@
 // Cache name for offline support (optional)
 const CACHE_NAME = 'resgrid-unit-v1';
 
+// Store pending notification data for newly opened windows
+const pendingNotifications = new Map();
+
 // Handle push events
 self.addEventListener('push', function (event) {
   console.log('[Service Worker] Push received:', event);
@@ -80,15 +83,11 @@ self.addEventListener('notificationclick', function (event) {
       // Open new window if no existing window found
       if (clients.openWindow) {
         return clients.openWindow('/').then(function (client) {
-          // Send message after a short delay to ensure the app is ready
-          setTimeout(function () {
-            if (client) {
-              client.postMessage({
-                type: 'NOTIFICATION_CLICK',
-                data: data,
-              });
-            }
-          }, 1000);
+          // Store notification data for handshake with the new window
+          if (client) {
+            pendingNotifications.set(client.id, data);
+            console.log('[Service Worker] Stored pending notification for client:', client.id);
+          }
         });
       }
     })
@@ -118,7 +117,27 @@ self.addEventListener('activate', function (event) {
 self.addEventListener('message', function (event) {
   console.log('[Service Worker] Message received:', event.data);
 
+  // Handle skip waiting message
   if (event.data && event.data.type === 'SKIP_WAITING') {
     self.skipWaiting();
+    return;
+  }
+
+  // Handle client ready handshake
+  if (event.data && event.data.type === 'CLIENT_READY') {
+    const clientId = event.source.id;
+    console.log('[Service Worker] Client ready handshake received:', clientId);
+
+    // Check if there's a pending notification for this client
+    if (pendingNotifications.has(clientId)) {
+      const notificationData = pendingNotifications.get(clientId);
+      pendingNotifications.delete(clientId);
+
+      console.log('[Service Worker] Sending pending notification to client:', clientId);
+      event.source.postMessage({
+        type: 'NOTIFICATION_CLICK',
+        data: notificationData,
+      });
+    }
   }
 });

src/app/call/__tests__/[id].test.tsx

@@ -83,13 +83,13 @@ const mockUseWindowDimensions = useWindowDimensions as jest.MockedFunction<typeo
 jest.mock('expo-constants', () => ({
   expoConfig: {
     extra: {
-      IS_MOBILE_APP: true,
+      IS_MOBILE_APP: "true",
     },
   },
   default: {
     expoConfig: {
       extra: {
-        IS_MOBILE_APP: true,
+        IS_MOBILE_APP: "true",
       },
     },
   },
@@ -98,7 +98,7 @@ jest.mock('expo-constants', () => ({
 // Mock @env to prevent expo-constants issues
 jest.mock('@env', () => ({
   Env: {
-    IS_MOBILE_APP: true,
+    IS_MOBILE_APP: "true",
   },
 }));
 

src/components/maps/map-view.web.tsx

@@ -6,6 +6,7 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 
 import mapboxgl from 'mapbox-gl';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 
 import { Env } from '@/lib/env';
 
@@ -238,7 +239,7 @@ interface PointAnnotationProps {
   coordinate: [number, number];
   title?: string;
   children?: React.ReactNode;
-  anchor?: { x: number; y: number };
+  anchor?: string | { x: number; y: number };
   onSelected?: () => void;
 }
 
@@ -256,32 +257,61 @@ export const PointAnnotation: React.FC<PointAnnotationProps> = ({ id, coordinate
     container.style.cursor = 'pointer';
     containerRef.current = container;
 
-    // If there are children, render them into the container
+    // Render React children into the container using createPortal
     if (children) {
-      // Simple case - just show a marker
-      container.innerHTML = '<div style="width: 24px; height: 24px; background: #3b82f6; border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3);"></div>';
+      ReactDOM.render(<>{children}</>, container);
     }
 
-    markerRef.current = new mapboxgl.Marker({
+    // Determine marker options based on anchor prop
+    const markerOptions: mapboxgl.MarkerOptions = {
       element: container,
-      anchor: 'center',
-    })
+    };
+
+    // Handle anchor prop - if it's a string, use it as mapbox anchor
+    if (typeof anchor === 'string') {
+      markerOptions.anchor = anchor as mapboxgl.Anchor;
+    }
+
+    markerRef.current = new mapboxgl.Marker(markerOptions)
       .setLngLat(coordinate)
       .addTo(map);
 
+    // If anchor is an {x, y} object, convert to pixel offset
+    if (typeof anchor === 'object' && anchor !== null && 'x' in anchor && 'y' in anchor) {
+      // Calculate offset based on container size
+      // Mapbox expects offset in pixels, anchor is typically 0-1 range
+      // Convert anchor position to offset (center is anchor {0.5, 0.5})
+      const rect = container.getBoundingClientRect();
+      const xOffset = (anchor.x - 0.5) * rect.width;
+      const yOffset = (anchor.y - 0.5) * rect.height;
+      markerRef.current.setOffset([xOffset, yOffset]);
+    }
+
     if (title) {
       markerRef.current.setPopup(new mapboxgl.Popup().setText(title));
     }
 
-    if (onSelected) {
-      container.addEventListener('click', onSelected);
+    // Attach click listener to container
+    if (onSelected && containerRef.current) {
+      containerRef.current.addEventListener('click', onSelected);
     }
 
     return () => {
+      // Clean up click listener
+      if (onSelected && containerRef.current) {
+        containerRef.current.removeEventListener('click', onSelected);
+      }
+
+      // Unmount React children from the portal
+      if (children && containerRef.current) {
+        ReactDOM.unmountComponentAtNode(containerRef.current);
+      }
+
+      // Remove marker from map
       markerRef.current?.remove();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map, coordinate, id]);
+  }, [map, coordinate, id, children, anchor, onSelected, title]);
 
   // Update position when coordinate changes
   useEffect(() => {
@@ -317,9 +347,19 @@ export const UserLocation: React.FC<UserLocationProps> = ({ visible = true, show
     map.addControl(geolocate);
 
     // Auto-trigger to show user location
-    map.on('load', () => {
+    if (map.loaded()) {
       geolocate.trigger();
-    });
+    } else {
+      const onMapLoad = () => {
+        geolocate.trigger();
+      };
+      map.on('load', onMapLoad);
+
+      return () => {
+        map.off('load', onMapLoad);
+        map.removeControl(geolocate);
+      };
+    }
 
     return () => {
       map.removeControl(geolocate);