LG-11857: add header post office search results

[KeithNava]

🎫 Ticket

Link to the relevant ticket:
LG-11857

🛠 Summary of changes

Added an new prop to the InPersonLocations and FullAddressSearch components to show a heading on the top of the results section of the post office address search display.

📜 Testing Plan

Ensure Heading does not appear by default

• Start the In Person enrollment process
• Navigate to the Post Office Search Page and perform the search
• Notice no change between the layout and design in the post office result page and the current page in production / main branch

Ensure Heading does not appear in the Help Center by default

• Create a symlink for the app/javascript/packages/address-search (https://github.com/18F/identity-idp/tree/main/app/javascript/packages/address-search) package (ex: npm-link or steps below)
• Install the local package in the identity-site repo
• Navigate to the Find a participating Post Office Page and perform the search
• no change between the layout and design in the post office result page and the current page in production / main branch

Optional test, if you want to get wild!

[Optional] Ensure Heading does appear in the test branch of the Help Center

• Checkout the branch keithw/LG-11857-add-header-post-office-search-results from the identity-repo https://github.com/GSA-TTS/identity-site/tree/keithw/LG-11857-add-header-post-office-search-results
• Follow the steps to create the link to the npm package locally below
• Navigate to the Find a participating Post Office Page
• Search for a post office
• Notice the new heading of "Search results for Post Offices near you" at the top of the search results

👀 Screenshots

IDP Post Office Search

Help Center Post Office Search

Steps for testing the package locally

• Install the yalc library
• Navigate to the app/javascript/packages/address-search https://github.com/18F/identity-idp/tree/main/app/javascript/packages/address-search directory
• Locally publish the package with: yalc publish
• Add the package to the local identity-site repo by navigating to the root of the project and running: yalc add @18f/identity-address-search
• Startup the identity-site repo as usual

[jennyverdeyen]

I think you can remove this import since you went with findBy!

[gina-yamada]

You will need to increase the version of address-search in package.json (to publish to npm). The changelog for address-search (see path below) should also be updated.

app/javascript/packages/address-search/CHANGELOG.md

[gina-yamada]

Part of this ticket is to build out the component in identity-sites. It would be great if you were able to get a branch going in parallel for that. We could then wire it up and see it working together to ensure we did not overlook anything. (That does not need need to happen for this to get merged.)

[gina-yamada]

You will need to increase the version of address-search in package.json (to publish to npm). The changelog for address-search (see path below) should also be updated.

app/javascript/packages/address-search/CHANGELOG.md

I see the new addition in changelog. Thank you! I do not see the update in app/javascript/packages/address-search/package.json. You will need to increase the version of address-search so that you can publish it to npm so that it can then be imported in the Help Center.

[gina-yamada]

The version of address-search needs to be increased

[gina-yamada]

@KeithNava What about taking advantage of the beta tag to publish to npm?

[KeithNava]

@KeithNava What about taking advantage of the beta tag to publish to npm?

@gina-yamada sure I could do that, but would that require me to publish twice?

[gina-yamada]

@KeithNava What about taking advantage of the beta tag to publish to npm?

@gina-yamada sure I could do that, but would that require me to publish twice?

Yes but you are technically publishing twice now if you use yalec. npm is an approved tool. I am not so sure about yalec. Also, if you published it just once- all of the engineers who wanted to test your new component inside the help center could install the beta version (with npm) rather than publishing to yalec.

UPDATE: No need to do that for this PR. I thought it might be less work overall. Maybe nice for future work.

[gina-yamada]

@KeithNava Thanks for detailed instructions. I think they were funny too.

✅ address-search package.json updated to reflect new interface and address-search changelog updated
✅ Change is non breaking (arg is optional) so good with a minor increase in package version
✅ Header is optional and FullAddressSearch renders when I did not pass in resultsSectionHeading

✅ Header is optional and FullAddressSearch renders when I passed in a value for resultsSectionHeading

👀 Eileen has a PR opened. You may need to coordinate before merging and publishing so there is no collision.

UPDATE: @KeithNava If you merge after, make sure to pull in the changes- and you will need to change your version number (so update address-serach package.json and changelog).

[gina-yamada]

@KeithNava Eileen's code was published. Reach out if you have questions on versioning or publishing to npm. I can publish for you (if we pair) if you don't get access to npm here soon. I don't want you to be blocked by that.