Fixed "Back" button redirection

changelog.d/20240813_115132_klakhov_fix_go_back.md

@@ -0,0 +1,4 @@
+### Fixed
+
+- Go back button behavior on analytics page
+  (<https://github.com/cvat-ai/cvat/pull/8277>)

cvat-ui/package.json

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

cvat-ui/src/actions/navigation-actions.ts

@@ -0,0 +1,17 @@
+// Copyright (C) 2024 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import { ActionUnion, createAction } from 'utils/redux';
+
+export enum NavigationActionTypes {
+    CHANGE_LOCATION = 'CHANGE_LOCATION',
+}
+
+export const navigationActions = {
+    changeLocation: (from: string, to: string) => createAction(
+        NavigationActionTypes.CHANGE_LOCATION, { from, to },
+    ),
+};
+
+export type NavigationActions = ActionUnion<typeof navigationActions>;

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

@@ -97,6 +97,7 @@ interface CVATAppProps {
     initInvitations: () => void;
     initRequests: () => void;
     loadServerAPISchema: () => void;
+    onChangeLocation: (from: string, to: string) => void;
     userInitialized: boolean;
     userFetching: boolean;
     organizationFetching: boolean;
@@ -141,7 +142,7 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
 
     public componentDidMount(): void {
         const core = getCore();
-        const { history, location } = this.props;
+        const { history, location, onChangeLocation } = this.props;
         const {
             HEALTH_CHECK_RETRIES, HEALTH_CHECK_PERIOD, HEALTH_CHECK_REQUEST_TIMEOUT,
             SERVER_UNAVAILABLE_COMPONENT, RESET_NOTIFICATIONS_PATHS,
@@ -173,6 +174,9 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
         history.listen((newLocation) => {
             customWaViewHit(newLocation.pathname, newLocation.search, newLocation.hash);
             const { location: prevLocation } = this.props;
+
+            onChangeLocation(prevLocation.pathname, newLocation.pathname);
+
             const shouldResetNotifications = RESET_NOTIFICATIONS_PATHS.from.some(
                 (pathname) => prevLocation.pathname === pathname,
             );

cvat-ui/src/config.tsx

@@ -134,6 +134,10 @@ const LOCAL_STORAGE_LAST_FRAME_MEMORY_LIMIT = 20;
 
 const REQUEST_SUCCESS_NOTIFICATION_DURATION = 5; // seconds
 
+const BLACKLISTED_GO_BACK_PATHS = [
+    /\/auth.+/,
+];
+
 export default {
     UNDEFINED_ATTRIBUTE_VALUE,
     NO_BREAK_SPACE,
@@ -174,4 +178,5 @@ export default {
     LOCAL_STORAGE_SEEN_GUIDES_MEMORY_LIMIT,
     LOCAL_STORAGE_LAST_FRAME_MEMORY_LIMIT,
     REQUEST_SUCCESS_NOTIFICATION_DURATION,
+    BLACKLISTED_GO_BACK_PATHS,
 };

cvat-ui/src/index.tsx

@@ -25,6 +25,7 @@ import { resetErrors, resetMessages } from 'actions/notification-actions';
 import { getInvitationsAsync } from 'actions/invitations-actions';
 import { getRequestsAsync } from 'actions/requests-async-actions';
 import { getServerAPISchemaAsync } from 'actions/server-actions';
+import { navigationActions } from 'actions/navigation-actions';
 import { CombinedState, NotificationsState, PluginsState } from './reducers';
 
 createCVATStore(createRootReducer);
@@ -73,6 +74,7 @@ interface DispatchToProps {
     initInvitations: () => void;
     initRequests: () => void;
     loadServerAPISchema: () => void;
+    onChangeLocation: (from: string, to: string) => void;
 }
 
 function mapStateToProps(state: CombinedState): StateToProps {
@@ -124,6 +126,7 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
         initInvitations: (): void => dispatch(getInvitationsAsync({ page: 1 }, true)),
         initRequests: (): void => dispatch(getRequestsAsync({ page: 1 })),
         loadServerAPISchema: (): void => dispatch(getServerAPISchemaAsync()),
+        onChangeLocation: (from: string, to: string): void => dispatch(navigationActions.changeLocation(from, to)),
     };
 }
 

cvat-ui/src/reducers/index.ts

@@ -966,6 +966,10 @@ export interface RequestsState {
     query: RequestsQuery;
 }
 
+export interface NavigationState {
+    prevLocation: string | null;
+}
+
 export interface CombinedState {
     auth: AuthState;
     projects: ProjectsState;
@@ -989,6 +993,7 @@ export interface CombinedState {
     webhooks: WebhooksState;
     requests: RequestsState;
     serverAPI: ServerAPIState;
+    navigation: NavigationState;
 }
 
 export interface Indexable {

cvat-ui/src/reducers/navigation-reducer.ts

@@ -0,0 +1,43 @@
+// Copyright (C) 2024 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import { NavigationActions, NavigationActionTypes } from 'actions/navigation-actions';
+import config from 'config';
+import { NavigationState } from '.';
+
+const defaultState: NavigationState = {
+    prevLocation: null,
+};
+
+export default function (
+    state: NavigationState = defaultState,
+    action:NavigationActions,
+): NavigationState {
+    switch (action.type) {
+        case NavigationActionTypes.CHANGE_LOCATION: {
+            const { BLACKLISTED_GO_BACK_PATHS } = config;
+            const { from, to } = action.payload;
+
+            if (from === to) {
+                return state;
+            }
+
+            for (const path of BLACKLISTED_GO_BACK_PATHS) {
+                if (path.test(from)) {
+                    return {
+                        ...state,
+                        prevLocation: null,
+                    };
+                }
+            }
+
+            return {
+                ...state,
+                prevLocation: from,
+            };
+        }
+        default:
+            return state;
+    }
+}

cvat-ui/src/reducers/root-reducer.ts

@@ -26,6 +26,7 @@ import webhooksReducer from './webhooks-reducer';
 import invitationsReducer from './invitations-reducer';
 import requestsReducer from './requests-reducer';
 import serverAPIReducer from './server-api-reducer';
+import navigationReducer from './navigation-reducer';
 
 export default function createRootReducer(): Reducer {
     return combineReducers({
@@ -51,5 +52,6 @@ export default function createRootReducer(): Reducer {
         invitations: invitationsReducer,
         requests: requestsReducer,
         serverAPI: serverAPIReducer,
+        navigation: navigationReducer,
     });
 }

cvat-ui/src/utils/hooks.ts

@@ -1,5 +1,5 @@
 // Copyright (C) 2021-2022 Intel Corporation
-// Copyright (C) 2023 CVAT.ai Corporation
+// Copyright (C) 2023-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -64,13 +64,10 @@ export function usePlugins(
 
 export function useGoBack(): () => void {
     const history = useHistory();
+    const prevLocation = useSelector((state: CombinedState) => state.navigation.prevLocation) ?? '/tasks';
     const goBack = useCallback(() => {
-        if (history.action !== 'POP') {
-            history.goBack();
-        } else {
-            history.push('/');
-        }
-    }, []);
+        history.push(prevLocation);
+    }, [prevLocation]);
 
     return goBack;
 }