David
f6c6b8c95c
- Updated TeleworkAuthorizationForm, WorkProfileForm, PasswordForm, CredentialForm, UserForm, and various resource-related forms to use FormLabel instead of Label. - Introduced FormLabel component to encapsulate required indicator logic. - Removed optional labels from localization files and adjusted tests accordingly. - Ensured accessibility and consistency across forms by implementing required indicators visually.
82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
import { FormActions, FormBody, FormDialog } from "@repo/rdx-ui/components/form-dialog";
|
|
import { FormLabel } from "@repo/rdx-ui/components/form-label";
|
|
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import { Input } from "@repo/shadcn-ui/components/input";
|
|
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">
|
|
<FormLabel htmlFor={id} required>
|
|
{t("name")}
|
|
</FormLabel>
|
|
<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>
|
|
);
|
|
}
|