From 95c1fff7d3a77e9e7af09f86a31e3aab12ae0d98 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Tue, 9 Apr 2024 00:21:57 -0700
Subject: [PATCH] Chore: Remove unused files

---
 .../components/AccessPolicyForm.tsx           | 266 ------------------
 .../components/AccessApprovalPolicyRow.tsx    | 146 ----------
 .../components/AccessPolicyForm.tsx           | 261 -----------------
 3 files changed, 673 deletions(-)
 delete mode 100644 frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/components/AccessPolicyForm.tsx
 delete mode 100644 frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/components/AccessApprovalPolicyRow.tsx
 delete mode 100644 frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/components/AccessPolicyForm.tsx

diff --git a/frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/components/AccessPolicyForm.tsx b/frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/components/AccessPolicyForm.tsx
deleted file mode 100644
index dd51ea53d..000000000
--- a/frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/components/AccessPolicyForm.tsx
+++ /dev/null
@@ -1,266 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  FormControl,
-  Input,
-  Modal,
-  ModalContent,
-  Select,
-  SelectItem
-} from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import {
-  useCreateAccessApprovalPolicy,
-  useUpdateAccessApprovalPolicy
-} from "@app/hooks/api/accessApproval";
-import { TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
-import { TWorkspaceUser } from "@app/hooks/api/users/types";
-
-type Props = {
-  isOpen?: boolean;
-  onToggle: (isOpen: boolean) => void;
-  members?: TWorkspaceUser[];
-  projectSlug: string;
-  editValues?: TAccessApprovalPolicy;
-};
-
-const formSchema = z
-  .object({
-    environment: z.string(),
-    name: z.string().optional(),
-    secretPath: z.string().optional(),
-    approvals: z.number().min(1),
-    approvers: z.string().array().min(1)
-  })
-  .refine((data) => data.approvals <= data.approvers.length, {
-    path: ["approvals"],
-    message: "The number of approvals should be lower than the number of approvers."
-  });
-
-type TFormSchema = z.infer<typeof formSchema>;
-
-export const AccessPolicyForm = ({
-  isOpen,
-  onToggle,
-  members = [],
-  projectSlug,
-  editValues
-}: Props) => {
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { isSubmitting }
-  } = useForm<TFormSchema>({
-    resolver: zodResolver(formSchema),
-    values: editValues ? { ...editValues, environment: editValues.environment.slug } : undefined
-  });
-  const { currentWorkspace } = useWorkspace();
-
-  const environments = currentWorkspace?.environments || [];
-  useEffect(() => {
-    if (!isOpen) reset({});
-  }, [isOpen]);
-
-  const isEditMode = Boolean(editValues);
-
-  const { mutateAsync: createAccessApprovalPolicy } = useCreateAccessApprovalPolicy();
-  const { mutateAsync: updateAccessApprovalPolicy } = useUpdateAccessApprovalPolicy();
-
-  const handleCreatePolicy = async (data: TFormSchema) => {
-    if (!projectSlug) return;
-
-    try {
-      await createAccessApprovalPolicy({
-        ...data,
-        projectSlug
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully created policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to create policy"
-      });
-    }
-  };
-
-  const handleUpdatePolicy = async (data: TFormSchema) => {
-    if (!projectSlug) return;
-    if (!editValues?.id) return;
-
-    try {
-      await updateAccessApprovalPolicy({
-        id: editValues?.id,
-        ...data,
-        projectSlug
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully updated policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "failed  to update policy"
-      });
-    }
-  };
-
-  const handleFormSubmit = async (data: TFormSchema) => {
-    if (isEditMode) {
-      await handleUpdatePolicy(data);
-    } else {
-      await handleCreatePolicy(data);
-    }
-  };
-
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onToggle}>
-      <ModalContent title={isEditMode ? "Edit Access Policy" : "Create Access Policy"}>
-        <form onSubmit={handleSubmit(handleFormSubmit)}>
-          <Controller
-            control={control}
-            name="name"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} value={field.value || ""} />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="environment"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Environment"
-                isRequired
-                className="mt-4"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Select
-                  isDisabled={isEditMode}
-                  value={value}
-                  onValueChange={(val) => onChange(val)}
-                  className="w-full border border-mineshaft-500"
-                >
-                  {environments.map((sourceEnvironment) => (
-                    <SelectItem
-                      value={sourceEnvironment.slug}
-                      key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
-                    >
-                      {sourceEnvironment.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
-
-          <Controller
-            control={control}
-            name="secretPath"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} value={field.value || ""} />
-              </FormControl>
-            )}
-          />
-
-          <Controller
-            control={control}
-            name="approvers"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Approvers Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Input
-                      isReadOnly
-                      value={value?.length ? `${value.length} selected` : "None"}
-                      className="text-left"
-                    />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-                    align="start"
-                  >
-                    <DropdownMenuLabel>
-                      Select members that are allowed to approve changes
-                    </DropdownMenuLabel>
-                    {members.map(({ id, user }) => {
-                      const isChecked = value?.includes(id);
-                      return (
-                        <DropdownMenuItem
-                          onClick={(evt) => {
-                            evt.preventDefault();
-                            onChange(
-                              isChecked ? value?.filter((el) => el !== id) : [...(value || []), id]
-                            );
-                          }}
-                          key={`create-policy-members-${id}`}
-                          iconPos="right"
-                          icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-                        >
-                          {user.email}
-                        </DropdownMenuItem>
-                      );
-                    })}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="approvals"
-            defaultValue={1}
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Approvals Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input
-                  {...field}
-                  type="number"
-                  onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
-                />
-              </FormControl>
-            )}
-          />
-          <div className="mt-8 flex items-center space-x-4">
-            <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
-              Save
-            </Button>
-            <Button onClick={() => onToggle(false)} variant="outline_bg">
-              Close
-            </Button>
-          </div>
-        </form>
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/components/AccessApprovalPolicyRow.tsx b/frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/components/AccessApprovalPolicyRow.tsx
deleted file mode 100644
index 8554e928e..000000000
--- a/frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/components/AccessApprovalPolicyRow.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { useState } from "react";
-import { faCheckCircle, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  IconButton,
-  Input,
-  Td,
-  Tr
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
-import { useUpdateAccessApprovalPolicy } from "@app/hooks/api";
-import { TAccessApprovalPolicy } from "@app/hooks/api/types";
-import { TWorkspaceUser } from "@app/hooks/api/users/types";
-
-type Props = {
-  policy: TAccessApprovalPolicy;
-  members?: TWorkspaceUser[];
-  projectSlug: string;
-  onEdit: () => void;
-  onDelete: () => void;
-};
-
-export const AccessApprovalPolicyRow = ({
-  policy,
-  members = [],
-  projectSlug,
-  onEdit,
-  onDelete
-}: Props) => {
-  const [selectedApprovers, setSelectedApprovers] = useState<string[]>([]);
-  const { mutate: updateAccessApprovalPolicy, isLoading } = useUpdateAccessApprovalPolicy();
-  const { permission } = useProjectPermission();
-
-  return (
-    <Tr>
-      <Td>{policy.name}</Td>
-      <Td>{policy.environment.slug}</Td>
-      <Td>{policy.secretPath || "*"}</Td>
-      <Td>
-        <DropdownMenu
-          onOpenChange={(isOpen) => {
-            if (!isOpen) {
-              updateAccessApprovalPolicy(
-                {
-                  projectSlug,
-                  id: policy.id,
-                  approvers: selectedApprovers
-                },
-                {
-                  onSettled: () => {
-                    setSelectedApprovers([]);
-                  }
-                }
-              );
-            } else {
-              setSelectedApprovers(policy.approvers);
-            }
-          }}
-        >
-          <DropdownMenuTrigger
-            asChild
-            disabled={
-              isLoading ||
-              permission.cannot(ProjectPermissionActions.Edit, ProjectPermissionSub.SecretApproval)
-            }
-          >
-            <Input
-              isReadOnly
-              value={policy.approvers?.length ? `${policy.approvers.length} selected` : "None"}
-              className="text-left"
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-            align="start"
-          >
-            <DropdownMenuLabel>
-              Select members that are allowed to approve changes
-            </DropdownMenuLabel>
-            {members?.map(({ id, user }) => {
-              const isChecked = selectedApprovers.includes(id);
-              return (
-                <DropdownMenuItem
-                  onClick={(evt) => {
-                    evt.preventDefault();
-                    setSelectedApprovers((state) =>
-                      isChecked ? state.filter((el) => el !== id) : [...state, id]
-                    );
-                  }}
-                  key={`create-policy-members-${id}`}
-                  iconPos="right"
-                  icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-                >
-                  {user.email}
-                </DropdownMenuItem>
-              );
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </Td>
-      <Td>{policy.approvals}</Td>
-      <Td>
-        <div className="flex items-center justify-end space-x-4">
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Edit}
-            a={ProjectPermissionSub.SecretApproval}
-            renderTooltip
-            allowedLabel="Edit"
-          >
-            {(isAllowed) => (
-              <IconButton variant="plain" ariaLabel="edit" onClick={onEdit} isDisabled={!isAllowed}>
-                <FontAwesomeIcon icon={faPencil} size="lg" />
-              </IconButton>
-            )}
-          </ProjectPermissionCan>
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Delete}
-            a={ProjectPermissionSub.SecretApproval}
-            renderTooltip
-            allowedLabel="Delete"
-          >
-            {(isAllowed) => (
-              <IconButton
-                variant="plain"
-                colorSchema="danger"
-                size="lg"
-                ariaLabel="edit"
-                onClick={onDelete}
-                isDisabled={!isAllowed}
-              >
-                <FontAwesomeIcon icon={faTrash} />
-              </IconButton>
-            )}
-          </ProjectPermissionCan>
-        </div>
-      </Td>
-    </Tr>
-  );
-};
diff --git a/frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/components/AccessPolicyForm.tsx b/frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/components/AccessPolicyForm.tsx
deleted file mode 100644
index 7e88da100..000000000
--- a/frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/components/AccessPolicyForm.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  FormControl,
-  Input,
-  Modal,
-  ModalContent,
-  Select,
-  SelectItem
-} from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import {
-  useCreateAccessApprovalPolicy,
-  useUpdateAccessApprovalPolicy
-} from "@app/hooks/api/accessApproval";
-import { TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
-import { TWorkspaceUser } from "@app/hooks/api/users/types";
-
-type Props = {
-  isOpen?: boolean;
-  onToggle: (isOpen: boolean) => void;
-  members?: TWorkspaceUser[];
-  projectSlug: string;
-  editValues?: TAccessApprovalPolicy;
-};
-
-const formSchema = z
-  .object({
-    environment: z.string(),
-    name: z.string().optional(),
-    secretPath: z.string().optional(),
-    approvals: z.number().min(1),
-    approvers: z.string().array().min(1)
-  })
-  .refine((data) => data.approvals <= data.approvers.length, {
-    path: ["approvals"],
-    message: "The number of approvals should be lower than the number of approvers."
-  });
-
-type TFormSchema = z.infer<typeof formSchema>;
-
-export const AccessPolicyForm = ({
-  isOpen,
-  onToggle,
-  members = [],
-  projectSlug,
-  editValues
-}: Props) => {
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { isSubmitting }
-  } = useForm<TFormSchema>({
-    resolver: zodResolver(formSchema),
-    values: editValues ? { ...editValues, environment: editValues.environment.slug } : undefined
-  });
-  const { currentWorkspace } = useWorkspace();
-
-  const environments = currentWorkspace?.environments || [];
-  useEffect(() => {
-    if (!isOpen) reset({});
-  }, [isOpen]);
-
-  const isEditMode = Boolean(editValues);
-
-  const { mutateAsync: createAccessApprovalPolicy } = useCreateAccessApprovalPolicy();
-  const { mutateAsync: updateAccessApprovalPolicy } = useUpdateAccessApprovalPolicy();
-
-  const handleCreatePolicy = async (data: TFormSchema) => {
-    try {
-      await createAccessApprovalPolicy({
-        ...data,
-        projectSlug
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully created policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to create policy"
-      });
-    }
-  };
-
-  const handleUpdatePolicy = async (data: TFormSchema) => {
-    if (!editValues?.id) return;
-    try {
-      await updateAccessApprovalPolicy({
-        id: editValues?.id,
-        ...data,
-        projectSlug
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully updated policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "failed  to update policy"
-      });
-    }
-  };
-
-  const handleFormSubmit = async (data: TFormSchema) => {
-    if (isEditMode) {
-      await handleUpdatePolicy(data);
-    } else {
-      await handleCreatePolicy(data);
-    }
-  };
-
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onToggle}>
-      <ModalContent title={isEditMode ? "Edit Access Policy" : "Create Access Policy"}>
-        <form onSubmit={handleSubmit(handleFormSubmit)}>
-          <Controller
-            control={control}
-            name="name"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} value={field.value || ""} />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="environment"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Environment"
-                isRequired
-                className="mt-4"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Select
-                  value={value}
-                  onValueChange={(val) => onChange(val)}
-                  className="w-full border border-mineshaft-500"
-                >
-                  {environments.map((sourceEnvironment) => (
-                    <SelectItem
-                      value={sourceEnvironment.slug}
-                      key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
-                    >
-                      {sourceEnvironment.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
-
-          <Controller
-            control={control}
-            name="secretPath"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} value={field.value || ""} />
-              </FormControl>
-            )}
-          />
-
-          <Controller
-            control={control}
-            name="approvers"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Approvers Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Input
-                      isReadOnly
-                      value={value?.length ? `${value.length} selected` : "None"}
-                      className="text-left"
-                    />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-                    align="start"
-                  >
-                    <DropdownMenuLabel>
-                      Select members that are allowed to approve changes
-                    </DropdownMenuLabel>
-                    {members.map(({ id, user }) => {
-                      const isChecked = value?.includes(id);
-                      return (
-                        <DropdownMenuItem
-                          onClick={(evt) => {
-                            evt.preventDefault();
-                            onChange(
-                              isChecked ? value?.filter((el) => el !== id) : [...(value || []), id]
-                            );
-                          }}
-                          key={`create-policy-members-${id}`}
-                          iconPos="right"
-                          icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-                        >
-                          {user.email}
-                        </DropdownMenuItem>
-                      );
-                    })}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="approvals"
-            defaultValue={1}
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Approvals Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input
-                  {...field}
-                  type="number"
-                  onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
-                />
-              </FormControl>
-            )}
-          />
-          <div className="mt-8 flex items-center space-x-4">
-            <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
-              Save
-            </Button>
-            <Button onClick={() => onToggle(false)} variant="outline_bg">
-              Close
-            </Button>
-          </div>
-        </form>
-      </ModalContent>
-    </Modal>
-  );
-};