Merge branch 'main' into revert-3901-revert-3875-ENG-3009-test

frontend/src/components/auth/TeamInviteStep.tsx

@@ -4,7 +4,6 @@ import { useNavigate } from "@tanstack/react-router";
 
 import { useAddUsersToOrg } from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { Button, EmailServiceSetupModal } from "../v2";
@@ -23,7 +22,7 @@ export default function TeamInviteStep(): JSX.Element {
 
   // Redirect user to the getting started page
   const redirectToHome = async () => {
-    navigate({ to: `/organization/${ProjectType.SecretManager}/overview` as const });
+    navigate({ to: "/organization/projects" as const });
   };
 
   const inviteUsers = async ({ emails: inviteEmails }: { emails: string }) => {

frontend/src/components/navigation/NavHeader.tsx

@@ -71,7 +71,7 @@ export default function NavHeader({
         {currentOrg?.name?.charAt(0)}
       </div>
       <Link
-        to="/organization/secret-manager/overview"
+        to="/organization/projects"
         className="truncate pl-0.5 text-sm font-semibold text-primary/80 hover:text-primary"
       >
         {currentOrg?.name}
@@ -93,7 +93,7 @@ export default function NavHeader({
       <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
       {pageName === "Secrets" ? (
         <Link
-          to={`/${ProjectType.SecretManager}/$projectId/overview` as const}
+          to="/projects/$projectId/secret-manager/overview"
           params={{ projectId: currentWorkspace.id }}
           className="text-sm font-semibold text-primary/80 hover:text-primary"
         >
@@ -129,7 +129,7 @@ export default function NavHeader({
         <div className="flex items-center space-x-3">
           <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
           <Link
-            to={`/${ProjectType.SecretManager}/$projectId/secrets/$envSlug` as const}
+            to={`/projects/$projectId/${ProjectType.SecretManager}/secrets/$envSlug` as const}
             params={{ projectId: currentWorkspace.id, envSlug: routerEnvSlug }}
             className="text-sm font-semibold text-primary/80 hover:text-primary"
           >
@@ -191,7 +191,7 @@ export default function NavHeader({
                 </div>
               ) : (
                 <Link
-                  to={`/${ProjectType.SecretManager}/$projectId/secrets/$envSlug` as const}
+                  to={`/projects/$projectId/${ProjectType.SecretManager}/secrets/$envSlug` as const}
                   params={{
                     projectId: currentWorkspace.id,
                     envSlug: routerEnvSlug || ""

frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx

@@ -70,7 +70,7 @@ export const SecretDashboardPathBreadcrumb = ({
         </div>
       ) : (
         <Link
-          to={`/${ProjectType.SecretManager}/$projectId/secrets/$envSlug` as const}
+          to={`/projects/$projectId/${ProjectType.SecretManager}/secrets/$envSlug` as const}
           params={{
             projectId,
             envSlug: environmentSlug

frontend/src/components/notifications/Notifications.tsx

@@ -65,6 +65,7 @@ export const createNotification = (
   toast(<NotificationContent {...myProps} />, {
     position: "bottom-right",
     ...toastProps,
+    autoClose: toastProps.autoClose || 15000,
     theme: "dark",
     type: myProps?.type || "info"
   });

frontend/src/components/organization/CreateOrgModal/CreateOrgModal.tsx

@@ -7,7 +7,6 @@ import z from "zod";
 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { useCreateOrg, useSelectOrganization } from "@app/hooks/api";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 import { GenericResourceNameSchema } from "@app/lib/schemas";
 
 const schema = z
@@ -59,10 +58,7 @@ export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) =>
       });
 
       navigate({
-        to: `/organization/${ProjectType.SecretManager}/overview` as const,
-        params: {
-          organizationId: organization.id
-        }
+        to: "/organization/projects"
       });
 
       localStorage.setItem("orgData.id", organization.id);

frontend/src/components/project/ProjectOverviewChangeSection.tsx

@@ -5,12 +5,14 @@ import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, FormControl, Input, TextArea } from "@app/components/v2";
+import { Button, FormControl, Input, Select, SelectItem, TextArea } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useUpdateProject } from "@app/hooks/api";
+import { ProjectType } from "@app/hooks/api/workspace/types";
 
 const baseFormSchema = z.object({
   name: z.string().min(1, "Required").max(64, "Too long, maximum length is 64 characters"),
+  defaultProduct: z.nativeEnum(ProjectType).default(ProjectType.SecretManager),
   description: z
     .string()
     .trim()
@@ -50,6 +52,7 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
       reset({
         name: currentWorkspace.name,
         description: currentWorkspace.description ?? "",
+        defaultProduct: currentWorkspace.defaultProduct,
         ...(showSlugField && { slug: currentWorkspace.slug })
       });
     }
@@ -63,6 +66,7 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
         projectID: currentWorkspace.id,
         newProjectName: data.name,
         newProjectDescription: data.description,
+        defaultProduct: data.defaultProduct,
         ...(showSlugField &&
           "slug" in data && {
             newSlug: data.slug !== currentWorkspace.slug ? data.slug : undefined
@@ -212,6 +216,31 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
               </ProjectPermissionCan>
             </div>
           </div>
+          <Controller
+            control={control}
+            name="defaultProduct"
+            defaultValue={ProjectType.SecretManager}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Default Product"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full max-w-md bg-mineshaft-800"
+                >
+                  <SelectItem value={ProjectType.SecretManager}>Secrets Manager</SelectItem>
+                  <SelectItem value={ProjectType.CertificateManager}>PKI Manager</SelectItem>
+                  <SelectItem value={ProjectType.KMS}>KMS</SelectItem>
+                  <SelectItem value={ProjectType.SSH}>SSH</SelectItem>
+                  <SelectItem value={ProjectType.SecretScanning}>Secret Scanning</SelectItem>
+                </Select>
+              </FormControl>
+            )}
+          />
           <div>
             <ProjectPermissionCan
               I={ProjectPermissionActions.Edit}

frontend/src/components/projects/NewProjectModal.tsx

@@ -35,7 +35,6 @@ import { getProjectHomePage } from "@app/helpers/project";
 import { useCreateWorkspace, useGetExternalKmsList, useGetUserWorkspaces } from "@app/hooks/api";
 import { INTERNAL_KMS_KEY_ID } from "@app/hooks/api/kms/types";
 import { InfisicalProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 const formSchema = z.object({
   name: z.string().trim().min(1, "Required").max(64, "Too long, maximum length is 64 characters"),
@@ -53,12 +52,11 @@ type TAddProjectFormData = z.infer<typeof formSchema>;
 interface NewProjectModalProps {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
-  projectType: ProjectType;
 }
 
-type NewProjectFormProps = Pick<NewProjectModalProps, "onOpenChange" | "projectType">;
+type NewProjectFormProps = Pick<NewProjectModalProps, "onOpenChange">;
 
-const NewProjectForm = ({ onOpenChange, projectType }: NewProjectFormProps) => {
+const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
   const { permission } = useOrgPermission();
@@ -72,7 +70,7 @@ const NewProjectForm = ({ onOpenChange, projectType }: NewProjectFormProps) => {
     OrgPermissionSubjects.ProjectTemplates
   );
 
-  const { data: projectTemplates = [] } = useListProjectTemplates(projectType, {
+  const { data: projectTemplates = [] } = useListProjectTemplates({
     enabled: Boolean(canReadProjectTemplates && subscription?.projectTemplates)
   });
 
@@ -115,15 +113,17 @@ const NewProjectForm = ({ onOpenChange, projectType }: NewProjectFormProps) => {
         projectName: name,
         projectDescription: description,
         kmsKeyId: kmsKeyId !== INTERNAL_KMS_KEY_ID ? kmsKeyId : undefined,
-        template,
-        type: projectType
+        template
       });
       await refetchWorkspaces();
 
       createNotification({ text: "Project created", type: "success" });
       reset();
       onOpenChange(false);
-      navigate({ to: getProjectHomePage(project), params: { projectId: project.id } });
+      navigate({
+        to: getProjectHomePage(project.defaultProduct),
+        params: { projectId: project.id }
+      });
     } catch (err) {
       console.error(err);
       createNotification({ text: "Failed to create project", type: "error" });
@@ -270,18 +270,14 @@ const NewProjectForm = ({ onOpenChange, projectType }: NewProjectFormProps) => {
   );
 };
 
-export const NewProjectModal: FC<NewProjectModalProps> = ({
-  isOpen,
-  onOpenChange,
-  projectType
-}) => {
+export const NewProjectModal: FC<NewProjectModalProps> = ({ isOpen, onOpenChange }) => {
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent
         title="Create a new project"
         subTitle="This project will contain your secrets and configurations."
       >
-        <NewProjectForm onOpenChange={onOpenChange} projectType={projectType} />
+        <NewProjectForm onOpenChange={onOpenChange} />
       </ModalContent>
     </Modal>
   );

frontend/src/components/projects/ProjectSettings/ProjectSettings.tsx

@@ -1,30 +0,0 @@
-import { useState } from "react";
-
-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-
-import { ProjectTemplatesTab } from "./components";
-
-const tabs = [
-  { name: "Project Templates", key: "project-templates", component: ProjectTemplatesTab }
-];
-
-export const ProjectSettings = () => {
-  const [selectedTab, setSelectedTab] = useState(tabs[0].key);
-
-  return (
-    <Tabs value={selectedTab} onValueChange={setSelectedTab}>
-      <TabList>
-        {tabs.map((tab) => (
-          <Tab value={tab.key} key={tab.key}>
-            {tab.name}
-          </Tab>
-        ))}
-      </TabList>
-      {tabs.map(({ key, component: Component }) => (
-        <TabPanel value={key} key={`tab-panel-${key}`}>
-          <Component />
-        </TabPanel>
-      ))}
-    </Tabs>
-  );
-};

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/ProjectTemplatesTab.tsx

@@ -1,9 +0,0 @@
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-import { withPermission } from "@app/hoc";
-
-import { ProjectTemplatesSection } from "./components";
-
-export const ProjectTemplatesTab = withPermission(() => <ProjectTemplatesSection />, {
-  action: OrgPermissionActions.Read,
-  subject: OrgPermissionSubjects.ProjectTemplates
-});

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/DeleteProjectTemplateModal.tsx

@@ -1,49 +0,0 @@
-import { createNotification } from "@app/components/notifications";
-import { DeleteActionModal } from "@app/components/v2";
-import { TProjectTemplate, useDeleteProjectTemplate } from "@app/hooks/api/projectTemplates";
-
-type Props = {
-  template?: TProjectTemplate;
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-};
-
-export const DeleteProjectTemplateModal = ({ isOpen, onOpenChange, template }: Props) => {
-  const deleteTemplate = useDeleteProjectTemplate();
-
-  if (!template) return null;
-
-  const { id: templateId, name } = template;
-
-  const handleDeleteProjectTemplate = async () => {
-    try {
-      await deleteTemplate.mutateAsync({
-        templateId
-      });
-
-      createNotification({
-        text: "Successfully removed project template",
-        type: "success"
-      });
-
-      onOpenChange(false);
-    } catch (err) {
-      console.error(err);
-
-      createNotification({
-        text: "Failed remove project template",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <DeleteActionModal
-      isOpen={isOpen}
-      onChange={onOpenChange}
-      title={`Are you sure you want to delete ${name}?`}
-      deleteKey="confirm"
-      onDeleteApproved={handleDeleteProjectTemplate}
-    />
-  );
-};

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/EditProjectTemplateSection/EditProjectTemplateSection.tsx

@@ -1,55 +0,0 @@
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Button, EmptyState, Spinner } from "@app/components/v2";
-import {
-  InfisicalProjectTemplate,
-  TProjectTemplate,
-  useGetProjectTemplateById
-} from "@app/hooks/api/projectTemplates";
-
-import { EditProjectTemplate } from "./components";
-
-type Props = {
-  template: TProjectTemplate;
-  onBack: () => void;
-};
-
-export const EditProjectTemplateSection = ({ template, onBack }: Props) => {
-  const isInfisicalTemplate = Object.values(InfisicalProjectTemplate).includes(
-    template.name as InfisicalProjectTemplate
-  );
-
-  const { data: projectTemplate, isPending } = useGetProjectTemplateById(template.id, {
-    initialData: template,
-    enabled: !isInfisicalTemplate
-  });
-
-  return (
-    <div>
-      <Button
-        variant="link"
-        type="submit"
-        leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-        onClick={onBack}
-        className="mb-4"
-      >
-        Back to Templates
-      </Button>
-      {/* eslint-disable-next-line no-nested-ternary */}
-      {isPending ? (
-        <div className="flex h-[60vh] w-full items-center justify-center p-24">
-          <Spinner />
-        </div>
-      ) : projectTemplate ? (
-        <EditProjectTemplate
-          isInfisicalTemplate={isInfisicalTemplate}
-          projectTemplate={projectTemplate}
-          onBack={onBack}
-        />
-      ) : (
-        <EmptyState title="Error: Unable to find project template." className="py-12" />
-      )}
-    </div>
-  );
-};

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx

@@ -1,122 +0,0 @@
-import { faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { createNotification } from "@app/components/notifications";
-import { OrgPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-import { usePopUp } from "@app/hooks";
-import { TProjectTemplate, useDeleteProjectTemplate } from "@app/hooks/api/projectTemplates";
-import { ProjectType } from "@app/hooks/api/workspace/types";
-
-import { ProjectTemplateDetailsModal } from "../../ProjectTemplateDetailsModal";
-import { ProjectTemplateEnvironmentsForm } from "./ProjectTemplateEnvironmentsForm";
-import { ProjectTemplateRolesSection } from "./ProjectTemplateRolesSection";
-
-type Props = {
-  projectTemplate: TProjectTemplate;
-  onBack: () => void;
-  isInfisicalTemplate: boolean;
-};
-
-export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBack }: Props) => {
-  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-    "removeTemplate",
-    "editDetails"
-  ] as const);
-
-  const { id: templateId, name, description, type } = projectTemplate;
-
-  const deleteProjectTemplate = useDeleteProjectTemplate();
-
-  const handleRemoveTemplate = async () => {
-    try {
-      await deleteProjectTemplate.mutateAsync({
-        templateId
-      });
-      createNotification({
-        text: "Successfully removed project template",
-        type: "success"
-      });
-      onBack();
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to remove project template",
-        type: "error"
-      });
-    }
-    handlePopUpClose("removeTemplate");
-  };
-
-  return (
-    <>
-      <div className="mb-4 flex items-start justify-between border-b border-bunker-400 pb-4">
-        <div className="flex-col">
-          <h3 className="text-xl font-semibold">{name}</h3>
-          <h2 className="text-sm text-mineshaft-400">{description || "Project Template"}</h2>
-        </div>
-        {!isInfisicalTemplate && (
-          <div className="flex gap-2">
-            <OrgPermissionCan
-              I={OrgPermissionActions.Edit}
-              a={OrgPermissionSubjects.ProjectTemplates}
-            >
-              {(isAllowed) => (
-                <Button
-                  isDisabled={!isAllowed}
-                  leftIcon={<FontAwesomeIcon icon={faPencil} />}
-                  size="xs"
-                  colorSchema="secondary"
-                  onClick={() => handlePopUpOpen("editDetails")}
-                >
-                  Edit Details
-                </Button>
-              )}
-            </OrgPermissionCan>
-            <OrgPermissionCan
-              I={OrgPermissionActions.Delete}
-              a={OrgPermissionSubjects.ProjectTemplates}
-            >
-              {(isAllowed) => (
-                <Button
-                  isDisabled={!isAllowed}
-                  onClick={() => {
-                    handlePopUpOpen("removeTemplate");
-                  }}
-                  leftIcon={<FontAwesomeIcon icon={faTrash} />}
-                  size="xs"
-                  colorSchema="danger"
-                >
-                  Delete Template
-                </Button>
-              )}
-            </OrgPermissionCan>
-          </div>
-        )}
-      </div>
-      {type === ProjectType.SecretManager && (
-        <ProjectTemplateEnvironmentsForm
-          isInfisicalTemplate={isInfisicalTemplate}
-          projectTemplate={projectTemplate}
-        />
-      )}
-      <ProjectTemplateRolesSection
-        isInfisicalTemplate={isInfisicalTemplate}
-        projectTemplate={projectTemplate}
-      />
-      <ProjectTemplateDetailsModal
-        isOpen={popUp.editDetails.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("editDetails", isOpen)}
-        projectTemplate={projectTemplate}
-      />
-      <DeleteActionModal
-        isOpen={popUp.removeTemplate.isOpen}
-        title={`Are you sure you want to delete ${projectTemplate.name}?`}
-        deleteKey="confirm"
-        onChange={(isOpen) => handlePopUpToggle("removeTemplate", isOpen)}
-        onDeleteApproved={handleRemoveTemplate}
-      />
-    </>
-  );
-};

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx

@@ -1,193 +0,0 @@
-import { Controller, FormProvider, useForm } from "react-hook-form";
-import { faChevronLeft, faSave } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { twMerge } from "tailwind-merge";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input } from "@app/components/v2";
-import { ProjectPermissionSub } from "@app/context";
-import { isCustomProjectRole } from "@app/helpers/roles";
-import { TProjectTemplate, useUpdateProjectTemplate } from "@app/hooks/api/projectTemplates";
-import { slugSchema } from "@app/lib/schemas";
-import { AddPoliciesButton } from "@app/pages/project/RoleDetailsBySlugPage/components/AddPoliciesButton";
-import { GeneralPermissionPolicies } from "@app/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies";
-import { PermissionEmptyState } from "@app/pages/project/RoleDetailsBySlugPage/components/PermissionEmptyState";
-import {
-  formRolePermission2API,
-  PROJECT_PERMISSION_OBJECT,
-  projectRoleFormSchema,
-  rolePermission2Form
-} from "@app/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils";
-import { renderConditionalComponents } from "@app/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection";
-
-type Props = {
-  projectTemplate: TProjectTemplate;
-  role?: TProjectTemplate["roles"][number];
-  onGoBack: () => void;
-  isDisabled?: boolean;
-};
-
-const formSchema = z.object({
-  slug: slugSchema(),
-  name: z.string().trim().min(1),
-  permissions: projectRoleFormSchema.shape.permissions
-});
-
-type TFormSchema = z.infer<typeof formSchema>;
-
-export const ProjectTemplateEditRoleForm = ({
-  onGoBack,
-  projectTemplate,
-  role,
-  isDisabled
-}: Props) => {
-  const formMethods = useForm<TFormSchema>({
-    values: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : undefined,
-    resolver: zodResolver(formSchema)
-  });
-
-  const {
-    handleSubmit,
-    control,
-    formState: { isDirty, isSubmitting }
-  } = formMethods;
-
-  const updateProjectTemplate = useUpdateProjectTemplate();
-
-  const onSubmit = async (form: TFormSchema) => {
-    try {
-      await updateProjectTemplate.mutateAsync({
-        templateId: projectTemplate.id,
-        roles: [
-          ...projectTemplate.roles.filter(
-            (r) => r.slug !== role?.slug && isCustomProjectRole(r.slug) // filter out default roles as well
-          ),
-          {
-            ...form,
-            permissions: formRolePermission2API(form.permissions)
-          }
-        ]
-      });
-      onGoBack();
-      createNotification({
-        text: "Template roles successfully updated",
-        type: "success"
-      });
-    } catch (e: any) {
-      console.error(e);
-      createNotification({
-        text: "Failed to update template roles",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-    >
-      <FormProvider {...formMethods}>
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-          <Button
-            leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            className="text-base font-semibold text-mineshaft-200"
-            variant="link"
-            onClick={onGoBack}
-          >
-            {isDisabled ? "Back" : "Cancel"}
-          </Button>
-          {!isDisabled && (
-            <div className="flex items-center space-x-4">
-              {isDirty && (
-                <Button
-                  className="mr-4 text-mineshaft-300"
-                  variant="link"
-                  isDisabled={isSubmitting}
-                  isLoading={isSubmitting}
-                  onClick={onGoBack}
-                >
-                  Discard
-                </Button>
-              )}
-              <div className="flex items-center">
-                <Button
-                  variant="outline_bg"
-                  type="submit"
-                  className={twMerge(
-                    "mr-4 h-10 border border-primary",
-                    isDirty && "bg-primary text-black"
-                  )}
-                  isDisabled={isSubmitting || !isDirty || isDisabled}
-                  isLoading={isSubmitting}
-                  leftIcon={<FontAwesomeIcon icon={faSave} />}
-                >
-                  Save
-                </Button>
-                <AddPoliciesButton isDisabled={isDisabled} />
-              </div>
-            </div>
-          )}
-        </div>
-        <div className="mt-2 border-b border-gray-800 p-4 pt-2 first:rounded-t-md last:rounded-b-md">
-          {isDisabled ? (
-            <div className="flex flex-col">
-              <span className="text-lg font-semibold">{role?.name}</span>
-              <span className="text-mineshaft-400">{role?.slug}</span>
-            </div>
-          ) : (
-            <div className="flex w-full gap-2">
-              <Controller
-                control={control}
-                name="name"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    isError={Boolean(error?.message)}
-                    errorText={error?.message}
-                    label="Name"
-                    className="mb-0 flex-1"
-                  >
-                    <Input {...field} autoFocus placeholder="Role name..." />
-                  </FormControl>
-                )}
-              />
-              <Controller
-                control={control}
-                name="slug"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    isError={Boolean(error?.message)}
-                    errorText={error?.message}
-                    label="Slug"
-                    className="mb-0 flex-1"
-                  >
-                    <Input {...field} placeholder="Role slug..." />
-                  </FormControl>
-                )}
-              />
-            </div>
-          )}
-        </div>
-        <div className="p-4">
-          <div className="mb-2 text-lg">Policies</div>
-          <PermissionEmptyState />
-          <div>
-            {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
-              <GeneralPermissionPolicies
-                subject={subject}
-                actions={PROJECT_PERMISSION_OBJECT[subject].actions}
-                title={PROJECT_PERMISSION_OBJECT[subject].title}
-                key={`project-permission-${subject}`}
-                isDisabled={isDisabled}
-              >
-                {renderConditionalComponents(subject, isDisabled)}
-              </GeneralPermissionPolicies>
-            ))}
-          </div>
-        </div>
-      </FormProvider>
-    </form>
-  );
-};

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx

@@ -1,289 +0,0 @@
-import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { faArrowDown, faArrowUp, faPlus, faSave, faTrash } 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 { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Table,
-  TableContainer,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
-import { TProjectTemplate, useUpdateProjectTemplate } from "@app/hooks/api/projectTemplates";
-import { slugSchema } from "@app/lib/schemas";
-
-type Props = {
-  projectTemplate: TProjectTemplate;
-  isInfisicalTemplate: boolean;
-};
-
-const formSchema = z.object({
-  environments: z
-    .object({
-      name: z.string().trim().min(1),
-      slug: slugSchema({ min: 1, max: 64 })
-    })
-    .array()
-    .nullish()
-});
-
-type TFormSchema = z.infer<typeof formSchema>;
-
-export const ProjectTemplateEnvironmentsForm = ({
-  projectTemplate,
-  isInfisicalTemplate
-}: Props) => {
-  const {
-    control,
-    handleSubmit,
-    formState: { isDirty, errors },
-    reset
-  } = useForm<TFormSchema>({
-    defaultValues: {
-      environments: projectTemplate.environments
-    },
-    resolver: zodResolver(formSchema)
-  });
-
-  const { subscription } = useSubscription();
-
-  const {
-    fields: environments,
-    move,
-    remove,
-    append
-  } = useFieldArray({ control, name: "environments" });
-
-  const updateProjectTemplate = useUpdateProjectTemplate();
-
-  const onFormSubmit = async (form: TFormSchema) => {
-    try {
-      const { environments: updatedEnvs } = await updateProjectTemplate.mutateAsync({
-        environments: form.environments?.map((env, index) => ({
-          ...env,
-          position: index + 1
-        })),
-        templateId: projectTemplate.id
-      });
-
-      reset({ environments: updatedEnvs });
-
-      createNotification({
-        text: "Project template updated successfully",
-        type: "success"
-      });
-    } catch (e: any) {
-      console.error(e);
-      createNotification({
-        text: e.message ?? "Failed to update project template",
-        type: "error"
-      });
-    }
-  };
-
-  const isEnvironmentLimitExceeded =
-    Boolean(subscription.environmentLimit) && environments.length >= subscription.environmentLimit;
-
-  return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-    >
-      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <div>
-          <h2 className="text-lg font-semibold">Project Environments</h2>
-          {!isInfisicalTemplate && (
-            <p className="text-sm text-mineshaft-400">
-              Add, rename, remove and reorder environments for this project template
-            </p>
-          )}
-        </div>
-        {!isInfisicalTemplate && (
-          <OrgPermissionCan
-            I={OrgPermissionActions.Edit}
-            a={OrgPermissionSubjects.ProjectTemplates}
-          >
-            {(isAllowed) => (
-              <Button
-                type="submit"
-                colorSchema="primary"
-                className="ml-auto w-40"
-                variant={isDirty ? "solid" : "outline_bg"}
-                leftIcon={<FontAwesomeIcon icon={faSave} />}
-                isDisabled={!isAllowed || !isDirty}
-              >
-                {isDirty ? "Save" : "No"} Changes
-              </Button>
-            )}
-          </OrgPermissionCan>
-        )}
-      </div>
-      {errors.environments && (
-        <span className="my-4 text-sm text-red">{errors.environments.message}</span>
-      )}
-      <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Friendly Name</Th>
-              <Th>Slug</Th>
-              {!isInfisicalTemplate && (
-                <Th>
-                  <div className="flex w-full justify-end normal-case">
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                      renderTooltip={isEnvironmentLimitExceeded ? true : undefined}
-                      allowedLabel={`Plan environment limit of ${subscription.environmentLimit} exceeded. Contact Infisical to increase limit.`}
-                    >
-                      {(isAllowed) => (
-                        <Button
-                          onClick={() => append({ name: "", slug: "" })}
-                          colorSchema="secondary"
-                          className="ml-auto"
-                          variant="solid"
-                          size="xs"
-                          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                          isDisabled={!isAllowed || isEnvironmentLimitExceeded}
-                        >
-                          Add Environment
-                        </Button>
-                      )}
-                    </OrgPermissionCan>
-                  </div>
-                </Th>
-              )}
-            </Tr>
-          </THead>
-          <TBody>
-            {environments.map(({ id, name, slug }, pos) => (
-              <Tr key={id}>
-                <Td>
-                  {isInfisicalTemplate ? (
-                    name
-                  ) : (
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                    >
-                      {(isAllowed) => (
-                        <Controller
-                          control={control}
-                          name={`environments.${pos}.name`}
-                          render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                              isError={Boolean(error?.message)}
-                              errorText={error?.message}
-                              className="mb-0 flex-grow"
-                            >
-                              <Input isDisabled={!isAllowed} {...field} placeholder="Name..." />
-                            </FormControl>
-                          )}
-                        />
-                      )}
-                    </OrgPermissionCan>
-                  )}
-                </Td>
-                <Td>
-                  {isInfisicalTemplate ? (
-                    slug
-                  ) : (
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                    >
-                      {(isAllowed) => (
-                        <Controller
-                          control={control}
-                          name={`environments.${pos}.slug`}
-                          render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                              isError={Boolean(error?.message)}
-                              errorText={error?.message}
-                              className="mb-0 flex-grow"
-                            >
-                              <Input isDisabled={!isAllowed} {...field} placeholder="Slug..." />
-                            </FormControl>
-                          )}
-                        />
-                      )}
-                    </OrgPermissionCan>
-                  )}
-                </Td>
-                {!isInfisicalTemplate && (
-                  <Td className="flex items-center justify-end">
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                    >
-                      {(isAllowed) => (
-                        <IconButton
-                          className={`mr-3 py-2 ${
-                            pos === environments.length - 1 ? "pointer-events-none opacity-50" : ""
-                          }`}
-                          onClick={() => move(pos, pos + 1)}
-                          colorSchema="primary"
-                          variant="plain"
-                          ariaLabel="Increase position"
-                          isDisabled={pos === environments.length - 1 || !isAllowed}
-                        >
-                          <FontAwesomeIcon icon={faArrowDown} />
-                        </IconButton>
-                      )}
-                    </OrgPermissionCan>
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                    >
-                      {(isAllowed) => (
-                        <IconButton
-                          className={`mr-3 py-2 ${
-                            pos === 0 ? "pointer-events-none opacity-50" : ""
-                          }`}
-                          onClick={() => move(pos, pos - 1)}
-                          colorSchema="primary"
-                          variant="plain"
-                          ariaLabel="Decrease position"
-                          isDisabled={pos === 0 || !isAllowed}
-                        >
-                          <FontAwesomeIcon icon={faArrowUp} />
-                        </IconButton>
-                      )}
-                    </OrgPermissionCan>
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                    >
-                      {(isAllowed) => (
-                        <IconButton
-                          onClick={() => remove(pos)}
-                          colorSchema="danger"
-                          variant="plain"
-                          ariaLabel="Remove environment"
-                          isDisabled={!isAllowed || environments.length === 1}
-                        >
-                          <FontAwesomeIcon icon={faTrash} />
-                        </IconButton>
-                      )}
-                    </OrgPermissionCan>
-                  </Td>
-                )}
-              </Tr>
-            ))}
-          </TBody>
-        </Table>
-      </TableContainer>
-    </form>
-  );
-};

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateRolesSection.tsx

@@ -1,223 +0,0 @@
-import { faPlus, faTrash, faUnlock } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { AnimatePresence, motion } from "framer-motion";
-
-import { createNotification } from "@app/components/notifications";
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DeleteActionModal,
-  EmptyState,
-  IconButton,
-  Table,
-  TableContainer,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrgPermission } from "@app/context";
-import { isCustomProjectRole } from "@app/helpers/roles";
-import { usePopUp } from "@app/hooks";
-import { TProjectTemplate, useUpdateProjectTemplate } from "@app/hooks/api/projectTemplates";
-import { TProjectRole } from "@app/hooks/api/roles/types";
-
-import { ProjectTemplateEditRoleForm } from "./ProjectTemplateEditRoleForm";
-
-type Props = {
-  projectTemplate: TProjectTemplate;
-  isInfisicalTemplate: boolean;
-};
-
-export const ProjectTemplateRolesSection = ({ projectTemplate, isInfisicalTemplate }: Props) => {
-  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
-    "removeRole",
-    "editRole"
-  ] as const);
-
-  const { permission } = useOrgPermission();
-
-  const { roles } = projectTemplate;
-
-  const updateProjectTemplate = useUpdateProjectTemplate();
-
-  const handleRemoveRole = async (slug: string) => {
-    try {
-      await updateProjectTemplate.mutateAsync({
-        templateId: projectTemplate.id,
-        roles: projectTemplate.roles.filter(
-          (role) => role.slug !== slug && isCustomProjectRole(role.slug) // filter out default roles as well
-        )
-      });
-
-      createNotification({
-        text: "Successfully removed role from template",
-        type: "success"
-      });
-      handlePopUpClose("removeRole");
-    } catch (e) {
-      console.error(e);
-      createNotification({
-        text: "Error removing role from template",
-        type: "error"
-      });
-    }
-  };
-
-  const editRole = popUp?.editRole?.data as TProjectRole;
-  const roleToDelete = popUp?.removeRole?.data as TProjectRole;
-
-  return (
-    <div className="relative">
-      <AnimatePresence>
-        {popUp?.editRole.isOpen ? (
-          <motion.div
-            key="edit-role"
-            transition={{ duration: 0.3 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-            className="absolute min-h-[10rem] w-full"
-          >
-            <ProjectTemplateEditRoleForm
-              onGoBack={() => handlePopUpClose("editRole")}
-              projectTemplate={projectTemplate}
-              role={editRole}
-              isDisabled={
-                permission.cannot(
-                  OrgPermissionActions.Edit,
-                  OrgPermissionSubjects.ProjectTemplates
-                ) ||
-                (editRole && !isCustomProjectRole(editRole.slug))
-              }
-            />
-            <div className="h-4 w-full" />
-          </motion.div>
-        ) : (
-          <motion.div
-            key="role-list"
-            transition={{ duration: 0.3 }}
-            initial={{ opacity: 0, translateX: 0 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: -30 }}
-            className="absolute w-full"
-          >
-            <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-              <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-                <div>
-                  <h2 className="text-lg font-semibold">Project Roles</h2>
-                  <p className="text-sm text-mineshaft-400">
-                    {isInfisicalTemplate
-                      ? "Click a role to view the associated permissions"
-                      : "Add, edit and remove roles for this project template"}
-                  </p>
-                </div>
-                {!isInfisicalTemplate && (
-                  <OrgPermissionCan
-                    I={OrgPermissionActions.Edit}
-                    a={OrgPermissionSubjects.ProjectTemplates}
-                  >
-                    {(isAllowed) => (
-                      <Button
-                        onClick={() => {
-                          handlePopUpOpen("editRole");
-                        }}
-                        colorSchema="primary"
-                        className="ml-auto"
-                        variant="outline_bg"
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                        isDisabled={!isAllowed}
-                      >
-                        Add Role
-                      </Button>
-                    )}
-                  </OrgPermissionCan>
-                )}
-              </div>
-              <div className="py-4">
-                <TableContainer>
-                  <Table>
-                    <THead>
-                      <Tr>
-                        <Th>Name</Th>
-                        <Th>Slug</Th>
-                        <Th className="w-5" />
-                      </Tr>
-                    </THead>
-                    <TBody>
-                      {roles.length ? (
-                        roles.map((role) => {
-                          return (
-                            <Tr
-                              key={role.slug}
-                              className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
-                              role="button"
-                              tabIndex={0}
-                              onKeyDown={(evt) => {
-                                if (evt.key === "Enter") {
-                                  handlePopUpOpen("editRole", role);
-                                }
-                              }}
-                              onClick={() => handlePopUpOpen("editRole", role)}
-                            >
-                              <Td>{role.name}</Td>
-                              <Td>{role.slug}</Td>
-                              <Td>
-                                {isCustomProjectRole(role.slug) && (
-                                  <div className="flex space-x-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                    <OrgPermissionCan
-                                      I={OrgPermissionActions.Edit}
-                                      a={OrgPermissionSubjects.ProjectTemplates}
-                                      renderTooltip
-                                      allowedLabel="Remove Role"
-                                    >
-                                      {(isAllowed) => (
-                                        <IconButton
-                                          colorSchema="danger"
-                                          ariaLabel="delete-icon"
-                                          variant="plain"
-                                          className="group relative"
-                                          isDisabled={!isAllowed}
-                                          onClick={(e) => {
-                                            e.stopPropagation();
-                                            e.preventDefault();
-                                            handlePopUpOpen("removeRole", role);
-                                          }}
-                                        >
-                                          <FontAwesomeIcon icon={faTrash} />
-                                        </IconButton>
-                                      )}
-                                    </OrgPermissionCan>
-                                  </div>
-                                )}
-                              </Td>
-                            </Tr>
-                          );
-                        })
-                      ) : (
-                        <Tr>
-                          <Td colSpan={2}>
-                            <EmptyState title="No roles assigned to template" icon={faUnlock} />
-                          </Td>
-                        </Tr>
-                      )}
-                    </TBody>
-                  </Table>
-                </TableContainer>
-              </div>
-              <DeleteActionModal
-                isOpen={popUp.removeRole.isOpen}
-                deleteKey="remove"
-                title={`Are you sure you want to remove the role ${roleToDelete?.slug}?`}
-                onChange={(isOpen) => handlePopUpToggle("removeRole", isOpen)}
-                onDeleteApproved={() => handleRemoveRole(roleToDelete?.slug)}
-              />
-            </div>
-            <div className="h-4 w-full" />
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/index.tsx

@@ -1 +0,0 @@
-export * from "./EditProjectTemplate";

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/EditProjectTemplateSection/index.tsx

@@ -1 +0,0 @@
-export * from "./EditProjectTemplateSection";

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/ProjectTemplateDetailsModal.tsx

@@ -1,153 +0,0 @@
-import { 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,
-  TextArea
-} from "@app/components/v2";
-import { useGetProjectTypeFromRoute } from "@app/hooks";
-import {
-  TProjectTemplate,
-  useCreateProjectTemplate,
-  useUpdateProjectTemplate
-} from "@app/hooks/api/projectTemplates";
-import { slugSchema } from "@app/lib/schemas";
-
-const formSchema = z.object({
-  name: slugSchema({ min: 1, max: 64, field: "Name" }),
-  description: z.string().max(500).optional()
-});
-
-export type FormData = z.infer<typeof formSchema>;
-
-type Props = {
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  onComplete?: (template: TProjectTemplate) => void;
-  projectTemplate?: TProjectTemplate;
-};
-
-type FormProps = {
-  projectTemplate?: TProjectTemplate;
-  onComplete: (template: TProjectTemplate) => void;
-};
-
-const ProjectTemplateForm = ({ onComplete, projectTemplate }: FormProps) => {
-  const createProjectTemplate = useCreateProjectTemplate();
-  const updateProjectTemplate = useUpdateProjectTemplate();
-  const projectType = useGetProjectTypeFromRoute();
-
-  const {
-    handleSubmit,
-    register,
-    formState: { isSubmitting, errors }
-  } = useForm<FormData>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: projectTemplate?.name,
-      description: projectTemplate?.description
-    }
-  });
-
-  const onFormSubmit = async (data: FormData) => {
-    if (!projectType) {
-      createNotification({
-        text: "Failed to determine project type",
-        type: "error"
-      });
-      return;
-    }
-
-    const mutation = projectTemplate
-      ? updateProjectTemplate.mutateAsync({ templateId: projectTemplate.id, ...data })
-      : createProjectTemplate.mutateAsync({ ...data, type: projectType });
-    try {
-      const template = await mutation;
-      createNotification({
-        text: `Successfully ${
-          projectTemplate ? "updated template details" : "created project template"
-        }`,
-        type: "success"
-      });
-
-      onComplete(template);
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: `Failed to ${
-          projectTemplate ? "update template details" : "create project template"
-        }`,
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
-      <FormControl
-        helperText="Name must be slug-friendly"
-        errorText={errors.name?.message}
-        isError={Boolean(errors.name?.message)}
-        label="Name"
-      >
-        <Input autoFocus placeholder="my-project-template" {...register("name")} />
-      </FormControl>
-      <FormControl
-        label="Description (optional)"
-        errorText={errors.description?.message}
-        isError={Boolean(errors.description?.message)}
-      >
-        <TextArea
-          className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
-          {...register("description")}
-        />
-      </FormControl>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {projectTemplate ? "Update" : "Add"} Template
-        </Button>
-        <ModalClose asChild>
-          <Button colorSchema="secondary" variant="plain">
-            Cancel
-          </Button>
-        </ModalClose>
-      </div>
-    </form>
-  );
-};
-
-export const ProjectTemplateDetailsModal = ({
-  isOpen,
-  onOpenChange,
-  projectTemplate,
-  onComplete
-}: Props) => {
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <ModalContent
-        title={projectTemplate ? "Edit Project Template Details" : "Create Project Template"}
-      >
-        <ProjectTemplateForm
-          projectTemplate={projectTemplate}
-          onComplete={(template) => {
-            if (onComplete) onComplete(template);
-            onOpenChange(false);
-          }}
-        />
-      </ModalContent>
-    </Modal>
-  );
-};

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx

@@ -1,117 +0,0 @@
-import { useState } from "react";
-import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { AnimatePresence, motion } from "framer-motion";
-
-import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { OrgPermissionCan } from "@app/components/permissions";
-import { Button } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
-import { TProjectTemplate } from "@app/hooks/api/projectTemplates";
-import { usePopUp } from "@app/hooks/usePopUp";
-
-import { EditProjectTemplateSection } from "./EditProjectTemplateSection";
-import { ProjectTemplateDetailsModal } from "./ProjectTemplateDetailsModal";
-import { ProjectTemplatesTable } from "./ProjectTemplatesTable";
-
-export const ProjectTemplatesSection = () => {
-  const { subscription } = useSubscription();
-  const [editTemplate, setEditTemplate] = useState<TProjectTemplate | null>(null);
-
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
-    "upgradePlan",
-    "addTemplate"
-  ] as const);
-
-  return (
-    <div className="relative">
-      <AnimatePresence>
-        {editTemplate ? (
-          <motion.div
-            key="edit-project-template"
-            transition={{ duration: 0.3 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-            className="absolute min-h-[10rem] w-full"
-          >
-            <EditProjectTemplateSection
-              template={editTemplate}
-              onBack={() => setEditTemplate(null)}
-            />
-          </motion.div>
-        ) : (
-          <motion.div
-            key="project-templates-list"
-            transition={{ duration: 0.3 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-            className="absolute min-h-[10rem] w-full"
-          >
-            <div>
-              <p className="mb-6 font-inter text-bunker-300">
-                Create and configure templates with predefined roles and environments to streamline
-                project setup
-              </p>
-              <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-                <div className="mb-4 flex items-start">
-                  <p className="text-xl font-semibold text-mineshaft-100">Project Templates</p>
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://infisical.com/docs/documentation/platform/project-templates"
-                  >
-                    <div className="ml-2 mt-[0.32rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                      <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                      <span>Docs</span>
-                      <FontAwesomeIcon
-                        icon={faArrowUpRightFromSquare}
-                        className="mb-[0.07rem] ml-1.5 text-[10px]"
-                      />
-                    </div>
-                  </a>
-                  <OrgPermissionCan
-                    I={OrgPermissionActions.Create}
-                    a={OrgPermissionSubjects.ProjectTemplates}
-                  >
-                    {(isAllowed) => (
-                      <Button
-                        colorSchema="secondary"
-                        type="submit"
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                        onClick={() => {
-                          if (!subscription?.projectTemplates) {
-                            handlePopUpOpen("upgradePlan");
-                            return;
-                          }
-
-                          handlePopUpOpen("addTemplate");
-                        }}
-                        isDisabled={!isAllowed}
-                        className="ml-auto"
-                      >
-                        Add Template
-                      </Button>
-                    )}
-                  </OrgPermissionCan>
-                </div>
-                <ProjectTemplatesTable onEdit={setEditTemplate} />
-                <ProjectTemplateDetailsModal
-                  onComplete={(template) => setEditTemplate(template)}
-                  isOpen={popUp.addTemplate.isOpen}
-                  onOpenChange={(isOpen) => handlePopUpToggle("addTemplate", isOpen)}
-                />
-                <UpgradePlanModal
-                  isOpen={popUp.upgradePlan.isOpen}
-                  onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                  text="You can create project templates if you switch to Infisical's Enterprise plan."
-                />
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/ProjectTemplatesTable.tsx

@@ -1,202 +0,0 @@
-import { useMemo, useState } from "react";
-import {
-  faCircleInfo,
-  faClone,
-  faMagnifyingGlass,
-  faTrash
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  EmptyState,
-  IconButton,
-  Input,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tooltip,
-  Tr
-} from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
-import { useGetProjectTypeFromRoute, usePopUp } from "@app/hooks";
-import { TProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
-import { ProjectType } from "@app/hooks/api/workspace/types";
-
-import { DeleteProjectTemplateModal } from "./DeleteProjectTemplateModal";
-
-type Props = {
-  onEdit: (projectTemplate: TProjectTemplate) => void;
-};
-
-export const ProjectTemplatesTable = ({ onEdit }: Props) => {
-  const { subscription } = useSubscription();
-
-  const projectType = useGetProjectTypeFromRoute();
-
-  const { isPending, data: projectTemplates = [] } = useListProjectTemplates(projectType, {
-    enabled: subscription?.projectTemplates && Boolean(projectType)
-  });
-
-  const [search, setSearch] = useState("");
-
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteTemplate"] as const);
-
-  const filteredTemplates = useMemo(
-    () =>
-      projectTemplates?.filter((template) =>
-        template.name.toLowerCase().includes(search.toLowerCase().trim())
-      ) ?? [],
-    [search, projectTemplates]
-  );
-
-  const isSecretManagerTemplates = projectType === ProjectType.SecretManager;
-
-  const colSpan = isSecretManagerTemplates ? 4 : 3;
-
-  return (
-    <div>
-      <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search templates..."
-      />
-      <TableContainer className="mt-4">
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Name</Th>
-              <Th>Roles</Th>
-              {isSecretManagerTemplates && <Th>Environments</Th>}
-              <Th />
-            </Tr>
-          </THead>
-          <TBody>
-            {subscription?.projectTemplates && isPending && (
-              <TableSkeleton
-                innerKey="project-templates-table"
-                columns={colSpan}
-                key="project-templates"
-              />
-            )}
-            {filteredTemplates.map((template) => {
-              const { id, name, roles, environments = [], description } = template;
-              return (
-                <Tr
-                  onClick={() => onEdit(template)}
-                  className="cursor-pointer hover:bg-mineshaft-700"
-                  key={id}
-                >
-                  <Td>
-                    {name}
-                    {description && (
-                      <Tooltip content={description}>
-                        <FontAwesomeIcon
-                          size="sm"
-                          className="ml-2 text-mineshaft-400"
-                          icon={faCircleInfo}
-                        />
-                      </Tooltip>
-                    )}
-                  </Td>
-                  <Td className="pl-8">
-                    {roles.length}
-                    {roles.length > 0 && (
-                      <Tooltip
-                        content={
-                          <ul className="ml-2 list-disc">
-                            {roles.map((role) => (
-                              <li key={role.name}>{role.name}</li>
-                            ))}
-                          </ul>
-                        }
-                      >
-                        <FontAwesomeIcon
-                          size="sm"
-                          className="ml-2 text-mineshaft-400"
-                          icon={faCircleInfo}
-                        />
-                      </Tooltip>
-                    )}
-                  </Td>
-                  {isSecretManagerTemplates && environments && (
-                    <Td className="pl-14">
-                      {environments.length}
-                      {environments.length > 0 && (
-                        <Tooltip
-                          content={
-                            <ul className="ml-2 list-disc">
-                              {environments
-                                .sort((a, b) => (a.position > b.position ? 1 : -1))
-                                .map((env) => (
-                                  <li key={env.slug}>{env.name}</li>
-                                ))}
-                            </ul>
-                          }
-                        >
-                          <FontAwesomeIcon
-                            size="sm"
-                            className="ml-2 text-mineshaft-400"
-                            icon={faCircleInfo}
-                          />
-                        </Tooltip>
-                      )}
-                    </Td>
-                  )}
-                  <Td className="w-5">
-                    {name !== "default" && (
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Delete}
-                        a={OrgPermissionSubjects.ProjectTemplates}
-                      >
-                        {(isAllowed) => (
-                          <IconButton
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handlePopUpOpen("deleteTemplate", template);
-                            }}
-                            variant="plain"
-                            colorSchema="danger"
-                            ariaLabel="Delete template"
-                            isDisabled={!isAllowed}
-                          >
-                            <FontAwesomeIcon icon={faTrash} />
-                          </IconButton>
-                        )}
-                      </OrgPermissionCan>
-                    )}
-                  </Td>
-                </Tr>
-              );
-            })}
-            {(!subscription?.projectTemplates ||
-              (!isPending && filteredTemplates?.length === 0)) && (
-              <Tr>
-                <Td colSpan={colSpan}>
-                  <EmptyState
-                    title={
-                      search.trim()
-                        ? "No project templates match search"
-                        : "No project templates found"
-                    }
-                    icon={faClone}
-                  />
-                </Td>
-              </Tr>
-            )}
-          </TBody>
-        </Table>
-      </TableContainer>
-      <DeleteProjectTemplateModal
-        isOpen={popUp.deleteTemplate.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("deleteTemplate", isOpen)}
-        template={popUp.deleteTemplate.data}
-      />
-    </div>
-  );
-};

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/index.tsx

@@ -1 +0,0 @@
-export { ProjectTemplatesSection } from "./ProjectTemplatesSection";

frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/index.tsx

@@ -1 +0,0 @@
-export { ProjectTemplatesTab } from "./ProjectTemplatesTab";

frontend/src/components/projects/ProjectSettings/components/index.tsx

@@ -1 +0,0 @@
-export * from "./ProjectTemplatesTab";

frontend/src/components/projects/ProjectSettings/index.tsx

@@ -1 +0,0 @@
-export * from "./ProjectSettings";

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/SecretSyncDestinationFields.tsx

@@ -25,6 +25,7 @@ import { TeamCitySyncFields } from "./TeamCitySyncFields";
 import { TerraformCloudSyncFields } from "./TerraformCloudSyncFields";
 import { VercelSyncFields } from "./VercelSyncFields";
 import { WindmillSyncFields } from "./WindmillSyncFields";
+import { ZabbixSyncFields } from "./ZabbixSyncFields";
 
 export const SecretSyncDestinationFields = () => {
   const { watch } = useFormContext<TSecretSyncForm>();
@@ -76,6 +77,8 @@ export const SecretSyncDestinationFields = () => {
       return <GitLabSyncFields />;
     case SecretSync.CloudflarePages:
       return <CloudflarePagesSyncFields />;
+    case SecretSync.Zabbix:
+      return <ZabbixSyncFields />;
     default:
       throw new Error(`Unhandled Destination Config Field: ${destination}`);
   }

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/ZabbixSyncFields.tsx

@@ -0,0 +1,147 @@
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { SingleValue } from "react-select";
+
+import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
+import { FilterableSelect, FormControl, Select, SelectItem } from "@app/components/v2";
+import {
+  TZabbixHost,
+  useZabbixConnectionListHosts,
+  ZABBIX_SYNC_SCOPES,
+  ZabbixMacroType,
+  ZabbixSyncScope
+} from "@app/hooks/api/appConnections/zabbix";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const ZabbixSyncFields = () => {
+  const { control, watch, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.Zabbix }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+  const currentScope = watch("destinationConfig.scope");
+
+  const { data: hosts = [], isPending: isHostsPending } = useZabbixConnectionListHosts(
+    connectionId,
+    {
+      enabled: Boolean(connectionId)
+    }
+  );
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.scope", ZabbixSyncScope.Global);
+          setValue("destinationConfig.hostId", "");
+          setValue("destinationConfig.hostName", "");
+        }}
+      />
+      <Controller
+        name="destinationConfig.scope"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            errorText={error?.message}
+            isError={Boolean(error?.message)}
+            label="Scope"
+            tooltipClassName="max-w-lg py-3"
+            tooltipText={
+              <div className="flex flex-col gap-3">
+                <p>
+                  Specify how Infisical should manage secrets from Zabbix. The following options are
+                  available:
+                </p>
+                <ul className="flex list-disc flex-col gap-3 pl-4">
+                  {Object.values(ZABBIX_SYNC_SCOPES).map(({ name, description }) => {
+                    return (
+                      <li key={name}>
+                        <p className="text-mineshaft-300">
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                        </p>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            }
+          >
+            <Select
+              value={value}
+              onValueChange={(val) => {
+                onChange(val);
+                setValue("destinationConfig.hostId", "");
+                setValue("destinationConfig.hostName", "");
+              }}
+              className="w-full border border-mineshaft-500 capitalize"
+              position="popper"
+              placeholder="Select a scope..."
+              dropdownContainerClassName="max-w-none"
+            >
+              {Object.values(ZabbixSyncScope).map((scope) => (
+                <SelectItem className="capitalize" value={scope} key={scope}>
+                  {scope.replace("-", " ")}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      {currentScope === ZabbixSyncScope.Host && (
+        <Controller
+          name="destinationConfig.hostId"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message} label="Host">
+              <FilterableSelect
+                menuPlacement="top"
+                isLoading={isHostsPending && Boolean(connectionId)}
+                isDisabled={!connectionId}
+                value={hosts.find((host) => host.hostId === value) ?? null}
+                onChange={(option) => {
+                  const selectedOption = option as SingleValue<TZabbixHost>;
+                  onChange(selectedOption?.hostId ?? null);
+
+                  if (selectedOption) {
+                    setValue("destinationConfig.hostName", selectedOption.host);
+                  } else {
+                    setValue("destinationConfig.hostName", "");
+                  }
+                }}
+                options={hosts}
+                placeholder="Select a host..."
+                getOptionLabel={(option) => option.host}
+                getOptionValue={(option) => option.hostId}
+              />
+            </FormControl>
+          )}
+        />
+      )}
+      <Controller
+        control={control}
+        name="destinationConfig.macroType"
+        defaultValue={ZabbixMacroType.Secret}
+        render={({ field: { onChange, value }, fieldState: { error } }) => (
+          <FormControl isError={Boolean(error)} errorText={error?.message} label="Macro Type">
+            <Select
+              value={String(value)}
+              onValueChange={(val) => onChange(parseInt(val, 10))}
+              className="w-full border border-mineshaft-500 capitalize"
+              position="popper"
+              placeholder="Select a macro type..."
+              dropdownContainerClassName="max-w-none"
+            >
+              <SelectItem value={String(ZabbixMacroType.Text)} key="text">
+                Text
+              </SelectItem>
+              <SelectItem value={String(ZabbixMacroType.Secret)} key="secret">
+                Secret
+              </SelectItem>
+            </Select>
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx

@@ -23,6 +23,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
   const { control, watch } = useFormContext<TSecretSyncForm>();
 
   const destination = watch("destination");
+  const currentSyncOption = watch("syncOptions");
 
   const destinationName = SECRET_SYNC_MAP[destination].name;
 
@@ -57,6 +58,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
     case SecretSync.Flyio:
     case SecretSync.GitLab:
     case SecretSync.CloudflarePages:
+    case SecretSync.Zabbix:
       AdditionalSyncOptionsFieldsComponent = null;
       break;
     default:
@@ -127,8 +129,9 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
           {!syncOption?.canImportSecrets && (
             <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
               <FontAwesomeIcon className="mr-1" size="xs" icon={faTriangleExclamation} />
-              {destinationName} only supports overwriting destination secrets. Secrets not present
-              in Infisical will be removed from the destination.
+              {destinationName} only supports overwriting destination secrets.{" "}
+              {!currentSyncOption.disableSecretDeletion &&
+                "Secrets not present in Infisical will be removed from the destination."}
             </p>
           )}
         </>

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx

@@ -35,6 +35,7 @@ import { TeamCitySyncReviewFields } from "./TeamCitySyncReviewFields";
 import { TerraformCloudSyncReviewFields } from "./TerraformCloudSyncReviewFields";
 import { VercelSyncReviewFields } from "./VercelSyncReviewFields";
 import { WindmillSyncReviewFields } from "./WindmillSyncReviewFields";
+import { ZabbixSyncReviewFields } from "./ZabbixSyncReviewFields";
 
 export const SecretSyncReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm>();
@@ -124,6 +125,9 @@ export const SecretSyncReviewFields = () => {
     case SecretSync.CloudflarePages:
       DestinationFieldsComponent = <CloudflarePagesSyncReviewFields />;
       break;
+    case SecretSync.Zabbix:
+      DestinationFieldsComponent = <ZabbixSyncReviewFields />;
+      break;
     default:
       throw new Error(`Unhandled Destination Review Fields: ${destination}`);
   }

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/ZabbixSyncReviewFields.tsx

@@ -0,0 +1,31 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { ZabbixSyncScope } from "@app/hooks/api/appConnections/zabbix";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+const isTextMacro = (macroType: number) => macroType === 0;
+
+export const ZabbixSyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Zabbix }>();
+  const scope = watch("destinationConfig.scope");
+  const hostId = watch("destinationConfig.hostId");
+  const hostName = watch("destinationConfig.hostName");
+  const macroType = watch("destinationConfig.macroType");
+
+  return (
+    <>
+      <GenericFieldLabel label="Scope">{scope}</GenericFieldLabel>
+      {scope === ZabbixSyncScope.Host && (
+        <>
+          <GenericFieldLabel label="Host ID">{hostId}</GenericFieldLabel>
+          <GenericFieldLabel label="Host Name">{hostName}</GenericFieldLabel>
+        </>
+      )}
+      <GenericFieldLabel label="Macro Type">
+        {isTextMacro(macroType) ? "Text" : "Secret"}
+      </GenericFieldLabel>
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/schemas/secret-sync-schema.ts

@@ -22,6 +22,7 @@ import { TeamCitySyncDestinationSchema } from "./teamcity-sync-destination-schem
 import { TerraformCloudSyncDestinationSchema } from "./terraform-cloud-destination-schema";
 import { VercelSyncDestinationSchema } from "./vercel-sync-destination-schema";
 import { WindmillSyncDestinationSchema } from "./windmill-sync-destination-schema";
+import { ZabbixSyncDestinationSchema } from "./zabbix-sync-destination-schema";
 
 const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
   AwsParameterStoreSyncDestinationSchema,
@@ -45,7 +46,8 @@ const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
   RenderSyncDestinationSchema,
   FlyioSyncDestinationSchema,
   GitlabSyncDestinationSchema,
-  CloudflarePagesSyncDestinationSchema
+  CloudflarePagesSyncDestinationSchema,
+  ZabbixSyncDestinationSchema
 ]);
 
 export const SecretSyncFormSchema = SecretSyncUnionSchema;

frontend/src/components/secret-syncs/forms/schemas/zabbix-sync-destination-schema.ts

@@ -0,0 +1,27 @@
+import { z } from "zod";
+
+import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
+import { ZabbixMacroType, ZabbixSyncScope } from "@app/hooks/api/appConnections/zabbix";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const ZabbixSyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.Zabbix),
+    destinationConfig: z.discriminatedUnion("scope", [
+      z.object({
+        scope: z.literal(ZabbixSyncScope.Host),
+        hostId: z.string().trim().min(1, "Host ID required"),
+        hostName: z.string().trim().min(1, "Host name required"),
+        macroType: z.nativeEnum(ZabbixMacroType, {
+          errorMap: () => ({ message: "Macro type must be either 'text' or 'secret'" })
+        })
+      }),
+      z.object({
+        scope: z.literal(ZabbixSyncScope.Global),
+        macroType: z.nativeEnum(ZabbixMacroType, {
+          errorMap: () => ({ message: "Macro type must be either 'text' or 'secret'" })
+        })
+      })
+    ])
+  })
+);

frontend/src/components/utilities/ShouldWrapComponent.tsx

@@ -0,0 +1,20 @@
+import { ComponentType, ReactNode } from "react";
+
+type ShouldWrapProps<T extends Record<string, any>> = {
+  children: ReactNode;
+  wrapper: ComponentType<T & { children: ReactNode }>;
+  isWrapped?: boolean;
+} & T;
+
+export const ShouldWrap = <T extends Record<string, any>>({
+  children,
+  wrapper: Wrapper,
+  isWrapped = false,
+  ...wrapperProps
+}: ShouldWrapProps<T>) => {
+  if (isWrapped) {
+    return <Wrapper {...(wrapperProps as any)}>{children}</Wrapper>;
+  }
+
+  return children;
+};

frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-import { faCaretDown, faChevronRight, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis, faSort } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, ReactNode } from "@tanstack/react-router";
 import { LinkComponentProps } from "node_modules/@tanstack/react-router/dist/esm/link";
@@ -40,7 +40,7 @@ const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWitho
   ({ className, ...props }, ref) => (
     <li
       ref={ref}
-      className={twMerge("inline-flex items-center gap-1.5 font-medium", className)}
+      className={twMerge("inline-flex items-center gap-1.5 text-sm", className)}
       {...props}
     />
   )
@@ -78,13 +78,8 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWit
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={twMerge("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
-    {...props}
-  >
-    {children ?? <FontAwesomeIcon icon={faChevronRight} />}
+  <li role="presentation" aria-hidden="true" className={twMerge("", className)} {...props}>
+    {children ?? <p className="px-2 text-lg text-mineshaft-400/70">/</p>}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -139,12 +134,12 @@ const BreadcrumbContainer = ({ breadcrumbs }: { breadcrumbs: TBreadcrumbFormat[]
                 <DropdownMenu>
                   <DropdownMenuTrigger>
                     <BreadcrumbItem>
-                      <BreadcrumbSegment>
-                        {el.label} <FontAwesomeIcon icon={faCaretDown} size="sm" />
+                      <BreadcrumbSegment className="rounded-md px-2 py-1 py-2 hover:bg-mineshaft-600">
+                        {el.label} <FontAwesomeIcon icon={faSort} size="sm" />
                       </BreadcrumbSegment>
                     </BreadcrumbItem>
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent>
+                  <DropdownMenuContent side="right" align="start">
                     {el?.dropdownTitle && <DropdownMenuLabel>{el.dropdownTitle}</DropdownMenuLabel>}
                     {el.links.map((i, dropIndex) => (
                       <Link

frontend/src/components/v2/Button/Button.tsx

@@ -2,6 +2,8 @@ import { ButtonHTMLAttributes, forwardRef, ReactNode } from "react";
 import { cva, VariantProps } from "cva";
 import { twMerge } from "tailwind-merge";
 
+import { Lottie } from "../Lottie";
+
 type Props = {
   children: ReactNode;
   isDisabled?: boolean;
@@ -189,11 +191,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {isLoading && (
-          <img
-            src="/images/loading/loading.gif"
-            width={36}
-            alt="loading animation"
-            className="absolute rounded-xl opacity-80"
+          <Lottie
+            icon={
+              variant === "solid" && colorSchema === "primary"
+                ? "infisical_loading_bw"
+                : "infisical_loading"
+            }
+            isAutoPlay
+            className="absolute w-8 rounded-xl opacity-80 shadow-sm"
           />
         )}
         {leftIcon && (

frontend/src/components/v2/ContentLoader/ContentLoader.tsx

@@ -5,6 +5,8 @@ import { useEffect, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
+import { Lottie } from "../Lottie";
+
 type Props = {
   text?: string | string[];
   frequency?: number;
@@ -31,14 +33,7 @@ export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
         className
       )}
     >
-      <img
-        src="/images/loading/loading.gif"
-        height={70}
-        width={120}
-        alt="loading animation"
-        decoding="async"
-        loading="lazy"
-      />
+      <Lottie icon="infisical_loading" className="h-32 w-32" />
       {text && isTextArray && (
         <AnimatePresence mode="wait">
           <motion.div

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -20,6 +20,7 @@ type Props = {
   children?: ReactNode;
   deletionMessage?: ReactNode;
   buttonColorSchema?: "danger" | "primary" | "secondary" | "gray" | null;
+  isDisabled?: boolean;
 };
 
 export const DeleteActionModal = ({
@@ -34,6 +35,7 @@ export const DeleteActionModal = ({
   formContent,
   deletionMessage,
   buttonColorSchema = "danger",
+  isDisabled,
   children
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
@@ -70,7 +72,7 @@ export const DeleteActionModal = ({
             <Button
               className="mr-4"
               colorSchema={buttonColorSchema}
-              isDisabled={!(deleteKey === inputData) || isLoading}
+              isDisabled={!(deleteKey === inputData) || isLoading || isDisabled}
               onClick={onDelete}
               isLoading={isLoading}
             >

frontend/src/components/v2/Divider/Divider.tsx

@@ -7,7 +7,7 @@ interface IProps {
 export const Divider = ({ className }: IProps): JSX.Element => {
   return (
     <div className={twMerge("flex items-center px-2 opacity-50", className)}>
-      <div aria-hidden="true" className="h-5 w-full grow border border-t border-mineshaft-200" />
+      <div aria-hidden="true" className="h-1 w-full grow border-t border-mineshaft-300" />
     </div>
   );
 };

frontend/src/components/v2/HeaderResizer/HeaderResizer.tsx

@@ -0,0 +1,36 @@
+import { MouseEventHandler } from "react";
+
+export const HeaderResizer = ({
+  onMouseDown,
+  isActive,
+  scrollOffset,
+  heightOffset
+}: {
+  onMouseDown: MouseEventHandler<HTMLDivElement>;
+  isActive: boolean;
+  scrollOffset: number;
+  heightOffset: number;
+}) => {
+  return (
+    <>
+      <div
+        tabIndex={-1}
+        role="button"
+        className={`absolute left-0 z-40 h-0.5 w-full cursor-ns-resize hover:bg-blue-400/20 ${
+          isActive ? "bg-blue-400/75" : "bg-transparent"
+        }`}
+        onMouseDown={onMouseDown}
+        style={{
+          transform: "translateY(50%)",
+          top: heightOffset
+        }}
+      />
+      <div
+        style={{ left: `calc(50% + ${scrollOffset}px)`, top: heightOffset }}
+        className="pointer-events-none absolute z-30 -translate-x-1/2"
+      >
+        <div className="h-1 w-8 rounded bg-gray-400 opacity-50" />
+      </div>
+    </>
+  );
+};

frontend/src/components/v2/Lottie/Lottie.tsx

@@ -0,0 +1,37 @@
+import { forwardRef, ReactNode, useRef } from "react";
+import { DotLottie, DotLottieReact, Mode } from "@lottiefiles/dotlottie-react";
+
+export type LottieProps = {
+  // Kudos to https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2
+  children?: ReactNode;
+  icon?: string;
+  iconMode?: Mode;
+  className?: string;
+  isAutoPlay?: boolean;
+};
+
+export const Lottie = forwardRef<HTMLDivElement, LottieProps>(
+  ({ children, icon, iconMode, isAutoPlay, ...props }, ref): JSX.Element => {
+    const iconRef = useRef<DotLottie | null>(null);
+    return (
+      <div
+        onMouseEnter={() => iconRef.current?.play()}
+        onMouseLeave={() => iconRef.current?.stop()}
+        {...props}
+        ref={ref}
+      >
+        <DotLottieReact
+          dotLottieRefCallback={(el) => {
+            iconRef.current = el;
+          }}
+          mode={iconMode}
+          src={`/lotties/${icon}.json`}
+          loop
+          autoplay={isAutoPlay}
+          className="h-full w-full"
+        />
+        {children}
+      </div>
+    );
+  }
+);

frontend/src/components/v2/Lottie/index.tsx

@@ -0,0 +1 @@
+export { Lottie } from "./Lottie";

frontend/src/components/v2/Menu/Menu.tsx

@@ -1,5 +1,4 @@
-import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from "react";
-import { DotLottie, DotLottieReact, Mode } from "@lottiefiles/dotlottie-react";
+import { ComponentPropsWithRef, ElementType, ReactNode, Ref } from "react";
 import { twMerge } from "tailwind-merge";
 
 export type MenuProps = {
@@ -14,9 +13,8 @@ export const Menu = ({ children, className }: MenuProps): JSX.Element => {
 export type MenuItemProps<T extends ElementType> = {
   // Kudos to https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2
   as?: T;
-  children: ReactNode;
-  icon?: string;
-  iconMode?: Mode;
+  children?: ReactNode;
+  leftIcon?: ReactNode;
   description?: ReactNode;
   isDisabled?: boolean;
   isSelected?: boolean;
@@ -26,7 +24,7 @@ export type MenuItemProps<T extends ElementType> = {
 
 export const MenuItem = <T extends ElementType = "button">({
   children,
-  icon,
+  leftIcon,
   iconMode,
   className,
   isDisabled,
@@ -37,41 +35,21 @@ export const MenuItem = <T extends ElementType = "button">({
   inputRef,
   ...props
 }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
-  const iconRef = useRef<DotLottie | null>(null);
   return (
     <Item
       type="button"
       role="menuitem"
       className={twMerge(
-        "duration-50 group relative mt-0.5 flex w-full cursor-pointer items-center rounded px-1 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
+        "duration-50 group relative mt-0.5 flex w-full cursor-pointer items-center rounded px-2 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
         isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
         isDisabled && "cursor-not-allowed hover:bg-transparent",
         className
       )}
       ref={inputRef}
-      onMouseEnter={() => iconRef.current?.play()}
-      onMouseLeave={() => iconRef.current?.stop()}
       {...props}
     >
-      <div
-        className={`${
-          isSelected ? "visisble" : "invisible"
-        } absolute -left-[0.28rem] h-5 w-[0.07rem] rounded-md bg-primary`}
-      />
-      {icon && (
-        <div style={{ width: "22px", height: "22px" }} className="my-auto ml-1 mr-3">
-          <DotLottieReact
-            dotLottieRefCallback={(el) => {
-              iconRef.current = el;
-            }}
-            mode={iconMode}
-            src={`/lotties/${icon}.json`}
-            loop
-            className="h-full w-full"
-          />
-        </div>
-      )}
-      <span className="flex-grow text-left">{children}</span>
+      {leftIcon}
+      {children && <span className="flex-grow whitespace-nowrap text-left">{children}</span>}
       {description && <span className="mt-2 text-xs">{description}</span>}
     </Item>
   );
@@ -82,11 +60,14 @@ MenuItem.displayName = "MenuItem";
 export type MenuGroupProps = {
   children: ReactNode;
   title: ReactNode;
+  className?: string;
 };
 
-export const MenuGroup = ({ children, title }: MenuGroupProps): JSX.Element => (
+export const MenuGroup = ({ children, title, className }: MenuGroupProps): JSX.Element => (
   <>
-    <li className="px-2 pt-3 text-xs uppercase text-gray-400">{title}</li>
+    <li className={twMerge("px-2 pt-3 text-xs font-medium uppercase text-gray-400", className)}>
+      {title}
+    </li>
     {children}
   </>
 );

frontend/src/components/v2/Table/Table.tsx

@@ -45,10 +45,14 @@ export const Table = ({ children, className }: TableProps): JSX.Element => (
 export type THeadProps = {
   children: ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 };
 
-export const THead = ({ children, className }: THeadProps): JSX.Element => (
-  <thead className={twMerge("bg-mineshaft-800 text-xs uppercase text-bunker-300", className)}>
+export const THead = ({ children, className, style }: THeadProps): JSX.Element => (
+  <thead
+    className={twMerge("bg-mineshaft-800 text-xs uppercase text-bunker-300", className)}
+    style={style}
+  >
     {children}
   </thead>
 );
@@ -96,14 +100,16 @@ export const Tr = ({
 export type ThProps = {
   children?: ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 };
 
-export const Th = ({ children, className }: ThProps): JSX.Element => (
+export const Th = ({ children, className, style }: ThProps): JSX.Element => (
   <th
     className={twMerge(
       "border-b-2 border-mineshaft-600 bg-mineshaft-800 px-5 pb-3.5 pt-4 font-semibold",
       className
     )}
+    style={style}
   >
     {children}
   </th>

frontend/src/components/v2/index.tsx

@@ -10,6 +10,7 @@ export * from "./ConfirmActionModal";
 export * from "./ContentLoader";
 export * from "./DatePicker";
 export * from "./DeleteActionModal";
+export * from "./Divider";
 export * from "./Drawer";
 export * from "./Dropdown";
 export * from "./Editor";
@@ -22,6 +23,7 @@ export * from "./GenericFieldLabel";
 export * from "./HoverCardv2";
 export * from "./IconButton";
 export * from "./Input";
+export * from "./Lottie";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./NoticeBanner";