Merge branch 'main' of https://github.com/bcgov/PIMS

express-api/package.json

@@ -39,27 +39,27 @@
     "tsconfig-paths": "4.2.0",
     "typeorm": "0.3.20",
     "typeorm-naming-strategies": "4.1.0",
-    "winston": "3.16.0",
+    "winston": "3.17.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "zod": "3.23.3"
   },
   "devDependencies": {
-    "@eslint/js": "9.11.1",
-    "@faker-js/faker": "9.0.1",
+    "@eslint/js": "9.14.0",
+    "@faker-js/faker": "9.2.0",
     "@types/compression": "1.7.4",
     "@types/cookie-parser": "1.4.5",
     "@types/cors": "2.8.15",
     "@types/express": "4.17.20",
     "@types/jest": "29.5.10",
     "@types/morgan": "1.9.9",
     "@types/multer": "1.4.11",
-    "@types/node": "22.7.4",
+    "@types/node": "22.9.0",
     "@types/nunjucks": "3.2.6",
     "@types/supertest": "6.0.2",
     "@types/swagger-jsdoc": "6.0.4",
     "@types/swagger-ui-express": "4.1.6",
     "cross-env": "7.0.3",
-    "eslint": "9.11.1",
+    "eslint": "9.14.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.2.1",
     "jest": "29.7.0",
@@ -69,6 +69,6 @@
     "ts-jest": "29.2.0",
     "tsc-alias": "1.8.8",
     "typescript": "5.6.2",
-    "typescript-eslint": "8.8.0"
+    "typescript-eslint": "8.14.0"
   }
 }

express-api/tests/integration/users/users.test.ts

@@ -22,7 +22,7 @@ const mockUser: IUser = {
   middleName: faker.person.middleName(),
   lastName: faker.person.lastName(),
   email: faker.internet.email(),
-  username: faker.internet.userName(),
+  username: faker.internet.username(),
   position: 'Tester',
 };
 const TOKEN = '';

express-api/tests/testUtils/factories.ts

@@ -144,7 +144,7 @@ export const produceUser = (props?: Partial<User>): User => {
     MiddleName: faker.person.middleName(),
     LastName: faker.person.lastName(),
     Email: faker.internet.email(),
-    Username: faker.internet.userName(),
+    Username: faker.internet.username(),
     Position: 'Tester',
     Note: '',
     LastLogin: faker.date.anytime(),

react-app/nginx.conf

@@ -27,7 +27,7 @@ server {
     style-src 'self' 'unsafe-inline' https://unpkg.com https://cdnjs.cloudflare.com;
     font-src 'self';
     img-src 'self' data: tile.openstreetmap.org https://maps.googleapis.com https://unpkg.com https://cdnjs.cloudflare.com https://openmaps.gov.bc.ca https://server.arcgisonline.com;
-    connect-src 'self' https://openmaps.gov.bc.ca;
+    connect-src 'self' https://openmaps.gov.bc.ca https://test.apps.gov.bc.ca https://apps.gov.bc.ca;
     manifest-src 'self';
     form-action 'self'; 
   ";

react-app/package.json

@@ -36,23 +36,23 @@
     "react-plugin": "3.0.0-alpha.4",
     "react-router-dom": "6.28.0",
     "supercluster": "8.0.1",
-    "typescript-eslint": "8.13.0",
+    "typescript-eslint": "8.14.0",
     "use-supercluster": "1.2.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "zod": "3.23.8"
   },
   "devDependencies": {
-    "@babel/preset-env": "7.25.2",
-    "@babel/preset-react": "7.24.1",
-    "@testing-library/jest-dom": "6.5.0",
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-react": "7.25.9",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.0",
     "@types/geojson": "7946.0.14",
     "@types/jest": "29.5.11",
     "@types/leaflet": "1.9.9",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "4.3.0",
-    "eslint": "9.11.1",
+    "eslint": "9.14.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.37.1",
@@ -64,6 +64,6 @@
     "ts-node": "10.9.2",
     "typescript": "5.6.2",
     "vite": "5.4.6",
-    "vite-tsconfig-paths": "5.0.1"
+    "vite-tsconfig-paths": "5.1.2"
   }
 }

react-app/src/App.tsx

@@ -49,7 +49,16 @@ const Router = () => {
   const showMap = () => (
     <BaseLayout>
       <AuthRouteGuard permittedRoles={[Roles.ADMIN, Roles.AUDITOR, Roles.GENERAL_USER]}>
-        <ParcelMap height="100%" loadProperties={true} popupSize="large" scrollOnClick />
+        <ParcelMap
+          height="100%"
+          loadProperties={true}
+          popupSize="large"
+          scrollOnClick
+          hideControls={false}
+          showClusterPopup
+          showSideBar
+          zoomOnScroll={true}
+        />
       </AuthRouteGuard>
     </BaseLayout>
   );

react-app/src/components/map/InventoryLayer.tsx

@@ -194,6 +194,14 @@ export const InventoryLayer = (props: InventoryLayerProps) => {
       }),
   });
 
+  // Converts mouse event on clusters to a usable Point
+  const convertEventToPoint = (e: MouseEvent): Point => {
+    return {
+      x: e.clientX,
+      y: e.clientY,
+    } as Point;
+  };
+
   return (
     <>
       {/* For all cluster objects */}
@@ -208,7 +216,7 @@ export const InventoryLayer = (props: InventoryLayerProps) => {
               eventHandlers={{
                 click: () => zoomOnCluster(property),
                 mouseover: (e) => {
-                  openClusterPopup(property, e.containerPoint);
+                  openClusterPopup(property, convertEventToPoint(e.originalEvent));
                 },
                 mouseout: cancelOpenPopup,
               }}
@@ -232,7 +240,7 @@ export const InventoryLayer = (props: InventoryLayerProps) => {
                     },
                   );
                 },
-                mouseover: (e) => openClusterPopup(property, e.containerPoint),
+                mouseover: (e) => openClusterPopup(property, convertEventToPoint(e.originalEvent)),
                 mouseout: cancelOpenPopup,
               }}
             />

react-app/src/components/map/MapLayers.tsx

@@ -97,12 +97,25 @@ interface MapLayersProps {
 const MapLayers = (props: MapLayersProps) => {
   const { hideControls } = props;
   // If layer control is hidden, must still return a default tileset to use
+  // Also showing parcel boundaries
   if (hideControls) {
+    const parcelBoundaryLayer = LAYER_CONFIGS.landOwnership.find(
+      (layer) => layer.name === 'Parcel Boundaries',
+    );
     return (
-      <TileLayer
-        url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
-        attribution='&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors'
-      />
+      <>
+        <TileLayer
+          url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors'
+        />
+        <WMSTileLayer
+          url={parcelBoundaryLayer.url}
+          format="image/png"
+          transparent={true}
+          layers={parcelBoundaryLayer.layers}
+          opacity={0.5}
+        />
+      </>
     );
   }
   return (

react-app/src/components/map/ParcelMap.tsx

@@ -34,6 +34,9 @@ type ParcelMapProps = {
   hideControls?: boolean;
   defaultZoom?: number;
   defaultLocation?: LatLngExpression;
+  overrideProperties?: PropertyGeo[];
+  showClusterPopup?: boolean;
+  showSideBar?: boolean;
 } & PropsWithChildren;
 
 export const SelectedMarkerContext = createContext(null);
@@ -130,10 +133,13 @@ const ParcelMap = (props: ParcelMapProps) => {
     loadProperties = false,
     popupSize,
     scrollOnClick,
-    zoomOnScroll = true,
+    zoomOnScroll = false,
     hideControls = false,
     defaultLocation,
     defaultZoom,
+    overrideProperties,
+    showClusterPopup = false,
+    showSideBar = false,
   } = props;
 
   // To access map outside of MapContainer
@@ -167,6 +173,13 @@ const ParcelMap = (props: ParcelMapProps) => {
     }
   }, [data, isLoading]);
 
+  // If override properties were supplied, set them.
+  useEffect(() => {
+    if (overrideProperties) {
+      setProperties(overrideProperties);
+    }
+  }, [overrideProperties]);
+
   // Loops through any array and pairs it down to a flat list of its base elements
   // Used here for breaking shape geography down to bounds coordinates
   const extractLowestElements: (arr: any[]) => [number, number][] = (arr) => {
@@ -292,14 +305,16 @@ const ParcelMap = (props: ParcelMapProps) => {
               ],
         ),
         {
-          paddingBottomRight: [500, 0], // Padding for map sidebar
+          paddingBottomRight: showSideBar ? [500, 0] : [0, 0], // Padding for map sidebar
         },
       );
     }
   }, [properties]);
+  // Reference to containing div to help centre cluster popups
+  const mapBoxRef = useRef<HTMLDivElement>();
 
   return (
-    <Box height={height} display={'flex'}>
+    <Box height={height} display={'flex'} ref={mapBoxRef} position={'relative'}>
       {loadProperties ? <LoadingCover show={isLoading} /> : <></>}
       <MapContainer
         id="parcel-map"
@@ -331,7 +346,7 @@ const ParcelMap = (props: ParcelMapProps) => {
           mapEventsDisabled={mapEventsDisabled}
         />
         <MapEvents />
-        {loadProperties ? (
+        {loadProperties || overrideProperties ? (
           <InventoryLayer
             isLoading={isLoading}
             properties={properties}
@@ -347,18 +362,24 @@ const ParcelMap = (props: ParcelMapProps) => {
         ))}
         {props.children}
       </MapContainer>
-      {loadProperties ? (
-        <>
-          <MapSidebar
-            properties={properties}
-            map={localMapRef}
-            setFilter={setFilter}
-            sidebarOpen={sidebarOpen}
-            setSidebarOpen={setSidebarOpen}
-            filter={filter}
-          />
-          <ClusterPopup popupState={popupState} setPopupState={controlledSetPopupState} />
-        </>
+      {loadProperties && showSideBar ? (
+        <MapSidebar
+          properties={properties}
+          map={localMapRef}
+          setFilter={setFilter}
+          sidebarOpen={sidebarOpen}
+          setSidebarOpen={setSidebarOpen}
+          filter={filter}
+        />
+      ) : (
+        <></>
+      )}
+      {(loadProperties || overrideProperties) && showClusterPopup ? (
+        <ClusterPopup
+          popupState={popupState}
+          setPopupState={controlledSetPopupState}
+          boundingBox={mapBoxRef.current?.getBoundingClientRect()}
+        />
       ) : (
         <></>
       )}