Fix: Issue #9225 Solved

[prathamesh-patil-5090]

Problem:
When users navigate to non-existent resources (invalid task ID, project ID, job ID, or cloud storage ID), they see a Not Found error page but have no easy way to navigate back. They must either:

• Manually edit the URL
• Use the browser's back button (which may not always be intuitive)
• Navigate using the main menu

Solution:
This PR adds a "Return to Previous Page" button to Not Found pages with smart fallback logic:

• If browser history exists → navigates back using history.goBack() (preserves query parameters and navigation context)
• If browser history is empty (e.g., user arrived via direct link) → redirects to the appropriate resource list page:
  • Task Not Found → /tasks
  • Project Not Found → /projects
  • Job Not Found → /jobs
  • Cloud Storage Not Found → /cloudstorages

Changes implemented:

• Added "Return to Previous Page" button to TaskNotFoundComponent, ProjectNotFoundComponent, and CloudStorageNotFoundComponent
• Button placed in Result.extra prop (centered by Ant Design)
• Used React Router v5's useHistory() hook with smart fallback:

  const handleReturn = () => {
      if (history.length > 2) {
          history.goBack();
      } else {
          history.push('/tasks'); // or appropriate list page
      }
  };

File affected:

• cvat-ui/src/components/common/not-found.tsx

How has this been tested?

Manual verification steps performed locally:

1. Started the frontend dev server in the project root:

cd cvat-ui
yarn install
yarn start

2. Tested navigation scenarios for each Not Found page:

   Scenario A: Browser history exists (normal navigation)

   • Navigate to valid resource (e.g., /tasks)
   • Navigate to invalid resource (e.g., /tasks/99999)
   • Click "Return to Previous Page" button
   • ✅ Verified: Returns to /tasks preserving any query parameters

   Scenario B: Direct URL access (no browser history)

   • Open browser in new tab/incognito
   • Navigate directly to invalid resource (e.g., http://localhost:3000/tasks/99999)
   • Click "Return to Previous Page" button
   • ✅ Verified: Redirects to /tasks (appropriate fallback)

   Tested for all Not Found pages:

   • /tasks/invalid-id → fallback to /tasks
   • /projects/invalid-id → fallback to /projects
   • /jobs/invalid-id → fallback to /jobs
   • /cloudstorages/invalid-id → fallback to /cloudstorages

3. Confirmed:

   • Button is visually centered below error message
   • No console errors or warnings
   • Query parameters preserved when using history.goBack()
   • Smooth navigation in both scenarios

4. Verified TypeScript and lint checks in UI folder:

cd cvat-ui
yarn run type-check
yarn run lint

Note: All checks passed locally for this change.

5. Proofs:

Checklist

• I submit my changes into the develop branch
• I have created a changelog fragment

Changelog

Added:

• "Return to Previous Page" button on Task, Project, Job, and Cloud Storage Not Found pages with smart fallback navigation

[klakhov]

Hi @prathamesh-patil-5090,

Could you please update the PR description to clearly reflect the actual purpose of the changes?
Right now it looks AI-generated and describes things that do not exist in our codebase — for example:

• We don’t have a return/back button on those pages that needs centering.
• We can’t use useNavigate because the project is still on React Router v5, so this is not technically possible.

I’m not against adding a return/back button — it can be useful — but please note that browser history may be empty. In such cases the button must redirect to the appropriate main page depending on the resource type (tasks → tasks list, projects → projects list, etc.).

Also, please add a changelog entry describing the feature.

[prathamesh-patil-5090]

Hey @klakhov Sorry for the inconvience of the PR description. In short I tried to solve the problem of Issue: #9225 . Also Thanks for picking out the edge case of browser history being empty, that case has now been handled, too. I basically used useHistory to navigate if incase user goes like tasks/2?page=2 -> tasks/3232(which may not exist) to return him/her again to tasks/2?page=2. If he directly goes to tasks/3232 if it doesn't exist the button will redirect it to /tasks/

[klakhov]

I suggest to use text:

### Added

- "Return to Previous Page" button on Task, Project, Job, and Cloud Storage Not Found pages

Also, do not modify this file directly. Our project uses scriv to handle changelogs to avoid merge conflicts.
To use it use the command from the note of CHANGELOG.md below:

 Developers: this project uses scriv (<https://scriv.readthedocs.io/en/stable/index.html>)
  to maintain the changelog. To add an entry, create a fragment:

    $ scriv create --edit

  Fragments will be merged into this file whenever a release is made.

[prathamesh-patil-5090]

Noted, thanks

[klakhov]

The code of this function is duplicated, need to extract and re-use the logic.

[klakhov]

Also, why do we use >2? Shouldnt it be '>1?

[prathamesh-patil-5090]

Yup i have extracted and reused the logic now

I used the '>1' in the code first-hand but then I came across the unusual behaviour of browser history, that they count homepage in history so if user navigates to http://127.0.0.1:3000/tasks/1365 which does not exist directly from the homepage and if the condition is '>1' rather than '>2', it will redirect the user to homepage of browser after clicking the button that I have added rather than taking him to http://127.0.0.1:3000/tasks. So to counter it, I used '>2' which solves this edge case

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud