From 526f1fefa6d75721b15bb470628a3cb0c8ff54a0 Mon Sep 17 00:00:00 2001
From: Dinika Saxena <dinikasaxenas@gmail.com>
Date: Thu, 30 May 2024 11:31:48 +0200
Subject: [PATCH] On clicking bookmarks navigate to details morphology

Signed-off-by: Dinika Saxena <dinikasaxenas@gmail.com>
---
 .../Bookmarks/BookmarkList.spec.tsx           | 26 +++++++++++++++++++
 .../VirtualLab/Bookmarks/BookmarkList.tsx     |  2 ++
 .../Bookmarks/ExperimentBookmarks.tsx         | 18 ++++++++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/components/VirtualLab/Bookmarks/BookmarkList.spec.tsx b/src/components/VirtualLab/Bookmarks/BookmarkList.spec.tsx
index 78dc73ee6..1d935c08b 100644
--- 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
index a9ab5a4ce..501f4ab72 100644
--- 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
index 6c0b1361b..63af1cfef 100644
--- a/src/components/VirtualLab/Bookmarks/ExperimentBookmarks.tsx
+++ b/src/components/VirtualLab/Bookmarks/ExperimentBookmarks.tsx
@@ -2,6 +2,7 @@ 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';
@@ -9,15 +10,19 @@ import WithControlPanel from '@/components/explore-section/ExploreSectionListing
 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>
             </>