Bosu- fix: display HGN forms with names and descriptions

[BosuBose132]

Description

Fixes the HGN Questionnaire Dashboard follow-up issue where /hgnform opened the existing questionnaire directly instead of displaying the available forms with their form names and descriptions.

This PR updates /hgnform to act as an HGN forms catalog. It displays the built-in HGN Development Team Questionnaire together with generic forms returned by the existing /api/form endpoint. Each generic form displays its formName and description when available, while forms without a stored description are handled safely.

The existing six-page HGN questionnaire flow, permission behavior, survey-completion checks, and HGN Skills Dashboard access logic are preserved.

Fixes # PR #3775 follow-up fixes

Related PRS (if any):

• This frontend PR is related to the Chris_Weekly_Summaries_Report_Refresh_Button #2316 backend PR.
• This is follow-up work for frontend PR shashank-madan HGN Questionnaire Dashboard: Frontend #3775.
• The original related backend implementation was PR Shiwani BadgeDevelopmentTable unit test #1547.
• To test this frontend PR, checkout the related backend PR branch:
  Bosu-HGN-Questionnaire-Followup-Fixes-Backend

Main changes explained:

• Create HGNFormListPage.jsx for displaying the available HGN forms on /hgnform.
• Create HGNFormListPage.module.css for responsive, light-mode, and dark-mode styling.
• Create focused tests for the new HGN form catalog behavior.
• Update routes.jsx so /hgnform displays the form catalog and /hgnform/page1 opens the existing HGN Development Team Questionnaire.
• Update URL.js with the existing generic forms API endpoint used by the catalog.
• Update FollowupQuestions.jsx navigation so the existing questionnaire flow continues to use /hgnform/page1.
• Keep the built-in HGN Development Team Questionnaire available independently of generic Form records stored in MongoDB.
• Display generic forms dynamically using their formName and description.
• Display No description available. when an existing generic form does not contain a description.
• Preserve the existing questionnaire pages, permission checks, and HGN Skills Dashboard behavior.

How to test:

1. Checkout the current frontend branch:
   Bosu-HGN-Questionnaire-Followup-Fixes
2. Checkout the related backend branch:
   Bosu-HGN-Questionnaire-Followup-Fixes-Backend
3. Run npm install if dependencies need to be installed.
4. Start the backend with:
   npm run build
npm start
5. Start the frontend with:
   npm run start:local
6. Clear site data/cache and log in with a valid development account.
7. Navigate to /hgnform.
8. Verify the HGN Development Team Questionnaire appears with its description.
9. Verify generic forms returned by /api/form also appear.
10. Verify generic forms show their stored description when available.
11. Verify forms without a description display No description available. without errors.
12. Click HGN Development Team Questionnaire and verify it opens /hgnform/page1.
13. Continue through questionnaire pages 1–6 and verify the existing questionnaire functionality still works.
14. Verify refresh works correctly on both /hgnform and /hgnform/page1.
15. Resize the browser and verify the form catalog remains responsive.
16. Verify this new feature works in [dark mode](https://docs.google.com/document/d/11OXJfBBedK6vV-XvqWR8A9lOH0BsfnaHx01h1NZZXfI).

Screenshots or videos of changes:

Note:

• Full frontend test suite passed: 290 test files and 1,954 tests.
• Focused HGN form catalog tests passed.
• Focused ESLint checks for the files modified by this PR passed.
• Frontend build passed.
• git diff --check passed.
• The repository-wide local lint command currently reports a pre-existing webpack dependency lint issue in config-overrides.js. That file and its related package files are not modified by this PR.
• No permission, survey-completion, or HGN Skills Dashboard access logic was intentionally changed.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	6987399
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a8a0dc79db6360008932a59
😎 Deploy Preview	https://deploy-preview-5463--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle 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]

Quality Gate passed

Issues
6 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

[iAbhi001]

Code Review & Local Testing Passed 🚀

Thank you for the detailed PR description and instructions. I pulled both this branch and the Bosu-HGN-Questionnaire-Followup-Fixes-Backend branch to test locally.

Here is what I verified:

• Form Catalog View: Navigating to /hgnform successfully displays the new forms catalog instead of directly forcing the questionnaire flow.
• Form Data Display: The built-in HGN Development Team Questionnaire card appears correctly. Generic forms retrieved from /api/form render their formName and description as expected.
• Fallback Behavior: Forms missing descriptions properly render "No description available." without crashing or throwing console errors.
• Navigation & Existing Flow: Clicking the HGN Development Team Questionnaire routes properly to /hgnform/page1. The 6-page flow, permissions, and progress saving remain intact.
• UI & Edge Cases: The catalog handles direct page refreshes gracefully, wraps correctly at mobile breakpoints, and the styling looks good in both light and dark modes.

Build and unit tests passed locally on Apple Silicon (after resolving standard npm optional dependency quirks).

Approved and ready to merge!

[DeepighaJ]

Tested the PR, below are the findings.

Dark mode needs improvement:

There is no navigation to move to next pages in the questionnaire

Im not sure if this is what is expected in /api/form as i see a 400 error in this response

[linlin-husky]

Hi, BosuBose132,

I tested the PR locally using the frontend branch Bosu-HGN-Questionnaire-Followup-Fixes with backend branch Bosu-HGN-Questionnaire-Followup-Fixes-Backend.

---

Verified points:

• Form Catalog: Logged in as Admin, /api/form returns 200 and displays the forms list (Mern Stack Developer, UI/UX Designer, StudentForms1) alongside the HGN Development Team Questionnaire.
• Fallbacks: Forms without stored descriptions correctly display "No description available.".

Area for improvement

1. Questionnaire Flow Stuck in Infinite Loading (/hgnform/page1):
   • Clicking the HGN Development Team Questionnaire card navigates to /hgnform/page1, but the page gets stuck indefinitely on the spinner. Questions and Next / Back navigation buttons never render.
   • Console / Network Cause: The component makes a request to GET /api/userProfile/basicInfo, which fails with a 400 Bad Request (userManagement.js:291). The unhandled rejection prevents the questionnaire form from rendering.