chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,250 @@
|
||||
import { CheckIcon } from "@heroicons/react/20/solid";
|
||||
import {
|
||||
IconAlarmSnooze as IconAlarmSnoozeBase,
|
||||
IconArrowBackUp as IconArrowBackUpBase,
|
||||
IconBugOff as IconBugOffBase,
|
||||
} from "@tabler/icons-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { type ErrorGroupStatus } from "@trigger.dev/database";
|
||||
import { useFetcher } from "@remix-run/react";
|
||||
import { Button } from "~/components/primitives/Buttons";
|
||||
import { useToast } from "~/components/primitives/Toast";
|
||||
import { FormError } from "~/components/primitives/FormError";
|
||||
import { Input } from "~/components/primitives/Input";
|
||||
import { InputGroup } from "~/components/primitives/InputGroup";
|
||||
import { Label } from "~/components/primitives/Label";
|
||||
import { PopoverMenuItem } from "~/components/primitives/Popover";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "~/components/primitives/Dialog";
|
||||
|
||||
const AlarmSnoozeIcon = ({ className }: { className?: string }) => (
|
||||
<IconAlarmSnoozeBase className={className} size={18} />
|
||||
);
|
||||
const ArrowBackUpIcon = ({ className }: { className?: string }) => (
|
||||
<IconArrowBackUpBase className={className} size={18} />
|
||||
);
|
||||
const BugOffIcon = ({ className }: { className?: string }) => (
|
||||
<IconBugOffBase className={className} size={18} />
|
||||
);
|
||||
|
||||
export function statusActionToastMessage(data: Record<string, string>): string {
|
||||
switch (data.action) {
|
||||
case "resolve":
|
||||
return "Error marked as resolved";
|
||||
case "unresolve":
|
||||
return "Error marked as unresolved";
|
||||
case "ignore": {
|
||||
const duration = data.duration ? Number(data.duration) : undefined;
|
||||
if (!duration) return "Error ignored indefinitely";
|
||||
const hours = duration / (60 * 60 * 1000);
|
||||
if (hours < 24) return `Error ignored for ${hours} ${hours === 1 ? "hour" : "hours"}`;
|
||||
const days = hours / 24;
|
||||
return `Error ignored for ${days} ${days === 1 ? "day" : "days"}`;
|
||||
}
|
||||
default:
|
||||
return "Error status updated";
|
||||
}
|
||||
}
|
||||
|
||||
export function ErrorStatusMenuItems({
|
||||
status,
|
||||
taskIdentifier,
|
||||
onAction,
|
||||
onCustomIgnore,
|
||||
}: {
|
||||
status: ErrorGroupStatus;
|
||||
taskIdentifier: string;
|
||||
onAction: (data: Record<string, string>) => void;
|
||||
onCustomIgnore: () => void;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{status === "UNRESOLVED" && (
|
||||
<>
|
||||
<PopoverMenuItem
|
||||
icon={CheckIcon}
|
||||
leadingIconClassName="text-success"
|
||||
title="Resolved"
|
||||
onClick={() => onAction({ taskIdentifier, action: "resolve" })}
|
||||
/>
|
||||
<PopoverMenuItem
|
||||
icon={AlarmSnoozeIcon}
|
||||
leadingIconClassName="text-blue-500"
|
||||
title="Ignored for 1 hour"
|
||||
onClick={() =>
|
||||
onAction({
|
||||
taskIdentifier,
|
||||
action: "ignore",
|
||||
duration: String(60 * 60 * 1000),
|
||||
})
|
||||
}
|
||||
/>
|
||||
<PopoverMenuItem
|
||||
icon={AlarmSnoozeIcon}
|
||||
leadingIconClassName="text-blue-500"
|
||||
title="Ignored for 24 hours"
|
||||
onClick={() =>
|
||||
onAction({
|
||||
taskIdentifier,
|
||||
action: "ignore",
|
||||
duration: String(24 * 60 * 60 * 1000),
|
||||
})
|
||||
}
|
||||
/>
|
||||
<PopoverMenuItem
|
||||
icon={BugOffIcon}
|
||||
leadingIconClassName="text-blue-500"
|
||||
title="Ignored forever"
|
||||
onClick={() => onAction({ taskIdentifier, action: "ignore" })}
|
||||
/>
|
||||
<PopoverMenuItem
|
||||
icon={AlarmSnoozeIcon}
|
||||
leadingIconClassName="text-blue-500"
|
||||
title="Ignored with custom condition…"
|
||||
onClick={onCustomIgnore}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{status === "IGNORED" && (
|
||||
<>
|
||||
<PopoverMenuItem
|
||||
icon={CheckIcon}
|
||||
leadingIconClassName="text-success"
|
||||
title="Resolved"
|
||||
onClick={() => onAction({ taskIdentifier, action: "resolve" })}
|
||||
/>
|
||||
<PopoverMenuItem
|
||||
icon={ArrowBackUpIcon}
|
||||
leadingIconClassName="text-error"
|
||||
title="Unresolved"
|
||||
onClick={() => onAction({ taskIdentifier, action: "unresolve" })}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{status === "RESOLVED" && (
|
||||
<PopoverMenuItem
|
||||
icon={ArrowBackUpIcon}
|
||||
leadingIconClassName="text-error"
|
||||
title="Unresolved"
|
||||
onClick={() => onAction({ taskIdentifier, action: "unresolve" })}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function CustomIgnoreDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
taskIdentifier,
|
||||
formAction,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
taskIdentifier: string;
|
||||
formAction?: string;
|
||||
}) {
|
||||
const fetcher = useFetcher<{ ok?: boolean }>();
|
||||
const isSubmitting = fetcher.state !== "idle";
|
||||
const [conditionError, setConditionError] = useState<string | null>(null);
|
||||
const toast = useToast();
|
||||
const hasHandledSuccess = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (fetcher.state === "idle" && fetcher.data?.ok && !hasHandledSuccess.current) {
|
||||
hasHandledSuccess.current = true;
|
||||
toast.success("Error ignored with custom condition");
|
||||
onOpenChange(false);
|
||||
}
|
||||
}, [fetcher.state, fetcher.data, onOpenChange, toast]);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-1.5">
|
||||
<IconAlarmSnoozeBase className="-ml-1.5 size-6 text-blue-500" />
|
||||
Custom ignore condition
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<fetcher.Form
|
||||
method="post"
|
||||
action={formAction}
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const rate = formData.get("occurrenceRate")?.toString().trim();
|
||||
const total = formData.get("totalOccurrences")?.toString().trim();
|
||||
|
||||
if (!rate && !total) {
|
||||
setConditionError("At least one unignore condition is required");
|
||||
return;
|
||||
}
|
||||
|
||||
setConditionError(null);
|
||||
hasHandledSuccess.current = false;
|
||||
fetcher.submit(e.currentTarget, { method: "post", action: formAction });
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="action" value="ignore" />
|
||||
<input type="hidden" name="taskIdentifier" value={taskIdentifier} />
|
||||
|
||||
<div className="flex flex-col gap-4 py-4">
|
||||
<InputGroup fullWidth>
|
||||
<Label htmlFor="occurrenceRate" variant="small">
|
||||
Unignore when occurrence rate exceeds (per minute)
|
||||
</Label>
|
||||
<Input
|
||||
id="occurrenceRate"
|
||||
name="occurrenceRate"
|
||||
type="number"
|
||||
min={1}
|
||||
placeholder="e.g. 10"
|
||||
onChange={() => conditionError && setConditionError(null)}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup fullWidth>
|
||||
<Label htmlFor="totalOccurrences" variant="small">
|
||||
Unignore when total occurrences exceed
|
||||
</Label>
|
||||
<Input
|
||||
id="totalOccurrences"
|
||||
name="totalOccurrences"
|
||||
type="number"
|
||||
min={1}
|
||||
placeholder="e.g. 100"
|
||||
onChange={() => conditionError && setConditionError(null)}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
{conditionError && <FormError>{conditionError}</FormError>}
|
||||
|
||||
<InputGroup fullWidth>
|
||||
<Label htmlFor="reason" variant="small" required={false}>
|
||||
Reason
|
||||
</Label>
|
||||
<Input id="reason" name="reason" type="text" placeholder="e.g. Known flaky test" />
|
||||
</InputGroup>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="tertiary/medium" type="button" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary/medium" type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Ignoring…" : "Ignore error"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</fetcher.Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user