Merge branch 'main' into task/WG-260-add-map-control-bar

react/jest.setup.ts

@@ -6,6 +6,10 @@ jest.mock('@hazmapper/hooks/environment/getLocalAppConfiguration', () => ({
   getLocalAppConfiguration: jest.fn(() => testDevConfiguration),
 }));
 
+jest.mock('react-jss', () => ({
+  createUseStyles: () => () => ({}),
+}));
+
 /***** B) Ignore some known warnings/errors *****/
 
 // List of `console.warn` messages that can be ignored

react/package.json

@@ -33,25 +33,32 @@
     ]
   },
   "dependencies": {
+    "@dnd-kit/sortable": "^10.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@hookform/resolvers": "^3.10.0",
     "@reduxjs/toolkit": "^2.5.0",
     "@tacc/core-components": "^0.0.3-beta.0",
     "@tacc/core-styles": "^2.37.2",
     "@tanstack/react-query": "^5.64.1",
     "@turf/turf": "^7.2.0",
+    "@types/jquery": "^3.5.32",
     "antd": "^5.23.1",
     "axios": "^1.7.9",
+    "chonky": "^2.3.2",
     "dompurify": "^3.2.3",
     "formik": "^2.4.6",
+    "jquery": "^3.7.1",
     "jwt-decode": "^4.0.0",
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",
     "react": "^18.3.1",
     "react-datepicker": "^7.6.0",
     "react-dom": "^18.3.1",
     "react-esri-leaflet": "^2.0.1",
+    "react-hook-form": "^7.54.2",
+    "react-hook-form-antd": "^1.1.3",
     "react-leaflet": "^4.2.1",
     "react-leaflet-markercluster": "^4.2.1",
     "react-redux": "^9.2.0",
@@ -60,7 +67,8 @@
     "react-table": "^7.8.0",
     "reactstrap": "^9.2.3",
     "uuid": "^11.0.5",
-    "yup": "^1.6.1"
+    "yup": "^1.6.1",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.26.0",

react/src/__fixtures__/fileFixture.ts

@@ -0,0 +1,74 @@
+import { File } from '../types/file';
+
+export const filesMock: File[] = [
+  {
+    name: 'Folder 3',
+    path: 'user/Folder_2/Folder_3',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 31000,
+    nativePermissions: 'ALL',
+    mimeType: 'text/directory',
+    type: 'dir',
+    url: 'https://designsafe-ci.org/data/browser/user/Folder_2/Folder_3/',
+  },
+  {
+    name: 'Test Map 3.hazmapper',
+    path: 'user/Folder_2/Folder_3/Test Map 3.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 7000,
+    nativePermissions: 'READ_WRITE',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    url: 'https://designsafe-ci.org/data/browser/user/Folder_2/Folder_3/Test%20Map%203.hazmapper',
+  },
+  {
+    name: 'Folder_1',
+    path: 'user/Folder_1',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 31,
+    nativePermissions: 'ALL',
+    mimeType: 'text/directory',
+    type: 'dir',
+    url: 'https://designsafe-ci.org/data/browser/user/Folder_1/',
+  },
+  {
+    name: 'Folder_2',
+    path: 'user/Folder_2',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 4096,
+    nativePermissions: 'ALL',
+    mimeType: 'text/directory',
+    type: 'dir',
+    url: 'https://designsafe-ci.org/data/browser/user/Folder_2/',
+  },
+  {
+    name: 'New Map.hazmapper',
+    path: 'user/New Map.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 70,
+    nativePermissions: 'READ_WRITE',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    url: 'https://designsafe-ci.org/data/browser/user/New%20Map.hazmapper',
+  },
+  {
+    name: 'Test Map.hazmapper',
+    path: 'user/Test Map.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 70,
+    nativePermissions: 'READ_WRITE',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    url: 'https://designsafe-ci.org/data/browser/user/Test%20Map.hazmapper',
+  },
+  {
+    name: 'Test Map 2.hazmapper',
+    path: 'user/Folder_2/Test Map 2.hazmapper',
+    lastModified: '2024-02-22T17:04:04.000-06:00',
+    size: 70,
+    nativePermissions: 'READ_WRITE',
+    mimeType: 'application/octet-stream',
+    type: 'file',
+    url: 'https://designsafe-ci.org/data/browser/user/Folder_2/Test%20Map%202.hazmapper',
+  },
+];

react/src/components/AssetDetail/AssetButton.tsx

@@ -8,12 +8,14 @@ type AssetButtonProps = {
   selectedFeature: Feature;
   featureSource: string;
   isPublicView: boolean;
+  onQuestionnaireClick?: () => void;
 };
 
 const AssetButton: React.FC<AssetButtonProps> = ({
   selectedFeature,
   featureSource,
   isPublicView,
+  onQuestionnaireClick,
 }) => {
   const pointCloudURL = DOMPurify.sanitize(featureSource + '/index.html');
 
@@ -30,10 +32,11 @@ const AssetButton: React.FC<AssetButtonProps> = ({
         </a>
       )}
       {featureType === FeatureType.Questionnaire && (
-        //TODO
-        <Button type="primary">View</Button>
+        <Button type="primary" onClick={onQuestionnaireClick}>
+          View
+        </Button>
       )}
-      {featureType.includes(selectedFeature.geometry.type) && isPublicView && (
+      {featureType.includes(selectedFeature.geometry.type) && !isPublicView && (
         //TODO
         <Button type="primary">Add Asset from DesignSafe</Button>
       )}

react/src/components/AssetDetail/AssetDetail.test.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { render, screen, act } from '@testing-library/react';
 import AssetDetail from './AssetDetail';
-import { mockImgFeature } from '@hazmapper/__fixtures__/featuresFixture';
+import {
+  mockImgFeature,
+  mockPointFeature,
+} from '@hazmapper/__fixtures__/featuresFixture';
 import AssetGeometry from './AssetGeometry';
 
 jest.mock('@hazmapper/hooks', () => ({
@@ -22,9 +25,10 @@ describe('AssetDetail', () => {
     onClose: jest.fn(),
     selectedFeature: mockImgFeature,
     isPublicView: false,
+    onQuestionnaireClick: jest.fn(),
   };
 
-  it('renders all main components', async () => {
+  it('renders all main components for image feature', async () => {
     const { getByText } = render(<AssetDetail {...AssetModalProps} />);
     const assetGeometry = screen.getByTestId('asset-geometry');
     await act(async () => {
@@ -36,4 +40,42 @@ describe('AssetDetail', () => {
     expect(getByText('Metadata')).toBeDefined();
     expect(assetGeometry).toBeDefined();
   });
+
+  it('renders all main components for point feature', async () => {
+    const { getByText } = render(
+      <AssetDetail {...AssetModalProps} selectedFeature={mockPointFeature} />
+    );
+    const assetGeometry = screen.getByTestId('asset-geometry');
+    await act(async () => {
+      render(<AssetGeometry selectedFeature={mockPointFeature} />);
+    });
+
+    // Check for standard components
+    expect(getByText('Metadata')).toBeDefined();
+    expect(assetGeometry).toBeDefined();
+
+    // Check for DesignSafe button presence when not in public view
+    expect(getByText('Add Asset from DesignSafe')).toBeDefined();
+  });
+
+  it('renders all main components for point feature public view', async () => {
+    const { getByText, queryByText } = render(
+      <AssetDetail
+        {...AssetModalProps}
+        selectedFeature={mockPointFeature}
+        isPublicView={true}
+      />
+    );
+    const assetGeometry = screen.getByTestId('asset-geometry');
+    await act(async () => {
+      render(<AssetGeometry selectedFeature={mockPointFeature} />);
+    });
+
+    // Check for standard components
+    expect(getByText('Metadata')).toBeDefined();
+    expect(assetGeometry).toBeDefined();
+
+    // Verify some comopnents are not present in public view
+    expect(queryByText('Add Asset from DesignSafe')).toBeNull();
+  });
 });

react/src/components/AssetDetail/AssetDetail.tsx

@@ -14,16 +14,18 @@ import { FeatureIcon } from '@hazmapper/components/FeatureIcon';
 import { Button, LoadingSpinner } from '@tacc/core-components';
 import styles from './AssetDetail.module.css';
 
-type AssetModalProps = {
+type AssetDetailProps = {
   onClose: () => void;
   selectedFeature: Feature;
   isPublicView: boolean;
+  onQuestionnaireClick;
 };
 
-const AssetDetail: React.FC<AssetModalProps> = ({
+const AssetDetail: React.FC<AssetDetailProps> = ({
   selectedFeature,
   onClose,
   isPublicView,
+  onQuestionnaireClick,
 }) => {
   const config = useAppConfiguration();
   const geoapiUrl = config.geoapiUrl;
@@ -61,6 +63,7 @@ const AssetDetail: React.FC<AssetModalProps> = ({
             selectedFeature={selectedFeature}
             featureSource={featureSource}
             isPublicView={isPublicView}
+            onQuestionnaireClick={onQuestionnaireClick}
           />
         </Suspense>
       </div>