feat: done and dusted - new plasma ui

backend/src/db/migrations/20250626101747_default-project-type.ts

@@ -1,5 +1,6 @@
 import { Knex } from "knex";
-import { TableName, ProjectType } from "../schemas";
+
+import { ProjectType, TableName } from "../schemas";
 
 export async function up(knex: Knex): Promise<void> {
   const hasTypeColumn = await knex.schema.hasColumn(TableName.Project, "type");
@@ -13,7 +14,19 @@ export async function up(knex: Knex): Promise<void> {
     await knex(TableName.Project).update({
       // eslint-disable-next-line
       // @ts-ignore this is because this field is created later
-      defaultType: knex.raw("type")
+      defaultType: knex.raw(`
+    CASE 
+      WHEN "type" IS NULL OR "type" = '' THEN 'secret-manager' 
+      ELSE "type" 
+    END
+  `)
+    });
+  }
+
+  const hasTemplateTypeColumn = await knex.schema.hasColumn(TableName.ProjectTemplates, "type");
+  if (hasTemplateTypeColumn) {
+    await knex.schema.alterTable(TableName.ProjectTemplates, (t) => {
+      t.string("type").nullable().alter();
     });
   }
 }

backend/src/db/schemas/project-templates.ts

@@ -16,7 +16,7 @@ export const ProjectTemplatesSchema = z.object({
   orgId: z.string().uuid(),
   createdAt: z.date(),
   updatedAt: z.date(),
-  type: z.string().default("secret-manager")
+  type: z.string().nullable().optional()
 });
 
 export type TProjectTemplates = z.infer<typeof ProjectTemplatesSchema>;

backend/src/ee/routes/v1/project-template-router.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-import { ProjectMembershipRole, ProjectTemplatesSchema, ProjectType } from "@app/db/schemas";
+import { ProjectMembershipRole, ProjectTemplatesSchema } from "@app/db/schemas";
 import { EventType } from "@app/ee/services/audit-log/audit-log-types";
 import { ProjectPermissionV2Schema } from "@app/ee/services/permission/project-permission";
 import { isInfisicalProjectTemplate } from "@app/ee/services/project-template/project-template-fns";
@@ -104,9 +104,6 @@ export const registerProjectTemplateRouter = async (server: FastifyZodProvider)
       hide: false,
       tags: [ApiDocsTags.ProjectTemplates],
       description: "List project templates for the current organization.",
-      querystring: z.object({
-        type: z.nativeEnum(ProjectType).optional().describe(ProjectTemplates.LIST.type)
-      }),
       response: {
         200: z.object({
           projectTemplates: SanitizedProjectTemplateSchema.array()
@@ -115,8 +112,7 @@ export const registerProjectTemplateRouter = async (server: FastifyZodProvider)
     },
     onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
     handler: async (req) => {
-      const { type } = req.query;
-      const projectTemplates = await server.services.projectTemplate.listProjectTemplatesByOrg(req.permission, type);
+      const projectTemplates = await server.services.projectTemplate.listProjectTemplatesByOrg(req.permission);
 
       const auditTemplates = projectTemplates.filter((template) => !isInfisicalProjectTemplate(template.name));
 
@@ -188,7 +184,6 @@ export const registerProjectTemplateRouter = async (server: FastifyZodProvider)
       tags: [ApiDocsTags.ProjectTemplates],
       description: "Create a project template.",
       body: z.object({
-        type: z.nativeEnum(ProjectType).describe(ProjectTemplates.CREATE.type),
         name: slugSchema({ field: "name" })
           .refine((val) => !isInfisicalProjectTemplate(val), {
             message: `The requested project template name is reserved.`
@@ -284,7 +279,6 @@ export const registerProjectTemplateRouter = async (server: FastifyZodProvider)
       tags: [ApiDocsTags.ProjectTemplates],
       description: "Delete a project template.",
       params: z.object({ templateId: z.string().uuid().describe(ProjectTemplates.DELETE.templateId) }),
-
       response: {
         200: z.object({
           projectTemplate: SanitizedProjectTemplateSchema

backend/src/ee/services/license/license-fns.ts

@@ -52,11 +52,11 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
   },
   pkiEst: false,
   enforceMfa: false,
-  projectTemplates: false,
+  projectTemplates: true,
   kmip: false,
   gateway: false,
-  sshHostGroups: false,
-  secretScanning: false,
+  sshHostGroups: true,
+  secretScanning: true,
   enterpriseSecretSyncs: false,
   enterpriseAppConnections: false
 });

backend/src/ee/services/permission/permission-dal.ts

@@ -91,7 +91,7 @@ export interface TPermissionDALFactory {
         userId: string;
         projectId: string;
         username: string;
-        projectType: string;
+        projectType?: string | null;
         id: string;
         createdAt: Date;
         updatedAt: Date;
@@ -163,7 +163,7 @@ export interface TPermissionDALFactory {
         createdAt: Date;
         updatedAt: Date;
         orgId: string;
-        projectType: string;
+        projectType?: string | null;
         shouldUseNewPrivilegeSystem: boolean;
         orgAuthEnforced: boolean;
         metadata: {
@@ -201,7 +201,7 @@ export interface TPermissionDALFactory {
       userId: string;
       projectId: string;
       username: string;
-      projectType: string;
+      projectType?: string | null;
       id: string;
       createdAt: Date;
       updatedAt: Date;
@@ -267,7 +267,7 @@ export interface TPermissionDALFactory {
       createdAt: Date;
       updatedAt: Date;
       orgId: string;
-      projectType: string;
+      projectType?: string | null;
       orgAuthEnforced: boolean;
       metadata: {
         id: string;

backend/src/ee/services/project-template/project-template-fns.ts

@@ -1,4 +1,3 @@
-import { ProjectType } from "@app/db/schemas";
 import {
   InfisicalProjectTemplate,
   TUnpackedPermission
@@ -7,21 +6,18 @@ import { getPredefinedRoles } from "@app/services/project-role/project-role-fns"
 
 import { ProjectTemplateDefaultEnvironments } from "./project-template-constants";
 
-export const getDefaultProjectTemplate = (orgId: string, type: ProjectType) => ({
+export const getDefaultProjectTemplate = (orgId: string) => ({
   id: "b11b49a9-09a9-4443-916a-4246f9ff2c69", // random ID to appease zod
-  type,
   name: InfisicalProjectTemplate.Default,
   createdAt: new Date(),
   updatedAt: new Date(),
-  description: `Infisical's ${type} default project template`,
-  environments: type === ProjectType.SecretManager ? ProjectTemplateDefaultEnvironments : null,
-  roles: [...getPredefinedRoles({ projectId: "project-template", projectType: type })].map(
-    ({ name, slug, permissions }) => ({
-      name,
-      slug,
-      permissions: permissions as TUnpackedPermission[]
-    })
-  ),
+  description: `Infisical's default project template`,
+  environments: ProjectTemplateDefaultEnvironments,
+  roles: getPredefinedRoles({ projectId: "project-template" }) as Array<{
+    name: string;
+    slug: string;
+    permissions: TUnpackedPermission[];
+  }>,
   orgId
 });
 

backend/src/ee/services/project-template/project-template-service.ts

@@ -1,7 +1,7 @@
 import { ForbiddenError } from "@casl/ability";
 import { packRules } from "@casl/ability/extra";
 
-import { ProjectType, TProjectTemplates } from "@app/db/schemas";
+import { TProjectTemplates } from "@app/db/schemas";
 import { TLicenseServiceFactory } from "@app/ee/services/license/license-service";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/ee/services/permission/org-permission";
 import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service-types";
@@ -29,13 +29,11 @@ const $unpackProjectTemplate = ({ roles, environments, ...rest }: TProjectTempla
   ...rest,
   environments: environments as TProjectTemplateEnvironment[],
   roles: [
-    ...getPredefinedRoles({ projectId: "project-template", projectType: rest.type as ProjectType }).map(
-      ({ name, slug, permissions }) => ({
-        name,
-        slug,
-        permissions: permissions as TUnpackedPermission[]
-      })
-    ),
+    ...getPredefinedRoles({ projectId: "project-template" }).map(({ name, slug, permissions }) => ({
+      name,
+      slug,
+      permissions: permissions as TUnpackedPermission[]
+    })),
     ...(roles as TProjectTemplateRole[]).map((role) => ({
       ...role,
       permissions: unpackPermissions(role.permissions)
@@ -48,10 +46,7 @@ export const projectTemplateServiceFactory = ({
   permissionService,
   projectTemplateDAL
 }: TProjectTemplatesServiceFactoryDep): TProjectTemplateServiceFactory => {
-  const listProjectTemplatesByOrg: TProjectTemplateServiceFactory["listProjectTemplatesByOrg"] = async (
-    actor,
-    type
-  ) => {
+  const listProjectTemplatesByOrg: TProjectTemplateServiceFactory["listProjectTemplatesByOrg"] = async (actor) => {
     const plan = await licenseService.getPlan(actor.orgId);
 
     if (!plan.projectTemplates)
@@ -70,14 +65,11 @@ export const projectTemplateServiceFactory = ({
     ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Read, OrgPermissionSubjects.ProjectTemplates);
 
     const projectTemplates = await projectTemplateDAL.find({
-      orgId: actor.orgId,
-      ...(type ? { type } : {})
+      orgId: actor.orgId
     });
 
     return [
-      ...(type
-        ? [getDefaultProjectTemplate(actor.orgId, type)]
-        : Object.values(ProjectType).map((projectType) => getDefaultProjectTemplate(actor.orgId, projectType))),
+      getDefaultProjectTemplate(actor.orgId),
       ...projectTemplates.map((template) => $unpackProjectTemplate(template))
     ];
   };
@@ -142,7 +134,7 @@ export const projectTemplateServiceFactory = ({
   };
 
   const createProjectTemplate: TProjectTemplateServiceFactory["createProjectTemplate"] = async (
-    { roles, environments, type, ...params },
+    { roles, environments, ...params },
     actor
   ) => {
     const plan = await licenseService.getPlan(actor.orgId);
@@ -162,10 +154,6 @@ export const projectTemplateServiceFactory = ({
 
     ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Create, OrgPermissionSubjects.ProjectTemplates);
 
-    if (environments && type !== ProjectType.SecretManager) {
-      throw new BadRequestError({ message: "Cannot configure environments for non-SecretManager project templates" });
-    }
-
     if (environments && plan.environmentLimit !== null && environments.length > plan.environmentLimit) {
       throw new BadRequestError({
         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
@@ -188,10 +176,8 @@ export const projectTemplateServiceFactory = ({
     const projectTemplate = await projectTemplateDAL.create({
       ...params,
       roles: JSON.stringify(roles.map((role) => ({ ...role, permissions: packRules(role.permissions) }))),
-      environments:
-        type === ProjectType.SecretManager ? JSON.stringify(environments ?? ProjectTemplateDefaultEnvironments) : null,
-      orgId: actor.orgId,
-      type
+      environments: environments ? JSON.stringify(environments ?? ProjectTemplateDefaultEnvironments) : null,
+      orgId: actor.orgId
     });
 
     return $unpackProjectTemplate(projectTemplate);
@@ -223,12 +209,6 @@ export const projectTemplateServiceFactory = ({
 
     ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Edit, OrgPermissionSubjects.ProjectTemplates);
 
-    if (projectTemplate.type !== ProjectType.SecretManager && environments)
-      throw new BadRequestError({ message: "Cannot configure environments for non-SecretManager project templates" });
-
-    if (projectTemplate.type === ProjectType.SecretManager && environments === null)
-      throw new BadRequestError({ message: "Environments cannot be removed for SecretManager project templates" });
-
     if (environments && plan.environmentLimit !== null && environments.length > plan.environmentLimit) {
       throw new BadRequestError({
         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions

backend/src/ee/services/project-template/project-template-types.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-import { ProjectMembershipRole, ProjectType, TProjectEnvironments } from "@app/db/schemas";
+import { ProjectMembershipRole, TProjectEnvironments } from "@app/db/schemas";
 import { TProjectPermissionV2Schema } from "@app/ee/services/permission/project-permission";
 import { OrgServiceActor } from "@app/lib/types";
 import { UnpackedPermissionSchema } from "@app/server/routes/sanitizedSchema/permission";
@@ -16,7 +16,6 @@ export type TProjectTemplateRole = {
 export type TCreateProjectTemplateDTO = {
   name: string;
   description?: string;
-  type: ProjectType;
   roles: TProjectTemplateRole[];
   environments?: TProjectTemplateEnvironment[] | null;
 };
@@ -30,14 +29,10 @@ export enum InfisicalProjectTemplate {
 }
 
 export type TProjectTemplateServiceFactory = {
-  listProjectTemplatesByOrg: (
-    actor: OrgServiceActor,
-    type?: ProjectType
-  ) => Promise<
+  listProjectTemplatesByOrg: (actor: OrgServiceActor) => Promise<
     (
       | {
           id: string;
-          type: ProjectType;
           name: InfisicalProjectTemplate;
           createdAt: Date;
           updatedAt: Date;
@@ -74,7 +69,6 @@ export type TProjectTemplateServiceFactory = {
             name: string;
           }[];
           name: string;
-          type: string;
           orgId: string;
           id: string;
           createdAt: Date;
@@ -99,7 +93,6 @@ export type TProjectTemplateServiceFactory = {
       name: string;
     }[];
     name: string;
-    type: string;
     orgId: string;
     id: string;
     createdAt: Date;
@@ -123,7 +116,6 @@ export type TProjectTemplateServiceFactory = {
       name: string;
     }[];
     name: string;
-    type: string;
     orgId: string;
     id: string;
     createdAt: Date;
@@ -146,7 +138,6 @@ export type TProjectTemplateServiceFactory = {
       name: string;
     }[];
     name: string;
-    type: string;
     orgId: string;
     id: string;
     createdAt: Date;
@@ -170,7 +161,6 @@ export type TProjectTemplateServiceFactory = {
       name: string;
     }[];
     name: string;
-    type: string;
     orgId: string;
     id: string;
     createdAt: Date;
@@ -194,7 +184,6 @@ export type TProjectTemplateServiceFactory = {
       name: string;
     }[];
     name: string;
-    type: string;
     orgId: string;
     id: string;
     createdAt: Date;

backend/src/server/routes/v1/project-router.ts

@@ -8,7 +8,6 @@ import {
   ProjectRolesSchema,
   ProjectSlackConfigsSchema,
   ProjectSshConfigsSchema,
-  ProjectType,
   SecretFoldersSchema,
   SortDirection,
   UserEncryptionKeysSchema,

backend/src/server/routes/v2/organization-router.ts

@@ -4,7 +4,6 @@ import {
   OrgMembershipsSchema,
   ProjectMembershipsSchema,
   ProjectsSchema,
-  ProjectType,
   UserEncryptionKeysSchema,
   UsersSchema
 } from "@app/db/schemas";
@@ -85,9 +84,6 @@ export const registerOrgRouter = async (server: FastifyZodProvider) => {
       params: z.object({
         organizationId: z.string().trim().describe(ORGANIZATIONS.GET_PROJECTS.organizationId)
       }),
-      querystring: z.object({
-        type: z.nativeEnum(ProjectType).optional().describe(ORGANIZATIONS.GET_PROJECTS.type)
-      }),
       response: {
         200: z.object({
           workspaces: z
@@ -114,8 +110,7 @@ export const registerOrgRouter = async (server: FastifyZodProvider) => {
         actorId: req.permission.id,
         actorOrgId: req.permission.orgId,
         actorAuthMethod: req.permission.authMethod,
-        orgId: req.params.organizationId,
-        type: req.query.type
+        orgId: req.params.organizationId
       });
 
       return { workspaces };

backend/src/services/org/org-service.ts

@@ -234,14 +234,14 @@ export const orgServiceFactory = ({
     return org;
   };
 
-  const findAllWorkspaces = async ({ actor, actorId, orgId, type }: TFindAllWorkspacesDTO) => {
+  const findAllWorkspaces = async ({ actor, actorId, orgId }: TFindAllWorkspacesDTO) => {
     if (actor === ActorType.USER) {
-      const workspaces = await projectDAL.findUserProjects(actorId, orgId, type || "all");
+      const workspaces = await projectDAL.findUserProjects(actorId, orgId);
       return workspaces;
     }
 
     if (actor === ActorType.IDENTITY) {
-      const workspaces = await projectDAL.findAllProjectsByIdentity(actorId, type);
+      const workspaces = await projectDAL.findAllProjectsByIdentity(actorId);
       return workspaces;
     }
 

backend/src/services/org/org-types.ts

@@ -1,4 +1,3 @@
-import { ProjectType } from "@app/db/schemas";
 import { TOrgPermission } from "@app/lib/types";
 
 import { ActorAuthMethod, ActorType, MfaMethod } from "../auth/auth-type";
@@ -60,7 +59,6 @@ export type TFindAllWorkspacesDTO = {
   actorOrgId: string | undefined;
   actorAuthMethod: ActorAuthMethod;
   orgId: string;
-  type?: ProjectType;
 };
 
 export type TUpdateOrgDTO = {

backend/src/services/project-role/project-role-fns.ts

@@ -11,7 +11,7 @@ import {
 } from "@app/ee/services/permission/default-roles";
 import { TGetPredefinedRolesDTO } from "@app/services/project-role/project-role-types";
 
-export const getPredefinedRoles = ({ projectId, projectType, roleFilter }: TGetPredefinedRolesDTO) => {
+export const getPredefinedRoles = ({ projectId, roleFilter }: TGetPredefinedRolesDTO) => {
   return [
     {
       id: uuidv4(),
@@ -75,5 +75,5 @@ export const getPredefinedRoles = ({ projectId, projectType, roleFilter }: TGetP
       createdAt: new Date(),
       updatedAt: new Date()
     }
-  ].filter(({ slug, type }) => (type ? type === projectType : true) && (!roleFilter || roleFilter === slug));
+  ].filter(({ slug }) => !roleFilter || roleFilter === slug);
 };

backend/src/services/project-role/project-role-service.ts

@@ -2,7 +2,7 @@ import { ForbiddenError, MongoAbility, RawRuleOf } from "@casl/ability";
 import { PackRule, packRules, unpackRules } from "@casl/ability/extra";
 import { requestContext } from "@fastify/request-context";
 
-import { ProjectMembershipRole, ProjectType, TableName, TProjects } from "@app/db/schemas";
+import { ProjectMembershipRole, TableName, TProjects } from "@app/db/schemas";
 import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service-types";
 import {
   ProjectPermissionActions,
@@ -117,7 +117,6 @@ export const projectRoleServiceFactory = ({
     if (roleSlug !== "custom" && Object.values(ProjectMembershipRole).includes(roleSlug as ProjectMembershipRole)) {
       const [predefinedRole] = getPredefinedRoles({
         projectId: project.id,
-        projectType: project.type as ProjectType,
         roleFilter: roleSlug as ProjectMembershipRole
       });
 
@@ -218,10 +217,7 @@ export const projectRoleServiceFactory = ({
       { projectId: project.id },
       { sort: [[`${TableName.ProjectRoles}.slug` as "slug", "asc"]] }
     );
-    const roles = [
-      ...getPredefinedRoles({ projectId: project.id, projectType: project.type as ProjectType }),
-      ...(customRoles || [])
-    ];
+    const roles = [...getPredefinedRoles({ projectId: project.id }), ...(customRoles || [])];
 
     return roles;
   };

backend/src/services/project-role/project-role-types.ts

@@ -1,4 +1,4 @@
-import { ProjectMembershipRole, ProjectType, TOrgRolesUpdate, TProjectRolesInsert } from "@app/db/schemas";
+import { ProjectMembershipRole, TOrgRolesUpdate, TProjectRolesInsert } from "@app/db/schemas";
 import { TProjectPermission } from "@app/lib/types";
 
 export enum ProjectRoleServiceIdentifierType {
@@ -37,6 +37,5 @@ export type TListRolesDTO = {
 
 export type TGetPredefinedRolesDTO = {
   projectId: string;
-  projectType: ProjectType;
   roleFilter?: ProjectMembershipRole;
 };

backend/src/services/project/project-dal.ts

@@ -3,13 +3,13 @@ import { Knex } from "knex";
 import { TDbClient } from "@app/db";
 import {
   ProjectsSchema,
+  ProjectType,
   ProjectUpgradeStatus,
   ProjectVersion,
   SortDirection,
   TableName,
   TProjects,
-  TProjectsUpdate,
-  ProjectType
+  TProjectsUpdate
 } from "@app/db/schemas";
 import { BadRequestError, DatabaseError, NotFoundError, UnauthorizedError } from "@app/lib/errors";
 import { buildFindFilter, ormify, selectAllTableCols, sqlNestRelationships } from "@app/lib/knex";

backend/src/services/project/project-service.ts

@@ -1,7 +1,7 @@
 import { ForbiddenError, subject } from "@casl/ability";
 import slugify from "@sindresorhus/slugify";
 
-import { ProjectMembershipRole, ProjectVersion, TableName, TProjectEnvironments, ProjectType } from "@app/db/schemas";
+import { ProjectMembershipRole, ProjectType, ProjectVersion, TableName, TProjectEnvironments } from "@app/db/schemas";
 import { TLicenseServiceFactory } from "@app/ee/services/license/license-service";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/ee/services/permission/org-permission";
 import { throwIfMissingSecretReadValueOrDescribePermission } from "@app/ee/services/permission/permission-fns";
@@ -596,10 +596,7 @@ export const projectServiceFactory = ({
         workspaces.map(async (workspace) => {
           return {
             ...workspace,
-            roles: [
-              ...(workspaceMappedToRoles[workspace.id] || []),
-              ...getPredefinedRoles({ projectId: workspace.id, projectType: workspace.type as ProjectType })
-            ]
+            roles: [...(workspaceMappedToRoles[workspace.id] || []), ...getPredefinedRoles({ projectId: workspace.id })]
           };
         })
       );

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

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

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

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

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

@@ -60,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 font-medium 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/hooks/api/projectTemplates/types.ts

@@ -1,10 +1,8 @@
 import { TProjectRole } from "@app/hooks/api/roles/types";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 export type TProjectTemplate = {
   id: string;
   name: string;
-  type: ProjectType;
   description?: string;
   roles: Pick<TProjectRole, "slug" | "name" | "permissions">[];
   environments?: { name: string; slug: string; position: number }[] | null;
@@ -16,7 +14,6 @@ export type TListProjectTemplates = { projectTemplates: TProjectTemplate[] };
 export type TProjectTemplateResponse = { projectTemplate: TProjectTemplate };
 
 export type TCreateProjectTemplateDTO = {
-  type: ProjectType;
   name: string;
   description?: string;
 };

frontend/src/layouts/KmsLayout/KmsLayout.tsx

@@ -19,10 +19,8 @@ export const KmsLayout = () => {
           className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
         >
           <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
-            <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
-              KMS
-            </div>
-            <div className="mt-2 flex-grow">
+            <div className="border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">KMS</div>
+            <div className="flex-1">
               <Menu>
                 <Link
                   to="/projects/$projectId/kms/overview"

frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx

@@ -39,7 +39,7 @@ export const OrganizationLayout = () => {
           <OrgSidebar isHidden={isInsideProject} />
           <main
             className={twMerge(
-              "flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 py-4 dark:[color-scheme:dark]",
+              "flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 pb-4 pt-8 dark:[color-scheme:dark]",
               isInsideProject && "p-0"
             )}
           >

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -165,7 +165,7 @@ export const Navbar = () => {
               </div>
 
               <div className="max-w-32 overflow-hidden text-ellipsis">{currentOrg?.name}</div>
-              <div className="rounded border border-mineshaft-500 p-1 text-xs text-bunker-300">
+              <div className="rounded border border-mineshaft-500 px-1 text-xs text-bunker-300">
                 {getPlan(subscription)}
               </div>
             </div>

frontend/src/layouts/OrganizationLayout/components/OrgSidebar/Copy.tsx

@@ -1,644 +0,0 @@
-import { useState } from "react";
-import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
-import {
-  faArrowUpRightFromSquare,
-  faBook,
-  faCheck,
-  faCheckCircle,
-  faCog,
-  faDoorClosed,
-  faEnvelope,
-  faInfinity,
-  faInfo,
-  faInfoCircle,
-  faMoneyBill,
-  faPlug,
-  faSignOut,
-  faUser,
-  faUserCog,
-  faUsers
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useQueryClient } from "@tanstack/react-query";
-import { Link, linkOptions, useLocation, useNavigate, useRouter } from "@tanstack/react-router";
-
-import { Mfa } from "@app/components/auth/Mfa";
-import { createNotification } from "@app/components/notifications";
-import { CreateOrgModal } from "@app/components/organization/CreateOrgModal";
-import SecurityClient from "@app/components/utilities/SecurityClient";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  Modal,
-  ModalContent,
-  Tooltip
-} from "@app/components/v2";
-import { envConfig } from "@app/config/env";
-import { useOrganization, useSubscription, useUser } from "@app/context";
-import { isInfisicalCloud } from "@app/helpers/platform";
-import { usePopUp, useToggle } from "@app/hooks";
-import {
-  useGetOrganizations,
-  useGetOrgTrialUrl,
-  useLogoutUser,
-  useSelectOrganization,
-  workspaceKeys
-} from "@app/hooks/api";
-import { authKeys } from "@app/hooks/api/auth/queries";
-import { MfaMethod } from "@app/hooks/api/auth/types";
-import { getAuthToken } from "@app/hooks/api/reactQuery";
-import { SubscriptionPlan } from "@app/hooks/api/types";
-import { AuthMethod } from "@app/hooks/api/users/types";
-import { ProjectType } from "@app/hooks/api/workspace/types";
-import { navigateUserToOrg } from "@app/pages/auth/LoginPage/Login.utils";
-
-import { MenuIconButton } from "../MenuIconButton";
-import { ServerAdminsPanel } from "../ServerAdminsPanel/ServerAdminsPanel";
-
-const getPlan = (subscription: SubscriptionPlan) => {
-  if (subscription.groups) return "Enterprise Plan";
-  if (subscription.pitRecovery) return "Pro Plan";
-  return "Free Plan";
-};
-
-export const INFISICAL_SUPPORT_OPTIONS = [
-  [
-    <FontAwesomeIcon key={1} className="pr-4 text-sm" icon={faSlack} />,
-    "Support Forum",
-    "https://infisical.com/slack"
-  ],
-  [
-    <FontAwesomeIcon key={2} className="pr-4 text-sm" icon={faBook} />,
-    "Read Docs",
-    "https://infisical.com/docs/documentation/getting-started/introduction"
-  ],
-  [
-    <FontAwesomeIcon key={3} className="pr-4 text-sm" icon={faGithub} />,
-    "GitHub Issues",
-    "https://github.com/Infisical/infisical/issues"
-  ],
-  [
-    <FontAwesomeIcon key={4} className="pr-4 text-sm" icon={faEnvelope} />,
-    "Email Support",
-    "mailto:support@infisical.com"
-  ],
-  [
-    <FontAwesomeIcon key={5} className="pr-4 text-sm" icon={faUsers} />,
-    "Instance Admins",
-    "server-admins"
-  ]
-];
-
-export const OrgSidebar = () => {
-  const [shouldShowMfa, toggleShowMfa] = useToggle(false);
-  const [requiredMfaMethod, setRequiredMfaMethod] = useState(MfaMethod.EMAIL);
-  const [mfaSuccessCallback, setMfaSuccessCallback] = useState<() => void>(() => {});
-  const { subscription } = useSubscription();
-  const [open, setOpen] = useState(false);
-  const [openSupport, setOpenSupport] = useState(false);
-  const [openUser, setOpenUser] = useState(false);
-  const [openOrg, setOpenOrg] = useState(false);
-  const [showAdminsModal, setShowAdminsModal] = useState(false);
-
-  const { user } = useUser();
-  const { mutateAsync } = useGetOrgTrialUrl();
-
-  const { currentOrg } = useOrganization();
-  const { data: orgs } = useGetOrganizations();
-
-  const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const);
-  const { mutateAsync: selectOrganization } = useSelectOrganization();
-  const navigate = useNavigate();
-  const router = useRouter();
-  const location = useLocation();
-  const queryClient = useQueryClient();
-
-  const isMoreSelected = (
-    [
-      linkOptions({ to: "/organization/access-management" }).to,
-      linkOptions({ to: "/organization/app-connections" }).to,
-      linkOptions({ to: "/organization/billing" }).to,
-      linkOptions({ to: "/organization/sso" }).to,
-      linkOptions({ to: "/organization/gateways" }).to,
-      linkOptions({ to: "/organization/settings" }).to,
-      linkOptions({ to: "/organization/audit-logs" }).to
-    ] as string[]
-  ).includes(location.pathname);
-
-  const handleOrgChange = async (orgId: string) => {
-    queryClient.removeQueries({ queryKey: authKeys.getAuthToken });
-    queryClient.removeQueries({ queryKey: workspaceKeys.getAllUserWorkspace() });
-
-    const { token, isMfaEnabled, mfaMethod } = await selectOrganization({
-      organizationId: orgId
-    });
-
-    if (isMfaEnabled) {
-      SecurityClient.setMfaToken(token);
-      if (mfaMethod) {
-        setRequiredMfaMethod(mfaMethod);
-      }
-      toggleShowMfa.on();
-      setMfaSuccessCallback(() => () => handleOrgChange(orgId));
-      return;
-    }
-    await router.invalidate();
-    await navigateUserToOrg(navigate, orgId);
-  };
-
-  const logout = useLogoutUser();
-  const logOutUser = async () => {
-    try {
-      console.log("Logging out...");
-      await logout.mutateAsync();
-      navigate({ to: "/login" });
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const handleCopyToken = async () => {
-    try {
-      await window.navigator.clipboard.writeText(getAuthToken());
-      createNotification({
-        type: "success",
-        text: "Copied current login session token to clipboard"
-      });
-    } catch (error) {
-      console.log(error);
-      createNotification({ type: "error", text: "Failed to copy user token to clipboard" });
-    }
-  };
-
-  if (shouldShowMfa) {
-    return (
-      <div className="flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
-        <Mfa
-          email={user.email as string}
-          method={requiredMfaMethod}
-          successCallback={mfaSuccessCallback}
-          closeMfa={() => toggleShowMfa.off()}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <aside
-        className="dark z-10 border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 transition-all duration-150"
-        style={{ width: "72px" }}
-      >
-        <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
-          <div>
-            <div className="flex items-center hover:bg-mineshaft-700">
-              <DropdownMenu open={openOrg} onOpenChange={setOpenOrg} modal={false}>
-                <DropdownMenuTrigger
-                  onMouseEnter={() => setOpenOrg(true)}
-                  onMouseLeave={() => setOpenOrg(false)}
-                  asChild
-                >
-                  <div className="flex w-full items-center justify-center rounded-md border border-none border-mineshaft-600 p-3 pb-5 pt-6 transition-all">
-                    <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary">
-                      {currentOrg?.name.charAt(0)}
-                    </div>
-                  </div>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  onMouseEnter={() => setOpenOrg(true)}
-                  onMouseLeave={() => setOpenOrg(false)}
-                  align="start"
-                  side="right"
-                  className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
-                  style={{ minWidth: "220px" }}
-                >
-                  <div className="px-0.5 py-1">
-                    <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-gradient-to-tr from-primary-500/5 to-mineshaft-800 p-1 transition-all duration-300">
-                      <div className="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-primary text-black">
-                        {currentOrg?.name.charAt(0)}
-                      </div>
-                      <div className="flex flex-grow flex-col text-white">
-                        <div className="max-w-36 truncate text-ellipsis text-sm font-medium capitalize">
-                          {currentOrg?.name}
-                        </div>
-                        <div className="text-xs text-mineshaft-400">{getPlan(subscription)}</div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="px-2 py-1 text-xs capitalize text-mineshaft-400">
-                    organizations
-                  </div>
-                  {orgs?.map((org) => {
-                    return (
-                      <DropdownMenuItem key={org.id}>
-                        <Button
-                          onClick={async () => {
-                            if (currentOrg?.id === org.id) return;
-
-                            if (org.authEnforced) {
-                              // org has an org-level auth method enabled (e.g. SAML)
-                              // -> logout + redirect to SAML SSO
-
-                              await logout.mutateAsync();
-                              if (org.orgAuthMethod === AuthMethod.OIDC) {
-                                window.open(`/api/v1/sso/oidc/login?orgSlug=${org.slug}`);
-                              } else {
-                                window.open(`/api/v1/sso/redirect/saml2/organizations/${org.slug}`);
-                              }
-                              window.close();
-                              return;
-                            }
-
-                            handleOrgChange(org?.id);
-                          }}
-                          variant="plain"
-                          colorSchema="secondary"
-                          size="xs"
-                          className="flex w-full items-center justify-start p-0 font-normal"
-                          leftIcon={
-                            currentOrg?.id === org.id && (
-                              <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
-                            )
-                          }
-                        >
-                          <div className="flex w-full max-w-[150px] items-center justify-between truncate">
-                            {org.name}
-                          </div>
-                        </Button>
-                      </DropdownMenuItem>
-                    );
-                  })}
-                  <div className="mt-1 h-1 border-t border-mineshaft-600" />
-                  <DropdownMenuItem
-                    icon={<FontAwesomeIcon icon={faSignOut} />}
-                    onClick={logOutUser}
-                  >
-                    Log Out
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-            <div className="space-y-1">
-              {currentOrg.secretsProductEnabled && (
-                <Link to="/organization/projects">
-                  {({ isActive }) => (
-                    <MenuIconButton
-                      isSelected={
-                        isActive ||
-                        window.location.pathname.startsWith(
-                          `/organization/${ProjectType.SecretManager}`
-                        )
-                      }
-                      icon="sliding-carousel"
-                    >
-                      Secrets
-                    </MenuIconButton>
-                  )}
-                </Link>
-              )}
-              {currentOrg.pkiProductEnabled && (
-                <Link to="/organization/cert-manager/overview">
-                  {({ isActive }) => (
-                    <MenuIconButton
-                      isSelected={
-                        isActive ||
-                        window.location.pathname.startsWith(
-                          `/organization/${ProjectType.CertificateManager}`
-                        )
-                      }
-                      icon="note"
-                    >
-                      PKI
-                    </MenuIconButton>
-                  )}
-                </Link>
-              )}
-              {currentOrg.kmsProductEnabled && (
-                <Link to="/organization/kms/overview">
-                  {({ isActive }) => (
-                    <MenuIconButton
-                      isSelected={
-                        isActive ||
-                        window.location.pathname.startsWith(`/organization/${ProjectType.KMS}`)
-                      }
-                      icon="unlock"
-                    >
-                      KMS
-                    </MenuIconButton>
-                  )}
-                </Link>
-              )}
-              {currentOrg.sshProductEnabled && (
-                <Link to="/organization/ssh/overview">
-                  {({ isActive }) => (
-                    <MenuIconButton
-                      isSelected={
-                        isActive ||
-                        window.location.pathname.startsWith(`/organization/${ProjectType.SSH}`)
-                      }
-                      icon="verified"
-                    >
-                      SSH
-                    </MenuIconButton>
-                  )}
-                </Link>
-              )}
-              {currentOrg.scannerProductEnabled && (
-                <Link to="/organization/secret-scanning/overview">
-                  {({ isActive }) => (
-                    <MenuIconButton
-                      isSelected={
-                        isActive ||
-                        window.location.pathname.startsWith(
-                          `/organization/${ProjectType.SecretScanning}`
-                        )
-                      }
-                      icon="secret-scan"
-                    >
-                      Scanner
-                    </MenuIconButton>
-                  )}
-                </Link>
-              )}
-              {(currentOrg.scannerProductEnabled || currentOrg.shareSecretsProductEnabled) && (
-                <div className="w-full bg-mineshaft-500" style={{ height: "1px" }} />
-              )}
-              {currentOrg.shareSecretsProductEnabled && (
-                <Link to="/organization/secret-sharing">
-                  {({ isActive }) => (
-                    <MenuIconButton isSelected={isActive} icon="lock-closed">
-                      Share
-                    </MenuIconButton>
-                  )}
-                </Link>
-              )}
-              <div className="my-1 w-full bg-mineshaft-500" style={{ height: "1px" }} />
-              <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
-                <DropdownMenuTrigger
-                  onMouseEnter={() => setOpen(true)}
-                  onMouseLeave={() => setOpen(false)}
-                  asChild
-                >
-                  <div className="w-full">
-                    <MenuIconButton
-                      lottieIconMode="reverse"
-                      icon="settings-cog"
-                      isSelected={isMoreSelected}
-                    >
-                      Admin
-                    </MenuIconButton>
-                  </div>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  onMouseEnter={() => setOpen(true)}
-                  onMouseLeave={() => setOpen(false)}
-                  align="start"
-                  side="right"
-                  className="p-1"
-                >
-                  <DropdownMenuLabel>Organization Options</DropdownMenuLabel>
-                  <Link to="/organization/access-management">
-                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faUsers} />}>
-                      Access Control
-                    </DropdownMenuItem>
-                  </Link>
-                  <Link to="/organization/app-connections">
-                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faPlug} />}>
-                      App Connections
-                    </DropdownMenuItem>
-                  </Link>
-                  <Link to="/organization/gateways">
-                    <DropdownMenuItem
-                      icon={<FontAwesomeIcon className="w-3" icon={faDoorClosed} />}
-                    >
-                      Gateways
-                    </DropdownMenuItem>
-                  </Link>
-                  <Link to="/organization/billing">
-                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faMoneyBill} />}>
-                      Usage & Billing
-                    </DropdownMenuItem>
-                  </Link>
-                  <Link to="/organization/audit-logs">
-                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faBook} />}>
-                      Audit Logs
-                    </DropdownMenuItem>
-                  </Link>
-                  <Link to="/organization/sso">
-                    <DropdownMenuItem
-                      icon={<FontAwesomeIcon className="w-3" icon={faCheckCircle} />}
-                    >
-                      SSO Settings
-                    </DropdownMenuItem>
-                  </Link>
-                  <Link to="/organization/settings">
-                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faCog} />}>
-                      Organization Settings
-                    </DropdownMenuItem>
-                  </Link>
-                  <DropdownMenuLabel>Admin Panels</DropdownMenuLabel>
-                  {user?.superAdmin && (
-                    <Link to="/admin">
-                      <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faUserCog} />}>
-                        Server Admin Console
-                      </DropdownMenuItem>
-                    </Link>
-                  )}
-                  <Link to="/organization/admin">
-                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faCog} />}>
-                      Organization Admin Console
-                    </DropdownMenuItem>
-                  </Link>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          </div>
-          <div
-            className={`relative mt-10 ${
-              subscription && subscription.slug === "starter" && !subscription.has_used_trial
-                ? "mb-2"
-                : "mb-4"
-            } flex w-full cursor-default flex-col items-center px-1 text-sm text-mineshaft-400`}
-          >
-            <DropdownMenu open={openSupport} onOpenChange={setOpenSupport} modal={false}>
-              <DropdownMenuTrigger
-                onMouseEnter={() => setOpenSupport(true)}
-                onMouseLeave={() => setOpenSupport(false)}
-                className="w-full"
-              >
-                <MenuIconButton>
-                  <FontAwesomeIcon icon={faInfoCircle} className="mb-3 text-lg" />
-                  Support
-                </MenuIconButton>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                onMouseEnter={() => setOpenSupport(true)}
-                onMouseLeave={() => setOpenSupport(false)}
-                align="end"
-                side="right"
-                className="p-1"
-              >
-                {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => {
-                  if (url === "server-admins" && isInfisicalCloud()) {
-                    return null;
-                  }
-                  return (
-                    <DropdownMenuItem key={url as string}>
-                      {url === "server-admins" ? (
-                        <button
-                          type="button"
-                          onClick={() => setShowAdminsModal(true)}
-                          className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
-                        >
-                          <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
-                            {icon}
-                            <div className="text-sm">{text}</div>
-                          </div>
-                        </button>
-                      ) : (
-                        <a
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          href={String(url)}
-                          className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
-                        >
-                          <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
-                            {icon}
-                            <div className="text-sm">{text}</div>
-                          </div>
-                        </a>
-                      )}
-                    </DropdownMenuItem>
-                  );
-                })}
-                {envConfig.PLATFORM_VERSION && (
-                  <div className="mb-2 mt-2 w-full cursor-default pl-5 text-sm duration-200 hover:text-mineshaft-200">
-                    <FontAwesomeIcon icon={faInfo} className="mr-4 px-[0.1rem]" />
-                    Version: {envConfig.PLATFORM_VERSION}
-                  </div>
-                )}
-              </DropdownMenuContent>
-            </DropdownMenu>
-            {subscription && subscription.slug === "starter" && !subscription.has_used_trial && (
-              <Tooltip content="Start Free Pro Trial" side="right">
-                <button
-                  type="button"
-                  onClick={async () => {
-                    if (!subscription || !currentOrg) return;
-
-                    // direct user to start pro trial
-                    const url = await mutateAsync({
-                      orgId: currentOrg.id,
-                      success_url: window.location.href
-                    });
-
-                    window.location.href = url;
-                  }}
-                  className="mt-1.5 w-full"
-                >
-                  <div className="justify-left mb-1.5 mt-1.5 flex w-full flex-col items-center rounded-md p-1 text-xs text-mineshaft-300 transition-all duration-150 hover:bg-mineshaft-500 hover:text-primary-400">
-                    <FontAwesomeIcon icon={faInfinity} className="py-2 text-lg text-primary" />
-                    Pro Trial
-                  </div>
-                </button>
-              </Tooltip>
-            )}
-            <DropdownMenu open={openUser} onOpenChange={setOpenUser} modal={false}>
-              <DropdownMenuTrigger
-                onMouseEnter={() => setOpenUser(true)}
-                onMouseLeave={() => setOpenUser(false)}
-                className="w-full"
-                asChild
-              >
-                <div>
-                  <MenuIconButton icon="user">User</MenuIconButton>
-                </div>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                onMouseEnter={() => setOpenUser(true)}
-                onMouseLeave={() => setOpenUser(false)}
-                side="right"
-                align="end"
-                className="p-1"
-              >
-                <div className="cursor-default px-1 py-1">
-                  <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-gradient-to-tr from-primary-500/10 to-mineshaft-800 p-1 px-2 transition-all duration-150">
-                    <div className="p-1 pr-3">
-                      <FontAwesomeIcon icon={faUser} className="text-xl text-mineshaft-400" />
-                    </div>
-                    <div className="flex flex-grow flex-col text-white">
-                      <div className="max-w-36 truncate text-ellipsis text-sm font-medium capitalize">
-                        {user?.firstName} {user?.lastName}
-                      </div>
-                      <div className="text-xs text-mineshaft-300">{user.email}</div>
-                    </div>
-                  </div>
-                </div>
-                <Link to="/personal-settings">
-                  <DropdownMenuItem>Personal Settings</DropdownMenuItem>
-                </Link>
-                <a
-                  href="https://infisical.com/docs/documentation/getting-started/introduction"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
-                >
-                  <DropdownMenuItem>
-                    Documentation
-                    <FontAwesomeIcon
-                      icon={faArrowUpRightFromSquare}
-                      className="mb-[0.06rem] pl-1.5 text-xxs"
-                    />
-                  </DropdownMenuItem>
-                </a>
-                <a
-                  href="https://infisical.com/slack"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
-                >
-                  <DropdownMenuItem>
-                    Join Slack Community
-                    <FontAwesomeIcon
-                      icon={faArrowUpRightFromSquare}
-                      className="mb-[0.06rem] pl-1.5 text-xxs"
-                    />
-                  </DropdownMenuItem>
-                </a>
-                <div className="mt-1 h-1 border-t border-mineshaft-600" />
-                <DropdownMenuItem onClick={handleCopyToken}>
-                  Copy Token
-                  <Tooltip
-                    content="This token is linked to your current login session and can only access resources within the organization you're currently logged into."
-                    className="max-w-3xl"
-                  >
-                    <FontAwesomeIcon icon={faInfoCircle} className="mb-[0.06rem] pl-1.5 text-xs" />
-                  </Tooltip>
-                </DropdownMenuItem>
-                <div className="mt-1 h-1 border-t border-mineshaft-600" />
-                <DropdownMenuItem onClick={logOutUser} icon={<FontAwesomeIcon icon={faSignOut} />}>
-                  Log Out
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </nav>
-      </aside>
-      <Modal isOpen={showAdminsModal} onOpenChange={setShowAdminsModal}>
-        <ModalContent title="Server Administrators" subTitle="View all server administrators">
-          <div className="mb-2">
-            <ServerAdminsPanel />
-          </div>
-        </ModalContent>
-      </Modal>
-      <CreateOrgModal
-        isOpen={popUp?.createOrg?.isOpen}
-        onClose={() => handlePopUpToggle("createOrg", false)}
-      />
-    </>
-  );
-};

frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx

@@ -17,7 +17,7 @@ import { Link } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "framer-motion";
 
 import { CreateOrgModal } from "@app/components/organization/CreateOrgModal";
-import { Button, Menu, MenuGroup, MenuItem, Tooltip } from "@app/components/v2";
+import { Menu, MenuGroup, MenuItem, Tooltip } from "@app/components/v2";
 import { useOrganization, useSubscription, useUser } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useGetOrgTrialUrl } from "@app/hooks/api";
@@ -47,7 +47,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
             animate={{ opacity: 1, translateX: 0 }}
             exit={{ opacity: 0, translateX: -240 }}
             layout
-            className="dark z-10 w-60 border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 pb-4"
+            className="dark z-10 w-60 border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-800 to-mineshaft-900"
           >
             <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
               <Menu>
@@ -137,14 +137,19 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                 </MenuGroup>
               </Menu>
               <div className="flex-grow" />
-              <div>
+              <Menu>
                 {subscription &&
                   subscription.slug === "starter" &&
                   !subscription.has_used_trial && (
                     <Tooltip content="Start Free Pro Trial">
-                      <Button
-                        variant="outline_bg"
-                        className="w-full"
+                      <MenuItem
+                        className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                        leftIcon={
+                          <FontAwesomeIcon
+                            className="mx-1 inline-block shrink-0"
+                            icon={faInfinity}
+                          />
+                        }
                         onClick={async () => {
                           if (!subscription || !currentOrg) return;
 
@@ -156,63 +161,44 @@ export const OrgSidebar = ({ isHidden }: Props) => {
 
                           window.location.href = url;
                         }}
-                        leftIcon={
-                          <FontAwesomeIcon
-                            icon={faInfinity}
-                            className="py-2 text-lg text-primary"
-                          />
-                        }
                       >
                         Pro Trial
-                      </Button>
+                      </MenuItem>
                     </Tooltip>
                   )}
-              </div>
-              <div className="w-full p-2">
                 <Link to="/organization/secret-sharing">
-                  <Button
-                    variant="outline_bg"
-                    className="w-full"
-                    leftIcon={<FontAwesomeIcon icon={faShare} />}
+                  <MenuItem
+                    className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                    leftIcon={
+                      <FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faShare} />
+                    }
                   >
                     Share Secret
-                  </Button>
+                  </MenuItem>
+                </Link>
+                <Link to="/organization/admin">
+                  <MenuItem
+                    className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                    leftIcon={
+                      <FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faUserCog} />
+                    }
+                  >
+                    Organization Admin
+                  </MenuItem>
                 </Link>
-              </div>
-              <div className="flex gap-2 px-2">
-                <div className="flex-1">
-                  {user.superAdmin ? (
-                    <Tooltip content="Organization Admin" sideOffset={16}>
-                      <Link to="/organization/admin">
-                        <Button variant="outline_bg" className="w-full py-3">
-                          <FontAwesomeIcon icon={faUserCog} size="lg" />
-                        </Button>
-                      </Link>
-                    </Tooltip>
-                  ) : (
-                    <Link to="/organization/admin">
-                      <Button
-                        variant="outline_bg"
-                        className="w-full"
-                        leftIcon={<FontAwesomeIcon icon={faUserCog} />}
-                      >
-                        Org Admin
-                      </Button>
-                    </Link>
-                  )}
-                </div>
                 {user.superAdmin && (
-                  <div className="flex-1">
-                    <Tooltip content="Server Console Admin" sideOffset={16}>
-                      <Link to="/admin">
-                        <Button variant="outline_bg" className="w-full py-3">
-                          <FontAwesomeIcon icon={faUserTie} size="lg" />
-                        </Button>
-                      </Link>
-                    </Tooltip>
-                  </div>
+                  <Link to="/admin">
+                    <MenuItem
+                      className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                      leftIcon={
+                        <FontAwesomeIcon className="mx-1 inline-block shrink-0" icon={faUserTie} />
+                      }
+                    >
+                      Server Console
+                    </MenuItem>
+                  </Link>
                 )}
-              </div>
+              </Menu>
             </nav>
           </motion.aside>
         )}

frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx

@@ -24,10 +24,10 @@ export const PkiManagerLayout = () => {
             className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
           >
             <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
-              <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
+              <div className="border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">
                 PKI Manager
               </div>
-              <div className="mt-2 flex-grow">
+              <div className="flex-1">
                 <Menu>
                   <Link
                     to="/projects/$projectId/cert-manager/subscribers"

frontend/src/layouts/ProjectGeneralLayout/ProjectGeneralLayout.tsx

@@ -19,10 +19,10 @@ export const ProjectGeneralLayout = () => {
           className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
         >
           <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
-            <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
+            <div className="border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">
               Project Overview
             </div>
-            <div className="mt-2 flex-grow">
+            <div className="flex-1">
               <Menu>
                 <Link
                   to="/projects/$projectId/access-management"

frontend/src/layouts/ProjectLayout/Copy.tsx

@@ -1,411 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link, Outlet, useRouterState } from "@tanstack/react-router";
-import { motion } from "framer-motion";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  Badge,
-  BreadcrumbContainer,
-  Menu,
-  MenuGroup,
-  MenuItem,
-  TBreadcrumbFormat
-} from "@app/components/v2";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useProjectPermission,
-  useSubscription,
-  useWorkspace
-} from "@app/context";
-import { ProjectPermissionSecretScanningFindingActions } from "@app/context/ProjectPermissionContext/types";
-import {
-  useGetAccessRequestsCount,
-  useGetSecretApprovalRequestCount,
-  useGetSecretRotations
-} from "@app/hooks/api";
-import { useGetSecretScanningUnresolvedFindingCount } from "@app/hooks/api/secretScanningV2";
-import { ProjectType } from "@app/hooks/api/workspace/types";
-
-import { AssumePrivilegeModeBanner } from "./components/AssumePrivilegeModeBanner";
-import { ProjectSelect } from "./components/ProjectSelect";
-
-// This is a generic layout shared by all types of projects.
-// If the product layout differs significantly, create a new layout as needed.
-export const ProjectLayout = () => {
-  const { currentWorkspace } = useWorkspace();
-  const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
-  const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
-
-  const { permission } = useProjectPermission();
-
-  const { t } = useTranslation();
-  const { assumedPrivilegeDetails } = useProjectPermission();
-  const workspaceId = currentWorkspace?.id || "";
-  const projectSlug = currentWorkspace?.slug || "";
-  const { subscription } = useSubscription();
-
-  const isSecretManager = currentWorkspace?.type === ProjectType.SecretManager;
-  const isCertManager = currentWorkspace?.type === ProjectType.CertificateManager;
-  const isCmek = currentWorkspace?.type === ProjectType.KMS;
-  const isSSH = currentWorkspace?.type === ProjectType.SSH;
-  const isSecretScanning = currentWorkspace?.type === ProjectType.SecretScanning;
-
-  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({
-    workspaceId,
-    options: { enabled: isSecretManager }
-  });
-  const { data: accessApprovalRequestCount } = useGetAccessRequestsCount({
-    projectSlug,
-    options: { enabled: isSecretManager }
-  });
-
-  // we only show the secret rotations v1 tab if they have existing rotations
-  const { data: secretRotations } = useGetSecretRotations({
-    workspaceId,
-    options: {
-      enabled: isSecretManager && Boolean(subscription.secretRotation),
-      refetchOnMount: false
-    }
-  });
-
-  const pendingRequestsCount =
-    (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);
-
-  const { data: unresolvedFindings } = useGetSecretScanningUnresolvedFindingCount(workspaceId, {
-    enabled:
-      isSecretScanning &&
-      subscription.secretScanning &&
-      permission.can(
-        ProjectPermissionSecretScanningFindingActions.Read,
-        ProjectPermissionSub.SecretScanningFindings
-      ),
-    refetchInterval: 30000
-  });
-
-  return (
-    <>
-      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
-        {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
-        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
-          <motion.div
-            key="menu-project-items"
-            initial={{ x: -150 }}
-            animate={{ x: 0 }}
-            exit={{ x: -150 }}
-            transition={{ duration: 0.2 }}
-            className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
-          >
-            <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
-              <div>
-                <ProjectSelect />
-                <div className="px-1">
-                  <Menu>
-                    <MenuGroup title="Main Menu">
-                      {isSecretManager && (
-                        <Link
-                          to={`/${ProjectType.SecretManager}/$projectId/overview` as const}
-                          params={{
-                            projectId: currentWorkspace.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="lock-closed">
-                              {t("nav.menu.secrets")}
-                            </MenuItem>
-                          )}
-                        </Link>
-                      )}
-                      {isCertManager && (
-                        <>
-                          <Link
-                            to={
-                              `/${ProjectType.CertificateManager}/$projectId/subscribers` as const
-                            }
-                            params={{
-                              projectId: currentWorkspace.id
-                            }}
-                          >
-                            {({ isActive }) => (
-                              <MenuItem isSelected={isActive} icon="pki-subscriber">
-                                Subscribers
-                              </MenuItem>
-                            )}
-                          </Link>
-                          <Link
-                            to={
-                              `/${ProjectType.CertificateManager}/$projectId/certificate-templates` as const
-                            }
-                            params={{
-                              projectId: currentWorkspace.id
-                            }}
-                          >
-                            {({ isActive }) => (
-                              <MenuItem
-                                iconMode="reverse"
-                                isSelected={isActive}
-                                icon="pki-template"
-                              >
-                                Certificate Templates
-                              </MenuItem>
-                            )}
-                          </Link>
-                          <Link
-                            to={
-                              `/${ProjectType.CertificateManager}/$projectId/certificates` as const
-                            }
-                            params={{
-                              projectId: currentWorkspace.id
-                            }}
-                          >
-                            {({ isActive }) => (
-                              <MenuItem isSelected={isActive} icon="certificate">
-                                Certificates
-                              </MenuItem>
-                            )}
-                          </Link>
-                          <Link
-                            to={
-                              `/${ProjectType.CertificateManager}/$projectId/certificate-authorities` as const
-                            }
-                            params={{
-                              projectId: currentWorkspace.id
-                            }}
-                          >
-                            {({ isActive }) => (
-                              <MenuItem isSelected={isActive} icon="certificate-authority">
-                                Certificate Authorities
-                              </MenuItem>
-                            )}
-                          </Link>
-                          <Link
-                            to={`/${ProjectType.CertificateManager}/$projectId/alerting` as const}
-                            params={{
-                              projectId: currentWorkspace.id
-                            }}
-                          >
-                            {({ isActive }) => (
-                              <MenuItem isSelected={isActive} icon="notification-bell">
-                                Alerting
-                              </MenuItem>
-                            )}
-                          </Link>
-                        </>
-                      )}
-                      {isCmek && (
-                        <Link
-                          to={`/${ProjectType.KMS}/$projectId/overview` as const}
-                          params={{
-                            projectId: currentWorkspace.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="lock-closed">
-                              Overview
-                            </MenuItem>
-                          )}
-                        </Link>
-                      )}
-                      {isCmek && (
-                        <Link
-                          to={`/${ProjectType.KMS}/$projectId/kmip` as const}
-                          params={{
-                            projectId: currentWorkspace.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="key-user" iconMode="reverse">
-                              KMIP
-                            </MenuItem>
-                          )}
-                        </Link>
-                      )}
-                      {isSSH && (
-                        <>
-                          <Link
-                            to={`/projects/$projectId/${ProjectType.SSH}/overview` as const}
-                            params={{
-                              projectId: currentWorkspace.id
-                            }}
-                          >
-                            {({ isActive }) => (
-                              <MenuItem isSelected={isActive} icon="server">
-                                Hosts
-                              </MenuItem>
-                            )}
-                          </Link>
-                          {/* <Link
-                            to={`/projects/$projectId/${ProjectType.SSH}/certificates` as const}
-                            params={{
-                              projectId: currentWorkspace.id
-                            }}
-                          >
-                            {({ isActive }) => (
-                              <MenuItem isSelected={isActive} icon="certificate" iconMode="reverse">
-                                Certificates
-                              </MenuItem>
-                            )}
-                          </Link> */}
-                          <ProjectPermissionCan
-                            I={ProjectPermissionActions.Read}
-                            a={ProjectPermissionSub.SshCertificateAuthorities}
-                          >
-                            {(isAllowed) =>
-                              isAllowed && (
-                                <Link
-                                  to={`/projects/$projectId/${ProjectType.SSH}/cas` as const}
-                                  params={{
-                                    projectId: currentWorkspace.id
-                                  }}
-                                >
-                                  {({ isActive }) => (
-                                    <MenuItem
-                                      isSelected={isActive}
-                                      icon="certificate-authority"
-                                      iconMode="reverse"
-                                    >
-                                      Certificate Authorities
-                                    </MenuItem>
-                                  )}
-                                </Link>
-                              )
-                            }
-                          </ProjectPermissionCan>
-                        </>
-                      )}
-                      {isSecretScanning && (
-                        <Link
-                          to={`/${ProjectType.SecretScanning}/$projectId/data-sources` as const}
-                          params={{
-                            projectId: currentWorkspace.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="blocks">
-                              Data Sources
-                            </MenuItem>
-                          )}
-                        </Link>
-                      )}
-                      {isSecretScanning && (
-                        <Link
-                          to={`/${ProjectType.SecretScanning}/$projectId/findings` as const}
-                          params={{
-                            projectId: currentWorkspace.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="search">
-                              <div className="flex w-full items-center justify-between">
-                                <span>Findings</span>
-                                {Boolean(unresolvedFindings) && (
-                                  <Badge variant="primary" className="mr-2">
-                                    {unresolvedFindings}
-                                  </Badge>
-                                )}
-                              </div>
-                            </MenuItem>
-                          )}
-                        </Link>
-                      )}
-                      {isSecretManager && (
-                        <Link
-                          to={`/${ProjectType.SecretManager}/$projectId/integrations` as const}
-                          params={{
-                            projectId: currentWorkspace.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="jigsaw-puzzle">
-                              {t("nav.menu.integrations")}
-                            </MenuItem>
-                          )}
-                        </Link>
-                      )}
-                      {isSecretManager && Boolean(secretRotations?.length) && (
-                        <Link
-                          to={`/${ProjectType.SecretManager}/$projectId/secret-rotation` as const}
-                          params={{
-                            projectId: currentWorkspace.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="rotation">
-                              Secret Rotation
-                            </MenuItem>
-                          )}
-                        </Link>
-                      )}
-                      {isSecretManager && (
-                        <Link
-                          to={`/${ProjectType.SecretManager}/$projectId/approval` as const}
-                          params={{
-                            projectId: currentWorkspace.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="circular-check">
-                              Approvals
-                              {Boolean(
-                                secretApprovalReqCount?.open ||
-                                  accessApprovalRequestCount?.pendingCount
-                              ) && (
-                                <Badge variant="primary" className="ml-1.5">
-                                  {pendingRequestsCount}
-                                </Badge>
-                              )}
-                            </MenuItem>
-                          )}
-                        </Link>
-                      )}
-                    </MenuGroup>
-                    <MenuGroup title="Other">
-                      <Link
-                        to={`/${currentWorkspace.type}/$projectId/access-management` as const}
-                        params={{
-                          projectId: currentWorkspace.id
-                        }}
-                      >
-                        {({ isActive }) => (
-                          <MenuItem isSelected={isActive} icon="groups">
-                            Access Control
-                          </MenuItem>
-                        )}
-                      </Link>
-                      <Link
-                        to={`/${currentWorkspace.type}/$projectId/settings` as const}
-                        params={{
-                          projectId: currentWorkspace.id
-                        }}
-                      >
-                        {({ isActive }) => (
-                          <MenuItem isSelected={isActive} icon="toggle-settings">
-                            {t("nav.menu.project-settings")}
-                          </MenuItem>
-                        )}
-                      </Link>
-                    </MenuGroup>
-                  </Menu>
-                </div>
-              </div>
-            </nav>
-          </motion.div>
-          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 pb-4 dark:[color-scheme:dark]">
-            {breadcrumbs ? (
-              <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
-            ) : null}
-            <Outlet />
-          </div>
-        </div>
-      </div>
-      <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
-      </div>
-    </>
-  );
-};

frontend/src/layouts/ProjectLayout/components/AssumePrivilegeModeBanner/AssumePrivilegeModeBanner.tsx

@@ -3,10 +3,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Button } from "@app/components/v2";
 import { useProjectPermission, useWorkspace } from "@app/context";
+import { getCurrentProductFromUrl, getProjectHomePage } from "@app/helpers/project";
 import { useRemoveAssumeProjectPrivilege } from "@app/hooks/api";
 import { ActorType } from "@app/hooks/api/auditLogs/enums";
 import { ProjectType } from "@app/hooks/api/workspace/types";
-import { getCurrentProductFromUrl, getProjectHomePage } from "@app/helpers/project";
 
 export const AssumePrivilegeModeBanner = () => {
   const { currentWorkspace } = useWorkspace();

frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx

@@ -50,10 +50,10 @@ export const SecretManagerLayout = () => {
             className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
           >
             <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
-              <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
+              <div className="border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">
                 Secret Manager
               </div>
-              <div className="mt-2 flex-grow">
+              <div className="flex-1">
                 <Menu>
                   <Link
                     to="/projects/$projectId/secret-manager/overview"

frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx

@@ -19,10 +19,10 @@ export const SecretScanningLayout = () => {
           className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
         >
           <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
-            <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
+            <div className="border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">
               Secret Scanning
             </div>
-            <div className="mt-2 flex-grow">
+            <div className="flex-1">
               <Menu>
                 <Link
                   to="/projects/$projectId/secret-scanning/data-sources"

frontend/src/layouts/SshLayout/SshLayout.tsx

@@ -20,10 +20,8 @@ export const SshLayout = () => {
           className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
         >
           <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
-            <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
-              SSH
-            </div>
-            <div className="mt-2 flex-grow">
+            <div className="border-b border-mineshaft-600 px-4 py-3.5 text-lg text-white">SSH</div>
+            <div className="flex-1">
               <Menu>
                 <Link
                   to="/projects/$projectId/ssh/overview"

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/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx

@@ -7,7 +7,6 @@ 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";
@@ -25,7 +24,7 @@ export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBa
     "editDetails"
   ] as const);
 
-  const { id: templateId, name, description, type } = projectTemplate;
+  const { id: templateId, name, description } = projectTemplate;
 
   const deleteProjectTemplate = useDeleteProjectTemplate();
 
@@ -95,12 +94,10 @@ export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBa
           </div>
         )}
       </div>
-      {type === ProjectType.SecretManager && (
-        <ProjectTemplateEnvironmentsForm
-          isInfisicalTemplate={isInfisicalTemplate}
-          projectTemplate={projectTemplate}
-        />
-      )}
+      <ProjectTemplateEnvironmentsForm
+        isInfisicalTemplate={isInfisicalTemplate}
+        projectTemplate={projectTemplate}
+      />
       <ProjectTemplateRolesSection
         isInfisicalTemplate={isInfisicalTemplate}
         projectTemplate={projectTemplate}

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

@@ -271,7 +271,7 @@ export const ProjectTemplateEnvironmentsForm = ({
                           colorSchema="danger"
                           variant="plain"
                           ariaLabel="Remove environment"
-                          isDisabled={!isAllowed || environments.length === 1}
+                          isDisabled={!isAllowed}
                         >
                           <FontAwesomeIcon icon={faTrash} />
                         </IconButton>

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

@@ -12,7 +12,6 @@ import {
   ModalContent,
   TextArea
 } from "@app/components/v2";
-import { useGetProjectTypeFromRoute } from "@app/hooks";
 import {
   TProjectTemplate,
   useCreateProjectTemplate,
@@ -42,7 +41,6 @@ type FormProps = {
 const ProjectTemplateForm = ({ onComplete, projectTemplate }: FormProps) => {
   const createProjectTemplate = useCreateProjectTemplate();
   const updateProjectTemplate = useUpdateProjectTemplate();
-  const projectType = useGetProjectTypeFromRoute();
 
   const {
     handleSubmit,
@@ -57,17 +55,10 @@ const ProjectTemplateForm = ({ onComplete, projectTemplate }: FormProps) => {
   });
 
   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 });
+      : createProjectTemplate.mutateAsync({ ...data });
+
     try {
       const template = await mutation;
       createNotification({

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

@@ -23,9 +23,8 @@ import {
   Tr
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
-import { useGetProjectTypeFromRoute, usePopUp } from "@app/hooks";
+import { usePopUp } from "@app/hooks";
 import { TProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { DeleteProjectTemplateModal } from "./DeleteProjectTemplateModal";
 
@@ -36,8 +35,6 @@ type Props = {
 export const ProjectTemplatesTable = ({ onEdit }: Props) => {
   const { subscription } = useSubscription();
 
-  const projectType = useGetProjectTypeFromRoute();
-
   const { isPending, data: projectTemplates = [] } = useListProjectTemplates({
     enabled: subscription?.projectTemplates
   });
@@ -54,9 +51,7 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
     [search, projectTemplates]
   );
 
-  const isSecretManagerTemplates = projectType === ProjectType.SecretManager;
-
-  const colSpan = isSecretManagerTemplates ? 4 : 3;
+  const colSpan = 4;
 
   return (
     <div>
@@ -72,7 +67,7 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
             <Tr>
               <Th>Name</Th>
               <Th>Roles</Th>
-              {isSecretManagerTemplates && <Th>Environments</Th>}
+              <Th>Environments</Th>
               <Th />
             </Tr>
           </THead>
@@ -124,30 +119,26 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
                       </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="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

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