Changed cert-manager overview tabs to be proper routes

2026-10-18 02:56:57 +00:00 · 2025-04-21 16:16:47 -04:00
parent eba12912f8
commit 6a751e720c
48 changed files with 219 additions and 116 deletions
@@ -0,0 +1,171 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "@tanstack/react-router";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  useCreatePkiCollection,
+  useGetPkiCollectionById,
+  useUpdatePkiCollection
+} from "@app/hooks/api";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  name: z.string().trim().min(1),
+  description: z.string()
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["pkiCollection"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["pkiCollection"]>, state?: boolean) => void;
+};
+
+export const PkiCollectionModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const navigate = useNavigate();
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+
+  const { data: pkiCollection } = useGetPkiCollectionById(
+    (popUp?.pkiCollection?.data as { collectionId: string })?.collectionId || ""
+  );
+
+  const { mutateAsync: createPkiCollection } = useCreatePkiCollection();
+  const { mutateAsync: updatePkiCollection } = useUpdatePkiCollection();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  useEffect(() => {
+    if (pkiCollection) {
+      reset({
+        name: pkiCollection.name,
+        description: pkiCollection.description
+      });
+    } else {
+      reset({
+        name: "",
+        description: ""
+      });
+    }
+  }, [pkiCollection]);
+
+  const onFormSubmit = async ({ name, description }: FormData) => {
+    try {
+      if (!projectId) return;
+
+      if (pkiCollection) {
+        // update
+        await updatePkiCollection({
+          collectionId: pkiCollection.id,
+          name,
+          description,
+          projectId
+        });
+      } else {
+        // create
+        const { id: collectionId } = await createPkiCollection({
+          name,
+          description,
+          projectId
+        });
+
+        navigate({
+          to: `/${ProjectType.CertificateManager}/$projectId/pki-collections/$collectionId` as const,
+          params: {
+            projectId,
+            collectionId
+          }
+        });
+      }
+
+      handlePopUpToggle("pkiCollection", false);
+
+      reset();
+
+      createNotification({
+        text: `Successfully ${pkiCollection ? "updated" : "created"} PKI collection`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${pkiCollection ? "updated" : "created"} PKI collection`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.pkiCollection?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("pkiCollection", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title={`${pkiCollection ? "Edit" : "Create"} Certificate Collection`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="My Certificate Collection" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="description"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Description" isError={Boolean(error)} errorText={error?.message}>
+                <Input
+                  {...field}
+                  placeholder="A collection to house certificates for ACME device"
+                />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {pkiCollection ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("pkiCollection", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};