Production Upgrade 10.8.2023 (#353)

Production Upgrade 10.8.2023

package.json

@@ -76,7 +76,7 @@
     "lodash": "^4.17.21",
     "msw": "^0.49.0",
     "oidc-client": "^1.10.1",
-    "ol": "^6.5.0",
+    "ol": "^7.4.0",
     "proj4": "^2.6.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -114,6 +114,7 @@
     "lint-staged": "^10.3.0",
     "prettier": "^2.2.1",
     "prettier-eslint": "^12.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "start-server-and-test": "^1.12.0",
     "stylelint": "^13.7.2",
     "stylelint-config-standard": "^20.0.0",

src/common/components/map/Map.tsx

@@ -33,20 +33,20 @@ const Map: React.FC<Props> = ({
   const [map, setMap] = useState<MapInstance>(null);
   const [layers] = useState({});
 
-  const controls = showAttribution ? [attribution] : [];
-
   useEffect(() => {
     if (mapRef.current == null) {
       return;
     }
 
+    const controls = showAttribution ? [attribution] : [];
+
     const options = {
       view: new ol.View({
         center,
         zoom,
         minZoom: 5,
         maxZoom: 13,
-        projection,
+        projection: projection || undefined,
       }),
       layers: [],
       controls: defaultControls({
@@ -63,7 +63,7 @@ const Map: React.FC<Props> = ({
 
     // eslint-disable-next-line
     return () => mapObject.setTarget(undefined);
-  }, [center, zoom]);
+  }, [center, zoom, showAttribution]);
 
   useEffect(() => {
     if (!map) return;

src/common/components/map/controls/OverviewMapControl.tsx

@@ -36,9 +36,8 @@ const OverviewMapControl: React.FC<Props> = ({ className }) => {
           VERSION: '1.1.1',
           TRANSPARENT: 'false',
         },
-        projection,
+        projection: projection || undefined,
         cacheSize: 1000,
-        imageSmoothing: false,
         hidpi: false,
         serverType: 'geoserver',
         transition: 0,
@@ -55,7 +54,7 @@ const OverviewMapControl: React.FC<Props> = ({ className }) => {
         zoom: 3,
         minZoom: 2,
         maxZoom: 6,
-        projection,
+        projection: projection || undefined,
       }),
     });
 

src/common/components/map/interactions/FeatureClick.tsx

@@ -10,30 +10,30 @@ const HankeClick: React.FC = () => {
 
   const navigate = useNavigate();
 
-  const selectHanke = (mapInstance: MapInstance, evt: MapBrowserEvent<UIEvent>) => {
-    mapInstance?.getLayers().forEach((BaseLayer) => {
-      if (BaseLayer instanceof OLVectorLayer) {
-        BaseLayer.getFeatures(evt.pixel).then((features) => {
-          if (features.length > 0) {
-            features.some((feature) => {
-              const hankeTunnus = feature.get('hankeTunnus');
-              navigate({
-                search: `?hanke=${hankeTunnus}`,
+  useEffect(() => {
+    const selectHanke = (mapInstance: MapInstance, evt: MapBrowserEvent<UIEvent>) => {
+      mapInstance?.getLayers().forEach((BaseLayer) => {
+        if (BaseLayer instanceof OLVectorLayer) {
+          BaseLayer.getFeatures(evt.pixel).then((features) => {
+            if (features.length > 0) {
+              features.some((feature) => {
+                const hankeTunnus = feature.get('hankeTunnus');
+                navigate({
+                  search: `?hanke=${hankeTunnus}`,
+                });
+                return true;
               });
-              return true;
-            });
-          }
-        });
-      }
-    });
-  };
+            }
+          });
+        }
+      });
+    };
 
-  useEffect(() => {
     if (map)
       map.on('click', (evt) => {
         selectHanke(map, evt);
       });
-  }, [map]);
+  }, [map, navigate]);
 
   return null;
 };

src/common/components/map/modules/draw/DrawInteraction.tsx

@@ -10,7 +10,7 @@ import Polygon from 'ol/geom/Polygon';
 import { DRAWTOOLTYPE } from './types';
 import MapContext from '../../MapContext';
 import useDrawContext from './useDrawContext';
-import { isPolygonSelfIntersecting } from '../../utils';
+import { getSurfaceArea, isPolygonSelfIntersecting } from '../../utils';
 
 type Props = {
   features?: Collection<Feature>;
@@ -25,6 +25,8 @@ const DrawInteraction: React.FC<Props> = ({ onSelfIntersectingPolygon }) => {
   const { state, actions, source } = useDrawContext();
   const [instances, setInstances] = useState<Interaction[]>([]);
 
+  const drawnFeature = useRef<null | Feature>(null);
+
   const clearSelection = useCallback(() => {
     if (selection.current) selection.current.getFeatures().clear();
     actions.setSelectedFeature(null);
@@ -60,6 +62,24 @@ const DrawInteraction: React.FC<Props> = ({ onSelfIntersectingPolygon }) => {
         source,
         type: geometryType,
         geometryFunction,
+        finishCondition() {
+          const geometry = drawnFeature.current?.getGeometry();
+          if (geometry) {
+            const surfaceArea = getSurfaceArea(geometry);
+            // Don't allow drawing to be finished if its
+            // surface area is below 1
+            if (surfaceArea < 1) {
+              return false;
+            }
+          }
+          return true;
+        },
+      });
+
+      drawInstance.on('drawstart', (event) => {
+        event.feature.on('change', (changeEvent) => {
+          drawnFeature.current = changeEvent.target;
+        });
       });
 
       drawInstance.on('drawend', (event) => {

src/common/components/map/utils.ts

@@ -15,10 +15,10 @@ proj4.defs(
 register(proj4);
 
 export const projection = getProjection('EPSG:3879');
-projection.setExtent([25440000, 6630000, 25571072, 6761072]);
+projection?.setExtent([25440000, 6630000, 25571072, 6761072]);
 
 export function getSurfaceArea(geometry: Geometry) {
-  return getArea(geometry, { projection });
+  return getArea(geometry, { projection: projection || undefined });
 }
 
 /**

src/domain/hanke/portfolio/HankePortfolioContainer.tsx

@@ -5,7 +5,7 @@ import { HankeData } from '../../types/hanke';
 import HankePortfolioComponent from './HankePortfolioComponent';
 
 const getHankkeet = async () => {
-  const { data } = await api.get<HankeData[]>(`/hankkeet/`, {
+  const { data } = await api.get<HankeData[]>(`/hankkeet`, {
     params: {
       geometry: true,
     },

src/domain/johtoselvitys/BasicInfo.tsx

@@ -164,7 +164,10 @@ export const BasicHankeInfo: React.FC = () => {
     // Remove moved contact from previous selected role contacts
     setValue(
       `applicationData.${selectedRole}.contacts`,
-      previousRoleContacts.length > 1 ? previousRoleContacts.slice(1) : [emptyContact]
+      previousRoleContacts.length > 1 ? previousRoleContacts.slice(1) : [emptyContact],
+      {
+        shouldValidate: true,
+      }
     );
 
     if (!getValues(`applicationData.${role.value}.customer`)) {

src/domain/johtoselvitys/Geometries.tsx

@@ -87,7 +87,9 @@ export const Geometries: React.FC = () => {
 
   useEffect(() => {
     function handleAddFeature(e: VectorSourceEvent<Geometry>) {
-      append(getEmptyArea(e.feature));
+      if (e.feature) {
+        append(getEmptyArea(e.feature));
+      }
     }
 
     const handleChangeFeature = debounce(() => {

src/domain/map/components/HankeDrawer/HankeDrawer.tsx

@@ -67,21 +67,21 @@ const HankeDrawer: React.FC<Props> = ({
     };
 
     function handleAddFeature(e: VectorSourceEvent<Geometry>) {
-      if (onAddFeature) {
+      if (onAddFeature && e.feature) {
         onAddFeature(e.feature);
       }
       updateState();
     }
 
     const handleChangeFeature = debounce((e: VectorSourceEvent<Geometry>) => {
-      if (onChangeFeature) {
+      if (onChangeFeature && e.feature) {
         onChangeFeature(e.feature);
       }
       updateState();
     }, 100);
 
     function handleRemoveFeature(e: VectorSourceEvent<Geometry>) {
-      if (onRemoveFeature) {
+      if (onRemoveFeature && e.feature) {
         onRemoveFeature(e.feature);
       }
       updateState();

src/domain/map/components/Layers/Kantakartta.tsx

@@ -9,11 +9,10 @@ const Kantakartta = () => {
 
   const sourceOptions = {
     url: 'https://kartta.hel.fi/ws/geoserver/avoindata/wms',
-    projection,
+    projection: projection || undefined,
     cacheSize: 1000,
     imageSmoothing: false,
     hidpi: false,
-    serverType: 'geoserver',
     transition: 0,
     attributions: [t('map:attribution')],
   };

src/domain/map/components/Layers/Ortokartta.tsx

@@ -17,10 +17,8 @@ const Ortokartta = () => (
           VERSION: '1.1.1',
           TRANSPARENT: 'false',
         },
-        projection,
-        imageSmoothing: false,
+        projection: projection || undefined,
         hidpi: false,
-        serverType: 'geoserver',
         transition: 0,
         attributions: ['Aineistot &copy; <a href="https://kartta.hel.fi">Helsingin kaupunki</a>'],
       })

src/domain/map/components/interations/CenterProjectOnMap.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect } from 'react';
 import { Vector as VectorSource } from 'ol/source';
 import { useLocation } from 'react-router-dom';
 import MapContext from '../../../../common/components/map/MapContext';
@@ -12,7 +12,7 @@ const CenterProjectOnMap: React.FC<Props> = ({ source }) => {
   const { map } = useContext(MapContext);
   const hankeTunnus = new URLSearchParams(location.search).get('hanke');
 
-  const centralizeHankeOnMap = () => {
+  const centralizeHankeOnMap = useCallback(() => {
     source.getFeatures().some((feature) => {
       if (feature.get('hankeTunnus') === hankeTunnus) {
         const extent = feature.getGeometry()?.getExtent();
@@ -21,17 +21,20 @@ const CenterProjectOnMap: React.FC<Props> = ({ source }) => {
       }
       return false;
     });
-  };
+  }, [hankeTunnus, map, source]);
 
   useEffect(() => {
-    source.on('featuresAdded', () => {
-      centralizeHankeOnMap();
-    });
-  }, [map, hankeTunnus]);
+    map?.once('postrender', centralizeHankeOnMap);
+    source.on('addfeature', centralizeHankeOnMap);
+
+    return function cleanup() {
+      source.un('addfeature', centralizeHankeOnMap);
+    };
+  }, [map, source, centralizeHankeOnMap]);
 
   useEffect(() => {
     centralizeHankeOnMap();
-  }, [hankeTunnus]);
+  }, [hankeTunnus, centralizeHankeOnMap]);
 
   return null;
 };

src/domain/map/components/interations/HighlightFeatureOnMap.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect } from 'react';
 import { Vector as VectorSource } from 'ol/source';
 import { useLocation } from 'react-router-dom';
 import MapContext from '../../../../common/components/map/MapContext';
@@ -15,7 +15,7 @@ const HighlightFeatureOnMap: React.FC<Props> = ({ source }) => {
   const { hoveredHankeTunnukset } = useContext(HoverContext);
   const hankeTunnus = new URLSearchParams(location.search).get('hanke');
 
-  const highlightFeature = () => {
+  const highlightFeature = useCallback(() => {
     source.getFeatures().some((feature) => {
       if (
         hoveredHankeTunnukset.includes(feature.get('hankeTunnus')) ||
@@ -27,21 +27,17 @@ const HighlightFeatureOnMap: React.FC<Props> = ({ source }) => {
       }
       return false;
     });
-  };
+  }, [hankeTunnus, hoveredHankeTunnukset, source]);
 
   useEffect(() => {
-    source.on('featuresAdded', () => {
+    source.on('addfeature', () => {
       highlightFeature();
     });
-  }, [map]);
+  }, [map, source, highlightFeature]);
 
   useEffect(() => {
     highlightFeature();
-  }, [hankeTunnus]);
-
-  useEffect(() => {
-    highlightFeature();
-  }, [hoveredHankeTunnukset]);
+  }, [hankeTunnus, hoveredHankeTunnukset, highlightFeature]);
 
   return null;
 };

src/setupTests.ts

@@ -15,6 +15,8 @@ customGlobal.fetch = require('jest-fetch-mock');
 
 customGlobal.fetchMock = customGlobal.fetch;
 
+global.ResizeObserver = require('resize-observer-polyfill');
+
 beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
 afterAll(() => server.close());
 afterEach(() => server.resetHandlers());