OpenFlare/frontend/app/(main)/waf/components/create-rule-dialog.tsx

'use client';

import {useEffect, useState} from 'react';

import {Button} from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {Field, FieldGroup, FieldLabel} from '@/components/ui/field';
import {Input} from '@/components/ui/input';
import {Spinner} from '@/components/ui/spinner';

interface CreateRuleDialogProps {
  open: boolean;
  pending: boolean;
  onOpenChange: (open: boolean) => void;
  onCreate: (name: string) => Promise<void>;
}

export function CreateRuleDialog({
  open,
  pending,
  onOpenChange,
  onCreate,
}: CreateRuleDialogProps) {
  const [name, setName] = useState('');

  useEffect(() => {
    if (!open) setName('');
  }, [open]);

  const trimmedName = name.trim();

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <form
          className="flex flex-col gap-4"
          onSubmit={async (event) => {
            event.preventDefault();
            if (!trimmedName || pending) return;
            await onCreate(trimmedName);
          }}
        >
          <DialogHeader>
            <DialogTitle>新建 WAF 规则</DialogTitle>
            <DialogDescription>
              创建后将进入编排页面，通过处理单元配置规则执行流程。
            </DialogDescription>
          </DialogHeader>
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="waf-rule-name">规则名称</FieldLabel>
              <Input
                id="waf-rule-name"
                value={name}
                onChange={(event) => setName(event.target.value)}
                placeholder="例如：入口防护"
                autoComplete="off"
                autoFocus
              />
            </Field>
          </FieldGroup>
          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              disabled={pending}
              onClick={() => onOpenChange(false)}
            >
              取消
            </Button>
            <Button type="submit" disabled={!trimmedName || pending}>
              {pending ? <Spinner data-icon="inline-start" /> : null}
              创建并编排
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}