From 209985d0b0f7305e3715926efd777261c95e7936 Mon Sep 17 00:00:00 2001
From: Aaron Couch <aaroncouch@navapbc.com>
Date: Fri, 10 Jan 2025 15:08:07 -0500
Subject: [PATCH] [Issue #3289] content cleanup (#3382)

## Summary
Fixes #3289

### Time to review: __2 mins__

## Changes proposed
Small changes from previous PR:
* `gitHubIssueLink()` function
* bold weight for links
* order of list

---------

Co-authored-by: doug-s-nava <92806979+doug-s-nava@users.noreply.github.com>
---
 .../src/app/[locale]/process/ProcessNext.tsx  | 66 ++++++++-----------
 frontend/src/i18n/messages/en/index.ts        | 10 +--
 .../tests/components/ProcessNext.test.tsx     | 13 +++-
 3 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/frontend/src/app/[locale]/process/ProcessNext.tsx b/frontend/src/app/[locale]/process/ProcessNext.tsx
index d24a09ea5..2adc5f5a0 100644
--- a/frontend/src/app/[locale]/process/ProcessNext.tsx
+++ b/frontend/src/app/[locale]/process/ProcessNext.tsx
@@ -2,7 +2,7 @@ import { ExternalRoutes } from "src/constants/routes";
 
 import { useMessages, useTranslations } from "next-intl";
 import Link from "next/link";
-import React from "react";
+import React, { ReactNode } from "react";
 import {
   Grid,
   GridContainer,
@@ -14,6 +14,30 @@ import {
 
 import { USWDSIcon } from "src/components/USWDSIcon";
 
+const GithubIssueLink = ({
+  issueNumber,
+  chunks,
+}: {
+  issueNumber: number;
+  chunks: ReactNode;
+}) => (
+  <Link
+    target="_blank"
+    className="usa-link--external text-bold"
+    href={`${ExternalRoutes.GITHUB_REPO}/issues/${issueNumber}`}
+  >
+    {chunks}
+  </Link>
+);
+
+export const gitHubLinkForIssue = (issueNumber: number) => {
+  const PartialIssueLink = (chunks: ReactNode) => (
+    <GithubIssueLink issueNumber={issueNumber} chunks={chunks} />
+  );
+  PartialIssueLink.displayName = "GithubIssueLink";
+  return PartialIssueLink;
+};
+
 const ProcessNext = () => {
   const t = useTranslations("Process.next");
   const messages = useMessages() as unknown as IntlMessages;
@@ -36,42 +60,10 @@ const ProcessNext = () => {
                     {chunks}
                   </p>
                 ),
-                linkGithub3045: (chunks) => (
-                  <Link
-                    target="_blank"
-                    className="usa-link--external"
-                    href={`${ExternalRoutes.GITHUB_REPO}/issues/3045`}
-                  >
-                    {chunks}
-                  </Link>
-                ),
-                linkGithub2875: (chunks) => (
-                  <Link
-                    target="_blank"
-                    className="usa-link--external"
-                    href={`${ExternalRoutes.GITHUB_REPO}/issues/2875`}
-                  >
-                    {chunks}
-                  </Link>
-                ),
-                linkGithub2640: (chunks) => (
-                  <Link
-                    target="_blank"
-                    className="usa-link--external"
-                    href={`${ExternalRoutes.GITHUB_REPO}/issues/2640`}
-                  >
-                    {chunks}
-                  </Link>
-                ),
-                linkGithub3348: (chunks) => (
-                  <Link
-                    target="_blank"
-                    className="usa-link--external"
-                    href={`${ExternalRoutes.GITHUB_REPO}/issues/3348`}
-                  >
-                    {chunks}
-                  </Link>
-                ),
+                linkGithub3045: gitHubLinkForIssue(3045),
+                linkGithub2875: gitHubLinkForIssue(2875),
+                linkGithub2640: gitHubLinkForIssue(2640),
+                linkGithub3348: gitHubLinkForIssue(3348),
               });
               return (
                 <IconListItem
diff --git a/frontend/src/i18n/messages/en/index.ts b/frontend/src/i18n/messages/en/index.ts
index 65b7b2bed..a00ed3188 100644
--- a/frontend/src/i18n/messages/en/index.ts
+++ b/frontend/src/i18n/messages/en/index.ts
@@ -338,17 +338,17 @@ export const messages = {
           content:
             "Enable grant seekers to create an account on Simpler.Grants.gov using the Login.gov single sign-on platform to minimize the steps and friction users experience when signing up.<p><linkGithub2640>Follow #2640 on GitHub</linkGithub2640></p>",
         },
-        {
-          title: "Search & Opportunity Listing improvements",
-          content:
-            "With feedback from the community, we will iterate on improvements that make it easier to adjust search filter criteria, share search results, and save relevant results and opportunities.<p><linkGithub2875>Follow #2875 on GitHub</linkGithub2875></p>",
-        },
         {
           title:
             "Full support for Opportunity Listing attachments (NOFOs/downloads)",
           content:
             "The opportunity listings on Simpler.Grants.gov will include all information and file attachments available on Grants.gov. Design updates will make the Notice of Funding Opportunity (NOFO) easier to access.<p><linkGithub3045>Follow #3045 on GitHub</linkGithub3045></p>",
         },
+        {
+          title: "Search & Opportunity Listing improvements",
+          content:
+            "With feedback from the community, we will iterate on improvements that make it easier to adjust search filter criteria, share search results, and save relevant results and opportunities.<p><linkGithub2875>Follow #2875 on GitHub</linkGithub2875></p>",
+        },
         {
           title: "Simpler application workflow prototype",
           content:
diff --git a/frontend/tests/components/ProcessNext.test.tsx b/frontend/tests/components/ProcessNext.test.tsx
index d62dc1db4..ac4ade868 100644
--- a/frontend/tests/components/ProcessNext.test.tsx
+++ b/frontend/tests/components/ProcessNext.test.tsx
@@ -1,4 +1,6 @@
-import ProcessNext from "src/app/[locale]/process/ProcessNext";
+import ProcessNext, {
+  gitHubLinkForIssue,
+} from "src/app/[locale]/process/ProcessNext";
 import { render, screen } from "tests/react-utils";
 
 describe("Process Content", () => {
@@ -11,4 +13,13 @@ describe("Process Content", () => {
 
     expect(ProcessH1).toBeInTheDocument();
   });
+  it("gitHubLinkForIssue renders with correct link", () => {
+    render(gitHubLinkForIssue(123)("link to important issue"));
+    expect(
+      screen.getByRole("link", { name: /link to important issue/i }),
+    ).toHaveAttribute(
+      "href",
+      "https://github.com/HHS/simpler-grants-gov/issues/123",
+    );
+  });
 });