Locations Listing Sidenav #1085

moanu404 · 2025-06-11T02:22:44Z

Description

Adds the SideNav to the locations listing scaffolded page.

Generated description

This pull request introduces enhancements to the LocationsListing query and layout, focusing on integrating sidebar navigation functionality and improving data formatting. The most significant changes include adding support for a structured sidebar menu, updating the query logic to fetch and format menu data, and modifying the LocationsListing layout to render the sidebar navigation dynamically.

Enhancements to query logic:

Query updates in src/data/queries/locationsListing.ts: Modified the params function to include field_office in the query and updated the data loader to fetch and return menu data alongside the entity. Added error handling for missing entities and introduced the LocationsListingData type to encapsulate both entity and menu data.

Sidebar menu integration:

Layout updates in src/templates/layouts/locationsListing/index.tsx: Added a menu prop to the LocationsListing component and implemented a useEffect hook to expose the menu data globally via window.sideNav. Updated the layout to include a <nav> element for rendering the sidebar navigation. [1] [2]

Data formatting improvements:

Formatting updates in src/data/queries/locationsListing.ts: Enhanced the formatter function to process and format the sidebar menu data using buildSideNavDataFromMenu, ensuring the menu structure is included in the formatted output.

Testing updates:

Snapshot updates in src/data/queries/tests/__snapshots__/locationsListing.test.tsx.snap: Updated snapshots to reflect the new menu and path properties in the formatted output. [1] [2]
Unit tests in src/data/queries/tests/locationsListing.test.tsx: Added tests to validate the inclusion of field_office in query parameters and the proper structure of the formatted sidebar menu. Patched mock data to ensure compatibility with the new menu structure.

Type updates:

Type definition changes in src/types/formatted/locationsListing.ts: Extended the LocationsListing type to include menu and path properties, ensuring type safety for the new data structure.

Ticket

Closes 21283

Developer Task

- [ ] PR submitted against the `main` branch of `next-build`.
- [ ] Link to the issue that this PR addresses (if applicable).
- [ ] Define all changes in your PR and note any changes that could potentially be breaking changes.
- [ ] PR includes steps to test your changes and links to these changes in the Tugboat preview (if applicable).
- [ ] Provided before and after screenshots of your changes (if applicable).
- [ ] Alerted the #next-build Slack channel to request a PR review.
- [ ] You understand that once approved, you are responsible for merging your changes into `main`. (Note that changes to `main` will move automatically into production.)

Testing Steps

Run unit tests
visually ensure sidebar meets the criteria needed
check lovell pages and non lovell

QA steps

outlined in ticket

Screenshots

Is this PR blocked by another PR?

Add the DO NOT MERGE label
Add links to additional PRs here:

Reviewer

Reviewing a PR

This section lists items that need to be checked or updated when making changes to this repository.

Standard Checks

- [ ] Code Quality: Readabilty, Naming Conventions, Consistency, Reusability
- [ ] Test Coverage: 80% coverage
- [ ] Functionality: Change functions as expected with no additional bugs
- [ ] Performance: Code does not introduce performance issues
- [ ] Documentation: Changes are documented in their respective README.md files
- [ ] Security: Packages have been approved in the TRM

brianseek · 2025-06-11T16:59:21Z

src/data/queries/locationsListing.ts

-  return entity
+  if (!entity) {
+    throw new Error(
+      `NodeVamcSystemVaPolice entity not found for id: ${opts.id}`


Should this be NodeLocationsListing?

Good catch! I was copy pasta-ing this from other places and missed updating this!

brianseek · 2025-06-11T17:06:12Z

src/data/queries/tests/__snapshots__/locationsListing.test.tsx.snap

@@ -25,9 +25,28 @@ exports[`LocationsListing formatData outputs formatted data 1`] = `
    },
  ],
  "entityId": 3097,
-  "entityPath": "/lebanon-health-care/locations",
+  "entityPath": "/boston-health-care/",


this should be boston-health-care/locations/ right?

brianseek · 2025-06-11T17:06:47Z

src/data/queries/tests/__snapshots__/locationsListing.test.tsx.snap

@@ -129,6 +148,7 @@ exports[`LocationsListing formatData outputs formatted data 1`] = `
    },
  ],
  "moderationState": "published",
+  "path": "/boston-health-care/",


same here boston-health-care/locations/

brianseek · 2025-06-11T17:07:56Z

src/data/queries/tests/locationsListing.test.tsx

+  // Patch mock to ensure path.alias exists and menu has a valid tree
+  const patchedMock = {
+    ...LocationsListingMock,
+    path: { alias: '/boston-health-care/', pid: 1, langcode: 'en' },


oh maybe this needs to get updated to boston-health-care/locations/ to fix the snapshot thing I was commenting on.

brianseek · 2025-06-11T17:09:33Z

src/templates/layouts/locationsListing/index.tsx

-                <article className="usa-content">
-                  <div>TODO: Lovell switch link</div>
+      <main className="va-l-detail-page va-facility-page">
+        <div className="usa-grid usa-grid-full">


you could do the v3 grid now...but up to you since that is out of scope for adding the Sidenav

yeah the sidenav is always sticky when it comes to migration, I might do that at a later time. I tried a bit but it broke so I am hoping once some other components are flushed out it might be better to wait until then.

laflannery · 2025-06-11T17:17:17Z

@moanu404 this looks good to me but if you decide to change any of the grid stuff let me know and I can re-QA

brianseek

Looks great!

sidenav data

9048251

va-cms-bot temporarily deployed to Tugboat June 11, 2025 02:22 Destroyed

moanu404 marked this pull request as ready for review June 11, 2025 15:32

moanu404 requested review from a team as code owners June 11, 2025 15:32

brianseek reviewed Jun 11, 2025

View reviewed changes

code review comments

4b58956

moanu404 requested a review from brianseek June 11, 2025 18:00

brianseek approved these changes Jun 11, 2025

View reviewed changes

moanu404 merged commit c852d1b into main Jun 11, 2025
5 checks passed

moanu404 deleted the VACMS-21283-locations-listing-sidebar branch June 11, 2025 18:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Locations Listing Sidenav #1085

Locations Listing Sidenav #1085

Uh oh!

moanu404 commented Jun 11, 2025 •

edited

Loading

Uh oh!

brianseek Jun 11, 2025

Uh oh!

moanu404 Jun 11, 2025

Uh oh!

brianseek Jun 11, 2025

Uh oh!

brianseek Jun 11, 2025

Uh oh!

brianseek Jun 11, 2025

Uh oh!

brianseek Jun 11, 2025

Uh oh!

moanu404 Jun 11, 2025

Uh oh!

laflannery commented Jun 11, 2025

Uh oh!

brianseek left a comment

Uh oh!

Uh oh!

Uh oh!

Locations Listing Sidenav #1085

Locations Listing Sidenav #1085

Uh oh!

Conversation

moanu404 commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Generated description

Enhancements to query logic:

Sidebar menu integration:

Data formatting improvements:

Testing updates:

Type updates:

Ticket

Developer Task

Testing Steps

QA steps

Screenshots

Is this PR blocked by another PR?

Reviewer

Reviewing a PR

Standard Checks

Uh oh!

brianseek Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

moanu404 Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

brianseek Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

brianseek Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

brianseek Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

brianseek Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

moanu404 Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

laflannery commented Jun 11, 2025

Uh oh!

brianseek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

moanu404 commented Jun 11, 2025 •

edited

Loading