Merge branch 'main' into feat/zabbixSyncIntegration

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/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/1PasswordSyncFields.tsx

@@ -4,7 +4,7 @@ import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
-import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import { FilterableSelect, FormControl, Input, Tooltip } from "@app/components/v2";
 import {
   TOnePassVault,
   useOnePassConnectionListVaults
@@ -32,6 +32,7 @@ export const OnePassSyncFields = () => {
       <SecretSyncConnectionField
         onChange={() => {
           setValue("destinationConfig.vaultId", "");
+          setValue("destinationConfig.valueLabel", "");
         }}
       />
 
@@ -69,6 +70,22 @@ export const OnePassSyncFields = () => {
           </FormControl>
         )}
       />
+
+      <Controller
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            isOptional
+            label="Value Label"
+            tooltipText="It's the label of the 1Password item field which will hold your secret value. For example, if you were to sync Infisical secret 'foo: bar', the 1Password item equivalent would have an item title of 'foo', and a field on that item 'value: bar'. The field label 'value' is what gets changed by this option."
+          >
+            <Input value={value} onChange={onChange} placeholder="value" />
+          </FormControl>
+        )}
+        control={control}
+        name="destinationConfig.valueLabel"
+      />
     </>
   );
 };

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

@@ -76,7 +76,7 @@ export const GcpSyncFields = () => {
             helperText={
               <Tooltip
                 className="max-w-md"
-                content="Ensure that you've enabled the Secret Manager API and Cloud Resource Manager API on your GCP project. Additionally, make sure that the service account is assigned the appropriate GCP roles."
+                content="Ensure that you've enabled the Secret Manager API, Cloud Resource Manager API, and Service Usage API on your GCP project. Additionally, make sure that the service account is assigned the appropriate GCP roles."
               >
                 <div>
                   <span>Don&#39;t see the project you&#39;re looking for?</span>{" "}

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

@@ -6,7 +6,15 @@ import { SecretSync } from "@app/hooks/api/secretSyncs";
 
 export const OnePassSyncReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.OnePass }>();
-  const vaultId = watch("destinationConfig.vaultId");
+  const [vaultId, valueLabel] = watch([
+    "destinationConfig.vaultId",
+    "destinationConfig.valueLabel"
+  ]);
 
-  return <GenericFieldLabel label="Vault ID">{vaultId}</GenericFieldLabel>;
+  return (
+    <>
+      <GenericFieldLabel label="Vault ID">{vaultId}</GenericFieldLabel>
+      <GenericFieldLabel label="Value Key">{valueLabel || "value"}</GenericFieldLabel>
+    </>
+  );
 };

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

@@ -7,7 +7,8 @@ export const OnePassSyncDestinationSchema = BaseSecretSyncSchema().merge(
   z.object({
     destination: z.literal(SecretSync.OnePass),
     destinationConfig: z.object({
-      vaultId: z.string().trim().min(1, "Vault ID required")
+      vaultId: z.string().trim().min(1, "Vault ID required"),
+      valueLabel: z.string().trim().optional()
     })
   })
 );

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/GenericFieldLabel/GenericFieldLabel.tsx

@@ -1,4 +1,6 @@
 import { ReactNode } from "react";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 type Props = {
@@ -7,6 +9,7 @@ type Props = {
   className?: string;
   labelClassName?: string;
   truncate?: boolean;
+  icon?: IconDefinition;
 };
 
 export const GenericFieldLabel = ({
@@ -14,11 +17,15 @@ export const GenericFieldLabel = ({
   children,
   className,
   labelClassName,
-  truncate
+  truncate,
+  icon
 }: Props) => {
   return (
     <div className={twMerge("min-w-0", className)}>
-      <p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
+      <div className="flex items-center gap-1.5">
+        {icon && <FontAwesomeIcon icon={icon} className="text-mineshaft-400" size="sm" />}
+        <p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
+      </div>
       {children ? (
         <p className={twMerge("text-sm text-mineshaft-100", truncate && "truncate")}>{children}</p>
       ) : (

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/Pagination/Pagination.tsx

@@ -64,7 +64,7 @@ export const Pagination = ({
               <FontAwesomeIcon className="text-xs" icon={faCaretDown} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="min-w-fit">
+          <DropdownMenuContent sideOffset={2} className="min-w-fit">
             {perPageList.map((perPageOption) => (
               <DropdownMenuItem
                 key={`pagination-per-page-options-${perPageOption}`}

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";