-
Test run: {dateCreated.toLocaleString("en-US", timeOptions)} UTC
+
+ Test run:{" "}
+ {submittedMessage?.dateCreated
+ ? `${new Date(submittedMessage.dateCreated).toLocaleString("en-US", timeOptions)} UTC`
+ : "N/A"}{" "}
+
@@ -72,19 +76,24 @@ const MessageTestingResult = ({ resultData, submittedMessage, handleGoBack, ...p
if (!arr?.length) return null;
return (
-
+
- {arr.length}
+ {convertCase(f, "camel", "sentence")}
+ {arr.length}
),
- content: arr.join("\n"),
+ content: (
+
+ {arr.join("\n")}
+
+ ),
expanded: false,
headingLevel: "h3",
id: `${f}-list`,
@@ -106,14 +115,19 @@ const MessageTestingResult = ({ resultData, submittedMessage, handleGoBack, ...p
key={`${f}-accordion`}
items={[
{
+ className: "bg-gray-5",
title: (
<>
- {arr.length}
+ {convertCase(f, "camel", "sentence")}
+ {arr.length}
),
- content: arr.join("\n"),
+ content: (
+
+ {arr.join("\n")}
+
+ ),
expanded: false,
headingLevel: "h3",
id: `${f}-list`,
@@ -129,8 +143,13 @@ const MessageTestingResult = ({ resultData, submittedMessage, handleGoBack, ...p
key={`output-submittedMessage-accordion`}
items={[
{
- title: "Output message",
- content: resultData.message,
+ className: "bg-gray-5",
+ title: Output message ,
+ content: (
+
+ {resultData.message}
+
+ ),
expanded: false,
headingLevel: "h3",
id: `output-submittedMessage-list`,
@@ -144,8 +163,13 @@ const MessageTestingResult = ({ resultData, submittedMessage, handleGoBack, ...p
key="test-submittedMessage-accordion"
items={[
{
- title: "Test message",
- content: submittedMessage?.reportBody,
+ className: "bg-gray-5",
+ title: Test message ,
+ content: (
+
+ {submittedMessage?.reportBody}
+
+ ),
expanded: false,
headingLevel: "h3",
id: "test-submittedMessage-list",
diff --git a/frontend-react/src/utils/misc.ts b/frontend-react/src/utils/misc.ts
index 9e1432219b0..ad90f8bb266 100644
--- a/frontend-react/src/utils/misc.ts
+++ b/frontend-react/src/utils/misc.ts
@@ -166,7 +166,48 @@ export const removeHTMLFromString = (input: string, options = {}) => {
return convert(input, options);
};
-export const camelCaseToTitle = (s: string) => {
- const result = s.replace(/([A-Z])/g, " $1");
- return result.charAt(0).toUpperCase() + result.slice(1);
+export const convertCase = (str: string, inputCase: string, outputCase: string) => {
+ let words;
+
+ // break the original string into an array of lowercase words
+ switch (inputCase) {
+ case "camel":
+ case "pascal":
+ words = str
+ .replace(/([A-Z])/g, " $1")
+ .trim()
+ .toLowerCase()
+ .split(/\s+/);
+ break;
+ case "snake":
+ words = str.toLowerCase().split("_");
+ break;
+ case "kebab":
+ words = str.toLowerCase().split("-");
+ break;
+ case "constant":
+ words = str.toLowerCase().split("_");
+ break;
+ default:
+ throw new Error(`Unknown inputCase: "${inputCase}"`);
+ }
+
+ let result;
+ switch (outputCase) {
+ case "sentence":
+ result = words.join(" ");
+ if (result.length > 0) {
+ result = result.charAt(0).toUpperCase() + result.slice(1);
+ }
+ break;
+
+ case "title":
+ result = words.map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+ break;
+
+ default:
+ throw new Error(`Unknown outputCase: "${outputCase}"`);
+ }
+
+ return result;
};
From 8b02bec53fa79aae84d8c109041de412fc343347 Mon Sep 17 00:00:00 2001
From: etanb
Date: Mon, 6 Jan 2025 17:23:59 -0800
Subject: [PATCH 09/19] clear results on back
---
.../admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx b/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
index d9362fa7190..6e83b19ce08 100644
--- a/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
+++ b/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
@@ -116,6 +116,7 @@ const AdminMessageTestingPage = () => {
resultData={testResultData}
submittedMessage={selectedOption}
handleGoBack={() => {
+ setRequestBody(null);
setCurrentMessageTestStep(MessageTestingSteps.StepOne);
}}
/>
From e0bcd4bc87d53cf1203785eaa536d1d222783972 Mon Sep 17 00:00:00 2001
From: etanb
Date: Tue, 7 Jan 2025 14:27:12 -0800
Subject: [PATCH 10/19] typing clean up + navigation button addition
---
.../src/components/Admin/EditReceiverSettings.tsx | 13 ++++++++++++-
.../Admin/MessageTesting/MessageTestingResult.tsx | 12 ++++++------
.../AdminMessageTestingPage.tsx | 4 ++--
3 files changed, 20 insertions(+), 9 deletions(-)
diff --git a/frontend-react/src/components/Admin/EditReceiverSettings.tsx b/frontend-react/src/components/Admin/EditReceiverSettings.tsx
index cbc9e724721..8cd9a1e0cdc 100644
--- a/frontend-react/src/components/Admin/EditReceiverSettings.tsx
+++ b/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();
return (
-
+
+ Test a sample message
+
+
+ }
+ >
void;
}
@@ -26,14 +26,14 @@ const warningFields: (keyof RSMessageResult)[] = [
const MessageTestingResult = ({ resultData, submittedMessage, handleGoBack, ...props }: MessageTestingResultProps) => {
const isPassed =
- resultData.senderTransformPassed &&
- resultData.filtersPassed &&
- resultData.enrichmentSchemaPassed &&
- resultData.receiverTransformPassed;
+ !!resultData.senderTransformErrors.length &&
+ !!resultData.filterErrors.length &&
+ !!resultData.enrichmentSchemaErrors.length &&
+ !!resultData.receiverTransformErrors.length;
const isWarned =
!!resultData.senderTransformWarnings.length &&
!!resultData.enrichmentSchemaWarnings.length &&
- !!resultData.receiverTransformWarnings;
+ !!resultData.receiverTransformWarnings.length;
const alertType: AlertProps["type"] = !isPassed ? "error" : isWarned ? "warning" : "success";
const alertHeading = language[`${alertType}AlertHeading`];
diff --git a/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx b/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
index 6e83b19ce08..6f462746975 100644
--- a/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
+++ b/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
@@ -10,7 +10,7 @@ import Crumbs, { CrumbsProps } from "../../../components/Crumbs";
import Spinner from "../../../components/Spinner";
import { StaticAlert, StaticAlertType } from "../../../components/StaticAlert";
import Title from "../../../components/Title";
-import { RSMessage } from "../../../config/endpoints/reports";
+import { RSMessage, RSMessageResult } from "../../../config/endpoints/reports";
import useTestMessageResult from "../../../hooks/api/messages/UseTestMessageResult/UseTestMessageResult";
import useTestMessages from "../../../hooks/api/messages/UseTestMessages/UseTestMessages";
import { FeatureName } from "../../../utils/FeatureName";
@@ -113,7 +113,7 @@ const AdminMessageTestingPage = () => {
)}
{currentMessageTestStep === MessageTestingSteps.StepTwo && (
{
setRequestBody(null);
From 30f18216671ccad42ccb32e460f5defcba73fd99 Mon Sep 17 00:00:00 2001
From: etanb
Date: Tue, 7 Jan 2025 15:06:50 -0800
Subject: [PATCH 11/19] add refetch button
---
.../MessageTesting/MessageTestingResult.tsx | 20 ++++++++++++++++---
.../UseTestMessageResult.ts | 3 ++-
.../AdminMessageTestingPage.tsx | 3 ++-
3 files changed, 21 insertions(+), 5 deletions(-)
diff --git a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
index 7a02112f9e4..35d6e0738cb 100644
--- a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
+++ b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
@@ -1,4 +1,5 @@
-import { Accordion, Icon, Tag } from "@trussworks/react-uswds";
+import { QueryObserverResult } from "@tanstack/react-query";
+import { Accordion, Button, Icon, Tag } from "@trussworks/react-uswds";
import type { PropsWithChildren } from "react";
import language from "./language.json";
import type { RSMessage, RSMessageResult } from "../../../config/endpoints/reports";
@@ -10,6 +11,7 @@ export interface MessageTestingResultProps extends PropsWithChildren {
submittedMessage: RSMessage | null;
resultData: RSMessageResult;
handleGoBack: () => void;
+ refetch: () => Promise>;
}
const errorFields: (keyof RSMessageResult)[] = [
@@ -24,7 +26,13 @@ const warningFields: (keyof RSMessageResult)[] = [
"receiverTransformWarnings",
];
-const MessageTestingResult = ({ resultData, submittedMessage, handleGoBack, ...props }: MessageTestingResultProps) => {
+const MessageTestingResult = ({
+ resultData,
+ submittedMessage,
+ handleGoBack,
+ refetch,
+ ...props
+}: MessageTestingResultProps) => {
const isPassed =
!!resultData.senderTransformErrors.length &&
!!resultData.filterErrors.length &&
@@ -50,7 +58,13 @@ const MessageTestingResult = ({ resultData, submittedMessage, handleGoBack, ...p
return (
- Test results: {submittedMessage?.fileName}
+
+
Test results: {submittedMessage?.fileName}
+
+ void refetch()}>
+ Rerun test
+
diff --git a/frontend-react/src/hooks/api/messages/UseTestMessageResult/UseTestMessageResult.ts b/frontend-react/src/hooks/api/messages/UseTestMessageResult/UseTestMessageResult.ts
index 85b4cec7b47..861a8c74414 100644
--- a/frontend-react/src/hooks/api/messages/UseTestMessageResult/UseTestMessageResult.ts
+++ b/frontend-react/src/hooks/api/messages/UseTestMessageResult/UseTestMessageResult.ts
@@ -57,7 +57,7 @@ const useTestMessageResult = () => {
// Use 'enabled' to conditionally run the query whenever `requestBody` changes
// and the user is an admin. If requestBody is empty or user isn't admin, no fetch is made.
- const { data, isLoading, status } = useQuery({
+ const { data, isLoading, status, refetch } = useQuery({
queryKey: [testResult.queryKey, activeMembership, receivername, adminSafeOrgName, requestBody],
queryFn: fetchData,
enabled: isAdmin && Boolean(requestBody),
@@ -69,6 +69,7 @@ const useTestMessageResult = () => {
isLoading,
status,
isDisabled: !isAdmin,
+ refetch,
};
};
diff --git a/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx b/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
index 6f462746975..aa401c55572 100644
--- a/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
+++ b/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
@@ -49,7 +49,7 @@ const AdminMessageTestingPage = () => {
// Sets data required for the MessageTestingForm
const { data: messageData, isDisabled } = useTestMessages();
- const { setRequestBody, isLoading, data: testResultData } = useTestMessageResult();
+ const { setRequestBody, isLoading, data: testResultData, refetch } = useTestMessageResult();
const [selectedOption, setSelectedOption] = useState(null);
const [currentTestMessages, setCurrentTestMessages] = useState(messageData);
const handleSubmit = (e: React.FormEvent) => {
@@ -119,6 +119,7 @@ const AdminMessageTestingPage = () => {
setRequestBody(null);
setCurrentMessageTestStep(MessageTestingSteps.StepOne);
}}
+ refetch={refetch}
/>
)}
From 35c072016e148487b13fd02a10b9c24926ff5501 Mon Sep 17 00:00:00 2001
From: etanb
Date: Thu, 9 Jan 2025 10:10:51 -0800
Subject: [PATCH 12/19] remove unneeded isPrimeAdmin check
---
.../messages/UseTestMessages/UseTestMessages.ts | 2 --
.../AdminMessageTestingPage.tsx | 14 +-------------
2 files changed, 1 insertion(+), 15 deletions(-)
diff --git a/frontend-react/src/hooks/api/messages/UseTestMessages/UseTestMessages.ts b/frontend-react/src/hooks/api/messages/UseTestMessages/UseTestMessages.ts
index d91dc1c1b41..54d03e95729 100644
--- a/frontend-react/src/hooks/api/messages/UseTestMessages/UseTestMessages.ts
+++ b/frontend-react/src/hooks/api/messages/UseTestMessages/UseTestMessages.ts
@@ -16,7 +16,6 @@ const { test } = reportsEndpoints;
*
* @returns {object} The hook returns the following:
* - `data` (`RSMessage[] | undefined`): The fetched array of test messages.
- * - `isDisabled` (`boolean`): Indicates whether the feature is disabled for the current user.
* - Other properties from `useSuspenseQuery` (e.g., `isLoading`, `isError`, `error`).
*/
@@ -41,7 +40,6 @@ const useTestMessages = () => {
return {
...useSuspenseQueryResult,
data: data ?? [],
- isDisabled: !isAdmin,
};
};
diff --git a/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx b/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
index aa401c55572..c32c1bb8ec7 100644
--- a/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
+++ b/frontend-react/src/pages/admin/AdminMessageTestingPage/AdminMessageTestingPage.tsx
@@ -8,7 +8,6 @@ import MessageTestingForm from "../../../components/Admin/MessageTesting/Message
import MessageTestingResult from "../../../components/Admin/MessageTesting/MessageTestingResult";
import Crumbs, { CrumbsProps } from "../../../components/Crumbs";
import Spinner from "../../../components/Spinner";
-import { StaticAlert, StaticAlertType } from "../../../components/StaticAlert";
import Title from "../../../components/Title";
import { RSMessage, RSMessageResult } from "../../../config/endpoints/reports";
import useTestMessageResult from "../../../hooks/api/messages/UseTestMessageResult/UseTestMessageResult";
@@ -48,7 +47,7 @@ const AdminMessageTestingPage = () => {
);
// Sets data required for the MessageTestingForm
- const { data: messageData, isDisabled } = useTestMessages();
+ const { data: messageData } = useTestMessages();
const { setRequestBody, isLoading, data: testResultData, refetch } = useTestMessageResult();
const [selectedOption, setSelectedOption] = useState(null);
const [currentTestMessages, setCurrentTestMessages] = useState(messageData);
@@ -58,17 +57,6 @@ const AdminMessageTestingPage = () => {
setCurrentMessageTestStep(MessageTestingSteps.StepTwo);
};
- // If a user is _not_ a PrimeAdmin, block this feature
- if (isDisabled) {
- return (
-
From 74893d5c946171f4b193c52a6674f18ed8d6e53e Mon Sep 17 00:00:00 2001
From: etanb
Date: Fri, 10 Jan 2025 16:30:07 -0800
Subject: [PATCH 13/19] design PR feedback
---
.../MessageTestingCustomMessage.tsx | 17 +++++++++--------
.../Admin/MessageTesting/MessageTestingForm.tsx | 1 +
.../MessageTesting/MessageTestingResult.tsx | 7 +++----
3 files changed, 13 insertions(+), 12 deletions(-)
diff --git a/frontend-react/src/components/Admin/MessageTesting/MessageTestingCustomMessage.tsx b/frontend-react/src/components/Admin/MessageTesting/MessageTestingCustomMessage.tsx
index be61940e8b7..7c739bc12f3 100644
--- a/frontend-react/src/components/Admin/MessageTesting/MessageTestingCustomMessage.tsx
+++ b/frontend-react/src/components/Admin/MessageTesting/MessageTestingCustomMessage.tsx
@@ -8,12 +8,14 @@ export const MessageTestingCustomMessage = ({
setCustomMessageNumber,
setCurrentTestMessages,
setOpenCustomMessage,
+ setSelectedOption,
}: {
customMessageNumber: number;
currentTestMessages: { fileName: string; reportBody: string }[];
setCustomMessageNumber: (value: number) => void;
setCurrentTestMessages: (messages: RSMessage[]) => void;
setOpenCustomMessage: (value: boolean) => void;
+ setSelectedOption: (message: RSMessage) => void;
}) => {
const [text, setText] = useState("");
const handleTextareaChange = (event: ChangeEvent) => {
@@ -21,16 +23,15 @@ export const MessageTestingCustomMessage = ({
};
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);
};
diff --git a/frontend-react/src/components/Admin/MessageTesting/MessageTestingForm.tsx b/frontend-react/src/components/Admin/MessageTesting/MessageTestingForm.tsx
index f4ccfd52ea9..37f34e6e2ab 100644
--- a/frontend-react/src/components/Admin/MessageTesting/MessageTestingForm.tsx
+++ b/frontend-react/src/components/Admin/MessageTesting/MessageTestingForm.tsx
@@ -61,6 +61,7 @@ const MessageTestingForm = ({
setCustomMessageNumber={setCustomMessageNumber}
setCurrentTestMessages={setCurrentTestMessages}
setOpenCustomMessage={setOpenCustomMessage}
+ setSelectedOption={setSelectedOption}
/>
)}
diff --git a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
index 35d6e0738cb..b74577cb5a7 100644
--- a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
+++ b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
@@ -4,7 +4,6 @@ import type { PropsWithChildren } from "react";
import language from "./language.json";
import type { RSMessage, RSMessageResult } from "../../../config/endpoints/reports";
import Alert, { type AlertProps } from "../../../shared/Alert/Alert";
-import { convertCase } from "../../../utils/misc";
import { USLinkButton } from "../../USLink";
export interface MessageTestingResultProps extends PropsWithChildren {
@@ -99,7 +98,7 @@ const MessageTestingResult = ({
title: (
<>
{convertCase(f, "camel", "sentence")}
+ Transform warnings
{arr.length}
),
@@ -133,7 +132,7 @@ const MessageTestingResult = ({
title: (
<>
{convertCase(f, "camel", "sentence")}
+ Filters triggered
{arr.length}
),
@@ -151,7 +150,7 @@ const MessageTestingResult = ({
);
})}
- {resultData.message && (
+ {resultData.message && isPassed && (
Date: Wed, 15 Jan 2025 09:35:37 -0800
Subject: [PATCH 14/19] remove ignore as default orgName param
---
.../UseTestMessageResult/UseTestMessageResult.ts | 13 +++++--------
1 file changed, 5 insertions(+), 8 deletions(-)
diff --git a/frontend-react/src/hooks/api/messages/UseTestMessageResult/UseTestMessageResult.ts b/frontend-react/src/hooks/api/messages/UseTestMessageResult/UseTestMessageResult.ts
index 861a8c74414..ac17a31092c 100644
--- a/frontend-react/src/hooks/api/messages/UseTestMessageResult/UseTestMessageResult.ts
+++ b/frontend-react/src/hooks/api/messages/UseTestMessageResult/UseTestMessageResult.ts
@@ -3,9 +3,7 @@ import { useCallback, useState } from "react";
import { useParams } from "react-router";
import { reportsEndpoints, RSMessageResult } from "../../../../config/endpoints/reports";
import useSessionContext from "../../../../contexts/Session/useSessionContext";
-import useAdminSafeOrganizationName, {
- Organizations,
-} from "../../../UseAdminSafeOrganizationName/UseAdminSafeOrganizationName";
+import { Organizations } from "../../../UseAdminSafeOrganizationName/UseAdminSafeOrganizationName";
const { testResult } = reportsEndpoints;
@@ -23,10 +21,9 @@ const { testResult } = reportsEndpoints;
*/
const useTestMessageResult = () => {
const { activeMembership, authorizedFetch } = useSessionContext();
- const { receivername } = useParams();
+ const { orgname, receivername } = useParams();
const parsedName = activeMembership?.parsedName;
const isAdmin = Boolean(parsedName) && parsedName === Organizations.PRIMEADMINS;
- const adminSafeOrgName = useAdminSafeOrganizationName(parsedName);
const [requestBody, setRequestBody] = useState(null);
@@ -37,7 +34,7 @@ const useTestMessageResult = () => {
{
params: {
receiverName: receivername,
- organizationName: adminSafeOrgName,
+ organizationName: orgname,
},
data: requestBody,
},
@@ -53,12 +50,12 @@ const useTestMessageResult = () => {
return Promise.reject(new Error(String(err)));
}
}
- }, [authorizedFetch, receivername, adminSafeOrgName, requestBody]);
+ }, [authorizedFetch, orgname, receivername, requestBody]);
// Use 'enabled' to conditionally run the query whenever `requestBody` changes
// and the user is an admin. If requestBody is empty or user isn't admin, no fetch is made.
const { data, isLoading, status, refetch } = useQuery({
- queryKey: [testResult.queryKey, activeMembership, receivername, adminSafeOrgName, requestBody],
+ queryKey: [testResult.queryKey, activeMembership, receivername, requestBody],
queryFn: fetchData,
enabled: isAdmin && Boolean(requestBody),
});
From 2e1dc6cdd4bbdd456c5ac852930822c0de21e42a Mon Sep 17 00:00:00 2001
From: etanb
Date: Thu, 16 Jan 2025 10:51:53 -0800
Subject: [PATCH 15/19] categorization feedback
---
.../MessageTestingAccordion.tsx | 68 +++++++++
.../MessageTesting/MessageTestingResult.tsx | 129 +++++++-----------
2 files changed, 115 insertions(+), 82 deletions(-)
create mode 100644 frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx
diff --git a/frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx b/frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx
new file mode 100644
index 00000000000..2196e068e98
--- /dev/null
+++ b/frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx
@@ -0,0 +1,68 @@
+import { Accordion, Icon, Tag } from "@trussworks/react-uswds";
+import { RSMessageResult } from "../../../config/endpoints/reports";
+
+export const MessageTestingAccordion = ({
+ accordionTitle,
+ priority,
+ resultData,
+ fieldsToRender,
+ expandAccordions,
+}: {
+ accordionTitle: string;
+ priority: "error" | "warning";
+ resultData: RSMessageResult;
+ fieldsToRender: (keyof RSMessageResult)[];
+ expandAccordions: boolean;
+}) => {
+ 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 (
+
+
+ {priority === "error" && {accordionTitle}
+
+ {priority === "error" && (
+ {combinedFieldData.length}
+ )}
+
+ {priority === "warning" && (
+ {combinedFieldData.length}
+ )}
+
+ ),
+ content: (
+
+ {combinedFieldData.map((item, index) => (
+
+
{item}
+ {index < combinedFieldData.length - 1 &&
}
+
+ ))}
+
>;
}
-const errorFields: (keyof RSMessageResult)[] = [
+const filterFields: (keyof RSMessageResult)[] = ["filterErrors"];
+
+const transformFields: (keyof RSMessageResult)[] = [
"senderTransformErrors",
"enrichmentSchemaErrors",
"receiverTransformErrors",
- "filterErrors",
];
+
const warningFields: (keyof RSMessageResult)[] = [
"senderTransformWarnings",
"enrichmentSchemaWarnings",
@@ -33,14 +36,14 @@ const MessageTestingResult = ({
...props
}: MessageTestingResultProps) => {
const isPassed =
- !!resultData.senderTransformErrors.length &&
- !!resultData.filterErrors.length &&
- !!resultData.enrichmentSchemaErrors.length &&
- !!resultData.receiverTransformErrors.length;
+ resultData.senderTransformErrors.length === 0 &&
+ resultData.filterErrors.length === 0 &&
+ resultData.enrichmentSchemaErrors.length === 0 &&
+ resultData.receiverTransformErrors.length === 0;
const isWarned =
- !!resultData.senderTransformWarnings.length &&
- !!resultData.enrichmentSchemaWarnings.length &&
- !!resultData.receiverTransformWarnings.length;
+ resultData.senderTransformWarnings.length > 0 &&
+ resultData.enrichmentSchemaWarnings.length > 0 &&
+ resultData.receiverTransformWarnings.length > 0;
const alertType: AlertProps["type"] = !isPassed ? "error" : isWarned ? "warning" : "success";
const alertHeading = language[`${alertType}AlertHeading`];
@@ -54,12 +57,17 @@ const MessageTestingResult = ({
minute: "numeric",
hour12: true,
};
+ const [expandAccordions, setExpandAccordions] = useState(false);
return (
Test results: {submittedMessage?.fileName}
+ setExpandAccordions(true)}>
+ Expand All
+
void refetch()}>
Rerun test
@@ -83,77 +91,34 @@ const MessageTestingResult = ({
- {errorFields.map((f) => {
- const arr = resultData[f];
- if (arr != null && !Array.isArray(arr)) throw new Error("Invalid resultData");
- if (!arr?.length) return null;
-
- return (
-
-
- Transform warnings
- {arr.length}
-
- ),
- content: (
-
- {arr.join("\n")}
-
- ),
- expanded: false,
- headingLevel: "h3",
- id: `${f}-list`,
- },
- ]}
- />
-
-
- Filters triggered
- {arr.length}
-
- ),
- content: (
-
- {arr.join("\n")}
-
- ),
- expanded: false,
- headingLevel: "h3",
- id: `${f}-list`,
- },
- ]}
- />
-
),
- expanded: false,
+ expanded: expandAccordions,
headingLevel: "h3",
id: `output-submittedMessage-list`,
},
@@ -173,7 +138,7 @@ const MessageTestingResult = ({
)}
),
- expanded: false,
+ expanded: expandAccordions,
headingLevel: "h3",
id: "test-submittedMessage-list",
},
From 803655567d5d2645e68229131378a894bf35cb0a Mon Sep 17 00:00:00 2001
From: etanb
Date: Thu, 16 Jan 2025 11:00:27 -0800
Subject: [PATCH 16/19] IA feedback + accordion simplification
---
.../MessageTesting/MessageTestingAccordion.tsx | 6 ++----
.../MessageTesting/MessageTestingResult.tsx | 18 +++++-------------
2 files changed, 7 insertions(+), 17 deletions(-)
diff --git a/frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx b/frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx
index 2196e068e98..8f2fd987cde 100644
--- a/frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx
+++ b/frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx
@@ -6,13 +6,11 @@ export const MessageTestingAccordion = ({
priority,
resultData,
fieldsToRender,
- expandAccordions,
}: {
accordionTitle: string;
priority: "error" | "warning";
resultData: RSMessageResult;
fieldsToRender: (keyof RSMessageResult)[];
- expandAccordions: boolean;
}) => {
const fieldID = accordionTitle.toLowerCase().split(" ").join("-");
const existingFields = fieldsToRender.filter((field) => Object.keys(resultData).includes(field));
@@ -24,7 +22,7 @@ export const MessageTestingAccordion = ({
return (
),
- expanded: expandAccordions,
+ expanded: false,
headingLevel: "h3",
id: `${fieldID}-list`,
},
diff --git a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
index 9474c61f801..ae6ad0a77b8 100644
--- a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
+++ b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
@@ -1,6 +1,6 @@
import { QueryObserverResult } from "@tanstack/react-query";
import { Accordion, Button, Icon } from "@trussworks/react-uswds";
-import { type PropsWithChildren, useState } from "react";
+import { type PropsWithChildren } from "react";
import language from "./language.json";
import { MessageTestingAccordion } from "./MessageTestingAccordion";
import type { RSMessage, RSMessageResult } from "../../../config/endpoints/reports";
@@ -57,17 +57,12 @@ const MessageTestingResult = ({
minute: "numeric",
hour12: true,
};
- const [expandAccordions, setExpandAccordions] = useState(false);
return (
Test results: {submittedMessage?.fileName}
-
setExpandAccordions(true)}>
- Expand All
-
void refetch()}>
Rerun test
@@ -96,7 +91,6 @@ const MessageTestingResult = ({
priority="error"
resultData={resultData}
fieldsToRender={filterFields}
- expandAccordions={expandAccordions}
/>
{resultData.message && isPassed && (
),
- expanded: expandAccordions,
+ expanded: false,
headingLevel: "h3",
id: `output-submittedMessage-list`,
},
@@ -138,7 +130,7 @@ const MessageTestingResult = ({
)}
),
- expanded: expandAccordions,
+ expanded: false,
headingLevel: "h3",
id: "test-submittedMessage-list",
},
From 1611a22a70df5744096e846801c07e85662ab18f Mon Sep 17 00:00:00 2001
From: etanb
Date: Thu, 23 Jan 2025 12:20:27 -0800
Subject: [PATCH 17/19] design updates
---
.../MessageTestingAccordion.tsx | 2 +-
.../MessageTesting/MessageTestingResult.tsx | 6 +-
.../src/shared/HL7Message/HL7Message.tsx | 32 ++++
frontend-react/src/styles/_components.scss | 137 +++++++++---------
frontend-react/src/utils/misc.ts | 12 ++
5 files changed, 120 insertions(+), 69 deletions(-)
create mode 100644 frontend-react/src/shared/HL7Message/HL7Message.tsx
diff --git a/frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx b/frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx
index 8f2fd987cde..89e5d673059 100644
--- a/frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx
+++ b/frontend-react/src/components/Admin/MessageTesting/MessageTestingAccordion.tsx
@@ -50,7 +50,7 @@ export const MessageTestingAccordion = ({
{combinedFieldData.map((item, index) => (
{item}
- {index < combinedFieldData.length - 1 &&
}
+ {index < combinedFieldData.length - 1 &&
}
))}
diff --git a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
index ae6ad0a77b8..fd0ef022530 100644
--- a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
+++ b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
@@ -5,6 +5,8 @@ import language from "./language.json";
import { MessageTestingAccordion } from "./MessageTestingAccordion";
import type { RSMessage, RSMessageResult } from "../../../config/endpoints/reports";
import Alert, { type AlertProps } from "../../../shared/Alert/Alert";
+import HL7Message from "../../../shared/HL7Message/HL7Message";
+import { prettifyJSON } from "../../../utils/misc";
import { USLinkButton } from "../../USLink";
export interface MessageTestingResultProps extends PropsWithChildren {
@@ -117,7 +119,7 @@ const MessageTestingResult = ({
title: Output message ,
content: (
- {resultData.message}
+
),
expanded: false,
@@ -137,7 +139,7 @@ const MessageTestingResult = ({
title: Test message ,
content: (
- {submittedMessage?.reportBody}
+
{prettifyJSON(submittedMessage?.reportBody ?? "")}
+ {lines.map((line, index) => {
+ const delimiterIndex = line.indexOf("|");
+
+ if (delimiterIndex === -1) {
+ return
{line}
;
+ }
+
+ const segmentCode = line.slice(0, delimiterIndex);
+ const message = line.slice(delimiterIndex);
+
+ return (
+
+ {segmentCode}
+ {message}
+
+ );
+ })}
+
Date: Thu, 23 Jan 2025 12:27:45 -0800
Subject: [PATCH 18/19] color update
---
.../components/Admin/MessageTesting/MessageTestingResult.tsx | 2 +-
frontend-react/src/shared/HL7Message/HL7Message.tsx | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
index fd0ef022530..dd516c9a5c2 100644
--- a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
+++ b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
@@ -109,7 +109,7 @@ const MessageTestingResult = ({
fieldsToRender={warningFields}
/>
- {resultData.message && isPassed && (
+ {resultData.message && (
{
return (
- {segmentCode}
+ {segmentCode}
{message}
);
From 36918b19a9fafab66358762ee341691467f9350a Mon Sep 17 00:00:00 2001
From: etanb
Date: Thu, 23 Jan 2025 14:48:10 -0800
Subject: [PATCH 19/19] PR comments
---
.../Admin/MessageTesting/MessageTestingResult.tsx | 2 +-
.../messages/UseTestMessageResult/UseTestMessageResult.ts | 8 ++++----
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
index dd516c9a5c2..fd0ef022530 100644
--- a/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
+++ b/frontend-react/src/components/Admin/MessageTesting/MessageTestingResult.tsx
@@ -109,7 +109,7 @@ const MessageTestingResult = ({
fieldsToRender={warningFields}
/>
- {resultData.message && (
+ {resultData.message && isPassed && (
{
// Use 'enabled' to conditionally run the query whenever `requestBody` changes
// and the user is an admin. If requestBody is empty or user isn't admin, no fetch is made.
- const { data, isLoading, status, refetch } = useQuery({
+ const useQueryResult = useQuery({
queryKey: [testResult.queryKey, activeMembership, receivername, requestBody],
queryFn: fetchData,
enabled: isAdmin && Boolean(requestBody),
});
+ const { data } = useQueryResult;
+
return {
+ ...useQueryResult,
data: data ?? [],
setRequestBody,
- isLoading,
- status,
isDisabled: !isAdmin,
- refetch,
};
};