infisical/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx

import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

import { createNotification } from "@app/components/notifications";
import { Button, FormControl, Input, Modal, ModalClose, ModalContent } from "@app/components/v2";
import { useWorkspace } from "@app/context";
import { useCreateWsEnvironment } from "@app/hooks/api";
import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
import { slugSchema } from "@app/lib/schemas";

type Props = {
  isOpen: boolean;
  onOpenChange: (isOpen: boolean) => void;
  onComplete?: (environment: WorkspaceEnv) => void;
};

const schema = z.object({
  environmentName: z
    .string()
    .min(1, { message: "Environment Name field must be at least 1 character" }),
  environmentSlug: slugSchema({ max: 64 })
});

export type FormData = z.infer<typeof schema>;

type ContentProps = {
  onComplete: (environment: WorkspaceEnv) => void;
};

const Content = ({ onComplete }: ContentProps) => {
  const { currentWorkspace } = useWorkspace();
  const { mutateAsync, isPending } = useCreateWsEnvironment();
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema)
  });

  const onFormSubmit = async ({ environmentName, environmentSlug }: FormData) => {
    try {
      if (!currentWorkspace?.id) return;

      const env = await mutateAsync({
        workspaceId: currentWorkspace.id,
        name: environmentName,
        slug: environmentSlug
      });

      createNotification({
        text: "Successfully created environment",
        type: "success"
      });

      onComplete(env);
    } catch (err) {
      console.error(err);
      createNotification({
        text: "Failed to create environment",
        type: "error"
      });
    }
  };

  return (
    <form onSubmit={handleSubmit(onFormSubmit)}>
      <Controller
        control={control}
        defaultValue=""
        name="environmentName"
        render={({ field, fieldState: { error } }) => (
          <FormControl label="Environment Name" isError={Boolean(error)} errorText={error?.message}>
            <Input {...field} />
          </FormControl>
        )}
      />
      <Controller
        control={control}
        defaultValue=""
        name="environmentSlug"
        render={({ field, fieldState: { error } }) => (
          <FormControl
            label="Environment Slug"
            helperText="Slugs are shorthands used in cli to access environment"
            isError={Boolean(error)}
            errorText={error?.message}
          >
            <Input {...field} />
          </FormControl>
        )}
      />
      <div className="mt-8 flex items-center">
        <Button
          className="mr-4"
          size="sm"
          type="submit"
          isLoading={isPending}
          isDisabled={isPending}
        >
          Create
        </Button>
        <ModalClose asChild>
          <Button colorSchema="secondary" variant="plain">
            Cancel
          </Button>
        </ModalClose>
      </div>
    </form>
  );
};

export const AddEnvironmentModal = ({ onComplete, ...props }: Props) => {
  return (
    <Modal {...props}>
      <ModalContent title="Create a new environment">
        <Content
          onComplete={(env) => {
            if (onComplete) onComplete(env);
            props.onOpenChange(false);
          }}
        />
      </ModalContent>
    </Modal>
  );
};