Update overview layout (#780)

* layout: add sidebar to project overview and update routing

* layout: hide pagination bar for compact views (if we only have one page to show)

* layout: make it possible to edit and delete project from overview

* fix: hide project breadcrumb if no project was found

* fix: consider permissions for project actions

* layout: add sidebar section "Metadata"

* feat: setup routing for processing details and pipelines + adjust dialog structure

* copy: update "Overview" -> "Project"

* chore: rename parent folder from "overview" -> "project"

* feat: setup new page "General" for editing project details

* fix: hide general settings view if user is not allowed to update the project

* chore: cleanup

* fix: tweak permission logic

Author: annavik

ui/src/app.tsx

@@ -21,12 +21,19 @@ import { CollectionDetails } from 'pages/collection-details/collection-details'
 import { Deployments } from 'pages/deployments/deployments'
 import { Jobs } from 'pages/jobs/jobs'
 import { Occurrences } from 'pages/occurrences/occurrences'
-import Overview from 'pages/overview/overview'
+import { Collections } from 'pages/project/collections/collections'
+import { Devices } from 'pages/project/entities/devices'
+import { Sites } from 'pages/project/entities/sites'
+import { General } from 'pages/project/general/general'
+import { Pipelines } from 'pages/project/pipelines/pipelines'
+import { ProcessingServices } from 'pages/project/processing-services/processing-services'
+import Project from 'pages/project/project'
+import { Storage } from 'pages/project/storage/storage'
+import { Summary } from 'pages/project/summary/summary'
 import { Projects } from 'pages/projects/projects'
 import SessionDetails from 'pages/session-details/session-details'
 import { Sessions } from 'pages/sessions/sessions'
 import { Species } from 'pages/species/species'
-import { UnderConstruction } from 'pages/under-construction/under-construction'
 import { ReactNode, useContext, useEffect } from 'react'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
 import {
@@ -91,15 +98,30 @@ export const App = () => (
         </Route>
         <Route path="projects" element={<ProjectsContainer />} />
         <Route path="projects/:projectId" element={<ProjectContainer />}>
-          <Route path="" element={<Overview />} />
+          <Route path="" element={<Project />}>
+            <Route
+              path=""
+              element={<Navigate to={{ pathname: 'summary' }} replace={true} />}
+            />
+            <Route path="summary" element={<Summary />} />
+            <Route path="collections" element={<Collections />} />
+            <Route path="collections/:id" element={<CollectionDetails />} />
+            <Route
+              path="processing-services/:id?"
+              element={<ProcessingServices />}
+            />
+            <Route path="pipelines/:id?" element={<Pipelines />} />
+            <Route path="sites" element={<Sites />} />
+            <Route path="devices" element={<Devices />} />
+            <Route path="general" element={<General />} />
+            <Route path="storage" element={<Storage />} />
+          </Route>
           <Route path="jobs/:id?" element={<Jobs />} />
           <Route path="deployments/:id?" element={<Deployments />} />
           <Route path="sessions" element={<Sessions />} />
           <Route path="sessions/:id" element={<SessionDetails />} />
           <Route path="occurrences/:id?" element={<Occurrences />} />
           <Route path="taxa/:id?" element={<Species />} />
-          <Route path="collections/:id" element={<CollectionDetails />} />
-          <Route path="*" element={<UnderConstruction />} />
         </Route>
         <Route
           path="/terms-of-service"
@@ -181,15 +203,19 @@ const ProjectContainer = () => {
   })
 
   useEffect(() => {
-    setProjectBreadcrumb({
-      title: projectDetails.project?.name ?? '',
-      path: APP_ROUTES.PROJECT_DETAILS({ projectId: projectId as string }),
-    })
+    if (projectDetails.error) {
+      setProjectBreadcrumb(undefined)
+    } else {
+      setProjectBreadcrumb({
+        title: projectDetails.project?.name ?? '',
+        path: APP_ROUTES.PROJECT_DETAILS({ projectId: projectId as string }),
+      })
+    }
 
     return () => {
       setProjectBreadcrumb(undefined)
     }
-  }, [projectDetails.project])
+  }, [projectDetails.project, projectDetails.error])
 
   return (
     <>

ui/src/components/breadcrumbs/breadcrumbs.module.scss

@@ -5,8 +5,8 @@
   display: flex;
   align-items: center;
 
-  :not(:last-child) {
-    margin-right: 8px;
+  > :not(:last-child) {
+    margin-right: 16px;
   }
 }
 

ui/src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,17 +1,17 @@
 import classNames from 'classnames'
-import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon'
+import { ChevronRightIcon } from 'lucide-react'
 import { Fragment, useContext, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { Breadcrumb, BreadcrumbContext } from 'utils/breadcrumbContext'
 import { STRING, translate } from 'utils/language'
 import styles from './breadcrumbs.module.scss'
 
 export const Breadcrumbs = ({
+  activeNavItem,
   navItems,
-  activeNavItemId,
 }: {
+  activeNavItem: { id: string; title: string; path?: string }
   navItems: { id: string; title: string; path?: string }[]
-  activeNavItemId: string
 }) => {
   const {
     pageBreadcrumb,
@@ -22,20 +22,16 @@ export const Breadcrumbs = ({
   } = useContext(BreadcrumbContext)
 
   useEffect(() => {
-    const activeNavItem =
-      activeNavItemId !== 'overview' &&
-      navItems.find((navItem) => navItem.id === activeNavItemId)
-
-    setMainBreadcrumb(
-      activeNavItem
-        ? { title: activeNavItem.title, path: activeNavItem.path }
-        : undefined
-    )
+    if (activeNavItem.id === 'project') {
+      setMainBreadcrumb(undefined)
+    } else {
+      setMainBreadcrumb(activeNavItem)
+    }
 
     return () => {
       setMainBreadcrumb(undefined)
     }
-  }, [navItems, activeNavItemId])
+  }, [navItems, activeNavItem])
 
   const breadcrumbs = [
     pageBreadcrumb,
@@ -70,11 +66,7 @@ export const Breadcrumbs = ({
               </Link>
             )}
             {!isLast && (
-              <Icon
-                type={IconType.ToggleRight}
-                theme={IconTheme.Neutral}
-                size={8}
-              />
+              <ChevronRightIcon className="w-3 h-3 text-muted-foreground/50" />
             )}
           </Fragment>
         )

ui/src/components/menu/menu.tsx

@@ -6,17 +6,17 @@ import styles from './menu.module.scss'
 
 export const Menu = () => {
   const navigate = useNavigate()
-  const { navItems, activeNavItemId } = useNavItems()
+  const { navItems, activeNavItem } = useNavItems()
 
   return (
     <div className={styles.menu}>
       <div className={styles.topBar}>
-        <Breadcrumbs navItems={navItems} activeNavItemId={activeNavItemId} />
+        <Breadcrumbs navItems={navItems} activeNavItem={activeNavItem} />
       </div>
       <div className={styles.navigationBar}>
         <NavigationBar
           items={navItems}
-          activeItemId={activeNavItemId}
+          activeItemId={activeNavItem.id}
           onItemClick={(id) => {
             const item = navItems.find((i) => i.id === id)
             if (item?.path) {

ui/src/data-services/hooks/processing-services/useProcessingServiceDetails.ts

@@ -10,8 +10,7 @@ const convertServerRecord = (record: ServerProcessingService) =>
   new ProcessingService(record)
 
 export const useProcessingServiceDetails = (
-  processingServiceId: string,
-  queryParams: { projectId: string }
+  processingServiceId: string
 ): {
   processingService?: ProcessingService
   isLoading: boolean
@@ -21,7 +20,7 @@ export const useProcessingServiceDetails = (
   const { data, isLoading, isFetching, error } =
     useAuthorizedQuery<ProcessingService>({
       queryKey: [API_ROUTES.PROCESSING_SERVICES, processingServiceId],
-      url: `${API_URL}/${API_ROUTES.PROCESSING_SERVICES}/${processingServiceId}/?project_id=${queryParams.projectId}`,
+      url: `${API_URL}/${API_ROUTES.PROCESSING_SERVICES}/${processingServiceId}`,
     })
 
   const processingService = useMemo(

ui/src/design-system/components/box/box.module.scss

@@ -4,7 +4,7 @@
 .box {
   background: $color-generic-white;
   width: 100%;
-  border-radius: 4px;
+  border-radius: 6px;
   border: 1px solid $color-neutral-100;
   overflow-x: auto;
 }

ui/src/design-system/components/pagination-bar/pagination-bar.tsx

@@ -6,21 +6,28 @@ import { PageButton } from './page-button/page-button'
 import styles from './pagination-bar.module.scss'
 
 interface PaginationBarProps {
+  compact?: boolean
   pagination: {
     page: number
     perPage: number
   }
-  total: number
   setPage: (page: number) => void
+  total: number
 }
 
 export const PaginationBar = ({
+  compact,
   pagination,
-  total,
   setPage,
+  total,
 }: PaginationBarProps) => {
   const { page: currentPage, perPage } = pagination
   const numPages = Math.ceil(total / perPage)
+
+  if (compact && numPages === 1) {
+    return null
+  }
+
   const firstPage = 0
   const lastPage = numPages - 1
   const pageWindow = getPageWindow(currentPage, numPages)

ui/src/design-system/components/plot-grid/plot-grid.module.scss

@@ -6,7 +6,7 @@
 .grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  gap: 16px;
+  gap: 24px;
 }
 
 /* Adjust number of columns based on container width, to avoid horizontal scrolling.
@@ -15,13 +15,13 @@
  * maxWidth = plotWidth * numBoxes + gapSize * (numBoxes - 1)
  */
 
-@container container (max-width: calc(384px * 3 + 16px * 2)) {
+@container container (max-width: calc(384px * 3 + 24px * 2)) {
   .grid {
     grid-template-columns: 1fr 1fr;
   }
 }
 
-@container container (max-width: calc(384px * 2 + 16px * 1)) {
+@container container (max-width: calc(384px * 2 + 24px * 1)) {
   .grid {
     grid-template-columns: 1fr;
   }

ui/src/design-system/map/styles.module.scss

@@ -7,7 +7,7 @@
   width: 100%;
   height: 320px;
   border: 1px solid $color-neutral-100;
-  border-radius: 4px;
+  border-radius: 6px;
   overflow: hidden;
   position: relative;
   z-index: 0;

ui/src/pages/collection-details/collection-details.tsx

@@ -7,9 +7,8 @@ import { PaginationBar } from 'design-system/components/pagination-bar/paginatio
 import { Table } from 'design-system/components/table/table/table'
 import { TableSortSettings } from 'design-system/components/table/types'
 import { ToggleGroup } from 'design-system/components/toggle-group/toggle-group'
-import { useContext, useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useParams } from 'react-router-dom'
-import { BreadcrumbContext } from 'utils/breadcrumbContext'
 import { STRING, translate } from 'utils/language'
 import { usePagination } from 'utils/usePagination'
 import { useSelectedView } from 'utils/useSelectedView'
@@ -21,17 +20,8 @@ export const CollectionDetails = () => {
   const { selectedView, setSelectedView } = useSelectedView('table')
 
   // Collection details
-  const { setDetailBreadcrumb } = useContext(BreadcrumbContext)
   const { collection } = useCollectionDetails(id as string)
 
-  useEffect(() => {
-    setDetailBreadcrumb(collection ? { title: collection.name } : undefined)
-
-    return () => {
-      setDetailBreadcrumb(undefined)
-    }
-  }, [collection])
-
   // Collection captures
   const [sort, setSort] = useState<TableSortSettings>()
   const { pagination, setPage } = usePagination()