PSP-10991 Upload a kmz file to a file property

source/frontend/package.json

@@ -15,8 +15,10 @@
     "@react-keycloak/web": "3.4.0",
     "@reduxjs/toolkit": "1.8.6",
     "@terraformer/wkt": "2.2.1",
+    "@tmcw/togeojson": "7.1.2",
     "@turf/turf": "7.0.0",
     "@types/polylabel": "1.0.5",
+    "@xmldom/xmldom": "0.8.11",
     "@xstate/react": "3.2.2",
     "axios": "1.6.7",
     "bootstrap": "4.6.2",
@@ -29,6 +31,7 @@
     "formik": "2.2.6",
     "is-absolute-url": "3.0.3",
     "js-file-download": "0.4.12",
+    "jszip": "3.10.1",
     "keycloak-js": "26.0.0",
     "leaflet": "1.9.2",
     "lodash": "4.17.21",
@@ -88,6 +91,7 @@
     "@types/eslint-plugin-prettier": "3.1.3",
     "@types/geojson": "7946.0.7",
     "@types/jsdom": "21.1.7",
+    "@types/jszip": "3.4.0",
     "@types/leaflet": "1.9.0",
     "@types/lodash": "4.14.168",
     "@types/mocha": "10.0.6",

source/frontend/src/features/properties/shapeUpload/ShapeUploadContainer.tsx

@@ -18,7 +18,8 @@ export interface IShapeUploadContainerProps {
 }
 
 /**
- * Component that provides functionality to upload shapefiles. Can be embedded as a widget.
+ * Component that provides functionality to upload boundary files (Shapefile, KML, KMZ).
+ * Can be embedded as a widget.
  */
 export const ShapeUploadContainer: React.FunctionComponent<IShapeUploadContainerProps> = ({
   formikRef,

source/frontend/src/features/properties/shapeUpload/ShapeUploadForm.test.tsx

@@ -74,7 +74,7 @@ describe('ShapeUploadForm', () => {
     });
 
     expect(
-      screen.getByText(/You have attached a shapefile for property: property-456/i),
+      screen.getByText(/You have attached a boundary file for property: property-456/i),
     ).toBeInTheDocument();
   });
 
@@ -88,7 +88,7 @@ describe('ShapeUploadForm', () => {
     });
 
     expect(
-      screen.getByText(/You have attached a shapefile. Do you want to proceed and save/i),
+      screen.getByText(/You have attached a boundary file. Do you want to proceed and save/i),
     ).toBeInTheDocument();
   });
 

source/frontend/src/features/properties/shapeUpload/ShapeUploadForm.tsx

@@ -17,7 +17,8 @@ export interface IShapeUploadFormProps {
 }
 
 /**
- * Component that provides functionality to upload shapefiles. Can be embedded as a widget.
+ * Component that provides functionality to upload boundary files (Shapefile, KML, KMZ).
+ * Can be embedded as a widget.
  */
 export const ShapeUploadForm: React.FunctionComponent<IShapeUploadFormProps> = ({
   isLoading,
@@ -37,18 +38,21 @@ export const ShapeUploadForm: React.FunctionComponent<IShapeUploadFormProps> = (
         <>
           <LoadingBackdrop show={isLoading} />
           <SectionField
-            label="Choose a shapefile to attach for upload"
+            label="Upload a boundary file"
+            tooltip="Accepted formats: Shapefile (.zip), KML (.kml), or KMZ (.kmz)"
             labelWidth={{ xs: 12 }}
             className="mb-4"
           >
-            <div className="pt-2"></div>
+            <div className="pt-2  pb-1 text-muted">
+              Accepted formats: Shapefile (.zip), KML (.kml), or KMZ (.kmz)
+            </div>
             <FileDragAndDrop
               onSelectFiles={files => {
                 if (files.length === 1) {
                   formikProps.setFieldValue('file', firstOrNull(files));
                 }
               }}
-              validExtensions={['zip']}
+              validExtensions={['zip', 'kml', 'kmz']}
               multiple={false}
               keyName={formikProps.values?.file?.name}
             />
@@ -62,8 +66,8 @@ export const ShapeUploadForm: React.FunctionComponent<IShapeUploadFormProps> = (
               </SectionField>
               <div className="pt-1">
                 {exists(propertyIdentifier)
-                  ? `You have attached a shapefile for property: ${propertyIdentifier}. Do you want to proceed and save?`
-                  : 'You have attached a shapefile. Do you want to proceed and save?'}
+                  ? `You have attached a boundary file for property: ${propertyIdentifier}. Do you want to proceed and save?`
+                  : 'You have attached a boundary file. Do you want to proceed and save?'}
               </div>
             </>
           )}

source/frontend/src/features/properties/shapeUpload/ShapeUploadModal.tsx

@@ -38,7 +38,7 @@ export const ShapeUploadModal: React.FunctionComponent<IShapeUploadModalProps> =
     setUploadResult(result);
   };
 
-  // Warn user if they are about to lose data when cancelling "Upload Shapefile" modal
+  // Warn user if they are about to lose data when cancelling "Upload Boundary File" modal
   const onCloseHandler = () => {
     const dirty = formikRef.current?.dirty ?? false;
     if (dirty && !displayConfirmation) {
@@ -56,7 +56,7 @@ export const ShapeUploadModal: React.FunctionComponent<IShapeUploadModalProps> =
       display={display}
       setDisplay={setDisplay}
       headerIcon={<FaUpload size={22} />}
-      title="Upload Shapefile"
+      title="Upload boundary file"
       message={
         <ShapeUploadContainer
           formikRef={formikRef}

source/frontend/src/features/properties/shapeUpload/ShapeUploadResultView.test.tsx

@@ -58,7 +58,7 @@ describe('ShapeUploadResultView', () => {
     uploadResult.isSuccess = true;
     setup({ props: { uploadResult } });
 
-    expect(screen.getByText(/Shapefile uploaded successfully/i)).toBeInTheDocument();
+    expect(screen.getByText(/Boundary file uploaded successfully/i)).toBeInTheDocument();
     expect(screen.getByText('example.zip')).toBeInTheDocument();
     const icon = screen.getByTestId('file-check-icon');
     expect(icon).toBeInTheDocument();
@@ -71,7 +71,7 @@ describe('ShapeUploadResultView', () => {
     uploadResult.errorMessage = 'Upload failed';
     setup({ props: { uploadResult } });
 
-    expect(screen.getByText(/Shapefile upload failed/i)).toBeInTheDocument();
+    expect(screen.getByText(/Boundary file upload failed/i)).toBeInTheDocument();
     expect(screen.getByText('example.zip')).toBeInTheDocument();
     expect(screen.getByText('Upload failed')).toBeInTheDocument();
     const icon = screen.getByTestId('file-error-icon');

source/frontend/src/features/properties/shapeUpload/ShapeUploadResultView.tsx

@@ -18,7 +18,7 @@ export const ShapeUploadResultView: React.FunctionComponent<IShapeUploadResultVi
   return (
     <>
       {uploadResult.isSuccess ? (
-        <StyledSuccessSection label="Shapefile uploaded successfully" labelWidth={{ xs: 12 }}>
+        <StyledSuccessSection label="Boundary file uploaded successfully" labelWidth={{ xs: 12 }}>
           {truncate(uploadResult.fileName ?? '', { length: 100 })}
           <FaCheck
             data-testid="file-check-icon"
@@ -28,7 +28,7 @@ export const ShapeUploadResultView: React.FunctionComponent<IShapeUploadResultVi
           />
         </StyledSuccessSection>
       ) : (
-        <StyledFailSection label="Shapefile upload failed" labelWidth={{ xs: 12 }}>
+        <StyledFailSection label="Boundary file upload failed" labelWidth={{ xs: 12 }}>
           {truncate(uploadResult.fileName ?? '', { length: 100 })}
           <FaTimesCircle
             data-testid="file-error-icon"