wehub-resource-sync
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import { DialogClose } from "@radix-ui/react-dialog";
|
|
import { Form, useNavigation } from "@remix-run/react";
|
|
import { Button } from "~/components/primitives/Buttons";
|
|
import { DialogContent, DialogHeader } from "~/components/primitives/Dialog";
|
|
import { FormButtons } from "~/components/primitives/FormButtons";
|
|
import { Input } from "~/components/primitives/Input";
|
|
import { Label } from "~/components/primitives/Label";
|
|
import { Paragraph } from "~/components/primitives/Paragraph";
|
|
|
|
type CloseSessionDialogProps = {
|
|
sessionParam: string;
|
|
environmentId: string;
|
|
redirectPath: string;
|
|
};
|
|
|
|
export function CloseSessionDialog({
|
|
sessionParam,
|
|
environmentId,
|
|
redirectPath,
|
|
}: CloseSessionDialogProps) {
|
|
const navigation = useNavigation();
|
|
|
|
const formAction = `/resources/sessions/${encodeURIComponent(sessionParam)}/close`;
|
|
const isLoading = navigation.formAction === formAction;
|
|
|
|
return (
|
|
<DialogContent key="close-session">
|
|
<DialogHeader>Close this session?</DialogHeader>
|
|
<div className="flex flex-col gap-3 pt-3">
|
|
<Paragraph>
|
|
Closing a session is permanent. The session will no longer accept new input or trigger new
|
|
runs. Any in-flight run continues until it finishes on its own.
|
|
</Paragraph>
|
|
<Form action={formAction} method="post" className="flex flex-col gap-3">
|
|
<input type="hidden" name="redirectUrl" value={redirectPath} />
|
|
<input type="hidden" name="environmentId" value={environmentId} />
|
|
<div className="flex flex-col gap-1">
|
|
<Label htmlFor="close-session-reason">Reason (optional)</Label>
|
|
<Input
|
|
id="close-session-reason"
|
|
name="reason"
|
|
placeholder="e.g. user signed out, ticket resolved"
|
|
variant="medium"
|
|
spellCheck={false}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<FormButtons
|
|
confirmButton={
|
|
<Button
|
|
type="submit"
|
|
variant="danger/medium"
|
|
disabled={isLoading}
|
|
shortcut={{ modifiers: ["mod"], key: "enter" }}
|
|
>
|
|
{isLoading ? "Closing…" : "Close session"}
|
|
</Button>
|
|
}
|
|
cancelButton={
|
|
<DialogClose asChild>
|
|
<Button variant={"secondary/medium"}>Cancel</Button>
|
|
</DialogClose>
|
|
}
|
|
/>
|
|
</Form>
|
|
</div>
|
|
</DialogContent>
|
|
);
|
|
}
|