Merge pull request #278 from ral-facilities/DSEGOG-129-save-and-save-as

DSEGOG-132 save and save as

cypress/integration/table/sessions.spec.ts

@@ -93,6 +93,11 @@ describe('Sessions', () => {
       expect(value).to.equal('2022-01-09 12:00');
     });
 
+    cy.findByTestId('session-save-buttons-timestamp').should(
+      'have.text',
+      'Session last saved: 29 Jun 2023 14:45'
+    );
+
     cy.findByText('Session 3').click();
     // wait for search to initiate and finish
     cy.findByRole('progressbar').should('exist');
@@ -109,6 +114,11 @@ describe('Sessions', () => {
       const value = $input.val();
       expect(value).to.equal('');
     });
+
+    cy.findByTestId('session-save-buttons-timestamp').should(
+      'have.text',
+      'Session last autosaved: 30 Jun 2023 09:15'
+    );
   });
 
   it('sends a patch request when a user edits a session', () => {
@@ -154,6 +164,63 @@ describe('Sessions', () => {
     });
   });
 
+  it('sends a patch request when a user saves their current session', () => {
+    cy.findByText('Session 2').click();
+
+    cy.startSnoopingBrowserMockedRequest();
+
+    cy.findByRole('button', { name: 'Save' }).click();
+
+    cy.findBrowserMockedRequests({
+      method: 'PATCH',
+      url: '/sessions/:id',
+    }).should((patchRequests) => {
+      expect(patchRequests.length).equal(1);
+      const request = patchRequests[0];
+      expect(JSON.stringify(request.body)).equal(
+        '{"table":{"columnStates":{},"selectedColumnIds":["timestamp","CHANNEL_EFGHI","CHANNEL_FGHIJ","shotnum"],"page":0,"resultsPerPage":25,"sort":{}},"search":{"searchParams":{"dateRange":{"fromDate":"2022-01-06T13:00:00","toDate":"2022-01-09T12:00:59"},"shotnumRange":{"min":7,"max":9},"maxShots":50,"experimentID":{"_id":"19210012-1","end_date":"2022-01-09T12:00:00","experiment_id":"19210012","part":1,"start_date":"2022-01-06T13:00:00"}}},"plots":{},"filter":{"appliedFilters":[[{"type":"channel","value":"shotnum","label":"Shot Number"},{"type":"compop","value":">","label":">"},{"type":"number","value":"7","label":"7"}]]},"windows":{}}'
+      );
+      expect(request.url.toString()).to.contain('2');
+      expect(request.url.toString()).to.contain('name=');
+      expect(request.url.toString()).to.contain('summary=');
+      expect(request.url.toString()).to.contain('auto_saved=');
+
+      const paramMap: Map<string, string> = getParamsFromUrl(
+        request.url.toString()
+      );
+
+      expect(paramMap.get('name')).equal('Session+2');
+      expect(paramMap.get('summary')).equal(
+        'This+is+the+summary+for+Session+2'
+      );
+      expect(paramMap.get('auto_saved')).equal('false');
+    });
+  });
+
+  it('opens the save session dialog if a user session is not selected and user click the save or save as button', () => {
+    cy.findByRole('button', { name: 'Save' }).click();
+    cy.findByLabelText('Save Session').should('exist');
+    cy.findByRole('button', { name: 'Close' }).click();
+    cy.findByRole('button', { name: 'Save as' }).click();
+    cy.findByLabelText('Save Session').should('exist');
+  });
+
+  it('loads in the summary and name (with _copy) when save as is clicked and a user session is selected', () => {
+    cy.findByText('Session 2').click();
+    cy.findByRole('button', { name: 'Save as' }).click();
+    cy.findByLabelText('Save Session').should('exist');
+
+    cy.findByLabelText('Name *').should(($input) => {
+      const value = $input.val();
+      expect(value).to.equal('Session 2_copy');
+    });
+
+    cy.findByLabelText('Summary').should(($input) => {
+      const value = $input.val();
+      expect(value).to.equal('This is the summary for Session 2');
+    });
+  });
+
   it('sends a delete request when a user deletes a session', () => {
     cy.findByRole('button', { name: 'delete Session 1 session' }).click();
     cy.findByText('Delete Session');

src/api/sessions.test.tsx

@@ -16,7 +16,7 @@ describe('session api functions', () => {
     mockData = {
       name: 'test',
       summary: 'test',
-      session_data: {},
+      session: {},
       auto_saved: false,
       _id: '1',
     };

src/api/sessions.tsx

@@ -4,6 +4,7 @@ import {
   UseMutationResult,
   useQuery,
   UseQueryResult,
+  useQueryClient,
 } from '@tanstack/react-query';
 import { Session, SessionListItem, SessionResponse } from '../app.types';
 import { useAppSelector } from '../state/hooks';
@@ -17,7 +18,7 @@ const saveSession = (apiUrl: string, session: Session): Promise<string> => {
   queryParams.append('auto_saved', session.auto_saved.toString());
 
   return axios
-    .post<string>(`${apiUrl}/sessions`, session.session_data, {
+    .post<string>(`${apiUrl}/sessions`, session.session, {
       params: queryParams,
       headers: {
         Authorization: `Bearer ${readSciGatewayToken()}`,
@@ -32,10 +33,14 @@ export const useSaveSession = (): UseMutationResult<
   Session
 > => {
   const { apiUrl } = useAppSelector(selectUrls);
+  const queryClient = useQueryClient();
   return useMutation((session: Session) => saveSession(apiUrl, session), {
     onError: (error) => {
       console.log('Got error ' + error.message);
     },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['sessionList'] });
+    },
   });
 };
 
@@ -44,6 +49,7 @@ const editSession = (
   session: SessionResponse
 ): Promise<string> => {
   const queryParams = new URLSearchParams();
+
   queryParams.append('name', session.name);
   queryParams.append('summary', session.summary);
   queryParams.append('auto_saved', session.auto_saved.toString());
@@ -64,12 +70,17 @@ export const useEditSession = (): UseMutationResult<
   SessionResponse
 > => {
   const { apiUrl } = useAppSelector(selectUrls);
+  const queryClient = useQueryClient();
   return useMutation(
     (session: SessionResponse) => editSession(apiUrl, session),
     {
       onError: (error) => {
         console.log('Got error ' + error.message);
       },
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['sessionList'] });
+        queryClient.invalidateQueries({ queryKey: ['session'] });
+      },
     }
   );
 };
@@ -93,12 +104,16 @@ export const useDeleteSession = (): UseMutationResult<
   SessionResponse
 > => {
   const { apiUrl } = useAppSelector(selectUrls);
+  const queryClient = useQueryClient();
   return useMutation(
     (session: SessionResponse) => deleteSession(apiUrl, session),
     {
       onError: (error) => {
         console.log('Got error ' + error.message);
       },
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['sessionList'] });
+      },
     }
   );
 };

src/app.types.tsx

@@ -234,7 +234,7 @@ export interface Session {
   name: string;
   summary: string;
   auto_saved: boolean;
-  session_data: ImportSessionType;
+  session: ImportSessionType;
 }
 
 export interface SessionResponse {

src/mocks/sessionsList.json

@@ -4,7 +4,7 @@
     "name": "Session 1",
     "summary": "This is the summary for Session 1",
     "auto_saved": true,
-    "timestamp": "2023-06-29T10:30:00Z",
+    "timestamp": "2023-06-29T10:30:00",
     "session": {
       "table": {
         "columnStates": {},
@@ -87,7 +87,7 @@
     "name": "Session 2",
     "summary": "This is the summary for Session 2",
     "auto_saved": false,
-    "timestamp": "2023-06-29T14:45:00Z",
+    "timestamp": "2023-06-29T14:45:00",
     "session": {
       "table": {
         "columnStates": {},
@@ -136,7 +136,7 @@
     "name": "Session 3",
     "summary": "This is the summary for Session 3",
     "auto_saved": true,
-    "timestamp": "2023-06-30T09:15:00Z",
+    "timestamp": "2023-06-30T09:15:00",
     "session": {
       "table": {
         "columnStates": {},
@@ -167,7 +167,7 @@
     "summary": "This is the summary for Session 4",
     "auto_saved": false,
     "name": "Session 4",
-    "timestamp": "2023-06-30T09:15:00Z",
+    "timestamp": "2023-06-30T09:15:00",
     "session": {
       "table": {
         "columnStates": {},

src/session/__snapshots__/sessionDrawer.component.test.tsx.snap

@@ -24,6 +24,7 @@ exports[`session Drawer renders correctly 1`] = `
               class="MuiBox-root css-zdpt2t"
             >
               <button
+                aria-label="add user session"
                 class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
                 tabindex="0"
                 type="button"
@@ -63,14 +64,14 @@ exports[`session Drawer renders correctly 1`] = `
                 <span
                   class="MuiTypography-root MuiTypography-button MuiListItemText-primary css-1tjnwj2-MuiTypography-root"
                 >
-                  Session 1
+                  Session 3
                 </span>
               </div>
               <div
-                class="MuiBox-root css-0"
+                class="MuiBox-root css-epvm6"
               >
                 <button
-                  aria-label="edit Session 1 session"
+                  aria-label="edit Session 3 session"
                   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"
@@ -91,7 +92,7 @@ exports[`session Drawer renders correctly 1`] = `
                   />
                 </button>
                 <button
-                  aria-label="delete Session 1 session"
+                  aria-label="delete Session 3 session"
                   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"
@@ -131,14 +132,14 @@ exports[`session Drawer renders correctly 1`] = `
                 <span
                   class="MuiTypography-root MuiTypography-button MuiListItemText-primary css-1tjnwj2-MuiTypography-root"
                 >
-                  Session 2
+                  Session 1
                 </span>
               </div>
               <div
-                class="MuiBox-root css-0"
+                class="MuiBox-root css-epvm6"
               >
                 <button
-                  aria-label="edit Session 2 session"
+                  aria-label="edit Session 1 session"
                   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"
@@ -159,7 +160,7 @@ exports[`session Drawer renders correctly 1`] = `
                   />
                 </button>
                 <button
-                  aria-label="delete Session 2 session"
+                  aria-label="delete Session 1 session"
                   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"
@@ -199,14 +200,14 @@ exports[`session Drawer renders correctly 1`] = `
                 <span
                   class="MuiTypography-root MuiTypography-button MuiListItemText-primary css-1tjnwj2-MuiTypography-root"
                 >
-                  Session 3
+                  Session 4
                 </span>
               </div>
               <div
-                class="MuiBox-root css-0"
+                class="MuiBox-root css-epvm6"
               >
                 <button
-                  aria-label="edit Session 3 session"
+                  aria-label="edit Session 4 session"
                   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"
@@ -227,7 +228,7 @@ exports[`session Drawer renders correctly 1`] = `
                   />
                 </button>
                 <button
-                  aria-label="delete Session 3 session"
+                  aria-label="delete Session 4 session"
                   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"
@@ -267,14 +268,14 @@ exports[`session Drawer renders correctly 1`] = `
                 <span
                   class="MuiTypography-root MuiTypography-button MuiListItemText-primary css-1tjnwj2-MuiTypography-root"
                 >
-                  Session 4
+                  Session 2
                 </span>
               </div>
               <div
-                class="MuiBox-root css-0"
+                class="MuiBox-root css-epvm6"
               >
                 <button
-                  aria-label="edit Session 4 session"
+                  aria-label="edit Session 2 session"
                   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"
@@ -295,7 +296,7 @@ exports[`session Drawer renders correctly 1`] = `
                   />
                 </button>
                 <button
-                  aria-label="delete Session 4 session"
+                  aria-label="delete Session 2 session"
                   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"

src/session/__snapshots__/sessionSaveButtons.component.test.tsx.snap

@@ -5,26 +5,39 @@ exports[`session buttons renders correctly 1`] = `
   <div
     class="MuiBox-root css-brvi3t"
   >
-    <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
-      tabindex="0"
-      type="button"
+    <div
+      class="MuiBox-root css-k008qs"
     >
-      Save
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </button>
-    <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
-      tabindex="0"
-      type="button"
-    >
-      Save as
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </button>
+      <p
+        class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+        data-testid="session-save-buttons-timestamp"
+        style="font-size: small; margin: 8px;"
+      >
+        <span
+          style="font-weight: bold;"
+        />
+      </p>
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1owl11-MuiButtonBase-root-MuiButton-root"
+        tabindex="0"
+        type="button"
+      >
+        Save
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1owl11-MuiButtonBase-root-MuiButton-root"
+        tabindex="0"
+        type="button"
+      >
+        Save as
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+    </div>
   </div>
 </DocumentFragment>
 `;