task/WG-429-Public-Map-Info-Panel

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

@@ -14,8 +14,8 @@ describe('MapProjectNavBar', () => {
     expect(getByText('Assets')).toBeDefined();
     expect(getByText('Layers')).toBeDefined();
     expect(getByText('Filters')).toBeDefined();
-    expect(getByText('Manage')).toBeDefined();
     // Streetview and Point Clouds should not be rendered for public maps
+    expect(queryByText('Manage')).toBeNull();
     expect(queryByText('Streetview')).toBeNull();
     expect(queryByText('Point Clouds')).toBeNull();
   });

react/src/components/MapProjectNavBar/MapProjectNavBar.tsx

@@ -16,6 +16,7 @@ interface NavItem {
   imagePath: string;
   panel: Panel;
   showWhenPublic: boolean;
+  hideWhenPrivate?: boolean;
 }
 
 const navItems: NavItem[] = [
@@ -54,7 +55,14 @@ const navItems: NavItem[] = [
     label: 'Manage',
     imagePath: manageImage,
     panel: Panel.Manage,
+    showWhenPublic: false,
+  },
+  {
+    label: 'Info',
+    imagePath: manageImage,
+    panel: Panel.Info,
     showWhenPublic: true,
+    hideWhenPrivate: true,
   },
 ];
 
@@ -69,9 +77,12 @@ const MapProjectNavBar: React.FC<NavBarPanelProps> = ({ isPublicView }) => {
   const activePanel = queryParams.get(queryPanelKey);
 
   React.useEffect(() => {
-    if (isPublicView && activePanel) {
+    if (activePanel) {
       const currentPanel = navItems.find((item) => item.panel === activePanel);
-      if (currentPanel && !currentPanel.showWhenPublic) {
+      if (
+        (currentPanel && !currentPanel.showWhenPublic && isPublicView) ||
+        (currentPanel && currentPanel.hideWhenPrivate && !isPublicView)
+      ) {
         const updatedParams = new URLSearchParams(location.search);
         updatedParams.delete(queryPanelKey);
         navigate(`${location.pathname}?${updatedParams.toString()}`, {
@@ -92,6 +103,9 @@ const MapProjectNavBar: React.FC<NavBarPanelProps> = ({ isPublicView }) => {
           if (isPublicView && !item.showWhenPublic) {
             return null;
           }
+          if (!isPublicView && item.hideWhenPrivate == true) {
+            return null;
+          }
 
           if (activePanel === item.panel) {
             // If already active, we want to remove queryPanel key if user clicks again

react/src/components/PublicInfoPanel/PublicInfoPanel.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Project } from '@hazmapper/types';
+import { Flex, List } from 'antd';
+
+interface PublicInfoProps {
+  project: Project;
+  isPublicView: boolean;
+}
+
+const PublicInfoPanel: React.FC<PublicInfoProps> = ({
+  project,
+  isPublicView,
+}) => {
+  return (
+    <>
+      {isPublicView && (
+        <Flex vertical justify="center">
+          <List itemLayout="vertical">
+            <List.Item>
+              <List.Item.Meta title={'Name:'} style={{ marginBottom: 0 }} />
+              {project.name}
+            </List.Item>
+            <List.Item>
+              <List.Item.Meta
+                title={'Description:'}
+                style={{ marginBottom: 0 }}
+              />
+              {project.description}
+            </List.Item>
+          </List>
+        </Flex>
+      )}
+    </>
+  );
+};
+export default PublicInfoPanel;

react/src/components/PublicInfoPanel/index.tsx

@@ -0,0 +1 @@
+export { default } from './PublicInfoPanel';

react/src/hooks/projects/useProjects.ts

@@ -30,7 +30,7 @@ export const useProject = ({
   const endpoint = `/projects/?uuid=${projectUUID}`;
   const query = useGet<Project>({
     endpoint,
-    key: ['project'],
+    key: ['project', projectUUID],
     options,
     transform: (data) => data[0], // result is a list with a single Project
   });
@@ -139,7 +139,7 @@ export const useUpdateProjectInfo = () => {
     options: {
       onSuccess: () => {
         queryClient.invalidateQueries({ queryKey: ['projects'] });
-        queryClient.invalidateQueries({ queryKey: ['project'] });
+        queryClient.invalidateQueries({ queryKey: ['project', projectUUID] });
       },
     },
   });

react/src/pages/MapProject/MapProject.module.css

@@ -44,3 +44,11 @@
   width: 100%;
   height: 100%;
 }
+.errorContainer {
+  font-size: large;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100%;
+}

react/src/pages/MapProject/MapProject.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { Layout, Flex } from 'antd';
-import { LoadingSpinner } from '@tacc/core-components';
+import { LoadingSpinner, Message } from '@tacc/core-components';
 
 import Map from '@hazmapper/components/Map';
 import AssetsPanel from '@hazmapper/components/AssetsPanel';
@@ -37,6 +37,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
 import { useForm, FormProvider } from 'react-hook-form';
 import StreetviewPanel from '@hazmapper/components/StreetviewPanel';
+import PublicInfoPanel from '@hazmapper/components/PublicInfoPanel';
 
 export const tileLayerSchema = z.object({
   id: z.number(),
@@ -116,6 +117,18 @@ const MapProject: React.FC<MapProjectProps> = ({ isPublicView = false }) => {
       </div>
     );
   }
+  if (isPublicView && activeProject.public === false) {
+    return (
+      <div className={styles.root}>
+        <HeaderNavBar />
+        <div className={styles.errorContainer}>
+          <Message type="error" tagName="div">
+            <p>This is not a public map</p>
+          </Message>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <LoadedMapProject
@@ -288,9 +301,15 @@ const LoadedMapProject: React.FC<LoadedMapProject> = ({
                       />
                     )}
                     {activePanel === Panel.Streetview && <StreetviewPanel />}
-                    {activePanel === Panel.Manage && (
+                    {activePanel === Panel.Manage && !isPublicView && (
                       <ManageMapProjectPanel project={activeProject} />
                     )}
+                    {activePanel === Panel.Info && isPublicView && (
+                      <PublicInfoPanel
+                        project={activeProject}
+                        isPublicView={true}
+                      />
+                    )}
                   </BasePanel>
                 )}
               </Flex>

react/src/utils/panels.ts

@@ -7,4 +7,5 @@ export enum Panel {
   Filters = 'Filters',
   Streetview = 'Streetview',
   Manage = 'Manage',
+  Info = 'Info',
 }