Improved UX of user logout (#5266)

* Improved UX of user logout

* Updated version & changelog

* Fixed ?next='' query parameter

* Updated license header

CHANGELOG.md

@@ -69,6 +69,7 @@ non-ascii paths while adding files from "Connected file share" (issue #4428)
 - Job assignee can not resolve an issue (<https://github.com/opencv/cvat/pull/5167>)
 - Create manifest with cvat/server docker container command (<https://github.com/opencv/cvat/pull/5172>)
 - Cannot assign a resource to a user who has an organization (<https://github.com/opencv/cvat/pull/5218>)
+- Logs and annotations are not saved when logout from a job page (<https://github.com/opencv/cvat/pull/5266>)
 - Occluded not applied on canvas instantly for a skeleton elements (<https://github.com/opencv/cvat/pull/5259>)
 - Oriented bounding boxes broken with COCO format ss(<https://github.com/opencv/cvat/pull/5219>)
 - Fixed upload resumption in production environments

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.43.1",
+  "version": "1.43.2",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/cvat-app.tsx

@@ -14,6 +14,7 @@ import Spin from 'antd/lib/spin';
 import Text from 'antd/lib/typography/Text';
 import 'antd/dist/antd.css';
 
+import LogoutComponent from 'components/logout-component';
 import LoginPageContainer from 'containers/login-page/login-page';
 import LoginWithTokenComponent from 'components/login-with-token/login-with-token';
 import RegisterPageContainer from 'containers/register-page/register-page';
@@ -373,6 +374,7 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
                                     <ShortcutsDialog />
                                     <GlobalHotKeys keyMap={subKeyMap} handlers={handlers}>
                                         <Switch>
+                                            <Route exact path='/auth/logout' component={LogoutComponent} />
                                             <Route exact path='/projects' component={ProjectsPageComponent} />
                                             <Route exact path='/projects/create' component={CreateProjectPageComponent} />
                                             <Route exact path='/projects/:id' component={ProjectPageComponent} />
@@ -447,7 +449,7 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
                         <Route exact path='/auth/email-confirmation' component={EmailConfirmationPage} />
 
                         <Redirect
-                            to={location.pathname.length > 1 ? `/auth/login/?next=${location.pathname}` : '/auth/login'}
+                            to={location.pathname.length > 1 ? `/auth/login?next=${location.pathname}` : '/auth/login'}
                         />
                     </Switch>
                 </GlobalErrorBoundary>

cvat-ui/src/components/header/header.tsx

@@ -1,5 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
-// Copyright (C) 2022 CVAT.ai Corp
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -152,7 +152,6 @@ function HeaderContainer(props: Props): JSX.Element {
         changePasswordFetching,
         settingsDialogShown,
         switchSettingsShortcut,
-        onLogout,
         switchSettingsDialog,
         switchChangePasswordDialog,
         renderChangePasswordItem,
@@ -364,7 +363,9 @@ function HeaderContainer(props: Props): JSX.Element {
             <Menu.Item
                 key='logout'
                 icon={logoutFetching ? <LoadingOutlined /> : <LogoutOutlined />}
-                onClick={onLogout}
+                onClick={() => {
+                    history.push('/auth/logout');
+                }}
                 disabled={logoutFetching}
             >
                 Logout

cvat-ui/src/components/logout-component.tsx

@@ -0,0 +1,32 @@
+// Copyright (C) 2022 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import Spin from 'antd/lib/spin';
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { useHistory } from 'react-router';
+
+import { saveLogsAsync } from 'actions/annotation-actions';
+import { logoutAsync } from 'actions/auth-actions';
+
+function LogoutComponent(): JSX.Element {
+    const dispatch = useDispatch();
+    const history = useHistory();
+
+    useEffect(() => {
+        dispatch(saveLogsAsync()).then(() => {
+            dispatch(logoutAsync()).then(() => {
+                history.goBack();
+            });
+        });
+    }, []);
+
+    return (
+        <div className='cvat-logout-page cvat-spinner-container'>
+            <Spin className='cvat-spinner' />
+        </div>
+    );
+}
+
+export default React.memo(LogoutComponent);

cvat-ui/src/utils/redux.ts

@@ -1,4 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -18,6 +19,6 @@ export function createAction<T extends string, P>(type: T, payload?: P): Action<
 
 export type ActionUnion<A extends ActionCreatorsMapObject> = ReturnType<A[keyof A]>;
 
-export type ThunkAction<R = {}, A extends Action = AnyAction> = _ThunkAction<R, CombinedState, {}, A>;
+export type ThunkAction<R = Promise<void>, A extends Action = AnyAction> = _ThunkAction<R, CombinedState, {}, A>;
 
 export type ThunkDispatch<E = {}, A extends Action = AnyAction> = _ThunkDispatch<CombinedState, E, A>;

tests/cypress/integration/actions_users/issue_1810_login_logout.js

@@ -1,4 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -46,7 +47,7 @@ context('When clicking on the Logout button, get the user session closed.', () =
                     .trigger('mouseover', { which: 1 });
             });
             cy.get('span[aria-label="logout"]').click();
-            cy.url().should('include', `/auth/login/?next=/tasks/${taskId}`);
+            cy.url().should('include', `/auth/login?next=/tasks/${taskId}`);
             // login to task
             login(Cypress.env('user'), Cypress.env('password'));
             cy.url().should('include', `/tasks/${taskId}`).and('not.include', '/auth/login');