fix(#1029): handle unauthenticated state on Task Request Details page

[Hariom01010]

Date: 10 Nov 2025

Developer Name: @Hariom01010

---

Issue Ticket Number

Closes #1029

Description

1. Updated the showErrorMessage function to handle all error codes (including unauthenticated ones) instead of just 404 and 500.
2. Replace the hardcoded navbar with the globally defined navbar which has sign in button too.
3. Dev flag removed from the showErrorMessage function.

Documentation Updated?

• Yes
• No

Under Feature Flag

• Yes
• No

Database Changes

• Yes
• No

Breaking Changes

• Yes
• No

Development Tested?

• Yes
• No

Screenshots

Screenshot 1

proof.mp4

Test Coverage

Screenshot 1

Additional Notes

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Summary by CodeRabbit

• Bug Fixes

  • Error messages now display consistently with specific messages for different HTTP status codes (401 for unauthenticated, 404 for not found).

• New Features

  • Enhanced unauthenticated request handling with dedicated error messaging.

• Style

  • Updated navigation and layout structure; refined error message display styling.

Walkthrough

This PR addresses unauthenticated state handling on the Task Request Details page. It removes dev-flag gating from error display, replaces the hardcoded navbar with a global navbar component, refactors error handling to map HTTP status codes (including 401 for authentication), and updates tests to verify unauthenticated behavior.

Changes

Cohort / File(s)	Summary
Error handling and UI rendering task-requests/details/script.js	Removed dev-flag gate from showErrorMessage; now always displays errors. Refactored showErrorMessage to map HTTP status codes (404 → NOT_FOUND, 401 → UNAUTHENTICATED, default → SERVER_ERROR) and render error div with class and data-testid. Hides skeleton, task container, and requestors section on error.
Navigation and page structure task-requests/details/index.html	Added global.css, utils.js, navbar.global.js, and userLogin.js scripts. Replaced hardcoded header markup with <nav id="tasksNav"></nav> placeholder.
Styling updates task-requests/details/style.css	Removed header-related CSS blocks (.header, .header__contents, etc.). Updated .error-message from viewport-based sizing (100vh/100vw, fixed) to percentage-based sizing (100%, 100%).
Test suite __tests__/task-requests/task-requestDetails.test.js	Removed dev-mode and invalid task ID error tests. Added new test suite for unauthenticated state: launches browser without login cookie, navigates to task details page, verifies unauthenticated error message appears.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Page as Task Details Page
    participant API as API Endpoint
    participant ErrorUI as Error Display

    User->>Page: Access task details (no auth)
    Page->>API: Fetch task request
    API->>Page: Response 401 Unauthorized
    Page->>Page: fetchTaskRequest error handler
    Page->>ErrorUI: showErrorMessage(401)
    ErrorUI->>ErrorUI: Map 401 to UNAUTHENTICATED
    ErrorUI->>ErrorUI: Create error div with message
    ErrorUI->>Page: Append to `#task-request-details`
    Page->>Page: Hide skeleton & containers
    ErrorUI-->>User: Display error message

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Error handling refactor with status code mapping logic requires verification of all cases (401, 404, 500)
• Navigation integration and script injection need validation for proper initialization
• CSS positioning changes from fixed viewport to percentage-based sizing should be tested across viewport sizes
• Test suite changes verify unauthenticated flow but require attention to ensure coverage completeness

Possibly related PRs

• Hidden skeleton loader to/display error message Task not found #969: Modifies fetchTaskRequest/showErrorMessage behavior, error-message CSS styling, and task-details tests in parallel
• Remove feature flag from task requestor details modal to implement new design by default #968: Removes dev-flag-dependent tests and updates UI behavior for task-request details feature

Suggested reviewers

• AnujChhikara
• iamitprakash
• RishiChaubey31
• MayankBansal12

Poem

🐰 The skeleton's gone, errors now show,
With 401 messages for those without auth to flow,
Navbar's now global, no more hardcoded headers slight,
Error handling shines in the 401 light! 🌟

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: handling the unauthenticated state on the Task Request Details page, which matches the primary objective of the PR.
Description check	✅ Passed	The description is well-structured and directly relates to the changeset, covering the three main changes: updated showErrorMessage function, replaced navbar with global one, and removed dev flag.
Linked Issues check	✅ Passed	All three requirements from issue #1029 are addressed: showErrorMessage handles all error codes with HTTP status mapping, hardcoded navbar replaced with global navbar in HTML/scripts, and dev flag removed from error handling.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to requirements in #1029: error handling refactoring, navbar replacement, and test coverage for unauthenticated scenarios. No unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[korbit-ai]

I was unable to write a description for this pull request. This could be because I only found files I can't scan.

[korbit-ai]

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Missing navigation fallback for JavaScript failure ▹ view
	Unoptimized Script Loading Pattern ▹ view

Files scanned

​

File Path	Reviewed
task-requests/details/index.html	✅
task-requests/details/script.js	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

[korbit-ai]

I was unable to write a description for this pull request. This could be because I only found files I can't scan.