feat: done and dusted - new plasma ui

frontend/src/pages/auth/SignUpPage/SignUpPage.tsx

@@ -13,7 +13,6 @@ import SecurityClient from "@app/components/utilities/SecurityClient";
 import { useServerConfig } from "@app/context";
 import { useVerifySignupEmailVerificationCode } from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 export const SignUpPage = () => {
   const [email, setEmail] = useState("");
@@ -73,7 +72,7 @@ export const SignUpPage = () => {
 
       if (!serverDetails?.emailConfigured && step === 4) {
         navigate({
-          to: `/organization/${ProjectType.SecretManager}/overview` as const
+          to: "/organization/projects"
         });
       }
     })();

frontend/src/pages/organization/AdminPage/components/OrgAdminProjects/OrgAdminProjects.tsx

@@ -29,11 +29,11 @@ import {
   OrgPermissionAdminConsoleAction,
   OrgPermissionSubjects
 } from "@app/context/OrgPermissionContext/types";
+import { getProjectHomePage } from "@app/helpers/project";
 import { withPermission } from "@app/hoc";
 import { useDebounce } from "@app/hooks";
 import { useOrgAdminAccessProject, useOrgAdminGetProjects } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/workspace/types";
-import { getProjectHomePage } from "@app/helpers/project";
 
 export const OrgAdminProjects = withPermission(
   () => {

frontend/src/pages/organization/CertManagerSettingsPage/CertManagerSettingsPage.tsx

@@ -1,20 +0,0 @@
-import { Helmet } from "react-helmet";
-
-import { ProjectSettings } from "@app/components/projects/ProjectSettings";
-import { PageHeader } from "@app/components/v2";
-
-export const CertManagerSettingsPage = () => {
-  return (
-    <>
-      <Helmet>
-        <title>Cert Management Settings</title>
-      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl">
-          <PageHeader title="Cert Management Settings" />
-          <ProjectSettings />
-        </div>
-      </div>
-    </>
-  );
-};

frontend/src/pages/organization/CertManagerSettingsPage/route.tsx

@@ -1,20 +0,0 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { CertManagerSettingsPage } from "./CertManagerSettingsPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/cert-manager/settings"
-)({
-  component: CertManagerSettingsPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Cert Management",
-        link: linkOptions({ to: "/organization/cert-manager/overview" })
-      },
-      {
-        label: "Settings"
-      }
-    ]
-  })
-});

frontend/src/pages/organization/KmsSettingsPage/KmsSettingsPage.tsx

@@ -1,20 +0,0 @@
-import { Helmet } from "react-helmet";
-
-import { ProjectSettings } from "@app/components/projects/ProjectSettings";
-import { PageHeader } from "@app/components/v2";
-
-export const KmsSettingsPage = () => {
-  return (
-    <>
-      <Helmet>
-        <title>KMS Settings</title>
-      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl">
-          <PageHeader title="KMS Settings" />
-          <ProjectSettings />
-        </div>
-      </div>
-    </>
-  );
-};

frontend/src/pages/organization/KmsSettingsPage/route.tsx

@@ -1,20 +0,0 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { KmsSettingsPage } from "./KmsSettingsPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/kms/settings"
-)({
-  component: KmsSettingsPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "KMS",
-        link: linkOptions({ to: "/organization/kms/overview" })
-      },
-      {
-        label: "Settings"
-      }
-    ]
-  })
-});

frontend/src/pages/organization/SecretManagerSettingsPage/SecretManagerSettingsPage.tsx

@@ -1,20 +0,0 @@
-import { Helmet } from "react-helmet";
-
-import { ProjectSettings } from "@app/components/projects/ProjectSettings";
-import { PageHeader } from "@app/components/v2";
-
-export const SecretManagerSettingsPage = () => {
-  return (
-    <>
-      <Helmet>
-        <title>Secret Management Settings</title>
-      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl">
-          <PageHeader title="Secret Management Settings" />
-          <ProjectSettings />
-        </div>
-      </div>
-    </>
-  );
-};

frontend/src/pages/organization/SecretManagerSettingsPage/route.tsx

@@ -1,20 +0,0 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { SecretManagerSettingsPage } from "./SecretManagerSettingsPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/secret-manager/settings"
-)({
-  component: SecretManagerSettingsPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Secret Management",
-        link: linkOptions({ to: "/organization/projects" })
-      },
-      {
-        label: "Settings"
-      }
-    ]
-  })
-});

frontend/src/pages/organization/SecretScanningSettingsPage/SecretScanningSettingsPage.tsx

@@ -1,20 +0,0 @@
-import { Helmet } from "react-helmet";
-
-import { ProjectSettings } from "@app/components/projects/ProjectSettings";
-import { PageHeader } from "@app/components/v2";
-
-export const SecretScanningSettingsPage = () => {
-  return (
-    <>
-      <Helmet>
-        <title>Secret Scanning Settings</title>
-      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl">
-          <PageHeader title="Secret Scanning Settings" />
-          <ProjectSettings />
-        </div>
-      </div>
-    </>
-  );
-};

frontend/src/pages/organization/SecretScanningSettingsPage/route.tsx

@@ -1,20 +0,0 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { SecretScanningSettingsPage } from "./SecretScanningSettingsPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning/settings"
-)({
-  component: SecretScanningSettingsPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Secret Scanning",
-        link: linkOptions({ to: "/organization/secret-scanning/overview" })
-      },
-      {
-        label: "Settings"
-      }
-    ]
-  })
-});

frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -1,11 +1,8 @@
 import { useState } from "react";
-import { DotLottieReact } from "@lottiefiles/dotlottie-react";
-import { Link, useSearch } from "@tanstack/react-router";
+import { useSearch } from "@tanstack/react-router";
 
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { ROUTE_PATHS } from "@app/const/routes";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
 import { ImportTab } from "../ImportTab";
@@ -14,6 +11,7 @@ import { OrgEncryptionTab } from "../OrgEncryptionTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
 import { OrgSecurityTab } from "../OrgSecurityTab";
 import { OrgWorkflowIntegrationTab } from "../OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab";
+import { ProjectTemplatesTab } from "../ProjectTemplatesTab";
 
 export const OrgTabGroup = () => {
   const search = useSearch({
@@ -33,60 +31,7 @@ export const OrgTabGroup = () => {
     {
       name: "Project Templates",
       key: "project-templates",
-      // scott: temporary, remove once users have adjusted
-      // eslint-disable-next-line react/no-unstable-nested-components
-      component: () => (
-        <div>
-          <NoticeBannerV2
-            className="mx-auto"
-            titleClassName="text-base"
-            title="Project Templates Relocated"
-          >
-            <p className="mt-1 text-mineshaft-300">
-              Project templates have been relocated and are now product specific:
-            </p>
-            <ul className="mb-1 flex gap-x-4 text-mineshaft-200">
-              {[
-                {
-                  type: ProjectType.SecretManager,
-                  label: "Secret Management",
-                  icon: "sliding-carousel"
-                },
-                {
-                  type: ProjectType.CertificateManager,
-                  label: "Certificate Management",
-                  icon: "note"
-                },
-                {
-                  type: ProjectType.KMS,
-                  label: "KMS",
-                  icon: "unlock"
-                },
-                {
-                  type: ProjectType.SSH,
-                  label: "SSH",
-                  icon: "verified"
-                }
-              ].map(({ label, type, icon }, index) => (
-                <li key={`project-template-${type}`}>
-                  <Link
-                    to={`/organization/${type}/settings`}
-                    className="mt-1 flex items-center gap-x-2 hover:text-mineshaft-100"
-                  >
-                    {index !== 0 && <span className="text-mineshaft-300">•</span>}
-                    <DotLottieReact
-                      src={`/lotties/${icon}.json`}
-                      loop
-                      className="mt-0.5 h-5 w-5"
-                    />{" "}
-                    <span className="underline underline-offset-2">{label}</span>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </NoticeBannerV2>
-        </div>
-      )
+      component: ProjectTemplatesTab
     },
     { name: "KMIP", key: "kmip", component: KmipTab }
   ];

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/ProjectTemplatesTab.tsx

@@ -0,0 +1,9 @@
+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/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/DeleteProjectTemplateModal.tsx

@@ -0,0 +1,49 @@
+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/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/EditProjectTemplateSection.tsx

@@ -0,0 +1,55 @@
+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/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx

@@ -0,0 +1,119 @@
+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 { 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 } = 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>
+      <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/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx

@@ -0,0 +1,193 @@
+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/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx

@@ -0,0 +1,289 @@
+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}
+                        >
+                          <FontAwesomeIcon icon={faTrash} />
+                        </IconButton>
+                      )}
+                    </OrgPermissionCan>
+                  </Td>
+                )}
+              </Tr>
+            ))}
+          </TBody>
+        </Table>
+      </TableContainer>
+    </form>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateRolesSection.tsx

@@ -0,0 +1,223 @@
+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/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/index.tsx

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

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/index.tsx

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

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplateDetailsModal.tsx

@@ -0,0 +1,144 @@
+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 {
+  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 {
+    handleSubmit,
+    register,
+    formState: { isSubmitting, errors }
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: projectTemplate?.name,
+      description: projectTemplate?.description
+    }
+  });
+
+  const onFormSubmit = async (data: FormData) => {
+    const mutation = projectTemplate
+      ? updateProjectTemplate.mutateAsync({ templateId: projectTemplate.id, ...data })
+      : createProjectTemplate.mutateAsync({ ...data });
+
+    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/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx

@@ -0,0 +1,117 @@
+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/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesTable.tsx

@@ -0,0 +1,193 @@
+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 { usePopUp } from "@app/hooks";
+import { TProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
+
+import { DeleteProjectTemplateModal } from "./DeleteProjectTemplateModal";
+
+type Props = {
+  onEdit: (projectTemplate: TProjectTemplate) => void;
+};
+
+export const ProjectTemplatesTable = ({ onEdit }: Props) => {
+  const { subscription } = useSubscription();
+
+  const { isPending, data: projectTemplates = [] } = useListProjectTemplates({
+    enabled: subscription?.projectTemplates
+  });
+
+  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 colSpan = 4;
+
+  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>
+              <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>
+                  <Td className="pl-14">
+                    {environments?.length || 0}
+                    {environments?.length && (
+                      <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/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/index.tsx

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

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/index.tsx

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

frontend/src/pages/organization/SshSettingsPage/SshSettingsPage.tsx

@@ -1,20 +0,0 @@
-import { Helmet } from "react-helmet";
-
-import { ProjectSettings } from "@app/components/projects/ProjectSettings";
-import { PageHeader } from "@app/components/v2";
-
-export const SshSettingsPage = () => {
-  return (
-    <>
-      <Helmet>
-        <title>SSH Settings</title>
-      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl">
-          <PageHeader title="SSH Settings" />
-          <ProjectSettings />
-        </div>
-      </div>
-    </>
-  );
-};

frontend/src/pages/organization/SshSettingsPage/route.tsx

@@ -1,20 +0,0 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { SshSettingsPage } from "./SshSettingsPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/ssh/settings"
-)({
-  component: SshSettingsPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "SSH",
-        link: linkOptions({ to: "/organization/ssh/overview" })
-      },
-      {
-        label: "Settings"
-      }
-    ]
-  })
-});

frontend/src/pages/project/GroupDetailsByIDPage/route.tsx

@@ -1,8 +1,9 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
-import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
+import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
+
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/groups/$groupId"
 )({

frontend/src/pages/project/IdentityDetailsByIDPage/route.tsx

@@ -1,8 +1,9 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
-import { IdentityDetailsByIDPage } from "./IdentityDetailsByIDPage";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
+import { IdentityDetailsByIDPage } from "./IdentityDetailsByIDPage";
+
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/identities/$identityId"
 )({

frontend/src/pages/project/MemberDetailsByIDPage/route.tsx

@@ -1,8 +1,9 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
-import { MemberDetailsByIDPage } from "./MemberDetailsByIDPage";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
+import { MemberDetailsByIDPage } from "./MemberDetailsByIDPage";
+
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/members/$membershipId"
 )({

frontend/src/pages/project/RoleDetailsBySlugPage/route.tsx

@@ -1,8 +1,9 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
-import { RoleDetailsBySlugPage } from "./RoleDetailsBySlugPage";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
+import { RoleDetailsBySlugPage } from "./RoleDetailsBySlugPage";
+
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/roles/$roleSlug"
 )({

frontend/src/pages/project/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -14,7 +14,6 @@ import {
 } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { useDeleteWorkspace, useGetWorkspaceUsers, useLeaveProject } from "@app/hooks/api";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 export const DeleteProjectSection = () => {
@@ -64,7 +63,7 @@ export const DeleteProjectSection = () => {
       });
 
       navigate({
-        to: `/organization/${ProjectType.SecretManager}/overview` as const
+        to: "/organization/projects"
       });
       handlePopUpClose("deleteWorkspace");
     } catch (err) {
@@ -115,7 +114,7 @@ export const DeleteProjectSection = () => {
       });
 
       navigate({
-        to: `/organization/${ProjectType.SecretManager}/overview` as const
+        to: "/organization/projects"
       });
     } catch (err) {
       console.error(err);

frontend/src/pages/project/SettingsPage/route.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
 
-import { SettingsPage } from './SettingsPage'
+import { SettingsPage } from "./SettingsPage";
 
 export const Route = createFileRoute(
-  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/settings',
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/settings"
 )({
   component: SettingsPage,
   beforeLoad: ({ context }) => {
@@ -11,9 +11,9 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: 'Settings',
-        },
-      ],
-    }
-  },
-})
+          label: "Settings"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourceRow.tsx

@@ -156,7 +156,7 @@ export const SecretScanningDataSourceRow = ({
               onClick={(e) => {
                 e.stopPropagation();
                 navigate({
-                  to: "/secret-scanning/$projectId/findings",
+                  to: "/projects/$projectId/secret-scanning/findings",
                   params: {
                     projectId
                   },

frontend/src/pages/secret-scanning/SettingsPage/components/AuditLogsRetentionSection/AuditLogsRetentionSection.tsx

@@ -1,129 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input } from "@app/components/v2";
-import { useProjectPermission, useSubscription, useWorkspace } from "@app/context";
-import { usePopUp } from "@app/hooks";
-import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
-import { useUpdateWorkspaceAuditLogsRetention } from "@app/hooks/api/workspace/queries";
-
-const formSchema = z.object({
-  auditLogsRetentionDays: z.coerce.number().min(0)
-});
-
-type TForm = z.infer<typeof formSchema>;
-
-export const AuditLogsRetentionSection = () => {
-  const { mutateAsync: updateAuditLogsRetention } = useUpdateWorkspaceAuditLogsRetention();
-
-  const { currentWorkspace } = useWorkspace();
-  const { membership } = useProjectPermission();
-  const { subscription } = useSubscription();
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
-
-  const {
-    control,
-    formState: { isSubmitting, isDirty },
-    handleSubmit
-  } = useForm<TForm>({
-    resolver: zodResolver(formSchema),
-    values: {
-      auditLogsRetentionDays:
-        currentWorkspace?.auditLogsRetentionDays ?? subscription?.auditLogsRetentionDays ?? 0
-    }
-  });
-
-  if (!currentWorkspace) return null;
-
-  const handleAuditLogsRetentionSubmit = async ({ auditLogsRetentionDays }: TForm) => {
-    try {
-      if (!subscription?.auditLogs) {
-        handlePopUpOpen("upgradePlan", {
-          description: "You can only configure audit logs retention if you upgrade your plan."
-        });
-
-        return;
-      }
-
-      if (subscription && auditLogsRetentionDays > subscription?.auditLogsRetentionDays) {
-        handlePopUpOpen("upgradePlan", {
-          description:
-            "To update your audit logs retention period to a higher value, upgrade your plan."
-        });
-
-        return;
-      }
-
-      await updateAuditLogsRetention({
-        auditLogsRetentionDays,
-        projectSlug: currentWorkspace.slug
-      });
-
-      createNotification({
-        text: "Successfully updated audit logs retention period",
-        type: "success"
-      });
-    } catch {
-      createNotification({
-        text: "Failed updating audit logs retention period",
-        type: "error"
-      });
-    }
-  };
-
-  // render only for dedicated/self-hosted instances of Infisical
-  if (
-    window.location.origin.includes("https://app.infisical.com") ||
-    window.location.origin.includes("https://gamma.infisical.com")
-  ) {
-    return null;
-  }
-
-  const isAdmin = membership.roles.includes(ProjectMembershipRole.Admin);
-  return (
-    <>
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="flex w-full items-center justify-between">
-          <p className="text-xl font-semibold">Audit Logs Retention</p>
-        </div>
-        <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
-          Set the number of days to keep your project audit logs.
-        </p>
-        <form onSubmit={handleSubmit(handleAuditLogsRetentionSubmit)} autoComplete="off">
-          <div className="max-w-xs">
-            <Controller
-              control={control}
-              defaultValue={0}
-              name="auditLogsRetentionDays"
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                  label="Number of days"
-                >
-                  <Input {...field} type="number" min={1} step={1} isDisabled={!isAdmin} />
-                </FormControl>
-              )}
-            />
-          </div>
-          <Button
-            colorSchema="secondary"
-            type="submit"
-            isLoading={isSubmitting}
-            disabled={!isAdmin || !isDirty}
-          >
-            Save
-          </Button>
-        </form>
-      </div>
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text={(popUp.upgradePlan?.data as { description: string })?.description}
-      />
-    </>
-  );
-};

frontend/src/pages/secret-scanning/SettingsPage/components/AuditLogsRetentionSection/index.tsx

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

frontend/src/pages/secret-scanning/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -1,184 +0,0 @@
-import { useMemo } from "react";
-import { useNavigate } from "@tanstack/react-router";
-
-import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal } from "@app/components/v2";
-import { LeaveProjectModal } from "@app/components/v2/LeaveProjectModal";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useOrganization,
-  useProjectPermission,
-  useWorkspace
-} from "@app/context";
-import { useToggle } from "@app/hooks";
-import { useDeleteWorkspace, useGetWorkspaceUsers, useLeaveProject } from "@app/hooks/api";
-import { ProjectType } from "@app/hooks/api/workspace/types";
-import { usePopUp } from "@app/hooks/usePopUp";
-
-export const DeleteProjectSection = () => {
-  const navigate = useNavigate();
-
-  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    "deleteWorkspace",
-    "leaveWorkspace"
-  ] as const);
-
-  const { currentOrg } = useOrganization();
-  const { hasProjectRole, membership } = useProjectPermission();
-  const { currentWorkspace } = useWorkspace();
-  const [isDeleting, setIsDeleting] = useToggle();
-  const [isLeaving, setIsLeaving] = useToggle();
-  const deleteWorkspace = useDeleteWorkspace();
-  const leaveProject = useLeaveProject();
-  const { data: members, isPending: isMembersLoading } = useGetWorkspaceUsers(
-    currentWorkspace?.id || ""
-  );
-
-  // If isNoAccessMember is true, then the user can't read the workspace members. So we need to handle this case separately.
-  const isNoAccessMember = hasProjectRole("no-access");
-
-  const isOnlyAdminMember = useMemo(() => {
-    if (!members || !membership || !hasProjectRole("admin")) return false;
-
-    const adminMembers = members.filter(
-      (member) => member.roles.map((r) => r.role).includes("admin") && member.id !== membership.id // exclude the current user
-    );
-
-    return !adminMembers.length;
-  }, [members, membership]);
-
-  const handleDeleteWorkspaceSubmit = async () => {
-    setIsDeleting.on();
-    try {
-      if (!currentWorkspace?.id) return;
-
-      await deleteWorkspace.mutateAsync({
-        workspaceID: currentWorkspace?.id
-      });
-
-      createNotification({
-        text: "Successfully deleted project",
-        type: "success"
-      });
-
-      navigate({
-        to: `/organization/${ProjectType.SecretScanning}/overview` as const
-      });
-      handlePopUpClose("deleteWorkspace");
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to delete project",
-        type: "error"
-      });
-    } finally {
-      setIsDeleting.off();
-    }
-  };
-
-  const handleLeaveWorkspaceSubmit = async () => {
-    try {
-      setIsLeaving.on();
-
-      if (!currentWorkspace?.id || !currentOrg?.id) return;
-
-      // If there's no members, and the user has access to read members, something went wrong.
-      if (!members && !isNoAccessMember) return;
-
-      // If the user has elevated permissions and can read members:
-      if (!isNoAccessMember) {
-        if (!members) return;
-
-        if (members.length < 2) {
-          createNotification({
-            text: "You can't leave the project as you are the only member",
-            type: "error"
-          });
-          return;
-        }
-        // If the user has access to read members, and there's less than 1 admin member excluding the current user, they can't leave the project.
-        if (isOnlyAdminMember) {
-          createNotification({
-            text: "You can't leave a project with no admin members left. Promote another member to admin first.",
-            type: "error"
-          });
-          return;
-        }
-      }
-
-      // If it's actually a no-access member, then we don't really care about the members.
-
-      await leaveProject.mutateAsync({
-        workspaceId: currentWorkspace.id
-      });
-
-      navigate({
-        to: `/organization/${ProjectType.SecretScanning}/overview` as const
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to leave project",
-        type: "error"
-      });
-    } finally {
-      setIsLeaving.off();
-    }
-  };
-
-  return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Danger Zone</p>
-      <div className="space-x-4">
-        <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Project}>
-          {(isAllowed) => (
-            <Button
-              isLoading={isDeleting}
-              isDisabled={!isAllowed || isDeleting}
-              colorSchema="danger"
-              variant="outline_bg"
-              type="submit"
-              onClick={() => handlePopUpOpen("deleteWorkspace")}
-            >
-              {`Delete ${currentWorkspace?.name}`}
-            </Button>
-          )}
-        </ProjectPermissionCan>
-        {!isOnlyAdminMember && (
-          <Button
-            disabled={isMembersLoading || (members && members?.length < 2)}
-            isLoading={isLeaving}
-            colorSchema="danger"
-            variant="outline_bg"
-            type="submit"
-            onClick={() => handlePopUpOpen("leaveWorkspace")}
-          >
-            {`Leave ${currentWorkspace?.name}`}
-          </Button>
-        )}
-      </div>
-
-      <DeleteActionModal
-        isOpen={popUp.deleteWorkspace.isOpen}
-        title="Are you sure you want to delete this project?"
-        subTitle={`Permanently delete ${currentWorkspace?.name} and all of its data. This action is not reversible, so please be careful.`}
-        onChange={(isOpen) => handlePopUpToggle("deleteWorkspace", isOpen)}
-        deleteKey="confirm"
-        buttonText="Delete Project"
-        onDeleteApproved={handleDeleteWorkspaceSubmit}
-      />
-
-      <LeaveProjectModal
-        isOpen={popUp.leaveWorkspace.isOpen}
-        title="Are you sure you want to leave this project?"
-        subTitle={`If you leave ${currentWorkspace?.name} you will lose access to the project and its contents.`}
-        onChange={(isOpen) => handlePopUpToggle("leaveWorkspace", isOpen)}
-        deleteKey="confirm"
-        buttonText="Leave Project"
-        onLeaveApproved={handleLeaveWorkspaceSubmit}
-      />
-    </div>
-  );
-};

frontend/src/pages/secret-scanning/SettingsPage/components/DeleteProjectSection/index.tsx

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

frontend/src/pages/secret-scanning/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -1,14 +0,0 @@
-import { ProjectOverviewChangeSection } from "@app/components/project/ProjectOverviewChangeSection";
-
-import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
-import { DeleteProjectSection } from "../DeleteProjectSection";
-
-export const ProjectGeneralTab = () => {
-  return (
-    <div>
-      <ProjectOverviewChangeSection showSlugField />
-      <AuditLogsRetentionSection />
-      <DeleteProjectSection />
-    </div>
-  );
-};

frontend/src/pages/secret-scanning/SettingsPage/components/ProjectGeneralTab/index.tsx

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

frontend/src/pages/secret-scanning/SettingsPage/components/index.tsx

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