Merge branch 'main' into kai/opensearch-3

HHS · Oct 15, 2024 · 0d69d6d · 0d69d6d
2 parents 08a43e3 + e2d3622
commit 0d69d6d
Show file tree

Hide file tree

Showing 21 changed files with 89 additions and 196 deletions.
diff --git a/.github/workflows/ci-frontend-e2e.yml b/.github/workflows/ci-frontend-e2e.yml
@@ -51,7 +51,10 @@ jobs:
         shell: bash
 
       - name: Run E2E Tests
-        run: npm run test:e2e
+        run: |
+          npm run build
+          cat .env.development >> .env.local
+          npm run test:e2e
 
       - uses: actions/upload-artifact@v4
         if: always()

diff --git a/frontend/src/app/[locale]/page.tsx b/frontend/src/app/[locale]/page.tsx
@@ -1,13 +1,11 @@
 import { Metadata } from "next";
 
-import { useTranslations } from "next-intl";
 import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
 
 import BetaAlert from "src/components/BetaAlert";
 import IndexGoalContent from "src/components/content/IndexGoalContent";
 import ProcessAndResearchContent from "src/components/content/ProcessAndResearchContent";
 import Hero from "src/components/Hero";
-import PageSEO from "src/components/PageSEO";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -20,12 +18,8 @@ export async function generateMetadata() {
 
 export default function Home() {
   unstable_setRequestLocale("en");
-
-  const t = useTranslations("Index");
-
   return (
     <>
-      <PageSEO title={t("page_title")} description={t("meta_description")} />
       <Hero />
       <BetaAlert />
       <IndexGoalContent />

diff --git a/frontend/src/app/[locale]/process/ProcessMilestones.tsx b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
@@ -1,6 +1,6 @@
 import { ExternalRoutes } from "src/constants/routes";
 
-import { useMessages, useTranslations } from "next-intl";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import React from "react";
 import {
@@ -10,17 +10,15 @@ import {
   IconListContent,
   IconListIcon,
   IconListItem,
-  IconListTitle,
 } from "@trussworks/react-uswds";
 
 import ContentLayout from "src/components/ContentLayout";
 import { USWDSIcon } from "src/components/USWDSIcon";
 
-const ProcessMilestones = () => {
-  const t = useTranslations("Process");
+const highLevelRoadmapItems = ["find", "advanced_reporting", "apply"] as const;
 
-  const messages = useMessages() as unknown as IntlMessages;
-  const keys = Object.keys(messages.Process.milestones.icon_list);
+const ProcessMilestones = () => {
+  const t = useTranslations("Process.milestones");
 
   const getIcon = (iconIndex: number) => {
     switch (iconIndex) {
@@ -38,90 +36,97 @@ const ProcessMilestones = () => {
   return (
     <>
       <ContentLayout
-        title={t("milestones.tag")}
+        title={t("tag")}
         data-test-id="process-high-level-content"
         titleSize="m"
         bottomBorder="dark"
         gridGap={6}
       >
-        {keys.map((key, index) => {
-          const title = t(`milestones.icon_list.${key}.title`);
-          const content = t.rich(`milestones.icon_list.${key}.content`, {
-            p: (chunks) => (
-              <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-                {chunks}
-              </p>
-            ),
-            italics: (chunks) => <em>{chunks}</em>,
-          });
+        <IconList className="usa-icon-list--size-lg grid-row">
+          {highLevelRoadmapItems.map((itemKey, index) => {
+            const title = t(`high_level_roadmap_items.${itemKey}.title`);
+            const content = t.rich(
+              `high_level_roadmap_items.${itemKey}.content`,
+              {
+                p: (chunks) => (
+                  <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+                    {chunks}
+                  </p>
+                ),
+                italics: (chunks) => <em>{chunks}</em>,
+              },
+            );
 
-          return (
-            <Grid key={title + "-key"} tabletLg={{ col: 4 }}>
-              <IconList className="usa-icon-list--size-lg">
-                <IconListItem className="margin-top-4">
-                  <IconListIcon>{getIcon(index)}</IconListIcon>
-                  <IconListContent className="tablet-lg:padding-right-3 desktop-lg:padding-right-105">
-                    <IconListTitle className="margin-bottom-2" type="h3">
-                      {title}
-                    </IconListTitle>
-                    <div className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-                      {content}
-                    </div>
-                    {
-                      // Don't show the chevron in the last row item.
-                      index < keys.length - 1 ? (
-                        <USWDSIcon
-                          className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0 margin-right-neg-5"
-                          name="navigate_next"
-                        />
-                      ) : (
-                        ""
-                      )
-                    }
-                  </IconListContent>
-                </IconListItem>
-              </IconList>
-            </Grid>
-          );
-        })}
+            return (
+              <IconListItem
+                key={title + "-key"}
+                className="margin-top-4 tablet-lg:grid-col-4"
+              >
+                <IconListIcon>{getIcon(index)}</IconListIcon>
+                <IconListContent className="tablet:padding-right-7">
+                  <h3
+                    aria-label={`Step ${index + 1}: ${title}`}
+                    className="margin-bottom-2 usa-icon-list__title"
+                  >
+                    {title}
+                  </h3>
+                  <div className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+                    {content}
+                  </div>
+                  {
+                    // Don't show the chevron in the last row item.
+                    index < highLevelRoadmapItems.length - 1 ? (
+                      <USWDSIcon
+                        className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0"
+                        name="navigate_next"
+                      />
+                    ) : (
+                      ""
+                    )
+                  }
+                </IconListContent>
+              </IconListItem>
+            );
+          })}
+        </IconList>
       </ContentLayout>
       <ContentLayout
         title={
           <>
             <small className="display-block font-sans-lg margin-bottom-105">
-              {t("milestones.roadmap_1")}
+              {t("roadmap_1")}
               <USWDSIcon
                 className="usa-icon usa-icon--size-4 text-middle text-base-light"
                 name="navigate_next"
               />
-              {t("milestones.title_1")}
+              {t("title_1")}
             </small>
-            {t("milestones.name_1")}
+            {t("name_1")}
           </>
         }
         data-testid="process-methodology-content"
         titleSize="m"
         bottomBorder="none"
       >
         <Grid tabletLg={{ col: 6 }}>
-          <p className="usa-intro">{t("milestones.paragraph_1")}</p>
+          <p className="usa-intro">{t("paragraph_1")}</p>
         </Grid>
         <Grid tabletLg={{ col: 6 }}>
           <h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
-            {t("milestones.sub_title_1")}
+            {t("sub_title_1")}
           </h3>
           <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-            {t("milestones.sub_paragraph_1")}
+            {t("sub_paragraph_1")}
           </p>
           <h3 className="tablet-lg:font-sans-lg margin-top-4 margin-bottom-2">
-            {t("milestones.sub_title_2")}
+            {t("sub_title_2")}
           </h3>
           <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-            {t("milestones.sub_paragraph_2")}
+            {t("sub_paragraph_2")}
           </p>
           <Link href={ExternalRoutes.MILESTONE_GET_OPPORTUNITIES} passHref>
             <Button className="margin-bottom-4" type="button" size="big">
-              <span className="margin-right-5">{t("milestones.cta_1")}</span>
+              <span className="margin-right-5">{t("cta_1")}</span>
               <USWDSIcon
                 name="launch"
                 className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"
@@ -134,14 +139,14 @@ const ProcessMilestones = () => {
         title={
           <>
             <small className="display-block font-sans-lg margin-bottom-105">
-              {t("milestones.roadmap_2")}
+              {t("roadmap_2")}
               <USWDSIcon
                 className="usa-icon usa-icon--size-4 text-middle text-base-light"
                 name="navigate_next"
               />
-              {t("milestones.title_2")}
+              {t("title_2")}
             </small>
-            {t("milestones.name_2")}
+            {t("name_2")}
           </>
         }
         data-testid="process-methodology-content"
@@ -150,17 +155,17 @@ const ProcessMilestones = () => {
         bottomBorder="none"
       >
         <Grid tabletLg={{ col: 6 }}>
-          <p className="usa-intro">{t("milestones.paragraph_2")}</p>
+          <p className="usa-intro">{t("paragraph_2")}</p>
         </Grid>
         <Grid tabletLg={{ col: 6 }}>
           <h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
-            {t("milestones.sub_title_3")}
+            {t("sub_title_3")}
           </h3>
           <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
           <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
           <Link href={ExternalRoutes.MILESTONE_SEARCH_MVP} passHref>
             <Button className="margin-bottom-4" type="button" size="big">
-              <span className="margin-right-5">{t("milestones.cta_2")}</span>
+              <span className="margin-right-5">{t("cta_2")}</span>
               <USWDSIcon
                 name="launch"
                 className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"

diff --git a/frontend/src/app/[locale]/process/page.tsx b/frontend/src/app/[locale]/process/page.tsx
@@ -4,12 +4,10 @@ import ProcessInvolved from "src/app/[locale]/process/ProcessInvolved";
 import ProcessMilestones from "src/app/[locale]/process/ProcessMilestones";
 import { PROCESS_CRUMBS } from "src/constants/breadcrumbs";
 
-import { useTranslations } from "next-intl";
 import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
-import PageSEO from "src/components/PageSEO";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -22,11 +20,8 @@ export async function generateMetadata() {
 
 export default function Process() {
   unstable_setRequestLocale("en");
-  const t = useTranslations("Process");
-
   return (
     <>
-      <PageSEO title={t("page_title")} description={t("meta_description")} />
       <BetaAlert />
       <Breadcrumbs breadcrumbList={PROCESS_CRUMBS} />
       <ProcessIntro />

diff --git a/frontend/src/app/[locale]/research/page.tsx b/frontend/src/app/[locale]/research/page.tsx
@@ -6,12 +6,10 @@ import ResearchMethodology from "src/app/[locale]/research/ResearchMethodology";
 import ResearchThemes from "src/app/[locale]/research/ResearchThemes";
 import { RESEARCH_CRUMBS } from "src/constants/breadcrumbs";
 
-import { useTranslations } from "next-intl";
 import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
-import PageSEO from "src/components/PageSEO";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -24,12 +22,8 @@ export async function generateMetadata() {
 
 export default function Research() {
   unstable_setRequestLocale("en");
-
-  const t = useTranslations("Research");
-
   return (
     <>
-      <PageSEO title={t("page_title")} description={t("meta_description")} />
       <BetaAlert />
       <Breadcrumbs breadcrumbList={RESEARCH_CRUMBS} />
       <ResearchIntro />

diff --git a/frontend/src/app/[locale]/search/layout.tsx b/frontend/src/app/[locale]/search/layout.tsx
@@ -1,11 +1,9 @@
 import { SEARCH_CRUMBS } from "src/constants/breadcrumbs";
 
-import { useTranslations } from "next-intl";
 import { unstable_setRequestLocale } from "next-intl/server";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
-import PageSEO from "src/components/PageSEO";
 import SearchCallToAction from "src/components/search/SearchCallToAction";
 
 export default function SearchLayout({
@@ -14,10 +12,8 @@ export default function SearchLayout({
   children: React.ReactNode;
 }) {
   unstable_setRequestLocale("en");
-  const t = useTranslations("Search");
   return (
     <>
-      <PageSEO title={t("title")} description={t("meta_description")} />
       <BetaAlert />
       <Breadcrumbs breadcrumbList={SEARCH_CRUMBS} />
       <SearchCallToAction />

diff --git a/frontend/src/app/[locale]/subscribe/confirmation/page.tsx b/frontend/src/app/[locale]/subscribe/confirmation/page.tsx
@@ -8,7 +8,6 @@ import { Grid, GridContainer } from "@trussworks/react-uswds";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
-import PageSEO from "src/components/PageSEO";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -26,7 +25,6 @@ export default function SubscriptionConfirmation() {
 
   return (
     <>
-      <PageSEO title={t("page_title")} description={t("intro")} />
       <BetaAlert />
       <Breadcrumbs breadcrumbList={SUBSCRIBE_CONFIRMATION_CRUMBS} />
 

diff --git a/frontend/src/app/[locale]/subscribe/page.tsx b/frontend/src/app/[locale]/subscribe/page.tsx
@@ -13,7 +13,6 @@ import { Grid, GridContainer } from "@trussworks/react-uswds";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
-import PageSEO from "src/components/PageSEO";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -32,7 +31,6 @@ export default function Subscribe() {
 
   return (
     <>
-      <PageSEO title={t("page_title")} description={t("intro")} />
       <BetaAlert />
       <Breadcrumbs breadcrumbList={SUBSCRIBE_CRUMBS} />
 

diff --git a/frontend/src/app/[locale]/subscribe/unsubscribe/page.tsx b/frontend/src/app/[locale]/subscribe/unsubscribe/page.tsx
@@ -8,7 +8,6 @@ import { Grid, GridContainer } from "@trussworks/react-uswds";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
-import PageSEO from "src/components/PageSEO";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -26,7 +25,6 @@ export default function Unsubscribe() {
 
   return (
     <>
-      <PageSEO title={t("page_title")} description={t("intro")} />
       <BetaAlert />
       <Breadcrumbs breadcrumbList={UNSUBSCRIBE_CRUMBS} />
 

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -4,6 +4,7 @@ import { useFeatureFlags } from "src/hooks/useFeatureFlags";
 import { assetPath } from "src/utils/assetPath";
 
 import { useTranslations } from "next-intl";
+import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
 import {
   GovBanner,
@@ -50,9 +51,9 @@ const Header = ({ logoPath, locale }: Props) => {
   }, [featureFlagsManager, t]);
 
   const navItems = primaryLinksRef.current.map((link) => (
-    <a href={link.href} key={link.href}>
+    <Link href={link.href} key={link.href}>
       {link.i18nKey}
-    </a>
+    </Link>
   ));
   const language = locale && locale.match("/^es/") ? "spanish" : "english";