80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
import { FormActions, FormBody, FormDialog } from "@repo/rdx-ui/components/form-dialog";
|
|
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import { Input } from "@repo/shadcn-ui/components/input";
|
|
import { Label } from "@repo/shadcn-ui/components/label";
|
|
import { useId } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { EntityHelp } from "../../help";
|
|
import { AccessApiError } from "../../shared/api";
|
|
import { useQuickCreateDialogController } from "../controllers";
|
|
import type { QuickCreateDialogProps } from "../types";
|
|
|
|
export function QuickCreateDialog(props: QuickCreateDialogProps) {
|
|
const { target, scope, onCreated } = props;
|
|
const { form, existing, mutation, submit, changeOpen } = useQuickCreateDialogController(props);
|
|
const { t } = useTranslation("access");
|
|
const id = useId();
|
|
|
|
return (
|
|
<FormDialog
|
|
cancelLabel={t("cancel")}
|
|
formActions
|
|
onOpenChange={changeOpen}
|
|
open
|
|
title={t(target.kind === "system" ? "quickAddSystem" : "quickAddEnvironment")}
|
|
>
|
|
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
|
<FormBody>
|
|
{target.kind === "environment" && (
|
|
<p className="text-sm text-muted-foreground">
|
|
{t("quickEnvironmentContext", { name: target.systemName })}
|
|
</p>
|
|
)}
|
|
<div className="space-y-2">
|
|
<Label htmlFor={id}>{t("name")}</Label>
|
|
<Input
|
|
id={id}
|
|
maxLength={100}
|
|
required
|
|
{...form.register("name", { validate: (value) => value.trim().length > 0 })}
|
|
/>
|
|
{form.formState.errors.name && (
|
|
<p className="text-destructive" role="alert">
|
|
{t("invalid")}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{mutation.isError && (
|
|
<p className="text-destructive" role="alert">
|
|
{t(
|
|
`errors.${mutation.error instanceof AccessApiError ? mutation.error.code : "INTERNAL_ERROR"}`
|
|
)}
|
|
</p>
|
|
)}
|
|
{existing && (
|
|
<div className="space-y-2">
|
|
<p>{t("quickExisting")}</p>
|
|
<Button
|
|
disabled={mutation.isPending}
|
|
onClick={() => onCreated(existing.id)}
|
|
type="button"
|
|
variant="outline"
|
|
>
|
|
{t("quickUseExisting")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
<p className="text-sm text-muted-foreground">{t("quickCreateNotice")}</p>
|
|
<EntityHelp kind={target.kind} scope={scope} />
|
|
</FormBody>
|
|
<FormActions>
|
|
<Button disabled={mutation.isPending} type="submit">
|
|
{t(mutation.isPending ? "saving" : "quickSaveSelect")}
|
|
</Button>
|
|
</FormActions>
|
|
</form>
|
|
</FormDialog>
|
|
);
|
|
}
|