Task/WG-260 add map control bar (#303)

* Keep track of mouse position using context/hook

* Add docstr

* Add useFeatureLoadingState hook

* Add map hooks to index

* Add position tracker to Map

* Add missing index

* Update package-lock.json

* Add useFeatureLoadingState to index

* Add MapControlBar

* Add hook to get projects users and use in control bar

* Improve project errors and handle switching to private map

* Add useDesignProject hook

* Rework ds project type and fixture

* Update package-lock.json after merge main

* Rework styling/layout

* update to new react-query and lint issues

* Remove unused properties

* Remove error as handled elswhere

* Format file

* Improve style

* Rework useCurrentFeatures

* Fix tests

* Refactor return type of useCurrentFeatures

* Update useCurrentFeatures test

* Add tests

* Add tests

* Add usefull comment to see request mocks

* Fix test issue

* Fix some lint errors

* Fix some lint warnings

* Add package-lock

* Refactor MapProjectAccessError into own file

Simpilfy MapProject

* Fix merge conflict resoltion errors

* Update package-lock.json

* Use antd Text

Spacing and ellipses were broken with upstream changes; unclear if my previous styles were incorrect or imcompatible.

* Update useDsProjects to useDesignSafeProjects

Author: nathanfranklin

react/jest.setup.ts

@@ -1,5 +1,5 @@
 import { testDevConfiguration } from '@hazmapper/__fixtures__/appConfigurationFixture';
-import { server } from '@hazmapper/test/testUtil';
+import { server, testQueryClient } from '@hazmapper/test/testUtil';
 
 /***** A) Setup the configuration used for unit testing *****/
 jest.mock('@hazmapper/hooks/environment/getLocalAppConfiguration', () => ({
@@ -56,6 +56,9 @@ export function shouldIgnoreError(args: any[]): boolean {
 /***** C) Setup testing and also ensure that we are mocking things in tests *****/
 
 beforeAll(() => {
+  // Uncomment next line to see all handlers
+  // console.log('Registered handlers:', server.listHandlers());
+
   // Establish mocking of APIs before all tests
   server.listen({
     onUnhandledRequest: 'error',
@@ -81,6 +84,11 @@ beforeAll(() => {
   });
 });
 
+// Clear the React Query cache before each test
+beforeEach(() => {
+  testQueryClient.clear();
+});
+
 // Reset any runtime request handlers we may add during the tests
 afterEach(() => server.resetHandlers());
 

react/package-lock.json

@@ -5,82 +5,80 @@ import {
   ProjectRequest,
 } from '../types';
 
+export const designSafeProjectMock: DesignSafeProject = {
+  uuid: 'proj-uuid',
+  name: 'designsafe.project',
+  created: '2019-10-31T16:04:26.327Z',
+  lastUpdated: '2019-10-31T16:04:30.163Z',
+  associationIds: [],
+  value: {
+    dois: [],
+    coPis: [],
+    title: 'Sample DesignSafe Project',
+    users: [
+      {
+        inst: 'University of Texas at Austin (utexas.edu)',
+        role: 'pi',
+        email: 'test1@test.com',
+        fname: 'Fixture First Name',
+        lname: 'Fixture Last Name',
+        username: 'fixture1Username',
+      },
+      {
+        inst: 'University of Texas at Austin (utexas.edu)',
+        role: 'co_pi',
+        email: 'test2@test.com',
+        fname: 'Tester',
+        lname: 'Test',
+        username: 'fixture2Username',
+      },
+    ],
+    authors: [],
+    frTypes: [],
+    nhEvent: '',
+    nhTypes: [],
+    fileObjs: [],
+    fileTags: [],
+    keywords: [],
+    nhEvents: [],
+    dataTypes: [],
+    projectId: 'proj-id',
+    tombstone: false,
+    facilities: [],
+    nhLatitude: '',
+    nhLocation: '',
+    description: 'Map Test description required.',
+    nhLongitude: '',
+    projectType: 'None',
+    teamMembers: [],
+    awardNumbers: [],
+    guestMembers: [],
+    hazmapperMaps: [
+      {
+        name: 'Hazmapper_TestProject',
+        path: '/',
+        uuid: '620aeaf4-f813-4b90-ba52-bc87cfa7b07b',
+        deployment: 'production',
+      },
+    ],
+    referencedData: [],
+    associatedProjects: [],
+  },
+};
+
 export const projectMock: Project = {
   id: 1,
   uuid: 'abc123',
   name: 'Sample Project',
   description: 'A sample project for testing purposes.',
   public: true,
   system_file: 'sample-file',
-  system_id: 'sample-id',
+  system_id:
+    'project-1234' /* 'project-' prefix implies its a DesignSafe project system */,
   system_path: '/path/to/sample',
   deletable: true,
   streetview_instances: null,
-  ds_project: {
-    uuid: 'proj-uuid',
-    projectId: 'proj-id',
-    title: 'Sample DesignSafe Project',
-    value: {
-      dois: [],
-      coPis: [],
-      title: 'Hazmapper V3 PROD Map Test 2024.08.07',
-      users: [
-        {
-          inst: 'University of Texas at Austin (utexas.edu)',
-          role: 'pi',
-          email: 'test1@test.com',
-          fname: 'Fixture First Name',
-          lname: 'Fixture Last Name',
-          username: 'fixture1Username',
-        },
-        {
-          inst: 'University of Texas at Austin (utexas.edu)',
-          role: 'co_pi',
-          email: 'test2@test.com',
-          fname: 'Tester',
-          lname: 'Test',
-          username: 'fixture2Username',
-        },
-      ],
-      authors: [],
-      frTypes: [],
-      nhEvent: '',
-      nhTypes: [],
-      fileObjs: [],
-      fileTags: [],
-      keywords: [],
-      nhEvents: [],
-      dataTypes: [],
-      projectId: 'PRJ-5566',
-      tombstone: false,
-      facilities: [],
-      nhLatitude: '',
-      nhLocation: '',
-      description: 'Map Test description required.',
-      nhLongitude: '',
-      projectType: 'None',
-      teamMembers: [],
-      awardNumbers: [],
-      guestMembers: [],
-      hazmapperMaps: [
-        {
-          name: 'Hazmapper_TestProject',
-          path: '/',
-          uuid: '620aeaf4-f813-4b90-ba52-bc87cfa7b07b',
-          deployment: 'production',
-        },
-      ],
-      referencedData: [],
-      associatedProjects: [],
-    },
-  },
-};
-
-export const designSafeProjectMock: DesignSafeProject = {
-  uuid: 'proj-uuid',
-  projectId: 'proj-id',
-  title: 'Sample DesignSafe Project',
-  value: {},
+  ds_project: designSafeProjectMock,
 };
 
 export const designSafeProjectCollectionMock: DesignSafeProjectCollection = {

react/src/__fixtures__/projectFixtures.ts

@@ -0,0 +1 @@
+export const users = [{ id: 1, username: 'user' }];

react/src/__fixtures__/usersFixtures.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, waitFor, act } from '@testing-library/react';
 import { http, HttpResponse } from 'msw';
 import FeatureFileTree from './FeatureFileTree';
 import { server, renderInTest } from '@hazmapper/test/testUtil';
@@ -24,11 +24,13 @@ describe('FeatureFileTree', () => {
     jest.clearAllMocks();
   });
 
-  it('renders feature list correctly', () => {
-    const { getByText } = renderInTest(
-      <FeatureFileTree {...defaultTreeProps} />
-    );
+  it('renders feature list correctly', async () => {
+    let rendered;
+    await act(async () => {
+      rendered = renderInTest(<FeatureFileTree {...defaultTreeProps} />);
+    });
 
+    const { getByText } = rendered;
     expect(getByText('foo')).toBeDefined();
     expect(getByText('image1.JPG')).toBeDefined();
     expect(getByText('image2.JPG')).toBeDefined();
@@ -48,37 +50,51 @@ describe('FeatureFileTree', () => {
       )
     );
 
-    const { getByTestId } = renderInTest(
-      <FeatureFileTree {...defaultTreeProps} />,
-      `/?selectedFeature=${featureId}`
-    );
+    let rendered;
+    await act(async () => {
+      rendered = renderInTest(
+        <FeatureFileTree {...defaultTreeProps} />,
+        `/?selectedFeature=${featureId}`
+      );
+    });
 
     // Find and click delete button (as featured is selected)
+    const { getByTestId } = rendered;
     const deleteButton = getByTestId('delete-feature-button');
-    fireEvent.click(deleteButton);
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
 
     await waitFor(() => {
       expect(wasDeleted).toBeTruthy();
     });
   });
 
-  it('does not show delete button for public projects', () => {
-    const { queryByTestId } = renderInTest(
-      <FeatureFileTree {...defaultTreeProps} isPublicView={true} />,
-      '/?selectedFeature=1'
-    );
+  it('does not show delete button for public projects', async () => {
+    let rendered;
+    await act(async () => {
+      rendered = renderInTest(
+        <FeatureFileTree {...defaultTreeProps} isPublicView={true} />,
+        '/?selectedFeature=1'
+      );
+    });
 
     // Verify delete button is not present
+    const { queryByTestId } = rendered;
     const deleteButton = queryByTestId('delete-feature-button');
     expect(deleteButton).toBeNull();
   });
 
-  it('does not show delete button when no feature is selected', () => {
-    const { queryByTestId } = renderInTest(
-      <FeatureFileTree {...defaultTreeProps} isPublicView={false} />
-    );
+  it('does not show delete button when no feature is selected', async () => {
+    let rendered;
+    await act(async () => {
+      rendered = renderInTest(
+        <FeatureFileTree {...defaultTreeProps} isPublicView={false} />
+      );
+    });
 
     // Verify delete button is not present
+    const { queryByTestId } = rendered;
     const deleteButton = queryByTestId('delete-feature-button');
     expect(deleteButton).toBeNull();
   });

react/src/components/FeatureFileTree/FeatureFileTree.test.tsx

@@ -4,7 +4,7 @@ import { FileListing } from './FileListing';
 import {
   useFiles,
   useAuthenticatedUser,
-  useDsProjects,
+  useDesignSafeProjects,
   useSystems,
 } from '../../hooks';
 import { serializeToChonkyFile } from '../../utils/fileUtils';
@@ -16,7 +16,7 @@ jest.mock('../../hooks', () => ({
     data: [],
     refetch: jest.fn(),
   })),
-  useDsProjects: jest.fn(() => ({ result: [] })),
+  useDesignSafeProjects: jest.fn(() => ({ result: [] })),
   useAuthenticatedUser: jest.fn(() => ({ data: { username: 'test-user' } })),
   useSystems: jest.fn(() => ({ data: [] })),
 }));
@@ -43,7 +43,7 @@ describe('FileListing', () => {
 
   it('renders without crashing and displays "No systems available" if no systems are returned', () => {
     (useSystems as jest.Mock).mockReturnValue({ data: [], myDataSystem: null });
-    (useDsProjects as jest.Mock).mockReturnValue({
+    (useDesignSafeProjects as jest.Mock).mockReturnValue({
       result: [],
     });
     (useAuthenticatedUser as jest.Mock).mockReturnValue({
@@ -66,7 +66,7 @@ describe('FileListing', () => {
       data: [],
       refetch: jest.fn(),
     });
-    (useDsProjects as jest.Mock).mockReturnValue({
+    (useDesignSafeProjects as jest.Mock).mockReturnValue({
       data: [],
     });
     (useAuthenticatedUser as jest.Mock).mockReturnValue({
@@ -90,7 +90,7 @@ describe('FileListing', () => {
       data: [],
       refetch: jest.fn(),
     });
-    (useDsProjects as jest.Mock).mockReturnValue({
+    (useDesignSafeProjects as jest.Mock).mockReturnValue({
       data: [],
     });
     (useAuthenticatedUser as jest.Mock).mockReturnValue({
@@ -131,7 +131,7 @@ describe('FileListing', () => {
       refetch: jest.fn(),
     });
 
-    (useDsProjects as jest.Mock).mockReturnValue({
+    (useDesignSafeProjects as jest.Mock).mockReturnValue({
       data: [],
     });
 
@@ -175,7 +175,7 @@ describe('FileListing', () => {
       refetch: jest.fn(),
     });
 
-    (useDsProjects as jest.Mock).mockReturnValue({
+    (useDesignSafeProjects as jest.Mock).mockReturnValue({
       data: [],
     });
 

react/src/components/Files/FileListing.test.tsx

@@ -3,6 +3,7 @@ import { renderInTest } from '@hazmapper/test/testUtil';
 import Map from './Map';
 import { tileServerLayers } from '../../__fixtures__/tileServerLayerFixture';
 import { featureCollection } from '../../__fixtures__/featuresFixture';
+import { MapPositionProvider } from '@hazmapper/context/MapContext';
 import { useForm, FormProvider } from 'react-hook-form';
 import * as z from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -26,7 +27,9 @@ test('renders map', () => {
 
     return (
       <FormProvider {...methods}>
-        <Map featureCollection={featureCollection} />
+        <MapPositionProvider>
+          <Map featureCollection={featureCollection} />
+        </MapPositionProvider>
       </FormProvider>
     );
   };