Skip to content

Commit

Permalink
Merge pull request #15447 from CDCgov/experience/15317/last-mile-rese…
Browse files Browse the repository at this point in the history 
…nd-bug

title casing + receiver ID fix
  • Loading branch information
@etanb
etanb authored Aug 2, 2024
2 parents e3d236d + 8f4848e commit 4501c1c
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 139 deletions.
46 changes: 12 additions & 34 deletions frontend-react/e2e/spec/all/last-mile-failures-page.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,53 +22,35 @@ test.describe("Last Mile Failure page", () => {
});

test("has correct title", async ({ page }) => {
await expect(page).toHaveTitle(/Last mile failures/);
await expect(page).toHaveTitle(/Last Mile Failures/);
});

test("has footer", async ({ page }) => {
await expect(page.locator("footer")).toBeAttached();
});

test("table has correct headers", async ({ page }) => {
await expect(page.locator(".column-header-text").nth(0)).toHaveText(
/Failed At/,
);
await expect(page.locator(".column-header-text").nth(1)).toHaveText(
/ReportId/,
);
await expect(page.locator(".column-header-text").nth(2)).toHaveText(
/Receiver/,
);
await expect(page.locator(".column-header-text").nth(0)).toHaveText(/Failed At/);
await expect(page.locator(".column-header-text").nth(1)).toHaveText(/ReportId/);
await expect(page.locator(".column-header-text").nth(2)).toHaveText(/Receiver/);
});

test("table column 'Failed At' has expected data", async ({ page }) => {
await expect(
tableRows(page).nth(0).locator("td").nth(0),
).toHaveText("Tue, 2/20/2024, 9:35 PM");
await expect(tableRows(page).nth(0).locator("td").nth(0)).toHaveText("Tue, 2/20/2024, 9:35 PM");
});

test("table column 'ReportId' will open a modal with report details", async ({
page,
}) => {
test("table column 'ReportId' will open a modal with report details", async ({ page }) => {
const reportId = tableRows(page).nth(0).locator("td").nth(1);
await expect(reportId).toContainText(
/e5ce49c0-b230-4364-8230-964273249fa1/,
);
await expect(reportId).toContainText(/e5ce49c0-b230-4364-8230-964273249fa1/);
await reportId.click();

const modal = page.getByTestId("modalWindow").nth(0);
await expect(modal).toContainText(
/Report ID:e5ce49c0-b230-4364-8230-964273249fa1/,
);
await expect(modal).toContainText(/Report ID:e5ce49c0-b230-4364-8230-964273249fa1/);
});

test("table column 'Receiver' will open receiver edit page", async ({
page,
}) => {
test("table column 'Receiver' will open receiver edit page", async ({ page }) => {
const receiver = tableRows(page).nth(0).locator("td").nth(2);
await expect(receiver).toContainText(
/flexion.etor-service-receiver-results/,
);
await expect(receiver).toContainText(/flexion.etor-service-receiver-results/);
await receiver.click();

await expect(page).toHaveURL(
Expand All @@ -86,16 +68,12 @@ test.describe("Last Mile Failure page", () => {
});

test("has correct title", async ({ page }) => {
await expect(page).toHaveTitle(/Last mile failures/);
await expect(page).toHaveTitle(/Last Mile Failures/);
});

test("has alert", async ({ page }) => {
await expect(page.getByTestId("alert")).toBeAttached();
await expect(
page.getByText(
/Our apologies, there was an error loading this content./,
),
).toBeAttached();
await expect(page.getByText(/Our apologies, there was an error loading this content./)).toBeAttached();
});

test("has footer", async ({ page }) => {
Expand Down
128 changes: 29 additions & 99 deletions frontend-react/src/components/Admin/AdminLastMileFailuresTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,12 @@ import {
TextInput,
} from "@trussworks/react-uswds";
import DOMPurify from "dompurify";
import {
PropsWithChildren,
Suspense,
useCallback,
useEffect,
useRef,
useState,
} from "react";
import { PropsWithChildren, Suspense, useCallback, useEffect, useRef, useState } from "react";

import { showToast } from "../../contexts/Toast";
import useCreateResend from "../../hooks/api/UseCreateResend/UseCreateResend";
import useResends, { RSResend } from "../../hooks/api/UseResends/UseResends";
import useSendFailures, {
RSSendFailure,
} from "../../hooks/api/UseSendFailures/UseSendFailures";
import useSendFailures, { RSSendFailure } from "../../hooks/api/UseSendFailures/UseSendFailures";
import Table from "../../shared/Table/Table";
import { filterMatch as resendFilterMatch } from "../../utils/filters/resendFilters";
import { filterMatch as sendFailureFilterMatch } from "../../utils/filters/sendFailuresFilters";
Expand All @@ -42,12 +33,8 @@ interface DataForDialog {
const DRow = (props: PropsWithChildren<{ label: string }>) => {
return (
<Grid row className={"modal-info-row"}>
<Grid className={"modal-info-label text-no-wrap"}>
{props.label}:
</Grid>
<Grid className={"modal-info-value rs-wordbreak-force"}>
{props.children}
</Grid>
<Grid className={"modal-info-label text-no-wrap"}>{props.label}:</Grid>
<Grid className={"modal-info-value rs-wordbreak-force"}>{props.children}</Grid>
</Grid>
);
};
Expand All @@ -62,16 +49,12 @@ const RenderInfoModal = (props: { infoDataJson: string }) => {

return (
<GridContainer className={"rs-admindash-modal-container"}>
<Grid className={"modal-info-title"}>
Info Details: {infoData.actionId}
</Grid>
<Grid className={"modal-info-title"}>Info Details: {infoData.actionId}</Grid>
<DRow label={"Receiving Org"}>{infoData.receiver}</DRow>
<DRow label={"Failed at"}>{formatDate(infoData.failedAt)}</DRow>
<DRow label={"Action ID"}>{infoData.actionId}</DRow>
<DRow label={"Report ID"}>{infoData.reportId}</DRow>
<DRow label={"Report File Receiver"}>
{infoData.reportFileReceiver}
</DRow>
<DRow label={"Report File Receiver"}>{infoData.reportFileReceiver}</DRow>
<DRow label={"File URI"}>
{infoData.bodyUrl}
<br />
Expand All @@ -82,14 +65,10 @@ const RenderInfoModal = (props: { infoDataJson: string }) => {
{/*from existin data so show them all*/}
{retryDataArray.map((retryData) => (
<>
<Grid
className={"modal-info-title modal-info-title-resend"}
>
<Grid className={"modal-info-title modal-info-title-resend"}>
Resend Details: {retryData.actionId}
</Grid>
<DRow label={"Resent at"}>
{formatDate(retryData.createdAt)}
</DRow>
<DRow label={"Resent at"}>{formatDate(retryData.createdAt)}</DRow>
<DRow label={"Resent by"}>{retryData.username}</DRow>
<DRow label={"Result"}>{retryData.actionResult}</DRow>
</>
Expand All @@ -111,8 +90,8 @@ const RenderResendModal = (props: {
<p className={""}>
<b>You are about to trigger a retransmission.</b>
<br />
Copy the information below into a github issue to coordinate
fixing. (This is only until tracking is in place in the server.)
Copy the information below into a github issue to coordinate fixing. (This is only until tracking is in
place in the server.)
</p>
<div
className="rs-editable-compare-base rs-editable-compare-static rs-resend-textarea"
Expand All @@ -131,18 +110,10 @@ const RenderResendModal = (props: {
/>
<ModalFooter>
<ButtonGroup>
<Button
type="button"
outline
onClick={props.closeResendModal}
>
<Button type="button" outline onClick={props.closeResendModal}>
Cancel
</Button>
<Button
type="button"
disabled={props.loading}
onClick={() => props.startResend()}
>
<Button type="button" disabled={props.loading} onClick={() => props.startResend()}>
Trigger Resend
</Button>
</ButtonGroup>
Expand All @@ -168,9 +139,7 @@ const DataLoadRenderTable = ({
handleShowDetailsClick: (jsonRowData: string) => void;
}) => {
const fiterResends = (reportId: string) => {
return lastMileResends.filter((each) =>
resendFilterMatch(each, reportId),
);
return lastMileResends.filter((each) => resendFilterMatch(each, reportId));
};

const rowData = lastMileData
Expand Down Expand Up @@ -203,21 +172,12 @@ const DataLoadRenderTable = ({
className={"font-mono-xs"}
title={"Show Info"}
key={`details_${eachRow.actionId}`}
onClick={() =>
handleShowDetailsClick(
JSON.stringify(dataForDialog, null, 4),
)
}
onClick={() => handleShowDetailsClick(JSON.stringify(dataForDialog, null, 4))}
>
{eachRow.reportId}
{
<Icon.Launch className="text-bottom margin-left-2px" />
}
{<Icon.Launch className="text-bottom margin-left-2px" />}
</Button>
<span
className={"rs-resendmarker"}
title={"Resends attempted."}
>
<span className={"rs-resendmarker"} title={"Resends attempted."}>
{resends.length > 0 && (
<Icon.Warning className="text-middle margin-left-2px text-gold" />
)}
Expand All @@ -240,11 +200,7 @@ const DataLoadRenderTable = ({
</USLink>
<Button
key={`retry_${eachRow.actionId}`}
onClick={() =>
handleRetrySendClick(
JSON.stringify(eachRow, null, 2),
)
}
onClick={() => handleRetrySendClick(JSON.stringify(eachRow, null, 2))}
type="button"
className="padding-1 usa-button--outline"
title="Requeue items for resend"
Expand All @@ -266,17 +222,9 @@ export function AdminLastMileFailuresTable() {
const modalResendId = "sendFailuresModalDetails";
const defaultDaysToShow = 15;
const [daysToShow, setDaysToShow] = useState(defaultDaysToShow);
const { data: lastMileData, refetch: refetchLastMileData } =
useSendFailures({ daysToShow: daysToShow });
const { data: lastMileResends, refetch: refetchLastMileResends } =
useResends({ daysToShow: daysToShow });
const {
mutate: createResend,
isPending,
error,
data,
isSuccess,
} = useCreateResend();
const { data: lastMileData, refetch: refetchLastMileData } = useSendFailures({ daysToShow: daysToShow });
const { data: lastMileResends, refetch: refetchLastMileResends } = useResends({ daysToShow: daysToShow });
const { mutate: createResend, isPending, error, data, isSuccess } = useCreateResend();
const refresh = useCallback(async () => {
await refetchLastMileData();
await refetchLastMileResends();
Expand All @@ -287,8 +235,7 @@ export function AdminLastMileFailuresTable() {

// used to show hide the modal
const modalShowInfoRef = useRef<ModalRef>(null);
const [currentJsonDataForModal, setCurrentJsonDataForModal] =
useState<string>("{}");
const [currentJsonDataForModal, setCurrentJsonDataForModal] = useState<string>("{}");

const handleShowDetailsClick = useCallback(
(jsonRowData: string) => {
Expand All @@ -300,8 +247,7 @@ export function AdminLastMileFailuresTable() {

const modalResendRef = useRef<ModalRef>(null); // used to show/hide modal
// this sets the content of the modal
const [htmlContentForGithubIssue, setHtmlContentForGithubIssue] =
useState("");
const [htmlContentForGithubIssue, setHtmlContentForGithubIssue] = useState("");

const [htmlContentResultText, setHtmlContentResultText] = useState("");

Expand Down Expand Up @@ -348,7 +294,7 @@ ${data.receiver}`;
setLoading(true);
createResend({
reportId: currentReportId,
receiverId: currentReceiver,
receiver: currentReceiver,
});
}, [createResend, currentReceiver, currentReportId]);

Expand Down Expand Up @@ -377,14 +323,11 @@ ${data.receiver}`;

return (
<section>
<h2>Last Mile failures</h2>
<h2>Last Mile Failures</h2>

<form autoComplete="off" className="grid-row margin-0">
<div className="flex-fill margin-1">
<Label
className="font-sans-xs usa-label text-bold"
htmlFor="input_filter"
>
<Label className="font-sans-xs usa-label text-bold" htmlFor="input_filter">
Filter:
</Label>
<TextInput
Expand All @@ -399,10 +342,7 @@ ${data.receiver}`;
Searches FULL information incl error text
</div>
<div className="flex-auto margin-1">
<Label
className="font-sans-xs usa-label text-bold"
htmlFor="days_to_show"
>
<Label className="font-sans-xs usa-label text-bold" htmlFor="days_to_show">
Days to show:
</Label>
<TextInput
Expand All @@ -412,16 +352,11 @@ ${data.receiver}`;
defaultValue={defaultDaysToShow}
autoComplete="off"
aria-autocomplete="none"
onBlur={(evt) =>
setDaysToShow(parseInt(evt.target.value))
}
onBlur={(evt) => setDaysToShow(parseInt(evt.target.value))}
/>
</div>
<div className="flex-auto margin-1 padding-3">
<Label
className="font-sans-xs usa-label text-bold"
htmlFor="days_to_show"
>
<Label className="font-sans-xs usa-label text-bold" htmlFor="days_to_show">
{" "}
</Label>
<Button
Expand Down Expand Up @@ -461,12 +396,7 @@ ${data.receiver}`;
</Modal>

{/* Confirm before sending modal */}
<Modal
isLarge={true}
ref={modalResendRef}
id={modalResendId}
className={"rs-resend-modal"}
>
<Modal isLarge={true} ref={modalResendRef} id={modalResendId} className={"rs-resend-modal"}>
{/*Put into render component for testability*/}
<RenderResendModal
htmlContentForGithubIssue={htmlContentForGithubIssue}
Expand Down
2 changes: 1 addition & 1 deletion frontend-react/src/hooks/api/UseCreateResend/UseCreateResend.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import useSessionContext from "../../../contexts/Session/useSessionContext";
const useCreateResend = () => {
const { authorizedFetch } = useSessionContext();

const fn = (params: { reportId: string; receiverId: string }) => {
const fn = (params: { reportId: string; receiver: string }) => {
return authorizedFetch({
url: `/adm/resend`,
method: "post",
Expand Down
7 changes: 2 additions & 5 deletions frontend-react/src/pages/admin/AdminLastMileFailures.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,8 @@ export function AdminLastMileFailuresPage() {
return (
<GridContainer>
<Helmet>
<title>Last mile failures</title>
<meta
property="og:image"
content="/assets/img/opengraph/reportstream.png"
/>
<title>Last Mile Failures</title>
<meta property="og:image" content="/assets/img/opengraph/reportstream.png" />
<meta
property="og:image:alt"
content='"ReportStream" surrounded by an illustration of lines and boxes connected by colorful dots.'
Expand Down

0 comments on commit 4501c1c

Please sign in to comment.