Skip to content

Commit db7ef5e

Browse files
devopsmattdevopsmatt
authored
Merge branch 'main' into experiment/frontend-docker
2 parents 63ea444 + 130f09b commit db7ef5e

29 files changed

+965
-277
lines changed

‎frontend-react/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"date-fns-tz": "^3.2.0",
2121
"dompurify": "^3.2.3",
2222
"export-to-csv-fix-source-map": "^0.2.1",
23-
"focus-trap-react": "^11.0.2",
23+
"focus-trap-react": "^11.0.3",
2424
"history": "^5.3.0",
2525
"html-to-text": "^9.0.5",
2626
"lodash": "^4.17.21",
@@ -35,7 +35,7 @@
3535
"react-router": "^6.28.0",
3636
"react-router-dom": "^6.28.0",
3737
"react-scroll-sync": "^0.11.2",
38-
"react-toastify": "^11.0.2",
38+
"react-toastify": "^11.0.3",
3939
"rehype-raw": "^7.0.0",
4040
"rehype-slug": "^5.1.0",
4141
"rest-hooks": "^6.1.7",
@@ -161,7 +161,7 @@
161161
"eslint-plugin-jest-dom": "^5.5.0",
162162
"eslint-plugin-jsx-a11y": "^6.10.2",
163163
"eslint-plugin-playwright": "^2.1.0",
164-
"eslint-plugin-react": "^7.37.3",
164+
"eslint-plugin-react": "^7.37.4",
165165
"eslint-plugin-react-hooks": "^5.1.0",
166166
"eslint-plugin-react-refresh": "^0.4.18",
167167
"eslint-plugin-storybook": "^0.11.2",

‎frontend-react/src/AppRouter.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { SenderType } from "./utils/DataDashboardUtils";
77
import { lazyRouteMarkdown } from "./utils/LazyRouteMarkdown";
88
import { PERMISSIONS } from "./utils/UsefulTypes";
99

10-
const ReportTestingPage = lazy(() => import("./components/Admin/MessageTesting/MessageTesting"));
10+
const AdminMessageTestingPage = lazy(() => import("./pages/admin/AdminMessageTestingPage/AdminMessageTestingPage"));
1111
/* Content Pages */
1212
const Home = lazy(lazyRouteMarkdown(() => import("./content/home/index.mdx")));
1313
const About = lazy(lazyRouteMarkdown(() => import("./content/about/index.mdx")));
@@ -440,7 +440,7 @@ export const appRoutes: RouteObject[] = [
440440
},
441441
{
442442
path: "orgreceiversettings/org/:orgname/receiver/:receivername/action/:action/message-testing",
443-
element: <ReportTestingPage />,
443+
element: <AdminMessageTestingPage />,
444444
},
445445
{
446446
path: "orgsendersettings/org/:orgname/sender/:sendername/action/:action",

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

+12-1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
} from "../../utils/TemporarySettingsAPITypes";
2323
import { ModalConfirmDialog, ModalConfirmRef } from "../ModalConfirmDialog";
2424
import { EnumTooltip, ObjectTooltip } from "../tooltips/ObjectTooltip";
25+
import { USLinkButton } from "../USLink";
2526

2627
const { RS_API_URL } = config;
2728

@@ -338,7 +339,17 @@ export function EditReceiverSettingsPage() {
338339
const { orgname, receivername, action } = useParams<EditReceiverSettingsParams>();
339340

340341
return (
341-
<AdminFormWrapper header={<Title preTitle={`Org name: ${orgname}`} title={`Receiver name: ${receivername}`} />}>
342+
<AdminFormWrapper
343+
header={
344+
<div className="display-flex flex-justify flex-align-center">
345+
<Title preTitle={`Org name: ${orgname}`} title={`Receiver name: ${receivername}`} />
346+
347+
<USLinkButton href="message-testing" outline>
348+
Test a sample message
349+
</USLinkButton>
350+
</div>
351+
}
352+
>
342353
<EditReceiverSettingsForm
343354
orgname={orgname ?? ""}
344355
receivername={receivername ?? ""}

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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Button, Textarea } from "@trussworks/react-uswds";
2+
import { type ComponentProps, type FormEventHandler, useCallback, useState } from "react";
3+
4+
export interface AddCustomMessageFormProps extends ComponentProps<"form"> {
5+
onCancel: () => void;
6+
}
7+
8+
export interface AddCustomMessageFormValues {
9+
customMessageTestBody: string;
10+
}
11+
12+
const AddCustomTestMessageFormProps = ({ onCancel, onChange, ...props }: AddCustomMessageFormProps) => {
13+
const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
14+
15+
const handleFormChange = useCallback<FormEventHandler<HTMLFormElement>>(
16+
(e) => {
17+
setIsSubmitEnabled(e.currentTarget.checkValidity());
18+
onChange?.(e);
19+
},
20+
[onChange],
21+
);
22+
23+
return (
24+
<form className="width-full" onChange={handleFormChange} {...props}>
25+
<p className="text-bold">Enter custom message</p>
26+
<p>Custom messages do not save to the bank after you log out.</p>
27+
<Textarea
28+
id="custom-message-test-body"
29+
name="customMessageTestBody"
30+
className="width-full maxw-full margin-bottom-205"
31+
required={true}
32+
/>
33+
<div className="width-full text-right">
34+
<Button
35+
type="button"
36+
outline
37+
onClick={() => {
38+
onCancel();
39+
}}
40+
>
41+
Cancel
42+
</Button>
43+
<Button type="submit" disabled={!isSubmitEnabled}>
44+
Add
45+
</Button>
46+
</div>
47+
</form>
48+
);
49+
};
50+
51+
export default AddCustomTestMessageFormProps;

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

-114
This file was deleted.

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

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Accordion, Icon, Tag } from "@trussworks/react-uswds";
2+
import { RSMessageResult } from "../../../config/endpoints/reports";
3+
4+
export const MessageTestingAccordion = ({
5+
accordionTitle,
6+
priority,
7+
resultData,
8+
fieldsToRender,
9+
}: {
10+
accordionTitle: string;
11+
priority: "error" | "warning";
12+
resultData: RSMessageResult;
13+
fieldsToRender: (keyof RSMessageResult)[];
14+
}) => {
15+
const fieldID = accordionTitle.toLowerCase().split(" ").join("-");
16+
const existingFields = fieldsToRender.filter((field) => Object.keys(resultData).includes(field));
17+
const combinedFieldData = existingFields.flatMap((field) => resultData[field]);
18+
19+
// Immediately return if there's no warning/error data to display
20+
if (combinedFieldData.length === 0) return;
21+
22+
return (
23+
<div key={`${fieldID}-accordion-wrapper`} className="padding-top-4 ">
24+
<Accordion
25+
key={`${fieldID}-accordion`}
26+
items={[
27+
{
28+
className: "bg-gray-5",
29+
title: (
30+
<>
31+
{priority === "error" && <Icon.Error size={3} className="text-top margin-right-1" />}
32+
33+
{priority === "warning" && (
34+
<Icon.Warning size={3} className="text-top margin-right-1" />
35+
)}
36+
37+
<span className="font-body-lg">{accordionTitle}</span>
38+
39+
{priority === "error" && (
40+
<Tag className="margin-left-1 bg-secondary-vivid">{combinedFieldData.length}</Tag>
41+
)}
42+
43+
{priority === "warning" && (
44+
<Tag className="margin-left-1 bg-accent-warm">{combinedFieldData.length}</Tag>
45+
)}
46+
</>
47+
),
48+
content: (
49+
<div className="bg-white font-sans-sm padding-top-2 padding-bottom-2 padding-left-1 padding-right-1">
50+
{combinedFieldData.map((item, index) => (
51+
<div key={index}>
52+
<div>{item}</div>
53+
{index < combinedFieldData.length - 1 && <hr className="rs-hr--half-margin" />}
54+
</div>
55+
))}
56+
</div>
57+
),
58+
expanded: false,
59+
headingLevel: "h3",
60+
id: `${fieldID}-list`,
61+
},
62+
]}
63+
/>
64+
</div>
65+
);
66+
};

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

+13-12
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,37 @@
11
import { Button, Textarea } from "@trussworks/react-uswds";
2-
import { ChangeEvent, Dispatch, SetStateAction, useState } from "react";
3-
import { RSMessage } from "../../../config/endpoints/settings";
2+
import { ChangeEvent, useState } from "react";
3+
import { RSMessage } from "../../../config/endpoints/reports";
44

5-
export const CustomMessage = ({
5+
export const MessageTestingCustomMessage = ({
66
customMessageNumber,
77
currentTestMessages,
88
setCustomMessageNumber,
99
setCurrentTestMessages,
1010
setOpenCustomMessage,
11+
setSelectedOption,
1112
}: {
1213
customMessageNumber: number;
1314
currentTestMessages: { fileName: string; reportBody: string }[];
1415
setCustomMessageNumber: (value: number) => void;
15-
setCurrentTestMessages: Dispatch<SetStateAction<RSMessage[] | null>>;
16+
setCurrentTestMessages: (messages: RSMessage[]) => void;
1617
setOpenCustomMessage: (value: boolean) => void;
18+
setSelectedOption: (message: RSMessage) => void;
1719
}) => {
1820
const [text, setText] = useState("");
1921
const handleTextareaChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
2022
setText(event.target.value);
2123
};
2224
const handleAddCustomMessage = () => {
2325
const dateCreated = new Date();
24-
setCurrentTestMessages([
25-
...currentTestMessages,
26-
{
27-
dateCreated: dateCreated.toString(),
28-
fileName: `Custom message ${customMessageNumber}`,
29-
reportBody: text,
30-
},
31-
]);
26+
const customTestMessage = {
27+
dateCreated: dateCreated.toString(),
28+
fileName: `Custom message ${customMessageNumber}`,
29+
reportBody: text,
30+
};
31+
setCurrentTestMessages([...currentTestMessages, customTestMessage]);
3232
setCustomMessageNumber(customMessageNumber + 1);
3333
setText("");
34+
setSelectedOption(customTestMessage);
3435
setOpenCustomMessage(false);
3536
};
3637

0 commit comments

Comments
 (0)