prowler/components/providers/AddProviderModal.tsx

"use client";

import { Button, Input } from "@nextui-org/react";
import { useRef, useState } from "react";

import { addProvider } from "@/actions";
import {
  ButtonAddProvider,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  useToast,
} from "@/components";

export const AddProviderModal = () => {
  const [open, setOpen] = useState(false);

  const ref = useRef<HTMLFormElement>(null);
  const { toast } = useToast();

  async function clientAction(formData: FormData) {
    // reset the form
    ref.current?.reset();
    // client-side validation
    const data = await addProvider(formData);
    if (data?.errors) {
      data.errors.forEach((error: { detail: string }) => {
        const errorMessage = `${error.detail}`;
        // show error
        toast({
          variant: "destructive",
          title: "Ups! Something went wrong",
          description: errorMessage,
        });
      });
    } else {
      toast({
        title: "Success!",
        description: "The provider was added successfully.",
      });
    }
  }
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="ghost">Add Cloud Account</Button>
      </DialogTrigger>
      <DialogContent className="flex flex-col sm:max-w-md md:max-w-4xl">
        <DialogHeader className="mb-6 space-y-3">
          <DialogTitle className="text-2xl text-center">
            Add cloud account
          </DialogTitle>
          <DialogDescription className="text-md">
            You must manually deploy a new read-only IAM role for each account
            you want to add. The following links will provide detailed
            instructions how to do this:
          </DialogDescription>
        </DialogHeader>
        <form
          ref={ref}
          action={clientAction}
          onSubmit={() => setOpen(false)}
          className="flex flex-col gap-x-2"
        >
          <Input
            type="text"
            name="provider"
            labelPlacement="outside"
            placeholder="provider"
            className="py-2 px-3 rounded-sm"
          />
          <Input
            type="text"
            name="id"
            label="Provider ID"
            labelPlacement="outside"
            placeholder="provider ID"
            className="py-2 px-3 rounded-sm"
          />
          <Input
            type="text"
            name="alias"
            label="Alias"
            labelPlacement="outside"
            placeholder="alias"
            className="py-2 px-3 rounded-sm"
          />
          <ButtonAddProvider />
        </form>
      </DialogContent>
    </Dialog>
  );
};