From bfc63a9236c05cca0f7b05e49f7ede3b45a5ef6d Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <83226114+joshuadkitenge@users.noreply.github.com>
Date: Mon, 14 Aug 2023 13:22:12 +0100
Subject: [PATCH] DSEGOG-132

---
 src/api/sessions.test.tsx                     |  2 +-
 src/api/sessions.tsx                          |  2 +-
 src/app.types.tsx                             |  2 +-
 .../sessionDrawer.component.test.tsx.snap     | 24 ++---
 .../deleteSessionDialogue.component.test.tsx  |  6 +-
 .../deleteSessionDialogue.component.tsx       |  8 +-
 .../sessionDialogue.component.test.tsx        |  5 +
 src/session/sessionDialogue.component.tsx     |  8 +-
 src/session/sessionDrawer.component.test.tsx  |  5 +-
 src/session/sessionDrawer.component.tsx       | 17 +++-
 .../sessionSaveButtons.component.test.tsx     | 99 ++++++++++++-------
 src/session/sessionSaveButtons.component.tsx  | 32 ++++--
 src/views/viewTabs.component.tsx              | 20 +++-
 13 files changed, 157 insertions(+), 73 deletions(-)

diff --git a/src/api/sessions.test.tsx b/src/api/sessions.test.tsx
index 03ad384e6..20a95af63 100644
--- a/src/api/sessions.test.tsx
+++ b/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',
     };
diff --git a/src/api/sessions.tsx b/src/api/sessions.tsx
index 8915d5916..1eebf7099 100644
--- a/src/api/sessions.tsx
+++ b/src/api/sessions.tsx
@@ -17,7 +17,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()}`,
diff --git a/src/app.types.tsx b/src/app.types.tsx
index 074b1fe32..9ab06017c 100644
--- a/src/app.types.tsx
+++ b/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 {
diff --git a/src/session/__snapshots__/sessionDrawer.component.test.tsx.snap b/src/session/__snapshots__/sessionDrawer.component.test.tsx.snap
index 793a14612..0bcd7c3f9 100644
--- a/src/session/__snapshots__/sessionDrawer.component.test.tsx.snap
+++ b/src/session/__snapshots__/sessionDrawer.component.test.tsx.snap
@@ -64,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"
               >
                 <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"
@@ -92,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"
@@ -132,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"
               >
                 <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"
@@ -160,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"
@@ -200,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"
               >
                 <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"
@@ -228,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"
@@ -268,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"
               >
                 <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"
@@ -296,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"
diff --git a/src/session/deleteSessionDialogue.component.test.tsx b/src/session/deleteSessionDialogue.component.test.tsx
index d1fe7d031..f782bc22f 100644
--- a/src/session/deleteSessionDialogue.component.test.tsx
+++ b/src/session/deleteSessionDialogue.component.test.tsx
@@ -11,7 +11,7 @@ describe('delete session dialogue', () => {
   let user;
   const onClose = jest.fn();
   const refetchSessionsList = jest.fn();
-  const onChangeLoadedSessionId = jest.fn();
+  const onDeleteLoadedsession = jest.fn();
 
   const createView = (): RenderResult => {
     return renderComponentWithProviders(<DeleteSessionDialogue {...props} />);
@@ -30,7 +30,7 @@ describe('delete session dialogue', () => {
       onClose: onClose,
       refetchSessionsList: refetchSessionsList,
       sessionData: sessionData,
-      onChangeLoadedSessionId: onChangeLoadedSessionId,
+      onDeleteLoadedsession: onDeleteLoadedsession,
       loadedSessionId: undefined,
     };
     user = userEvent; // Assigning userEvent to 'user'
@@ -90,6 +90,6 @@ describe('delete session dialogue', () => {
       expect(onClose).toHaveBeenCalled();
     });
     expect(refetchSessionsList).toHaveBeenCalled();
-    expect(onChangeLoadedSessionId).toHaveBeenCalledWith(undefined);
+    expect(onDeleteLoadedsession).toHaveBeenCalled();
   });
 });
diff --git a/src/session/deleteSessionDialogue.component.tsx b/src/session/deleteSessionDialogue.component.tsx
index 2273535de..1a4442bfe 100644
--- a/src/session/deleteSessionDialogue.component.tsx
+++ b/src/session/deleteSessionDialogue.component.tsx
@@ -16,7 +16,7 @@ export interface DeleteSessionDialogueProps {
   sessionData: SessionResponse | undefined;
   refetchSessionsList: () => void;
   loadedSessionId: string | undefined;
-  onChangeLoadedSessionId: (loadedSessionId: string | undefined) => void;
+  onDeleteLoadedsession: () => void;
 }
 
 const DeleteSessionDialogue = (props: DeleteSessionDialogueProps) => {
@@ -26,7 +26,7 @@ const DeleteSessionDialogue = (props: DeleteSessionDialogueProps) => {
     sessionData,
     refetchSessionsList,
     loadedSessionId,
-    onChangeLoadedSessionId,
+    onDeleteLoadedsession,
   } = props;
 
   const [error, setError] = useState(false);
@@ -42,7 +42,7 @@ const DeleteSessionDialogue = (props: DeleteSessionDialogueProps) => {
         .then((response) => {
           refetchSessionsList();
           if (loadedSessionId === sessionData._id) {
-            onChangeLoadedSessionId(undefined);
+            onDeleteLoadedsession();
           }
           onClose();
         })
@@ -57,8 +57,8 @@ const DeleteSessionDialogue = (props: DeleteSessionDialogueProps) => {
   }, [
     deleteSession,
     loadedSessionId,
-    onChangeLoadedSessionId,
     onClose,
+    onDeleteLoadedsession,
     refetchSessionsList,
     sessionData,
   ]);
diff --git a/src/session/sessionDialogue.component.test.tsx b/src/session/sessionDialogue.component.test.tsx
index ca13988c8..df46e4b65 100644
--- a/src/session/sessionDialogue.component.test.tsx
+++ b/src/session/sessionDialogue.component.test.tsx
@@ -14,6 +14,7 @@ describe('session dialogue', () => {
   const onChangeSessionSummary = jest.fn();
   const onChangeLoadedSessionId = jest.fn();
   const refetchSessionsList = jest.fn();
+  const onChangeAutoSaveSessionId = jest.fn();
 
   const createView = (): RenderResult => {
     return renderComponentWithProviders(<SessionDialogue {...props} />);
@@ -31,6 +32,7 @@ describe('session dialogue', () => {
         requestType: 'create',
         onChangeLoadedSessionId: onChangeLoadedSessionId,
         refetchSessionsList: refetchSessionsList,
+        onChangeAutoSaveSessionId: onChangeAutoSaveSessionId,
       };
 
       user = userEvent; // Assigning userEvent to 'user'
@@ -97,6 +99,7 @@ describe('session dialogue', () => {
       });
       expect(refetchSessionsList).toHaveBeenCalled();
       expect(onChangeLoadedSessionId).toHaveBeenCalledWith('1');
+      expect(onChangeAutoSaveSessionId).toHaveBeenCalledWith(undefined);
     });
   });
 
@@ -121,6 +124,7 @@ describe('session dialogue', () => {
         onChangeLoadedSessionId: onChangeLoadedSessionId,
         refetchSessionsList: refetchSessionsList,
         sessionData: sessionData,
+        onChangeAutoSaveSessionId: onChangeAutoSaveSessionId,
       };
 
       user = userEvent; // Assigning userEvent to 'user'
@@ -158,6 +162,7 @@ describe('session dialogue', () => {
         expect(onClose).toHaveBeenCalled();
       });
       expect(refetchSessionsList).toHaveBeenCalled();
+      expect(onChangeAutoSaveSessionId).toHaveBeenCalledWith(undefined);
     });
   });
 });
diff --git a/src/session/sessionDialogue.component.tsx b/src/session/sessionDialogue.component.tsx
index 4c91385ad..9b4b2949b 100644
--- a/src/session/sessionDialogue.component.tsx
+++ b/src/session/sessionDialogue.component.tsx
@@ -21,6 +21,7 @@ export interface SessionDialogueProps {
   requestType: 'edit' | 'create';
   onChangeLoadedSessionId: (loadedSessionId: string | undefined) => void;
   refetchSessionsList: () => void;
+  onChangeAutoSaveSessionId: (autoSaveSessionId: string | undefined) => void;
   sessionData?: SessionResponse;
 }
 
@@ -36,6 +37,7 @@ const SessionDialogue = (props: SessionDialogueProps) => {
     sessionData,
     onChangeLoadedSessionId,
     refetchSessionsList,
+    onChangeAutoSaveSessionId,
   } = props;
 
   const state = useAppSelector(({ config, ...state }) => state);
@@ -57,13 +59,14 @@ const SessionDialogue = (props: SessionDialogueProps) => {
     if (sessionName) {
       const session = {
         name: sessionName,
-        session_data: state,
+        session: state,
         summary: sessionSummary,
         auto_saved: false,
       };
       saveSession(session)
         .then((response) => {
           refetchSessionsList();
+          onChangeAutoSaveSessionId(undefined);
           onChangeLoadedSessionId(response);
           handleClose();
         })
@@ -78,6 +81,7 @@ const SessionDialogue = (props: SessionDialogueProps) => {
     }
   }, [
     handleClose,
+    onChangeAutoSaveSessionId,
     onChangeLoadedSessionId,
     refetchSessionsList,
     saveSession,
@@ -100,6 +104,7 @@ const SessionDialogue = (props: SessionDialogueProps) => {
       editSession(session)
         .then((response) => {
           refetchSessionsList();
+          onChangeAutoSaveSessionId(undefined);
           handleClose();
         })
         .catch((error) => {
@@ -117,6 +122,7 @@ const SessionDialogue = (props: SessionDialogueProps) => {
     sessionSummary,
     editSession,
     refetchSessionsList,
+    onChangeAutoSaveSessionId,
     handleClose,
   ]);
 
diff --git a/src/session/sessionDrawer.component.test.tsx b/src/session/sessionDrawer.component.test.tsx
index 05cbc17c3..e43032edf 100644
--- a/src/session/sessionDrawer.component.test.tsx
+++ b/src/session/sessionDrawer.component.test.tsx
@@ -12,6 +12,7 @@ describe('session Drawer', () => {
   const onChangeLoadedSessionId = jest.fn();
   const onChangeSelectedSessionTimestamp = jest.fn();
   const refetchSessionsData = jest.fn();
+  const onChangeAutoSaveSessionId = jest.fn();
   let user;
   let props: SessionDrawerProps;
   const createView = (): RenderResult => {
@@ -28,6 +29,7 @@ describe('session Drawer', () => {
       sessionsList: SessionsListJSON,
       onChangeSelectedSessionTimestamp: onChangeSelectedSessionTimestamp,
       refetchSessionsData: refetchSessionsData,
+      onChangeAutoSaveSessionId: onChangeAutoSaveSessionId,
     };
   });
   afterEach(() => {
@@ -50,7 +52,7 @@ describe('session Drawer', () => {
   });
 
   it('loads a user session', async () => {
-    props.selectedSessionId = '1';
+    props.loadedSessionId = '1';
     createView();
     await waitFor(() => {
       expect(screen.getByText('Session 1')).toBeInTheDocument();
@@ -70,6 +72,7 @@ describe('session Drawer', () => {
       true
     );
     expect(refetchSessionsData).toHaveBeenCalledWith('1');
+    expect(onChangeAutoSaveSessionId).toHaveBeenCalledWith(undefined);
   });
 
   it('a user can open the edit session dialogue', async () => {
diff --git a/src/session/sessionDrawer.component.tsx b/src/session/sessionDrawer.component.tsx
index bea8a37a7..186b708fd 100644
--- a/src/session/sessionDrawer.component.tsx
+++ b/src/session/sessionDrawer.component.tsx
@@ -35,6 +35,7 @@ export interface SessionDrawerProps {
     autoSaved: boolean | undefined
   ) => void;
   refetchSessionsData: (sessionId: string) => void;
+  onChangeAutoSaveSessionId: (autoSaveSessionId: string | undefined) => void;
 }
 
 interface SessionListElementProps extends SessionListItem {
@@ -47,6 +48,16 @@ interface SessionListElementProps extends SessionListItem {
     autoSaved: boolean | undefined
   ) => void;
   refetchSessionsData: (sessionId: string) => void;
+  onChangeAutoSaveSessionId: (autoSaveSessionId: string | undefined) => void;
+}
+
+function compareSessions(a: SessionListItem, b: SessionListItem): number {
+  if (a.auto_saved === b.auto_saved) {
+    // If auto_saved is the same, sort by timestamp (you can adjust the sorting criteria)
+    return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();
+  }
+  // Sort auto_saved=true sessions above auto_saved=false sessions
+  return b.auto_saved ? 1 : -1;
 }
 
 const SessionListElement = (
@@ -59,6 +70,7 @@ const SessionListElement = (
     handleImport,
     onChangeSelectedSessionTimestamp,
     refetchSessionsData,
+    onChangeAutoSaveSessionId,
     ...session
   } = props;
   const prevTimestampRef = React.useRef<string | undefined>(undefined);
@@ -88,6 +100,7 @@ const SessionListElement = (
       }}
       onClick={() => {
         refetchSessionsData(session._id);
+        onChangeAutoSaveSessionId(undefined);
         onChangeSelectedSessionTimestamp(session.timestamp, session.auto_saved);
         handleImport(session._id);
       }}
@@ -140,6 +153,7 @@ const SessionsDrawer = (props: SessionDrawerProps): React.ReactElement => {
     onChangeLoadedSessionId,
     onChangeSelectedSessionTimestamp,
     refetchSessionsData,
+    onChangeAutoSaveSessionId,
   } = props;
 
   const { data: sessionData } = useSession(loadedSessionId);
@@ -202,7 +216,7 @@ const SessionsDrawer = (props: SessionDrawerProps): React.ReactElement => {
         </Box>
         <List disablePadding>
           {sessionsList &&
-            sessionsList.map((item, index) => (
+            sessionsList.sort(compareSessions).map((item, index) => (
               <ListItem key={item._id} disablePadding>
                 <SessionListElement
                   {...item}
@@ -214,6 +228,7 @@ const SessionsDrawer = (props: SessionDrawerProps): React.ReactElement => {
                     onChangeSelectedSessionTimestamp
                   }
                   refetchSessionsData={refetchSessionsData}
+                  onChangeAutoSaveSessionId={onChangeAutoSaveSessionId}
                 />
               </ListItem>
             ))}
diff --git a/src/session/sessionSaveButtons.component.test.tsx b/src/session/sessionSaveButtons.component.test.tsx
index 8e93af0f2..e120d44ba 100644
--- a/src/session/sessionSaveButtons.component.test.tsx
+++ b/src/session/sessionSaveButtons.component.test.tsx
@@ -11,17 +11,19 @@ import SessionSaveButtons, {
   AUTO_SAVE_INTERVAL_MS,
 } from './sessionSaveButtons.component';
 import { renderComponentWithProviders } from '../setupTests';
-import { useEditSession } from '../api/sessions';
+import { useEditSession, useSaveSession } from '../api/sessions';
 
 // Mock the useEditSession hook
 jest.mock('../api/sessions', () => ({
   useEditSession: jest.fn(),
+  useSaveSession: jest.fn(),
 }));
 
 describe('session buttons', () => {
   let props: SessionsSaveButtonsProps;
   const onSaveAsSessionClick = jest.fn();
   const refetchSessionsList = jest.fn();
+  const onChangeAutoSaveSessionId = jest.fn();
   const createView = (): RenderResult => {
     return renderComponentWithProviders(<SessionSaveButtons {...props} />);
   };
@@ -33,6 +35,8 @@ describe('session buttons', () => {
       selectedSessionData: undefined,
       selectedSessionTimestamp: { timestamp: undefined, autoSaved: undefined },
       refetchSessionsList: refetchSessionsList,
+      onChangeAutoSaveSessionId: onChangeAutoSaveSessionId,
+      autoSaveSessionId: undefined,
     };
     jest.useFakeTimers();
 
@@ -40,6 +44,9 @@ describe('session buttons', () => {
     useEditSession.mockReturnValue({
       mutateAsync: jest.fn().mockResolvedValue({}),
     });
+    useSaveSession.mockReturnValue({
+      mutateAsync: jest.fn().mockResolvedValue({}),
+    });
   });
 
   afterEach(() => {
@@ -52,29 +59,30 @@ describe('session buttons', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should enable auto save if an user session is selected', () => {
-    props.selectedSessionData = {
-      name: 'test',
-      summary: 'test',
-      auto_saved: false,
-      session: {},
-      _id: '1',
-      timestamp: '',
+  it('should be able to create an autosaved session from the current state of session', () => {
+    props = {
+      ...props,
+      selectedSessionData: {
+        name: 'test',
+        summary: 'test',
+        auto_saved: false,
+        session: {},
+        _id: '1',
+        timestamp: '',
+      },
+      sessionId: '1',
     };
-    props.sessionId = '1';
     const { rerender } = createView();
 
     act(() => {
       jest.advanceTimersByTime(AUTO_SAVE_INTERVAL_MS);
     });
 
-    expect(useEditSession().mutateAsync).toHaveBeenCalledTimes(1);
-    expect(useEditSession().mutateAsync).toHaveBeenCalledWith({
-      _id: '1',
+    expect(useSaveSession().mutateAsync).toHaveBeenCalledTimes(1);
+    expect(useSaveSession().mutateAsync).toHaveBeenCalledWith({
       auto_saved: true,
-      name: 'test',
+      name: 'test (autosaved)',
       summary: 'test',
-      timestamp: '',
       session: {
         table: {
           columnStates: {},
@@ -97,28 +105,26 @@ describe('session buttons', () => {
       },
     });
 
-    props.selectedSessionData = {
-      name: 'test 2',
-      summary: 'test 2',
-      auto_saved: false,
-      session: {},
-      _id: '2',
-      timestamp: '',
+    props = {
+      ...props,
+      selectedSessionData: {
+        name: 'test',
+        summary: 'test',
+        auto_saved: false,
+        session: {},
+        _id: '2',
+        timestamp: '',
+      },
+      sessionId: '2',
     };
-    props.sessionId = '2';
-    rerender(<SessionSaveButtons {...props} />);
 
-    act(() => {
-      jest.advanceTimersByTime(AUTO_SAVE_INTERVAL_MS);
-    });
+    rerender(<SessionSaveButtons {...props} />);
 
-    expect(useEditSession().mutateAsync).toHaveBeenCalledTimes(2);
-    expect(useEditSession().mutateAsync).toHaveBeenCalledWith({
-      _id: '2',
+    expect(useSaveSession().mutateAsync).toHaveBeenCalledTimes(1);
+    expect(useSaveSession().mutateAsync).toHaveBeenCalledWith({
       auto_saved: true,
-      name: 'test 2',
-      summary: 'test 2',
-      timestamp: '',
+      name: 'test (autosaved)',
+      summary: 'test',
       session: {
         table: {
           columnStates: {},
@@ -140,18 +146,34 @@ describe('session buttons', () => {
         windows: {},
       },
     });
+  });
+
+  it('should update autosave session when autoSavedSessionId exist', () => {
+    props = {
+      ...props,
+      selectedSessionData: {
+        name: 'test',
+        summary: 'test',
+        auto_saved: false,
+        session: {},
+        _id: '1',
+        timestamp: '',
+      },
+      sessionId: '1',
+      autoSaveSessionId: '5',
+    };
+    createView();
 
     act(() => {
       jest.advanceTimersByTime(AUTO_SAVE_INTERVAL_MS);
     });
 
-    expect(useEditSession().mutateAsync).toHaveBeenCalledTimes(3);
+    expect(useEditSession().mutateAsync).toHaveBeenCalledTimes(1);
     expect(useEditSession().mutateAsync).toHaveBeenCalledWith({
-      _id: '2',
+      _id: '5',
       auto_saved: true,
-      name: 'test 2',
-      summary: 'test 2',
-      timestamp: '',
+      name: 'test (autosaved)',
+      summary: 'test',
       session: {
         table: {
           columnStates: {},
@@ -172,6 +194,7 @@ describe('session buttons', () => {
         filter: { appliedFilters: [[]] },
         windows: {},
       },
+      timestamp: '',
     });
   });
 
diff --git a/src/session/sessionSaveButtons.component.tsx b/src/session/sessionSaveButtons.component.tsx
index 2d0b2b603..dd217230c 100644
--- a/src/session/sessionSaveButtons.component.tsx
+++ b/src/session/sessionSaveButtons.component.tsx
@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import { Button, Typography } from '@mui/material';
 import { SessionResponse } from '../app.types';
 import { useAppSelector } from '../state/hooks';
-import { useEditSession } from '../api/sessions';
+import { useEditSession, useSaveSession } from '../api/sessions';
 import { format, parseISO } from 'date-fns';
 
 export interface SessionsSaveButtonsProps {
@@ -14,6 +14,8 @@ export interface SessionsSaveButtonsProps {
     timestamp: string | undefined;
     autoSaved: boolean | undefined;
   };
+  autoSaveSessionId: string | undefined;
+  onChangeAutoSaveSessionId: (autoSaveSessionId: string | undefined) => void;
   refetchSessionsList: () => void;
 }
 
@@ -32,9 +34,12 @@ const SessionSaveButtons = (props: SessionsSaveButtonsProps) => {
     selectedSessionTimestamp,
     refetchSessionsList,
     sessionId,
+    autoSaveSessionId,
+    onChangeAutoSaveSessionId,
   } = props;
 
   const { mutateAsync: editSession } = useEditSession();
+  const { mutateAsync: saveSession } = useSaveSession();
 
   const autoSaveTimeout = React.useRef<ReturnType<typeof setInterval> | null>(
     null
@@ -74,17 +79,26 @@ const SessionSaveButtons = (props: SessionsSaveButtonsProps) => {
 
     if (selectedSessionData) {
       autoSaveTimer = setInterval(() => {
-        const session = {
+        const sessionData = {
+          name: `${selectedSessionData.name} (autosaved)`,
           session: state,
-          auto_saved: true,
-          _id: selectedSessionData._id,
           summary: selectedSessionData.summary,
-          timestamp: selectedSessionData.timestamp,
-          name: selectedSessionData.name,
+          auto_saved: true,
         };
-        editSession(session).then((response) => {
-          refetchSessionsList();
-        });
+        if (!autoSaveSessionId) {
+          saveSession(sessionData).then((repsonse) => {
+            onChangeAutoSaveSessionId(repsonse);
+            refetchSessionsList();
+          });
+        } else {
+          editSession({
+            _id: autoSaveSessionId,
+            timestamp: selectedSessionData.timestamp,
+            ...sessionData,
+          }).then((repsonse) => {
+            refetchSessionsList();
+          });
+        }
       }, AUTO_SAVE_INTERVAL_MS);
     }
 
diff --git a/src/views/viewTabs.component.tsx b/src/views/viewTabs.component.tsx
index cce5b0542..b6c0e28ed 100644
--- a/src/views/viewTabs.component.tsx
+++ b/src/views/viewTabs.component.tsx
@@ -56,6 +56,10 @@ const ViewTabs = () => {
     setValue(newValue);
   };
 
+  const [autoSaveSessionId, setAutoSaveSessionId] = React.useState<
+    string | undefined
+  >(undefined);
+
   // This useState manges the selected session id used for deleting and editing a session
   const [selectedSessionId, setSelectedSessionId] = React.useState<
     string | undefined
@@ -122,6 +126,15 @@ const ViewTabs = () => {
     setSelectedSessionTimestamp({ timestamp, autoSaved });
   };
 
+  const onDeleteLoadedsession = () => {
+    setLoadedSessionId(undefined);
+    setSelectedSessionId(undefined);
+    setSelectedSessionTimestamp({
+      timestamp: undefined,
+      autoSaved: undefined,
+    });
+  };
+
   return (
     <Box
       sx={{
@@ -142,6 +155,7 @@ const ViewTabs = () => {
         onChangeLoadedSessionId={setLoadedSessionId}
         onChangeSelectedSessionTimestamp={onChangeSelectedSessionTimestamp}
         refetchSessionsData={onChangeRefetchSessionData}
+        onChangeAutoSaveSessionId={setAutoSaveSessionId}
       />
 
       <Box sx={{ width: '100%' }}>
@@ -166,6 +180,8 @@ const ViewTabs = () => {
               selectedSessionData={selectedSessionData}
               selectedSessionTimestamp={selectedSessionTimestamp}
               refetchSessionsList={refetchSessionsList}
+              autoSaveSessionId={autoSaveSessionId}
+              onChangeAutoSaveSessionId={setAutoSaveSessionId}
             />
           </Box>
         </Box>
@@ -186,6 +202,7 @@ const ViewTabs = () => {
           sessionData={sessionData}
           onChangeLoadedSessionId={setLoadedSessionId}
           refetchSessionsList={refetchSessionsList}
+          onChangeAutoSaveSessionId={setAutoSaveSessionId}
         />
         <SessionDialogue
           open={sessionSaveOpen}
@@ -197,6 +214,7 @@ const ViewTabs = () => {
           onChangeLoadedSessionId={setLoadedSessionId}
           requestType="create"
           refetchSessionsList={refetchSessionsList}
+          onChangeAutoSaveSessionId={setAutoSaveSessionId}
         />
         <DeleteSessionDialogue
           open={sessionDeleteOpen}
@@ -204,7 +222,7 @@ const ViewTabs = () => {
           sessionData={sessionData}
           refetchSessionsList={refetchSessionsList}
           loadedSessionId={loadedSessionId}
-          onChangeLoadedSessionId={setLoadedSessionId}
+          onDeleteLoadedsession={onDeleteLoadedsession}
         />
       </Box>
     </Box>