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/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);
     };
 

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

@@ -0,0 +1,83 @@
+import { Button } from "@trussworks/react-uswds";
+import { useState } from "react";
+import { MessageTestingCustomMessage } from "./MessageTestingCustomMessage";
+import { MessageTestingRadioField } from "./MessageTestingRadioField";
+import type { RSMessage } from "../../../config/endpoints/reports";
+
+export interface RSSubmittedMessage extends Omit<RSMessage, "dateCreated"> {
+    dateCreated: Date;
+}
+
+interface MessageTestingFormProps {
+    currentTestMessages: RSMessage[];
+    setCurrentTestMessages: (messages: RSMessage[]) => void;
+    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    setSelectedOption: (message: RSMessage | null) => void;
+    selectedOption: RSMessage | null;
+}
+
+const MessageTestingForm = ({
+    currentTestMessages,
+    setCurrentTestMessages,
+    handleSubmit,
+    setSelectedOption,
+    selectedOption,
+}: MessageTestingFormProps) => {
+    const [openCustomMessage, setOpenCustomMessage] = useState(false);
+
+    const [customMessageNumber, setCustomMessageNumber] = useState(1);
+
+    const handleSelect = (item: RSMessage) => {
+        setSelectedOption(item);
+    };
+
+    const handleAddCustomMessage = () => {
+        setSelectedOption(null);
+        setOpenCustomMessage(true);
+    };
+
+    return (
+        <>
+            <p className="font-sans-xl text-bold">Test message bank</p>
+            <section className="bg-base-lightest padding-3">
+                {!currentTestMessages.length && <p>No test messages available</p>}
+                {!!currentTestMessages.length && (
+                    <form onSubmit={handleSubmit}>
+                        <fieldset className="usa-fieldset bg-base-lightest padding-3">
+                            {currentTestMessages?.map((item, index) => (
+                                <MessageTestingRadioField
+                                    key={index}
+                                    index={index}
+                                    title={item.fileName}
+                                    body={item.reportBody}
+                                    handleSelect={() => handleSelect(item)}
+                                    selectedOption={selectedOption?.reportBody ? selectedOption.reportBody : null}
+                                />
+                            ))}
+                            {openCustomMessage && (
+                                <MessageTestingCustomMessage
+                                    customMessageNumber={customMessageNumber}
+                                    currentTestMessages={currentTestMessages}
+                                    setCustomMessageNumber={setCustomMessageNumber}
+                                    setCurrentTestMessages={setCurrentTestMessages}
+                                    setOpenCustomMessage={setOpenCustomMessage}
+                                    setSelectedOption={setSelectedOption}
+                                />
+                            )}
+                        </fieldset>
+                        <div className="padding-top-4">
+                            <Button type="button" outline onClick={handleAddCustomMessage}>
+                                Test custom message
+                            </Button>
+                            <Button disabled={!selectedOption} type="submit">
+                                Run test
+                            </Button>
+                        </div>
+                    </form>
+                )}
+            </section>
+        </>
+    );
+};
+
+export default MessageTestingForm;

frontend-react/src/components/Admin/MessageTesting/RadioField.tsx → frontend-react/src/components/Admin/MessageTesting/MessageTestingRadioField.tsx

@@ -1,7 +1,8 @@
 import { Button, Icon, Radio } from "@trussworks/react-uswds";
 import { ChangeEvent } from "react";
+import openAsBlob from "../../../utils/OpenAsBlob/OpenAsBlob";
 
-export const RadioField = ({
+export const MessageTestingRadioField = ({
     title,
     body,
     index,
@@ -14,26 +15,6 @@ export const RadioField = ({
     handleSelect: (event: ChangeEvent<HTMLInputElement>) => void;
     selectedOption: string | null;
 }) => {
-    const openTextInNewTab = () => {
-        let formattedContent = body;
-
-        // Check if the content is JSON and format it
-        try {
-            formattedContent = JSON.stringify(JSON.parse(body), null, 2);
-        } catch {
-            formattedContent = body;
-        }
-
-        const blob = new Blob([formattedContent], { type: "text/plain" });
-
-        const url = URL.createObjectURL(blob);
-
-        window.open(url, "_blank");
-
-        // Revoke the URL to free up memory
-        URL.revokeObjectURL(url);
-    };
-
     return (
         <Radio
             id={`message-${index}`}
@@ -46,7 +27,7 @@ export const RadioField = ({
                 <>
                     {" "}
                     {title}{" "}
-                    <Button type="button" unstyled onClick={openTextInNewTab}>
+                    <Button type="button" unstyled onClick={() => openAsBlob(body)}>
                         View message
                         <Icon.Visibility className="text-tbottom margin-left-05" aria-label="View message" />
                     </Button>