88477 Welcome component: use preferred name from user profile

[nichia]

Are you removing, renaming or moving a folder in this PR?

• [x] No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)
• [ ] Yes, I'm removing, renaming or moving a folder

:warning: TeamSites :warning:

Examples of a TeamSite: https://va.gov/health and https://benefits.va.gov/benefits/. This scenario is also referred to as the "injected" header and footer. You can reach out in the #sitewide-public-websites Slack channel for questions.

Did you change site-wide styles, platform utilities or other infrastructure?

• [x] No
• [ ] Yes, and I used the proxy-rewrite steps to test the injected header scenario

Summary

Use the Preferred name attribute that was recently added to the /v0/user API (sourced from the MPI preferred_name).

This PR:

• adds preferred name to the state
• updates the Welcome component to use preferredName from the /v0/user API
• updates Profile link to use <a> element instead of <va-link /> component and add link click tracking by:
  • Google Analytics navigation with 'nav-linkslist' event,
  • Datadog tracking of data-dd-action-name

Related issue(s)

• https://github.com/department-of-veterans-affairs/va.gov-team/issues/88477

Testing done

• updated unit tests for GA and Datadog tracking

• Local testing:

  • Turn on mhvLandingPagePersonalization feature flag on mhv-landing-page/mock/api/feature-toggles/index.js
  • Run vets-website locally yarn watch --env entry=mhv-landing-page
  • Run mock apis on another terminal yarn mock-api --responses src/applications/mhv-landing-page/mocks/api/index.js
  • Navigate to MHV Landing Page and verify that preferred name is shown correctly
  • Inspect network activity using Chrome devtools to verify that PreferredName attribute is returned on the user API and that personal_information API is not fetched

Screenshots

Screenshots are expected to remain the same:

	Before	After
Mobile
Desktop

What areas of the site does it impact?

• Adds perferredName to the user state
• MHV landing page

Acceptance criteria

Quality Assurance & Testing

• [x] I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• [x] No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
• [x] Linting warnings have been addressed
• [ ] Documentation has been updated (link to documentation *if necessary)
• [x] Screenshot of the developed feature is added
• [ ] Accessibility testing has been performed

Error Handling

• [x] Browser console contains no warnings or errors.
• [x] Events are being sent to the appropriate logging solution
• [x] Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

• [ ] Did you login to a local build and verify all authenticated routes work as expected with a test user

Requested Feedback