On clicking bookmarks navigate to details morphology

Signed-off-by: Dinika Saxena <[email protected]>
BlueBrain · May 30, 2024 · 526f1fe · 526f1fe
1 parent 9108548
commit 526f1fe
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 1 deletion.
diff --git a/src/components/VirtualLab/Bookmarks/BookmarkList.spec.tsx b/src/components/VirtualLab/Bookmarks/BookmarkList.spec.tsx
@@ -33,6 +33,19 @@ describe('Library', () => {
     await screen.findByText('item1');
     screen.getByText('item2');
   });
+
+  it('bookmark item links to detail page', async () => {
+    projectHasBookmarks(labId, projectId, [bookmarkItem('item1'), bookmarkItem('item2')]);
+    elasticSearchReturns(['item1', 'item2']);
+    const user = renderComponent(labId, projectId);
+
+    const nameCell = await screen.findByText('item1');
+    await user.click(nameCell);
+    const url = navigateTo.mock.calls[0][0];
+    expect(url).toContain('morphology');
+    expect(url).toContain(labId);
+    expect(url).toContain(projectId);
+  });
 });
 
 const renderComponent = (labId: string, projectId: string) => {
@@ -147,14 +160,27 @@ jest.mock('src/api/explore-section/resources', () => {
 
   return {
     ...actual,
+    __esModule: true,
     fetchEsResourcesByType: (accessToken: string, dataQuery: DataQuery) =>
       fetchEsResourcesByType(accessToken, dataQuery),
   };
 });
 
+jest.mock('next/navigation', () => {
+  const actual = jest.requireActual('next/navigation');
+  return {
+    ...actual,
+    __esModule: true,
+    useRouter: () => ({
+      push: (path: string) => navigateTo(path),
+    }),
+  };
+});
+
 const getBookmarkedItems = jest.fn();
 const buildFilters = jest.fn();
 const fetchEsResourcesByType = jest.fn();
+const navigateTo = jest.fn();
 const filtersQuery = new esb.BoolQuery();
 
 const mockHit = (resourceId: string) => ({

diff --git a/src/components/VirtualLab/Bookmarks/BookmarkList.tsx b/src/components/VirtualLab/Bookmarks/BookmarkList.tsx
@@ -44,6 +44,8 @@ export default function BookmarkList({ labId, projectId }: Props) {
             <ExperimentBookmarks
               dataType={DataType.ExperimentalNeuronMorphology}
               resourceIds={bookmarkedItems.map((b) => b.resourceId)}
+              labId={labId}
+              projectId={projectId}
             />
           ),
         },

diff --git a/src/components/VirtualLab/Bookmarks/ExperimentBookmarks.tsx b/src/components/VirtualLab/Bookmarks/ExperimentBookmarks.tsx
@@ -2,22 +2,27 @@ import { useAtom, useAtomValue } from 'jotai';
 
 import { loadable } from 'jotai/utils';
 import { useMemo } from 'react';
+import { useRouter } from 'next/navigation';
 import ExploreSectionTable from '@/components/explore-section/ExploreSectionListingView/ExploreSectionTable';
 import FilterControls from '@/components/explore-section/ExploreSectionListingView/FilterControls';
 import NumericResultsInfo from '@/components/explore-section/ExploreSectionListingView/NumericResultsInfo';
 import WithControlPanel from '@/components/explore-section/ExploreSectionListingView/WithControlPanel';
 import { DataType } from '@/constants/explore-section/list-views';
 import useExploreColumns from '@/hooks/useExploreColumns';
 import { dataAtom, sortStateAtom } from '@/state/explore-section/list-view-atoms';
+import { detailUrlWithinLab } from '@/util/common';
 
 type Props = {
   dataType: DataType;
   resourceIds: string[];
+  labId: string;
+  projectId: string;
 };
 
-export default function ExperimentBookmarks({ dataType, resourceIds }: Props) {
+export default function ExperimentBookmarks({ dataType, resourceIds, labId, projectId }: Props) {
   const [sortState, setSortState] = useAtom(sortStateAtom);
   const columns = useExploreColumns(setSortState, sortState, [], null, dataType);
+  const router = useRouter();
 
   const data = useAtomValue(
     useMemo(
@@ -77,6 +82,17 @@ export default function ExperimentBookmarks({ dataType, resourceIds }: Props) {
                   brainRegionSource="selected"
                   loading={data.state === 'loading'}
                   bookmarkResourceIds={resourceIds}
+                  onCellClick={(_, record) => {
+                    router.push(
+                      detailUrlWithinLab(
+                        labId,
+                        projectId,
+                        record._source.project.label,
+                        record._id,
+                        'morphology'
+                      )
+                    );
+                  }}
                 />
               </div>
             </>