Task/WG-238: follow on

react/jest.setup.ts

@@ -53,8 +53,9 @@ export function shouldIgnoreError(args: any[]): boolean {
 
 beforeAll(() => {
   // Establish mocking of APIs before all tests
-  server.listen({ onUnhandledRequest: 'error' });
-
+  server.listen({
+    onUnhandledRequest: 'error',
+  });
   const originalError = console.error;
 
   jest.spyOn(console, 'error').mockImplementation((...args: any[]) => {

react/src/AppRouter.tsx

@@ -65,7 +65,10 @@ function AppRouter() {
             </ProtectedRoute>
           }
         />
-        <Route path={ROUTES.PUBLIC_PROJECT} element={<MapProject isPublic />} />
+        <Route
+          path={ROUTES.PUBLIC_PROJECT}
+          element={<MapProject isPublicView />}
+        />
         <Route path={ROUTES.CALLBACK} element={<Callback />} />
         <Route
           path={ROUTES.STREETVIEW_CALLBACK}

react/src/components/AssetsPanel/AssetsPanel.test.tsx

@@ -2,6 +2,7 @@ import React, { act } from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import AssetsPanel from './AssetsPanel';
 import { featureCollection } from '@hazmapper/__fixtures__/featuresFixture';
+import { projectMock } from '@hazmapper/__fixtures__/projectFixtures';
 import { useFeatures } from '@hazmapper/hooks';
 
 jest.mock('@hazmapper/hooks', () => ({
@@ -18,8 +19,8 @@ jest.mock('@hazmapper/components/FeatureFileTree', () => {
 describe('AssetsPanel', () => {
   const defaultProps = {
     featureCollection,
-    projectId: 1,
-    isPublic: false,
+    project: projectMock,
+    isPublicView: false,
   };
 
   beforeEach(() => {

react/src/components/AssetsPanel/AssetsPanel.tsx

@@ -1,22 +1,26 @@
 import React from 'react';
 import styles from './AssetsPanel.module.css';
 import FeatureFileTree from '@hazmapper/components/FeatureFileTree';
-import { FeatureCollection } from '@hazmapper/types';
+import { FeatureCollection, Project } from '@hazmapper/types';
 import { Button } from '@tacc/core-components';
 import { useFeatures } from '@hazmapper/hooks';
 
+const getFilename = (projectName: string) => {
+  // Convert to lowercase filename based on projectName
+  const sanitizedString = projectName.toLowerCase().replace(/[^a-z0-9]/g, '_');
+  return `${sanitizedString}.json`;
+};
+
 interface DownloadFeaturesButtonProps {
-  projectId: number;
-  isPublic: boolean;
+  project: Project;
 }
 
 const DownloadFeaturesButton: React.FC<DownloadFeaturesButtonProps> = ({
-  projectId,
-  isPublic,
+  project,
 }) => {
   const { isLoading: isDownloading, refetch: triggerDownload } = useFeatures({
-    projectId,
-    isPublic,
+    projectId: project.id,
+    isPublicView: project.public,
     assetTypes: [], // Empty array to get all features
     options: {
       enabled: false, // Only fetch when triggered by user clicking button
@@ -31,7 +35,7 @@ const DownloadFeaturesButton: React.FC<DownloadFeaturesButtonProps> = ({
         const url = window.URL.createObjectURL(blob);
         const link = document.createElement('a');
         link.href = url;
-        link.download = `hazmapper.json`;
+        link.download = getFilename(project.name);
 
         document.body.appendChild(link);
         link.click();
@@ -56,23 +60,23 @@ interface Props {
   featureCollection: FeatureCollection;
 
   /**
-   * Whether or not the map project is public.
+   * Whether or not the map project is a public view.
    */
-  isPublic: boolean;
+  isPublicView: boolean;
 
   /**
-   * active project id
+   * active project
    */
-  projectId: number;
+  project: Project;
 }
 
 /**
  * A panel component that displays info on feature assets
  */
 const AssetsPanel: React.FC<Props> = ({
-  isPublic,
+  isPublicView,
   featureCollection,
-  projectId,
+  project,
 }) => {
   return (
     <div className={styles.root}>
@@ -81,13 +85,13 @@ const AssetsPanel: React.FC<Props> = ({
       </div>
       <div className={styles.middleSection}>
         <FeatureFileTree
-          projectId={projectId}
-          isPublic={isPublic}
+          projectId={project.id}
+          isPublicView={isPublicView}
           featureCollection={featureCollection}
         />
       </div>
       <div className={styles.bottomSection}>
-        <DownloadFeaturesButton projectId={projectId} isPublic={isPublic} />
+        <DownloadFeaturesButton project={project} />
       </div>
     </div>
   );

react/src/components/DeleteMapModal/DeleteMapModal.tsx

@@ -20,13 +20,13 @@ const DeleteMapModal = ({
     isLoading: isDeletingProject,
     isError,
     isSuccess,
-  } = useDeleteProject(project.id);
+  } = useDeleteProject();
   const handleClose = () => {
     parentToggle();
   };
 
   const handleDeleteProject = () => {
-    deleteProject(undefined, {});
+    deleteProject({ projectId: project.id });
   };
 
   return (

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

@@ -1,14 +1,10 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
 import FeatureFileTree from './FeatureFileTree';
+import { server, renderInTest } from '@hazmapper/test/testUtil';
 import { featureCollection } from '@hazmapper/__fixtures__/featuresFixture';
-import { useDeleteFeature } from '@hazmapper/hooks';
-
-// Mock the hooks
-jest.mock('@hazmapper/hooks', () => ({
-  useDeleteFeature: jest.fn(),
-}));
+import { testDevConfiguration } from '@hazmapper/__fixtures__/appConfigurationFixture';
 
 jest.mock('react-resize-detector', () => ({
   useResizeDetector: () => ({
@@ -17,64 +13,59 @@ jest.mock('react-resize-detector', () => ({
   }),
 }));
 
-const renderWithRouter = (ui: React.ReactElement, { route = '/' } = {}) => {
-  return {
-    ...render(<MemoryRouter initialEntries={[route]}>{ui}</MemoryRouter>),
-  };
-};
-
 describe('FeatureFileTree', () => {
-  const defaultProps = {
+  const defaultTreeProps = {
     featureCollection: featureCollection,
-    isPublic: false,
+    isPublicView: false,
     projectId: 1,
   };
 
   beforeEach(() => {
     jest.clearAllMocks();
-
-    (useDeleteFeature as jest.Mock).mockImplementation(() => ({
-      mutate: jest.fn(),
-      isLoading: false,
-    }));
   });
 
   it('renders feature list correctly', () => {
-    const { getByText } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} />
+    const { getByText } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} />
     );
 
     expect(getByText('foo')).toBeDefined();
     expect(getByText('image1.JPG')).toBeDefined();
     expect(getByText('image2.JPG')).toBeDefined();
   });
 
-  it('handles feature deletion for non-public projects', () => {
-    const deleteFeatureMock = jest.fn();
-    (useDeleteFeature as jest.Mock).mockImplementation(() => ({
-      mutate: deleteFeatureMock,
-      isLoading: false,
-    }));
+  it('handles feature deletion for non-public projects', async () => {
+    const featureId = 1;
+    let wasDeleted = false;
+
+    server.use(
+      http.delete(
+        `${testDevConfiguration.geoapiUrl}/projects/${defaultTreeProps.projectId}/features/${featureId}/`,
+        () => {
+          wasDeleted = true;
+          return HttpResponse.json({}, { status: 200 });
+        }
+      )
+    );
 
-    const { getByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} />,
-      { route: '/?selectedFeature=1' }
+    const { getByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} />,
+      `/?selectedFeature=${featureId}`
     );
 
     // Find and click delete button (as featured is selected)
     const deleteButton = getByTestId('delete-feature-button');
     fireEvent.click(deleteButton);
 
-    expect(deleteFeatureMock).toHaveBeenCalledWith({
-      projectId: 1,
-      featureId: 1,
+    await waitFor(() => {
+      expect(wasDeleted).toBeTruthy();
     });
   });
 
   it('does not show delete button for public projects', () => {
-    const { queryByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} isPublic={true} />,
-      { route: '/?selectedFeature=1' }
+    const { queryByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} isPublicView={true} />,
+      '/?selectedFeature=1'
     );
 
     // Verify delete button is not present
@@ -83,8 +74,8 @@ describe('FeatureFileTree', () => {
   });
 
   it('does not show delete button when no feature is selected', () => {
-    const { queryByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} isPublic={true} />
+    const { queryByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} isPublicView={false} />
     );
 
     // Verify delete button is not present

react/src/components/FeatureFileTree/FeatureFileTree.tsx

@@ -31,7 +31,7 @@ interface FeatureFileTreeProps {
   /**
    * Whether or not the map project is public.
    */
-  isPublic: boolean;
+  isPublicView: boolean;
 
   /**
    * active project id
@@ -44,7 +44,7 @@ interface FeatureFileTreeProps {
  */
 const FeatureFileTree: React.FC<FeatureFileTreeProps> = ({
   featureCollection,
-  isPublic,
+  isPublicView,
   projectId,
 }) => {
   const { mutate: deleteFeature, isLoading } = useDeleteFeature();
@@ -169,7 +169,7 @@ const FeatureFileTree: React.FC<FeatureFileTreeProps> = ({
           <FeatureIcon featureType={featureNode.featureType} />
         )}
         <span className={styles.fileName}>{featureNode.name}</span>
-        {!isPublic && isSelected && (
+        {!isPublicView && isSelected && (
           <Button
             size="small"
             type="primary"

react/src/components/ManageMapProjectModal/ManageMapProjectModal.tsx

@@ -4,11 +4,11 @@ import styles from './ManageMapProjectModal.module.css';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
 interface ManageMapProjectModalProps {
-  isPublic: boolean;
+  isPublicView: boolean;
 }
 
 const ManageMapProjectModal: React.FC<ManageMapProjectModalProps> = ({
-  isPublic,
+  isPublicView,
 }) => {
   const navigate = useNavigate();
   const location = useLocation();
@@ -24,7 +24,7 @@ const ManageMapProjectModal: React.FC<ManageMapProjectModalProps> = ({
       <ModalHeader toggle={closeModal}>TODO</ModalHeader>
       <ModalBody>
         <div className={styles.root}>
-          Manage Map Project TODO, isPublic: {isPublic}
+          Manage Map Project TODO, isPublicView: {isPublicView}
         </div>
       </ModalBody>
     </Modal>

react/src/components/MapProjectNavBar/MapProjectNavBar.test.tsx

@@ -7,7 +7,7 @@ describe('MapProjectNavBar', () => {
   it('renders the public nav items for public maps', () => {
     const { getByText, queryByText } = render(
       <BrowserRouter>
-        <MapProjectNavBar isPublic={true} />
+        <MapProjectNavBar isPublicView={true} />
       </BrowserRouter>
     );
     expect(getByText('Assets')).toBeDefined();
@@ -22,7 +22,7 @@ describe('MapProjectNavBar', () => {
   it('renders all nav items for non-public maps', () => {
     const { getByText } = render(
       <BrowserRouter>
-        <MapProjectNavBar isPublic={false} />
+        <MapProjectNavBar isPublicView={false} />
       </BrowserRouter>
     );
 

react/src/components/MapProjectNavBar/MapProjectNavBar.tsx

@@ -59,18 +59,20 @@ const navItems: NavItem[] = [
 ];
 
 interface NavBarPanelProps {
-  isPublic?: boolean;
+  isPublicView?: boolean;
 }
 
-const MapProjectNavBar: React.FC<NavBarPanelProps> = ({ isPublic = false }) => {
+const MapProjectNavBar: React.FC<NavBarPanelProps> = ({
+  isPublicView = false,
+}) => {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const activePanel = queryParams.get(queryPanelKey);
 
   return (
     <div className={styles.root}>
       {navItems
-        .filter((item) => (isPublic ? item.showWhenPublic : true))
+        .filter((item) => (isPublicView ? item.showWhenPublic : true))
         .map((item) => {
           const updatedQueryParams = new URLSearchParams(location.search);
 

react/src/hooks/features/useDeleteFeature.ts

@@ -1,5 +1,5 @@
 import { useQueryClient } from 'react-query';
-import { useDeleteWithParams } from '@hazmapper/requests';
+import { useDelete } from '@hazmapper/requests';
 
 type DeleteFeatureParams = {
   projectId: number;
@@ -9,7 +9,7 @@ type DeleteFeatureParams = {
 export function useDeleteFeature() {
   const queryClient = useQueryClient();
 
-  return useDeleteWithParams<void, DeleteFeatureParams>({
+  return useDelete<void, DeleteFeatureParams>({
     endpoint: ({ projectId, featureId }) =>
       `/projects/${projectId}/features/${featureId}/`,
     options: {