US 8 // Navigate to resource view to see details

Signed-off-by: Dinika Saxena <[email protected]>
BlueBrain · Jul 5, 2023 · da6b3d4 · da6b3d4
1 parent d524f7d
commit da6b3d4
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -26,13 +26,18 @@ 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(
     dataExplorerPageHandler(defaultMockResult),
     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
@@ -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"