Merge pull request #16938 from CDCgov/experience/16074-Create-Test-Re…

…sult-Page-without-Download-Results

Experience 16074: Create test result page without download results

frontend-react/src/AppRouter.tsx

@@ -7,7 +7,7 @@ import { SenderType } from "./utils/DataDashboardUtils";
 import { lazyRouteMarkdown } from "./utils/LazyRouteMarkdown";
 import { PERMISSIONS } from "./utils/UsefulTypes";
 
-const ReportTestingPage = lazy(() => import("./components/Admin/MessageTesting/MessageTesting"));
+const AdminMessageTestingPage = lazy(() => import("./pages/admin/AdminMessageTestingPage/AdminMessageTestingPage"));
 /* Content Pages */
 const Home = lazy(lazyRouteMarkdown(() => import("./content/home/index.mdx")));
 const About = lazy(lazyRouteMarkdown(() => import("./content/about/index.mdx")));
@@ -440,7 +440,7 @@ export const appRoutes: RouteObject[] = [
                     },
                     {
                         path: "orgreceiversettings/org/:orgname/receiver/:receivername/action/:action/message-testing",
-                        element: <ReportTestingPage />,
+                        element: <AdminMessageTestingPage />,
                     },
                     {
                         path: "orgsendersettings/org/:orgname/sender/:sendername/action/:action",

frontend-react/src/components/Admin/EditReceiverSettings.tsx

@@ -22,6 +22,7 @@ import {
 } from "../../utils/TemporarySettingsAPITypes";
 import { ModalConfirmDialog, ModalConfirmRef } from "../ModalConfirmDialog";
 import { EnumTooltip, ObjectTooltip } from "../tooltips/ObjectTooltip";
+import { USLinkButton } from "../USLink";
 
 const { RS_API_URL } = config;
 
@@ -338,7 +339,17 @@ export function EditReceiverSettingsPage() {
     const { orgname, receivername, action } = useParams<EditReceiverSettingsParams>();
 
     return (
-        <AdminFormWrapper header={<Title preTitle={`Org name: ${orgname}`} title={`Receiver name: ${receivername}`} />}>
+        <AdminFormWrapper
+            header={
+                <div className="display-flex flex-justify flex-align-center">
+                    <Title preTitle={`Org name: ${orgname}`} title={`Receiver name: ${receivername}`} />
+
+                    <USLinkButton href="message-testing" outline>
+                        Test a sample message
+                    </USLinkButton>
+                </div>
+            }
+        >
             <EditReceiverSettingsForm
                 orgname={orgname ?? ""}
                 receivername={receivername ?? ""}

frontend-react/src/components/Admin/MessageTesting/AddCustomTestMessageForm.tsx

@@ -0,0 +1,51 @@
+import { Button, Textarea } from "@trussworks/react-uswds";
+import { type ComponentProps, type FormEventHandler, useCallback, useState } from "react";
+
+export interface AddCustomMessageFormProps extends ComponentProps<"form"> {
+    onCancel: () => void;
+}
+
+export interface AddCustomMessageFormValues {
+    customMessageTestBody: string;
+}
+
+const AddCustomTestMessageFormProps = ({ onCancel, onChange, ...props }: AddCustomMessageFormProps) => {
+    const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
+
+    const handleFormChange = useCallback<FormEventHandler<HTMLFormElement>>(
+        (e) => {
+            setIsSubmitEnabled(e.currentTarget.checkValidity());
+            onChange?.(e);
+        },
+        [onChange],
+    );
+
+    return (
+        <form className="width-full" onChange={handleFormChange} {...props}>
+            <p className="text-bold">Enter custom message</p>
+            <p>Custom messages do not save to the bank after you log out.</p>
+            <Textarea
+                id="custom-message-test-body"
+                name="customMessageTestBody"
+                className="width-full maxw-full margin-bottom-205"
+                required={true}
+            />
+            <div className="width-full text-right">
+                <Button
+                    type="button"
+                    outline
+                    onClick={() => {
+                        onCancel();
+                    }}
+                >
+                    Cancel
+                </Button>
+                <Button type="submit" disabled={!isSubmitEnabled}>
+                    Add
+                </Button>
+            </div>
+        </form>
+    );
+};
+
+export default AddCustomTestMessageFormProps;

frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx

@@ -0,0 +1,66 @@
+import { Accordion, Icon, Tag } from "@trussworks/react-uswds";
+import { RSMessageResult } from "../../../config/endpoints/reports";
+
+export const MessageTestingAccordion = ({
+    accordionTitle,
+    priority,
+    resultData,
+    fieldsToRender,
+}: {
+    accordionTitle: string;
+    priority: "error" | "warning";
+    resultData: RSMessageResult;
+    fieldsToRender: (keyof RSMessageResult)[];
+}) => {
+    const fieldID = accordionTitle.toLowerCase().split(" ").join("-");
+    const existingFields = fieldsToRender.filter((field) => Object.keys(resultData).includes(field));
+    const combinedFieldData = existingFields.flatMap((field) => resultData[field]);
+
+    // Immediately return if there's no warning/error data to display
+    if (combinedFieldData.length === 0) return;
+
+    return (
+        <div key={`${fieldID}-accordion-wrapper`} className="padding-top-4 ">
+            <Accordion
+                key={`${fieldID}-accordion`}
+                items={[
+                    {
+                        className: "bg-gray-5",
+                        title: (
+                            <>
+                                {priority === "error" && <Icon.Error size={3} className="text-top margin-right-1" />}
+
+                                {priority === "warning" && (
+                                    <Icon.Warning size={3} className="text-top margin-right-1" />
+                                )}
+
+                                <span className="font-body-lg">{accordionTitle}</span>
+
+                                {priority === "error" && (
+                                    <Tag className="margin-left-1 bg-secondary-vivid">{combinedFieldData.length}</Tag>
+                                )}
+
+                                {priority === "warning" && (
+                                    <Tag className="margin-left-1 bg-accent-warm">{combinedFieldData.length}</Tag>
+                                )}
+                            </>
+                        ),
+                        content: (
+                            <div className="bg-white font-sans-sm padding-top-2 padding-bottom-2 padding-left-1 padding-right-1">
+                                {combinedFieldData.map((item, index) => (
+                                    <div key={index}>
+                                        <div>{item}</div>
+                                        {index < combinedFieldData.length - 1 && <hr className="rs-hr--half-margin" />}
+                                    </div>
+                                ))}
+                            </div>
+                        ),
+                        expanded: false,
+                        headingLevel: "h3",
+                        id: `${fieldID}-list`,
+                    },
+                ]}
+            />
+        </div>
+    );
+};

frontend-react/src/components/Admin/MessageTesting/CustomMessage.tsx → frontend-react/src/components/Admin/MessageTesting/MessageTestingCustomMessage.tsx

@@ -1,36 +1,37 @@
 import { Button, Textarea } from "@trussworks/react-uswds";
-import { ChangeEvent, Dispatch, SetStateAction, useState } from "react";
-import { RSMessage } from "../../../config/endpoints/settings";
+import { ChangeEvent, useState } from "react";
+import { RSMessage } from "../../../config/endpoints/reports";
 
-export const CustomMessage = ({
+export const MessageTestingCustomMessage = ({
     customMessageNumber,
     currentTestMessages,
     setCustomMessageNumber,
     setCurrentTestMessages,
     setOpenCustomMessage,
+    setSelectedOption,
 }: {
     customMessageNumber: number;
     currentTestMessages: { fileName: string; reportBody: string }[];
     setCustomMessageNumber: (value: number) => void;
-    setCurrentTestMessages: Dispatch<SetStateAction<RSMessage[] | null>>;
+    setCurrentTestMessages: (messages: RSMessage[]) => void;
     setOpenCustomMessage: (value: boolean) => void;
+    setSelectedOption: (message: RSMessage) => void;
 }) => {
     const [text, setText] = useState("");
     const handleTextareaChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
         setText(event.target.value);
     };
     const handleAddCustomMessage = () => {
         const dateCreated = new Date();
-        setCurrentTestMessages([
-            ...currentTestMessages,
-            {
-                dateCreated: dateCreated.toString(),
-                fileName: `Custom message ${customMessageNumber}`,
-                reportBody: text,
-            },
-        ]);
+        const customTestMessage = {
+            dateCreated: dateCreated.toString(),
+            fileName: `Custom message ${customMessageNumber}`,
+            reportBody: text,
+        };
+        setCurrentTestMessages([...currentTestMessages, customTestMessage]);
         setCustomMessageNumber(customMessageNumber + 1);
         setText("");
+        setSelectedOption(customTestMessage);
         setOpenCustomMessage(false);
     };