19386 checklist template #810

randimays · 2024-11-14T16:29:18Z

Description

Adds Resources & Support Checklist template.

Specifics:

Please review the comments within the diffs; they provide context for some of the changes
Consistently applied data-next-template attributes on everything in the templates folder. I saw that this was partly implemented and thought it would be helpful to get it done so we can easily identify components from the browser as we develop
- This also includes removing the data- attributes that pointed specifically to content-build templates to avoid confusion
Removes the unused custom <Link> component
Fixes some Typescript errors from the yarn build
Adjusts Medallia survey code to match the content-build implementation; we won't be able to test this code until it hits staging (known issue that Medallia doesn't work in lower environments than staging)

Design System specifics

Updates the design system library dependencies
Updates some components that had already been added to this repo but were out of date (and needed web components)
- this reduces our ability to have full unit test coverage as you cannot simulate events on web components (this is a known issue in vets-website)
DST made adjustments made to the names of breakpoints to reduce reliance on the Formation library. These changes are in content-build and vets-website now but needed to be made in next-build (see VADS vs. USWDS values here)

Ticket

[NextBuild] Migrate the R&S Checklist content type to NextBuild va.gov-cms#19386

Developer Task

Tasks

Give feedback

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 #accelerated-publishing 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.)
Options

Testing Steps

Validate that the Events / Events Listing templates are not negatively impacted by the upgrade to the latest component-library version
Validated updated generator template for query test files

QA steps

What needs to be checked to prove this works?
What needs to be checked to prove it didn't break any related things?
What variations of circumstances (users, actions, values) need to be checked?

Screenshots

Mobile

Tablet

Desktop

Reviewer

Reviewing a PR

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

Standard Checks

Tasks

Give feedback

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
Options

Merging an Approved Layout

When merging a layout, you must ensure that the content type has been turned on for next-build inside the CMS. This CMS flag must be turned on for editors to preview their work using the next build preview server.

Resource types (layouts) that have not been approved by design should NOT be pushed to production. Ensure that slug.tsx does not include your resource type if it is not approved.

The status of layouts should be kept up to date inside templates.md. This includes QA progress, development progress, etc. A link should be provided for where testing can occur.

Merging a Non-Approved Layout

Your new resource type should not be included inside slug.tsx. Items added here will go into production once merged into the main branch. It is imperative that we do not push anything live that has not been approved.

Ensure that this layout has been added to the templates.md file with the current status of the work.

randimays · 2024-11-14T16:30:03Z

src/templates/common/link/index.test.tsx

@@ -1,38 +0,0 @@
-import { render } from '@testing-library/react'


This is not used; all instances of are imported directly from 'next/link'

randimays · 2024-11-14T16:30:09Z

src/templates/common/link/index.tsx

@@ -1,44 +0,0 @@
-import React from 'react'


This is not used; all instances of are imported directly from 'next/link'

randimays · 2024-11-14T16:30:28Z

src/lib/utils/medallia.ts

-const vagovstagingsurveys = {
-  '/search': 20,
-  '/contact-us/virtual-agent': 26,
+const SURVEY_NUMBERS = {


The Medallia setup here was quite different from what was in content-build. It was missing the subpath string matching, so I brought over the existing logic and variables here so we don't end up with regressions.

Note: this cannot be tested fully until we get to the staging environment; it's a known limitation with the Medallia survey.

randimays · 2024-11-14T16:30:45Z

src/lib/drupal/query.ts

@@ -135,6 +135,7 @@ export const entityBaseFields = (entity: NodeTypes): PublishedEntity => {
    title: entity.title,
    metatags: entity.metatag,
    breadcrumbs: entity.breadcrumbs,
-    lastUpdated: entity.field_last_saved_by_an_editor || entity.created,
+    lastUpdated:


Slack thread for context: https://dsva.slack.com/archives/C07B86KV4P4/p1729097328269789?thread_ts=1729096713.224239&cid=C07B86KV4P4

content-build was handling this value a little differently; next-build simplifies the implementation of the "Last updated" timestamp but still needs to consider all 3 of these fields.

randimays · 2024-11-14T16:31:19Z

src/data/queries/audienceTopics.ts

@@ -12,6 +11,18 @@ export const params: QueryParams<null> = () => {
  ])
 }

+const formatBeneficiariesData = (beneficiaries) => {


This file was missing logic to handle a single object of beneficiaries rather than an array, so I added a formatter function instead.

src/pages/[[...slug]].tsx

randimays · 2024-11-14T16:31:50Z

src/data/queries/index.ts

-import * as PersonProfile from './personProfile'
-import * as Button from './button'
-import * as AudienceTopics from './audienceTopics'
+import * as Accordion from './accordion'


Added Checklist query files and alphabetized everything else for easier reading

randimays · 2024-11-14T16:32:05Z

src/templates/components/alert/index.tsx

-      {paragraphs?.map((paragraph) => (
-        <Paragraph key={paragraph.id} {...paragraph} />
+      {paragraphs?.map((paragraph, index) => (
+        <Paragraph key={index} {...paragraph} />


This was throwing a type error in the build so I adjusted the key

randimays · 2024-11-14T16:32:16Z

src/templates/components/collapsiblePanel/index.tsx

@@ -41,7 +41,7 @@ export const CollapsiblePanelItem = ({
          <WysiwygField html={wysiwyg} />

          {paragraphs.map((paragraph, index) => {
-            return <Paragraph key={paragraph.id} {...paragraph} />
+            return <Paragraph key={index} {...paragraph} />


This was throwing a type error in the build so I adjusted the key

randimays · 2024-11-14T16:32:34Z

src/templates/common/benefitsHubLinks/benefitsHubLinks.stories.ts

@@ -1,36 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'


Removed all BenefitsHubLink things as it became a common component (RelatedLink(s))

randimays · 2024-11-14T16:32:40Z

src/templates/common/benefitsHubLinks/index.test.tsx

@@ -1,32 +0,0 @@
-import { render, screen } from '@testing-library/react'


Removed all BenefitsHubLink things as it became a common component (RelatedLink(s))

randimays · 2024-11-14T16:32:45Z

src/templates/common/benefitsHubLinks/index.tsx

@@ -1,41 +0,0 @@
-import { recordEvent } from '@/lib/analytics/recordEvent'


Removed all BenefitsHubLink things as it became a common component (RelatedLink(s))

randimays · 2024-11-14T16:33:08Z

src/types/formatted/benefitsHub.ts

@@ -1,13 +0,0 @@
-export type BenefitsHubLink = {


Removed all BenefitsHubLink things as it became a common component (RelatedLink(s))

randimays · 2024-11-14T16:33:40Z

src/templates/components/rateYourExperience/index.test.tsx

    render(<RateYourExperience />)

-    const goodRatingInput = document.querySelector(
-      '#rate-your-experience--good'
+    const good = document.querySelector('#Good')


Note that web components are notoriously impregnable in unit tests, so refactoring to use those has limited our unit testing capability.

randimays · 2024-11-14T22:35:25Z

src/types/formatted/relatedLinks.ts

@@ -0,0 +1,10 @@
+export type RelatedLink = {


This is the shared component that took the place of the BenefitHubLinks and RelatedInformation since they were essentially the same thing.

…R&S pages

va-cms-bot · 2024-11-25T23:16:30Z

Tugboat has finished building the preview for this pull request!

Links:

Link (redis):

https://pr810-errjax2n0sziu1zdzfag6oi8brscf84w.tugboat.vfs.va.gov

Dashboard:

https://tugboat.vfs.va.gov/673625645e7b8c6458889b0e

va-cms-bot temporarily deployed to Tugboat November 14, 2024 16:29 Destroyed

randimays commented Nov 14, 2024

View reviewed changes

src/pages/[[...slug]].tsx Show resolved Hide resolved

randimays commented Nov 14, 2024

View reviewed changes

va-cms-bot temporarily deployed to Tugboat November 14, 2024 16:38 Destroyed

randimays commented Nov 14, 2024

View reviewed changes

va-cms-bot temporarily deployed to Tugboat November 14, 2024 22:46 Destroyed

va-cms-bot temporarily deployed to Tugboat November 15, 2024 15:16 Destroyed

randimays force-pushed the 19386-checklist-template branch from 96c3cc6 to 4f24ef8 Compare November 15, 2024 15:24

va-cms-bot temporarily deployed to Tugboat November 15, 2024 15:24 Destroyed

va-cms-bot temporarily deployed to Tugboat November 15, 2024 15:45 Destroyed

randimays force-pushed the 19386-checklist-template branch from 3f0f09c to 846c4a6 Compare November 21, 2024 22:40

va-cms-bot temporarily deployed to Tugboat November 21, 2024 22:40 Destroyed

va-cms-bot temporarily deployed to Tugboat November 21, 2024 22:45 Destroyed

va-cms-bot temporarily deployed to Tugboat November 21, 2024 22:49 Destroyed

randimays added 4 commits November 25, 2024 16:42

VACMS-19386 Checklist template migration

227eb06

Adding more types and finishing query for checklist

4819198

Adding imports to get the page to load

99de1a6

Removed unused Link custom component; added secondaryButtonGroup for …

d7fa5b0

…R&S pages

randimays added 25 commits November 25, 2024 16:45

Trying to revert dependency updates

8a43d0d

Fixing some typescript issues

78be2fd

More types fixes

5d8a15c

Updating types

7fc4213

Fixing types for contact info

d5bf913

Refactor related information component to be shared

282d44a

Consolidated shared related links component, fix more types

710c500

Consolidated shared related links component, fix more types

53302ef

Fixing more types in the tests

6f2af66

Fixed all the types

3b72a48

Fixing some tests and errors

cf79c64

Reverting API playground

3faaeac

Updating design library dependencies

50d8228

Fixing some tests

928efff

Prettier formatting

fb94a8c

Updating snapshots

5007b3f

Fixing test

590ddd2

Remove next component data attributes

8972f97

Upgrading design system dependencies again

bbc0915

Attempting to fix dependencies and web component issues

ea2e754

Revert unnecessary updates for data-templates etc

42a262e

Updating DS dependencies

43424be

Trying to fix yarn cache

3105db8

Updating dependencies

621f9f1

Updating snapshots

72b188f

randimays force-pushed the 19386-checklist-template branch from f341c2e to 72b188f Compare November 25, 2024 22:49

va-cms-bot temporarily deployed to Tugboat November 25, 2024 22:49 Destroyed

Reverting contact info back to the original

aa50db8

va-cms-bot deployed to Tugboat November 25, 2024 22:55 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

19386 checklist template #810

19386 checklist template #810

randimays commented Nov 14, 2024

Tasks

Tasks

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

randimays Nov 14, 2024

va-cms-bot commented Nov 25, 2024

		@@ -1,38 +0,0 @@
		import { render } from '@testing-library/react'

		@@ -1,36 +0,0 @@
		import { Meta, StoryObj } from '@storybook/react'

		@@ -1,32 +0,0 @@
		import { render, screen } from '@testing-library/react'

		@@ -1,41 +0,0 @@
		import { recordEvent } from '@/lib/analytics/recordEvent'

19386 checklist template #810

Are you sure you want to change the base?

19386 checklist template #810

Conversation

randimays commented Nov 14, 2024

Description

Design System specifics

Ticket

Developer Task

Tasks

Testing Steps

QA steps

Screenshots

Reviewer

Reviewing a PR

Standard Checks

Tasks

Merging an Approved Layout

Merging a Non-Approved Layout

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

va-cms-bot commented Nov 25, 2024