Skip to content

Bosu - fix: enable HGN questionnaire profile navigation - #5462

Open
BosuBose132 wants to merge 1 commit into
developmentfrom
Bosu-Fix-HGN-Questionnaire-Profile-Route
Open

Bosu - fix: enable HGN questionnaire profile navigation#5462
BosuBose132 wants to merge 1 commit into
developmentfrom
Bosu-Fix-HGN-Questionnaire-Profile-Route

Conversation

@BosuBose132

Copy link
Copy Markdown

Description

Fixes the HGN Questionnaire Dashboard profile route accessibility issue.

The route /hgnhelp/profile/:userId existed, but users displayed in the HGN community list did not have a working navigation path to their questionnaire profile. During investigation, it was also identified that the profile page needed to use the HGN skills profile endpoint to retrieve the user's questionnaire skills, experience information, and team details.

The frontend now provides profile navigation from community user cards using the actual user profile ID supplied by the backend and loads the combined HGN skills profile data.

Related PRs

  1. This frontend PR is related to backend PR Nathalia fix discrepancies in the total hours for the project on the project report page #2315.
  2. The backend PR exposes the actual UserProfile ID as userId in ranked and community questionnaire responses.
  3. Both PRs should be tested together.

Main changes explained

  1. Updated UserCard.jsx to make the user's name link to /hgnhelp/profile/:userId.
  2. Updated profile navigation to use user.userId instead of the HGN questionnaire response document _id.
  3. Added safe handling so users without a valid userId do not generate an invalid profile URL.
  4. Updated UserProfilePage.jsx to use ENDPOINTS.SKILLS_PROFILE(userId) so the page receives questionnaire skills, experience/follow-up information, and team data.
  5. Preserved existing email and Slack functionality on user cards.
  6. Added focused tests for profile routing, correct user ID usage, missing IDs, profile API data, empty optional data, and API error handling.

How to test

  1. Checkout this frontend branch.

  2. Checkout the related backend PR branch.

  3. Run the backend locally.

  4. Run the frontend with:

    npm run start:local

  5. Log in with an authorized test account.

  6. Navigate to /hgnhelp/community, or access the community list through the HGN questionnaire flow.

  7. Click a user's name.

  8. Verify the browser navigates to:

    /hgnhelp/profile/<userId>

  9. Verify the profile displays the selected user's:

    • Name
    • Skills
    • Experience/follow-up information
    • Team information when available
  10. Open DevTools → Network and verify the profile request uses:

    /api/skills/profile/<userId>

  11. Verify the endpoint returns the selected user's real profile instead of the Unknown User placeholder.

  12. Test multiple users, including a user with team information and a user without team information.

  13. Refresh the profile route directly and confirm it continues to load correctly.

  14. Verify the profile displays correctly in dark mode.

Validation performed

  • Focused frontend tests: 5/5 passed
  • ESLint on changed frontend files: passed
  • git diff --check: passed
  • Production frontend build with npm run build: passed
  • Manual local profile navigation: passed
  • Multiple-user profile testing: passed
  • Skills data rendering: passed
  • Experience data rendering: passed
  • Team data rendering: passed

Screenshots or videos of changes

Uploading Screen Recording 2026-08-22 at 11.52.29 AM.mov…

Note

The duplicate existing /hgnhelp route definitions were investigated but were not modified because they are not required for this profile-route fix. No unrelated routing, dependency, or backend changes are included in this frontend PR.

@netlify

netlify Bot commented Aug 22, 2026

Copy link
Copy Markdown

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 5649cdb
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a89cb3390801800084ba7a6
😎 Deploy Preview https://deploy-preview-5462--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@sonarqubecloud

Copy link
Copy Markdown

@BosuBose132 BosuBose132 changed the title fix: enable HGN questionnaire profile navigation Bosu - fix: enable HGN questionnaire profile navigation Aug 22, 2026
@iAbhi001
iAbhi001 self-requested a review August 23, 2026 03:14

@iAbhi001 iAbhi001 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Review & Validation Summary

Tested locally alongside backend PR #2315. Everything works as expected.

Verification Checklist:

  • Navigation: Successfully navigated from /hgnhelp/community to /hgnhelp/profile/<userId> by clicking user cards.
  • Routing & ID handling: Verified that the actual userId is used instead of the questionnaire _id, and fallback handling for missing IDs works cleanly.
  • API & Data Rendering: Confirmed /api/skills/profile/<userId> is called correctly and populates user name, skills, experience, and team info (no "Unknown User" fallback).
  • Edge Cases: Tested users with and without team assignments, verified direct page refresh on the profile URL, and checked dark mode styling.
  • Tests & Build: Local test suites and production build executed without errors.

LGTM! Approved. 🚀

@linlin-husky linlin-husky left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, BosuBose132,

PR Review & Validation Summary

I have reviewed and tested this PR locally alongside the backend branch Bosu-Fix-HGN-Questionnaire-Profile-ID (PR #2315). Everything works as expected!


Functional Verification Checklist:

  • Navigation & Routing: Successfully navigated to /hgnhelp/profile/<userId> by clicking user cards from the community list. Verified that the actual userId is used instead of the questionnaire response _id.
  • API & Data Rendering: Confirmed the frontend fetches /api/skills/profile/<userId> with HTTP 200 and correctly populates the user's name, skills radar chart, leadership/additional experience, and team info (no "Unknown User" placeholders).
  • Multi-User & Edge Cases: Tested multiple profiles (both with and without assigned teams). Direct browser refresh on the profile URL loads the profile seamlessly.
  • UI & Theming: Verified that dark mode styling and radar chart elements render cleanly.

Test & Build Verification:

  • Unit Tests: All test suites passed (324 passed / 2171 tests passed).
  • Lint & Formatting: ESLint and git diff --check completed without errors.
  • Build: Production build (npm run build) succeeded without warnings/errors.
Image Image Image Image

Approved.

@DeepighaJ DeepighaJ left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @BosuBose132
Checked out to frontend branch along side development as backend is already merged.
I navigated to /hgnhelp/community but on clicking on any user profile I don't see redirection to /hgnhelp/profile/

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants