From 278164009487520121e7728348573b4103845122 Mon Sep 17 00:00:00 2001
From: Dinika Saxena <dinikasaxenas@gmail.com>
Date: Tue, 4 Jul 2023 18:15:23 +0200
Subject: [PATCH] US 8 // Navigate to resource view to see details

Signed-off-by: Dinika Saxena <dinikasaxenas@gmail.com>
---
 .../components/ResourceEditor/CodeEditor.tsx  |  2 +-
 .../ResourceEditor/ResourceEditor.spec.tsx    |  2 +-
 .../components/ResourceEditor/index.tsx       |  2 +-
 .../dataExplorer/DataExplorer.spec.tsx        | 43 ++++++++++++++++---
 .../dataExplorer/DataExplorerTable.tsx        | 17 ++++++++
 5 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/ResourceEditor/CodeEditor.tsx b/src/shared/components/ResourceEditor/CodeEditor.tsx
index f6b656cd64..5c893cb048 100644
--- a/src/shared/components/ResourceEditor/CodeEditor.tsx
+++ b/src/shared/components/ResourceEditor/CodeEditor.tsx
@@ -38,7 +38,7 @@ const CodeEditor = forwardRef<codemiror.Editor | undefined, TCodeEditor>(
     return (
       <Spin spinning={busy}>
         <CodeMirror
-          data-testId="code-mirror-editor"
+          data-testid="code-mirror-editor"
           value={value}
           autoCursor={false}
           detach={false}
diff --git a/src/shared/components/ResourceEditor/ResourceEditor.spec.tsx b/src/shared/components/ResourceEditor/ResourceEditor.spec.tsx
index d78c691df8..f1c15ea708 100644
--- a/src/shared/components/ResourceEditor/ResourceEditor.spec.tsx
+++ b/src/shared/components/ResourceEditor/ResourceEditor.spec.tsx
@@ -26,7 +26,7 @@ describe('ResourceEditor', () => {
     const onLinksFound = jest.fn();
     const { queryByText, container } = render(
       <CodeEditor
-        data-testId="code-mirror-editor"
+        data-testid="code-mirror-editor"
         value={JSON.stringify(resourceResolverApi)}
         editable={false}
         onLinkClick={() => {}}
diff --git a/src/shared/components/ResourceEditor/index.tsx b/src/shared/components/ResourceEditor/index.tsx
index 4784b34a91..2330b2c5ac 100644
--- a/src/shared/components/ResourceEditor/index.tsx
+++ b/src/shared/components/ResourceEditor/index.tsx
@@ -194,7 +194,7 @@ const ResourceEditor: React.FunctionComponent<ResourceEditorProps> = props => {
 
   return (
     <div
-      data-testId="resource-editor"
+      data-testid="resource-editor"
       className={valid ? 'resource-editor' : 'resource-editor _invalid'}
     >
       {showControlPanel && (
diff --git a/src/subapps/dataExplorer/DataExplorer.spec.tsx b/src/subapps/dataExplorer/DataExplorer.spec.tsx
index 5de9fd30b3..fc6781d20d 100644
--- a/src/subapps/dataExplorer/DataExplorer.spec.tsx
+++ b/src/subapps/dataExplorer/DataExplorer.spec.tsx
@@ -26,6 +26,10 @@ import {
   EXISTS,
   getAllPaths,
 } from './PredicateSelector';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import configureStore from '../../shared/store';
 
 describe('DataExplorer', () => {
   const server = setupServer(
@@ -33,6 +37,7 @@ describe('DataExplorer', () => {
     filterByProjectHandler(defaultMockResult),
     getProjectHandler()
   );
+  const history = createMemoryHistory({});
 
   let container: HTMLElement;
   let user: UserEvent;
@@ -46,13 +51,18 @@ describe('DataExplorer', () => {
       fetch,
       uri: deltaPath(),
     });
+    const store = configureStore(history, { nexus }, {});
 
     dataExplorerPage = (
-      <QueryClientProvider client={queryClient}>
-        <NexusProvider nexusClient={nexus}>
-          <DataExplorer />
-        </NexusProvider>
-      </QueryClientProvider>
+      <Provider store={store}>
+        <QueryClientProvider client={queryClient}>
+          <Router history={history}>
+            <NexusProvider nexusClient={nexus}>
+              <DataExplorer />
+            </NexusProvider>
+          </Router>
+        </QueryClientProvider>
+      </Provider>
     );
 
     component = render(dataExplorerPage);
@@ -112,6 +122,18 @@ describe('DataExplorer', () => {
     return allCellsForRow[colIndex].textContent;
   };
 
+  const getRowForResource = async (resource: Resource) => {
+    const selfCell = await screen.getAllByText(
+      new RegExp(resource._self, 'i'),
+      {
+        selector: 'td',
+      }
+    );
+    const row = selfCell[0].parentElement;
+    expect(row).toBeInTheDocument();
+    return row!;
+  };
+
   const openProjectAutocomplete = async () => {
     const projectAutocomplete = await getProjectAutocomplete();
     await userEvent.click(projectAutocomplete);
@@ -499,4 +521,15 @@ describe('DataExplorer', () => {
     await userEvent.type(valueInput, 'arch');
     await expectRowCountToBe(3);
   });
+
+  it('navigates to resource view when user clicks on row', async () => {
+    await expectRowCountToBe(10);
+
+    expect(history.location.pathname).not.toContain('self1');
+
+    const firstDataRow = await getRowForResource(defaultMockResult[0]);
+    await userEvent.click(firstDataRow);
+
+    expect(history.location.pathname).toContain('self1');
+  });
 });
diff --git a/src/subapps/dataExplorer/DataExplorerTable.tsx b/src/subapps/dataExplorer/DataExplorerTable.tsx
index 0f4a4b9c06..256136b92c 100644
--- a/src/subapps/dataExplorer/DataExplorerTable.tsx
+++ b/src/subapps/dataExplorer/DataExplorerTable.tsx
@@ -8,6 +8,8 @@ import isValidUrl from '../../utils/validUrl';
 import { NoDataCell } from './NoDataCell';
 import './styles.less';
 import { DataExplorerConfiguration } from './DataExplorer';
+import { useHistory, useLocation } from 'react-router-dom';
+import { makeResourceUri, parseProjectUrl } from '../../shared/utils';
 
 interface TDataExplorerTable {
   isLoading: boolean;
@@ -30,6 +32,9 @@ export const DataExplorerTable: React.FC<TDataExplorerTable> = ({
   offset,
   updateTableConfiguration,
 }: TDataExplorerTable) => {
+  const history = useHistory();
+  const location = useLocation();
+
   const allowedTotal = total ? (total > 10000 ? 10000 : total) : undefined;
 
   const tablePaginationConfig: TablePaginationConfig = {
@@ -48,11 +53,23 @@ export const DataExplorerTable: React.FC<TDataExplorerTable> = ({
     showSizeChanger: true,
   };
 
+  const goToResource = (resource: Resource) => {
+    const resourceId = resource['@id'] ?? resource._self;
+    const [orgLabel, projectLabel] = parseProjectUrl(resource._project);
+
+    history.push(makeResourceUri(orgLabel, projectLabel, resourceId), {
+      background: location,
+    });
+  };
+
   return (
     <Table<Resource>
       columns={columnsConfig(columns)}
       dataSource={dataSource}
       rowKey={record => record._self}
+      onRow={resource => ({
+        onClick: _ => goToResource(resource),
+      })}
       loading={isLoading}
       bordered={false}
       className="data-explorer-table"