DSEGOG-129 display user sessions

cypress/integration/table/sessions.spec.ts

@@ -11,12 +11,13 @@ function getParamsFromUrl(url: string) {
 }
 
 describe('Sessions', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
   afterEach(() => {
     cy.clearMocks();
   });
   it('sends a posts a request when a user session is created', () => {
-    cy.visit('/');
-
     cy.findByTestId('AddCircleIcon').click();
     cy.findByLabelText('Name*').type('Session');
     cy.findByLabelText('Summary').type('Summary');
@@ -47,4 +48,66 @@ describe('Sessions', () => {
       }
     );
   });
+  it('can load a user session', () => {
+    cy.findByText('Session 1').should('exist');
+    cy.findByText('Session 2').should('exist');
+    cy.findByText('Session 3').should('exist');
+
+    cy.findByText('Session 2').click();
+    // wait for search to initiate and finish
+    cy.findByRole('progressbar').should('exist');
+    cy.findByRole('progressbar').should('not.exist');
+    cy.findByLabelText('open experiment search box')
+      .contains('ID 19210012')
+      .should('exist');
+    cy.findByLabelText('from, date-time input').should(($input) => {
+      const value = $input.val();
+      expect(value).to.equal('2022-01-06 13:00');
+    });
+
+    cy.findByLabelText('to, date-time input').should(($input) => {
+      const value = $input.val();
+      expect(value).to.equal('2022-01-09 12:00');
+    });
+  });
+
+  it('can clear the search parameters when navigating from one to another session', () => {
+    cy.findByText('Session 1').should('exist');
+    cy.findByText('Session 2').should('exist');
+    cy.findByText('Session 3').should('exist');
+
+    cy.findByText('Session 2').click();
+    // wait for search to initiate and finish
+    cy.findByRole('progressbar').should('exist');
+    cy.findByRole('progressbar').should('not.exist');
+    cy.findByLabelText('open experiment search box')
+      .contains('ID 19210012')
+      .should('exist');
+    cy.findByLabelText('from, date-time input').should(($input) => {
+      const value = $input.val();
+      expect(value).to.equal('2022-01-06 13:00');
+    });
+
+    cy.findByLabelText('to, date-time input').should(($input) => {
+      const value = $input.val();
+      expect(value).to.equal('2022-01-09 12:00');
+    });
+
+    cy.findByText('Session 3').click();
+    // wait for search to initiate and finish
+    cy.findByRole('progressbar').should('exist');
+    cy.findByRole('progressbar').should('not.exist');
+    cy.findByLabelText('open experiment search box')
+      .contains('ID 19210012')
+      .should('not.exist');
+    cy.findByLabelText('from, date-time input').should(($input) => {
+      const value = $input.val();
+      expect(value).to.equal('');
+    });
+
+    cy.findByLabelText('to, date-time input').should(($input) => {
+      const value = $input.val();
+      expect(value).to.equal('');
+    });
+  });
 });

src/api/sessions.test.tsx

@@ -1,15 +1,16 @@
 import { renderHook, waitFor } from '@testing-library/react';
-import { useSaveSession } from './sessions';
-import { Session } from '../app.types';
+import { useSaveSession, useSession, useSessionList } from './sessions';
+import { Session, SessionListItem } from '../app.types';
 import { hooksWrapperWithProviders } from '../setupTests';
+import sessionsListJSON from '../mocks/sessionsList.json';
 
 describe('session api functions', () => {
   let mockData: Session;
   beforeEach(() => {
     mockData = {
       name: 'test',
       summary: 'test',
-      session_data: '{}',
+      session_data: {},
       auto_saved: false,
     };
   });
@@ -37,4 +38,40 @@ describe('session api functions', () => {
       'sends axios request to add a user session and throws an appropriate error on failure'
     );
   });
+
+  describe('useSessionList', () => {
+    it('sends request to fetch session list and returns successful response', async () => {
+      const { result } = renderHook(() => useSessionList(), {
+        wrapper: hooksWrapperWithProviders(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBeTruthy();
+      });
+      const expected: SessionListItem[] = sessionsListJSON;
+      expect(result.current.data).toEqual(expected);
+    });
+
+    it.todo(
+      'sends axios request to fetch sessions and throws an appropriate error on failure'
+    );
+  });
+
+  describe('useSession', () => {
+    it('sends request to fetch session and returns successful response', async () => {
+      const { result } = renderHook(() => useSession('1'), {
+        wrapper: hooksWrapperWithProviders(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBeTruthy();
+      });
+      const expected: SessionListItem[] = sessionsListJSON;
+      expect(result.current.data).toEqual(expected[0]);
+    });
+
+    it.todo(
+      'sends axios request to fetch sessions and throws an appropriate error on failure'
+    );
+  });
 });

src/api/sessions.tsx

@@ -1,6 +1,11 @@
 import axios, { AxiosError } from 'axios';
-import { useMutation, UseMutationResult } from '@tanstack/react-query';
-import { Session } from '../app.types';
+import {
+  useMutation,
+  UseMutationResult,
+  useQuery,
+  UseQueryResult,
+} from '@tanstack/react-query';
+import { Session, SessionListItem, SessionResponse } from '../app.types';
 import { useAppSelector } from '../state/hooks';
 import { selectUrls } from '../state/slices/configSlice';
 import { readSciGatewayToken } from '../parseTokens';
@@ -33,3 +38,67 @@
     },
   });
 };
+
+const fetchSessionList = (apiUrl: string): Promise<SessionListItem[]> => {
+  return axios
+    .get(`${apiUrl}/sessions/list`, {
+      headers: {
+        Authorization: `Bearer ${readSciGatewayToken()}`,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
+};
+
+export const useSessionList = (): UseQueryResult<
+  SessionListItem[],
+  AxiosError
+> => {
+  const { apiUrl } = useAppSelector(selectUrls);
+
+  return useQuery(
+    ['sessionList'],
+    (params) => {
+      return fetchSessionList(apiUrl);
+    },
+    {
+      onError: (error) => {
+        console.log('Got error ' + error.message);
+      },
+    }
+  );
+};
+
+const fetchSession = (
+  apiUrl: string,
+  sessionId: string | undefined
+): Promise<SessionResponse> => {
+  return axios
+    .get(`${apiUrl}/sessions/${sessionId}`, {
+      headers: {
+        Authorization: `Bearer ${readSciGatewayToken()}`,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
+};
+
+export const useSession = (
+  session_id: string | undefined
+): UseQueryResult<SessionResponse, AxiosError> => {
+  const { apiUrl } = useAppSelector(selectUrls);
+
+  return useQuery(
+    ['session', session_id],
+    (params) => {
+      return fetchSession(apiUrl, session_id);
+    },
+    {
+      onError: (error) => {
+        console.log('Got error ' + error.message);
+      },
+    }
+  );
+};

src/app.types.tsx

@@ -236,3 +236,20 @@ export interface Session {
   auto_saved: boolean;
   session_data: ImportSessionType;
 }
+
+export interface SessionResponse {
+  _id: string;
+  name: string;
+  summary: string;
+  timestamp: string;
+  auto_saved: boolean;
+  session: ImportSessionType;
+}
+
+export interface SessionListItem {
+  name: string;
+  summary: string;
+  auto_saved: boolean;
+  timestamp: string;
+  _id: string;
+}

src/filtering/filterDialogue.component.tsx

@@ -172,7 +172,8 @@ const FilterDialogue = (props: FilterDialogueProps) => {
   // display the warning message or update the applied filters
   React.useEffect(() => {
     // check incomingCount isn't undefined so we don't run on initial render
-    if (typeof incomingCount !== 'undefined') {
+    // also make sure the dialogue is open to not run in the background
+    if (typeof incomingCount !== 'undefined' && open) {
       if (
         !displayingWarningMessage &&
         overRecordLimit() &&

src/mocks/handlers.ts

@@ -2,6 +2,7 @@ import { rest } from 'msw';
 import recordsJson from './records.json';
 import channelsJson from './channels.json';
 import experimentsJson from './experiments.json';
+import sessionsJson from './sessionsList.json';
 import {
   Channel,
   ExperimentParams,
@@ -36,6 +37,20 @@ export const handlers = [
     const sessionID = '1';
     return res(ctx.status(200), ctx.json(sessionID));
   }),
+  rest.get('/sessions/list', async (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(sessionsJson));
+  }),
+  rest.get('/sessions/:id', async (req, res, ctx) => {
+    const session_id = req.url.pathname.replace('/sessions/', '');
+    const sessionData = sessionsJson.find(
+      (session) => session._id === session_id
+    );
+    if (sessionData) {
+      return res(ctx.status(200), ctx.json(sessionData));
+    } else {
+      return res(ctx.status(400), ctx.json(''));
+    }
+  }),
   rest.get('/channels', (req, res, ctx) => {
     return res(ctx.status(200), ctx.json(channelsJson));
   }),