4969 // Open tagged resources in studios

.github/workflows/review.yml

@@ -4,7 +4,7 @@ on: [pull_request]
 
 jobs:
   test-and-build:
-    runs-on: it
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
         with:
@@ -35,7 +35,7 @@ jobs:
         run: |
           docker build . --tag=nexus-web:fresh
       - name: Start services
-        run: docker-compose -f ci/docker-compose.yml up -d && sleep 60
+        run: docker compose -f ci/docker-compose.yml up -d && sleep 60
       - name: Copy nexus-web into Cypress container
         # avoids permission issue where cypress writes screenshots to host with root as user
         # which we can't then delete easily
@@ -55,4 +55,4 @@ jobs:
       #     --key ${{ secrets.CYPRESS_RECORD_KEY }}
       - name: Cleanup Docker Containers
         if: ${{ always() }}
-        run: docker-compose -f ci/docker-compose.yml down --rmi "local" --volumes
+        run: docker compose -f ci/docker-compose.yml down --rmi "local" --volumes

src/shared/containers/DataTableContainer.spec.tsx

@@ -32,6 +32,7 @@ import configureStore from '../store';
 import { cleanup, render, screen, waitFor } from '../../utils/testUtil';
 import DataTableContainer from './DataTableContainer';
 import { notification } from 'antd';
+import { getMockResource } from '__mocks__/handlers/DataExplorer/handlers';
 
 describe('DataTableContainer.spec.tsx', () => {
   const queryClient = new QueryClient();
@@ -421,6 +422,172 @@ describe('DataTableContainer - Selection', () => {
   });
 });
 
+describe('DataTableContainer - Row Click', () => {
+  const queryClient = new QueryClient();
+  let dataTableContainer: JSX.Element;
+  let container: HTMLElement;
+  let rerender: (ui: React.ReactElement) => void;
+  let user: UserEvent;
+  let server: ReturnType<typeof setupServer>;
+  let component: RenderResult;
+  let nexus: ReturnType<typeof createNexusClient>;
+  let nexusSpy: jest.SpyInstance;
+
+  beforeAll(() => {
+    server = setupServer(
+      dashboardResource,
+      dashboardVocabulary,
+      fetchResourceForDownload
+    );
+
+    server.listen();
+  });
+
+  beforeEach(async () => {
+    const history = createMemoryHistory({});
+
+    nexus = createNexusClient({
+      fetch,
+      uri: deltaPath(),
+    });
+    const store = configureStore(history, { nexus }, {});
+    dataTableContainer = (
+      <Provider store={store}>
+        <Router history={history}>
+          <QueryClientProvider client={queryClient}>
+            <NexusProvider nexusClient={nexus}>
+              <DataTableContainer
+                orgLabel="bbp"
+                projectLabel="agents"
+                tableResourceId="https://dev.nise.bbp.epfl.ch/nexus/v1/resources/bbp/agents/_/8478b9ae-c50e-4178-8aae-16221f2c6937"
+                options={{
+                  disableAddFromCart: true,
+                  disableDelete: true,
+                  disableEdit: true,
+                }}
+              />
+            </NexusProvider>
+          </QueryClientProvider>
+        </Router>
+      </Provider>
+    );
+
+    component = render(dataTableContainer);
+
+    container = component.container;
+    rerender = component.rerender;
+    user = userEvent.setup();
+
+    nexusSpy = jest
+      .spyOn(nexus, 'httpGet')
+      .mockImplementation(request =>
+        request.path.toString().includes('format')
+          ? Promise.resolve([getMockResource('doesnt-matter', {}, 'agents')])
+          : Promise.resolve(getMockResource('doesnt-matter', {}, 'agents'))
+      );
+  });
+
+  // reset any request handlers that are declared as a part of our tests
+  // (i.e. for testing one-time error scenarios)
+  afterEach(() => {
+    cleanup();
+    queryClient.clear();
+    localStorage.clear();
+    nexusSpy.mockClear();
+  });
+
+  afterAll(() => {
+    server.resetHandlers();
+    server.close();
+  });
+
+  const visibleTableRows = () => {
+    return container.querySelectorAll('table tbody tr.data-table-row');
+  };
+
+  const waitForTableRows = async (expectedRowsCount: number) => {
+    return await waitFor(() => {
+      const rows = visibleTableRows();
+      expect(rows.length).toEqual(expectedRowsCount);
+      return rows;
+    });
+  };
+
+  it('requests correct resource from delta when user clicks on row with revision in self', async () => {
+    const selfWithRevision =
+      'https://localhost:3000/resources/bbp/agents/_/persons%2Fc3358e61-7650-4954-99b7-f7572cbf5d5g?rev=30';
+
+    const resources = [getMockStudioResource('Malory', `${selfWithRevision}`)];
+
+    server.use(sparqlViewResultHandler(resources));
+    component.unmount();
+    rerender(dataTableContainer);
+    await waitForTableRows(1);
+
+    await user.click(screen.getByText('Malory'));
+    expect(nexusSpy).toHaveBeenLastCalledWith({
+      path: `${selfWithRevision}&format=expanded`,
+      headers: { Accept: 'application/json' },
+    });
+  });
+
+  it('requests correct resource from delta when user clicks on row with tag in self', async () => {
+    const selfWithTag =
+      'https://localhost:3000/resources/bbp/agents/_/persons%2Fc3358e61-7650-4954-99b7-f7572cbf5d5g?tag=30';
+
+    const resources = [getMockStudioResource('Malory', `${selfWithTag}`)];
+
+    server.use(sparqlViewResultHandler(resources));
+    component.unmount();
+    rerender(dataTableContainer);
+    await waitForTableRows(1);
+
+    await user.click(screen.getByText('Malory'));
+    expect(nexusSpy).toHaveBeenLastCalledWith({
+      path: `${selfWithTag}&format=expanded`,
+      headers: { Accept: 'application/json' },
+    });
+  });
+
+  it('requests correct resource from delta when user clicks on row with tag and revision in self', async () => {
+    const selfWithTagAndRev =
+      'https://localhost:3000/resources/bbp/agents/_/persons%2Fc3358e61-7650-4954-99b7-f7572cbf5d5g?tag=30&rev=2-';
+
+    const resources = [getMockStudioResource('Malory', `${selfWithTagAndRev}`)];
+
+    server.use(sparqlViewResultHandler(resources));
+    component.unmount();
+    rerender(dataTableContainer);
+    await waitForTableRows(1);
+
+    await user.click(screen.getByText('Malory'));
+    expect(nexusSpy).toHaveBeenLastCalledWith({
+      path: `${selfWithTagAndRev}&format=expanded`,
+      headers: { Accept: 'application/json' },
+    });
+  });
+
+  it('requests correct resource from delta when user clicks on row with no tag or revision in self', async () => {
+    const selfWithoutTagOrRev =
+      'https://localhost:3000/resources/bbp/agents/_/persons%2Fc3358e61-7650-4954-99b7-f7572cbf5d5g';
+
+    const resources = [
+      getMockStudioResource('Malory', `${selfWithoutTagOrRev}`),
+    ];
+
+    server.use(sparqlViewResultHandler(resources));
+    component.unmount();
+    rerender(dataTableContainer);
+    await waitForTableRows(1);
+
+    await user.click(screen.getByText('Malory'));
+    expect(nexusSpy).toHaveBeenLastCalledWith({
+      path: `${selfWithoutTagOrRev}?format=expanded`,
+      headers: { Accept: 'application/json' },
+    });
+  });
+});
+
 const dashboardErrorResponse = {
   '@context': 'https://bluebrain.github.io/nexus/contexts/error.json',
   '@type': 'ResourceNotFound',

src/shared/containers/DataTableContainer.tsx

@@ -219,9 +219,11 @@ const DataTableContainer: React.FC<DataTableProps> = ({
         if (resource['@type'] === 'Project') {
           return;
         }
+        const url = new URL(selfUrl);
+        url.searchParams.set('format', 'expanded');
         nexus
           .httpGet({
-            path: `${selfUrl}?format=expanded`,
+            path: `${url.toString()}`,
             headers: { Accept: 'application/json' },
           })
           .then((fullIdResponse: Resource) => {