fix lint

Updated the UI so that instead of having a dropdown to select + a heading on the project overview page, the heading becomes the drop down for my projects vs all projects

backend/src/db/migrations/20250313124706_add-privilege-upgrade-field.ts

@@ -1,4 +1,5 @@
 import { Knex } from "knex";
+
 import { TableName } from "../schemas";
 
 export async function up(knex: Knex): Promise<void> {

backend/src/db/schemas/models.ts

@@ -233,3 +233,8 @@ export enum ActionProjectType {
   // project operations that happen on all types
   Any = "any"
 }
+
+export enum SortDirection {
+  ASC = "asc",
+  DESC = "desc"
+}

backend/src/ee/services/audit-log/audit-log-types.ts

@@ -285,7 +285,9 @@ export enum EventType {
   KMIP_OPERATION_ACTIVATE = "kmip-operation-activate",
   KMIP_OPERATION_REVOKE = "kmip-operation-revoke",
   KMIP_OPERATION_LOCATE = "kmip-operation-locate",
-  KMIP_OPERATION_REGISTER = "kmip-operation-register"
+  KMIP_OPERATION_REGISTER = "kmip-operation-register",
+
+  PROJECT_ACCESS_REQUEST = "project-access-request"
 }
 
 export const filterableSecretEvents: EventType[] = [
@@ -2277,6 +2279,15 @@ interface KmipOperationRegisterEvent {
   };
 }
 
+interface ProjectAccessRequestEvent {
+  type: EventType.PROJECT_ACCESS_REQUEST;
+  metadata: {
+    projectId: string;
+    requesterId: string;
+    requesterEmail: string;
+  };
+}
+
 interface SetupKmipEvent {
   type: EventType.SETUP_KMIP;
   metadata: {
@@ -2511,5 +2522,6 @@ export type Event =
   | KmipOperationRevokeEvent
   | KmipOperationLocateEvent
   | KmipOperationRegisterEvent
+  | ProjectAccessRequestEvent
   | CreateSecretRequestEvent
   | SecretApprovalRequestReview;

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

@@ -5,6 +5,7 @@
 // TODO(akhilmhdh): With tony find out the api structure and fill it here
 
 import { ForbiddenError } from "@casl/ability";
+import { CronJob } from "cron";
 import { Knex } from "knex";
 
 import { TKeyStoreFactory } from "@app/keystore/keystore";
@@ -85,6 +86,20 @@ export const licenseServiceFactory = ({
     appCfg.LICENSE_KEY || ""
   );
 
+  const syncLicenseKeyOnPremFeatures = async (shouldThrow: boolean = false) => {
+    logger.info("Start syncing license key features");
+    try {
+      const {
+        data: { currentPlan }
+      } = await licenseServerOnPremApi.request.get<{ currentPlan: TFeatureSet }>("/api/license/v1/plan");
+      onPremFeatures = currentPlan;
+      logger.info("Successfully synchronized license key features");
+    } catch (error) {
+      logger.error(error, "Failed to synchronize license key features");
+      if (shouldThrow) throw error;
+    }
+  };
+
   const init = async () => {
     try {
       if (appCfg.LICENSE_SERVER_KEY) {
@@ -98,10 +113,7 @@ export const licenseServiceFactory = ({
       if (appCfg.LICENSE_KEY) {
         const token = await licenseServerOnPremApi.refreshLicense();
         if (token) {
-          const {
-            data: { currentPlan }
-          } = await licenseServerOnPremApi.request.get<{ currentPlan: TFeatureSet }>("/api/license/v1/plan");
-          onPremFeatures = currentPlan;
+          await syncLicenseKeyOnPremFeatures(true);
           instanceType = InstanceType.EnterpriseOnPrem;
           logger.info(`Instance type: ${InstanceType.EnterpriseOnPrem}`);
           isValidLicense = true;
@@ -147,6 +159,15 @@ export const licenseServiceFactory = ({
     }
   };
 
+  const initializeBackgroundSync = async () => {
+    if (appCfg.LICENSE_KEY) {
+      logger.info("Setting up background sync process for refresh onPremFeatures");
+      const job = new CronJob("*/10 * * * *", syncLicenseKeyOnPremFeatures);
+      job.start();
+      return job;
+    }
+  };
+
   const getPlan = async (orgId: string, projectId?: string) => {
     logger.info(`getPlan: attempting to fetch plan for [orgId=${orgId}] [projectId=${projectId}]`);
     try {
@@ -662,6 +683,7 @@ export const licenseServiceFactory = ({
     getOrgTaxInvoices,
     getOrgTaxIds,
     addOrgTaxId,
-    delOrgTaxId
+    delOrgTaxId,
+    initializeBackgroundSync
   };
 };

backend/src/lib/api-docs/constants.ts

@@ -633,7 +633,8 @@ export const FOLDERS = {
     path: "The path to list folders from.",
     directory: "The directory to list folders from. (Deprecated in favor of path)",
     recursive: "Whether or not to fetch all folders from the specified base path, and all of its subdirectories.",
-    lastSecretModified: "The timestamp used to filter folders with secrets modified after the specified date. The format for this timestamp is ISO 8601 (e.g. 2025-04-01T09:41:45-04:00)"
+    lastSecretModified:
+      "The timestamp used to filter folders with secrets modified after the specified date. The format for this timestamp is ISO 8601 (e.g. 2025-04-01T09:41:45-04:00)"
   },
   GET_BY_ID: {
     folderId: "The ID of the folder to get details."

backend/src/lib/validator/validate-string.ts

@@ -36,7 +36,8 @@ export enum CharacterType {
   DoubleQuote = "doubleQuote", // "
   Comma = "comma", // ,
   Semicolon = "semicolon", // ;
-  Exclamation = "exclamation" // !
+  Exclamation = "exclamation", // !
+  Fullstop = "fullStop" // .
 }
 
 /**
@@ -81,7 +82,8 @@ export const characterValidator = (allowedCharacters: CharacterType[]) => {
     [CharacterType.DoubleQuote]: '\\"',
     [CharacterType.Comma]: ",",
     [CharacterType.Semicolon]: ";",
-    [CharacterType.Exclamation]: "!"
+    [CharacterType.Exclamation]: "!",
+    [CharacterType.Fullstop]: "."
   };
 
   // Combine patterns from allowed characters

backend/src/server/routes/index.ts

@@ -662,6 +662,7 @@ export const registerRoutes = async (
   });
 
   const orgAdminService = orgAdminServiceFactory({
+    smtpService,
     projectDAL,
     permissionService,
     projectUserMembershipRoleDAL,
@@ -964,7 +965,8 @@ export const registerRoutes = async (
     projectSlackConfigDAL,
     slackIntegrationDAL,
     projectTemplateService,
-    groupProjectDAL
+    groupProjectDAL,
+    smtpService
   });
 
   const projectEnvService = projectEnvServiceFactory({
@@ -1607,6 +1609,10 @@ export const registerRoutes = async (
     if (rateLimitSyncJob) {
       cronJobs.push(rateLimitSyncJob);
     }
+    const licenseSyncJob = await licenseService.initializeBackgroundSync();
+    if (licenseSyncJob) {
+      cronJobs.push(licenseSyncJob);
+    }
   }
 
   server.decorate<FastifyZodProvider["store"]>("store", {

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

@@ -8,15 +8,17 @@ import {
   ProjectSlackConfigsSchema,
   ProjectType,
   SecretFoldersSchema,
+  SortDirection,
   UserEncryptionKeysSchema,
   UsersSchema
 } from "@app/db/schemas";
 import { EventType } from "@app/ee/services/audit-log/audit-log-types";
 import { PROJECTS } from "@app/lib/api-docs";
+import { CharacterType, characterValidator } from "@app/lib/validator/validate-string";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
-import { AuthMode } from "@app/services/auth/auth-type";
-import { ProjectFilterType } from "@app/services/project/project-types";
+import { ActorType, AuthMode } from "@app/services/auth/auth-type";
+import { ProjectFilterType, SearchProjectSortBy } from "@app/services/project/project-types";
 import { validateSlackChannelsField } from "@app/services/slack/slack-auth-validators";
 
 import { integrationAuthPubSchema, SanitizedProjectSchema } from "../sanitizedSchemas";
@@ -704,4 +706,107 @@ export const registerProjectRouter = async (server: FastifyZodProvider) => {
       return environmentsFolders;
     }
   });
+
+  server.route({
+    method: "POST",
+    url: "/search",
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      body: z.object({
+        limit: z.number().default(100),
+        offset: z.number().default(0),
+        type: z.nativeEnum(ProjectType).optional(),
+        orderBy: z.nativeEnum(SearchProjectSortBy).optional().default(SearchProjectSortBy.NAME),
+        orderDirection: z.nativeEnum(SortDirection).optional().default(SortDirection.ASC),
+        name: z
+          .string()
+          .trim()
+          .refine((val) => characterValidator([CharacterType.AlphaNumeric, CharacterType.Hyphen])(val), {
+            message: "Invalid pattern: only alphanumeric characters, - are allowed."
+          })
+          .optional()
+      }),
+      response: {
+        200: z.object({
+          projects: SanitizedProjectSchema.extend({ isMember: z.boolean() }).array(),
+          totalCount: z.number()
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    handler: async (req) => {
+      const { docs: projects, totalCount } = await server.services.project.searchProjects({
+        permission: req.permission,
+        ...req.body
+      });
+
+      return { projects, totalCount };
+    }
+  });
+
+  server.route({
+    method: "POST",
+    url: "/:workspaceId/project-access",
+    config: {
+      rateLimit: writeLimit
+    },
+    schema: {
+      params: z.object({
+        workspaceId: z.string().trim()
+      }),
+      body: z.object({
+        comment: z
+          .string()
+          .trim()
+          .max(2500)
+          .refine(
+            (val) =>
+              characterValidator([
+                CharacterType.AlphaNumeric,
+                CharacterType.Hyphen,
+                CharacterType.Comma,
+                CharacterType.Fullstop,
+                CharacterType.Spaces,
+                CharacterType.Exclamation
+              ])(val),
+            {
+              message: "Invalid pattern: only alphanumeric characters, spaces, -.!, are allowed."
+            }
+          )
+          .optional()
+      }),
+      response: {
+        200: z.object({
+          message: z.string()
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT]),
+    handler: async (req) => {
+      await server.services.project.requestProjectAccess({
+        permission: req.permission,
+        comment: req.body.comment,
+        projectId: req.params.workspaceId
+      });
+
+      if (req.auth.actor === ActorType.USER) {
+        await server.services.auditLog.createAuditLog({
+          ...req.auditLogInfo,
+          projectId: req.params.workspaceId,
+          event: {
+            type: EventType.PROJECT_ACCESS_REQUEST,
+            metadata: {
+              projectId: req.params.workspaceId,
+              requesterEmail: req.auth.user.email || req.auth.user.username,
+              requesterId: req.auth.userId
+            }
+          }
+        });
+      }
+
+      return { message: "Project access request has been send to project admins" };
+    }
+  });
 };

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

@@ -12,17 +12,22 @@ import { TProjectBotDALFactory } from "../project-bot/project-bot-dal";
 import { TProjectKeyDALFactory } from "../project-key/project-key-dal";
 import { TProjectMembershipDALFactory } from "../project-membership/project-membership-dal";
 import { TProjectUserMembershipRoleDALFactory } from "../project-membership/project-user-membership-role-dal";
+import { SmtpTemplates, TSmtpService } from "../smtp/smtp-service";
 import { TUserDALFactory } from "../user/user-dal";
 import { TAccessProjectDTO, TListOrgProjectsDTO } from "./org-admin-types";
 
 type TOrgAdminServiceFactoryDep = {
   permissionService: Pick<TPermissionServiceFactory, "getOrgPermission">;
   projectDAL: Pick<TProjectDALFactory, "find" | "findById" | "findProjectGhostUser">;
-  projectMembershipDAL: Pick<TProjectMembershipDALFactory, "findOne" | "create" | "transaction" | "delete">;
+  projectMembershipDAL: Pick<
+    TProjectMembershipDALFactory,
+    "findOne" | "create" | "transaction" | "delete" | "findAllProjectMembers"
+  >;
   projectKeyDAL: Pick<TProjectKeyDALFactory, "findLatestProjectKey" | "create">;
   projectBotDAL: Pick<TProjectBotDALFactory, "findOne">;
   userDAL: Pick<TUserDALFactory, "findUserEncKeyByUserId">;
   projectUserMembershipRoleDAL: Pick<TProjectUserMembershipRoleDALFactory, "create" | "delete">;
+  smtpService: Pick<TSmtpService, "sendMail">;
 };
 
 export type TOrgAdminServiceFactory = ReturnType<typeof orgAdminServiceFactory>;
@@ -34,7 +39,8 @@ export const orgAdminServiceFactory = ({
   projectKeyDAL,
   projectBotDAL,
   userDAL,
-  projectUserMembershipRoleDAL
+  projectUserMembershipRoleDAL,
+  smtpService
 }: TOrgAdminServiceFactoryDep) => {
   const listOrgProjects = async ({
     actor,
@@ -184,6 +190,23 @@ export const orgAdminServiceFactory = ({
       );
       return newProjectMembership;
     });
+
+    const projectMembers = await projectMembershipDAL.findAllProjectMembers(projectId);
+    const filteredProjectMembers = projectMembers
+      .filter(
+        (member) => member.roles.some((role) => role.role === ProjectMembershipRole.Admin) && member.userId !== actorId
+      )
+      .map((el) => el.user.email!);
+
+    await smtpService.sendMail({
+      template: SmtpTemplates.OrgAdminProjectDirectAccess,
+      recipients: filteredProjectMembers,
+      subjectLine: "Organization Admin Project Direct Access Issued",
+      substitutions: {
+        projectName: project.name,
+        email: projectMembers.find((el) => el.userId === actorId)?.user?.username
+      }
+    });
     return { isExistingMember: false, membership: updatedMembership };
   };
 

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

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

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

@@ -6,20 +6,23 @@ import {
   ProjectType,
   ProjectUpgradeStatus,
   ProjectVersion,
+  SortDirection,
   TableName,
+  TProjects,
   TProjectsUpdate
 } from "@app/db/schemas";
 import { BadRequestError, DatabaseError, NotFoundError, UnauthorizedError } from "@app/lib/errors";
 import { ormify, selectAllTableCols, sqlNestRelationships } from "@app/lib/knex";
 
-import { Filter, ProjectFilterType } from "./project-types";
+import { ActorType } from "../auth/auth-type";
+import { Filter, ProjectFilterType, SearchProjectSortBy } from "./project-types";
 
 export type TProjectDALFactory = ReturnType<typeof projectDALFactory>;
 
 export const projectDALFactory = (db: TDbClient) => {
   const projectOrm = ormify(db, TableName.Project);
 
-  const findAllProjects = async (userId: string, orgId: string, projectType: ProjectType | "all") => {
+  const findUserProjects = async (userId: string, orgId: string, projectType: ProjectType | "all") => {
     try {
       const workspaces = await db
         .replicaNode()(TableName.ProjectMembership)
@@ -352,9 +355,79 @@ export const projectDALFactory = (db: TDbClient) => {
     }
   };
 
+  const searchProjects = async (dto: {
+    orgId: string;
+    actor: ActorType;
+    actorId: string;
+    type?: ProjectType;
+    limit?: number;
+    offset?: number;
+    name?: string;
+    sortBy?: SearchProjectSortBy;
+    sortDir?: SortDirection;
+  }) => {
+    const { limit = 20, offset = 0, sortBy = SearchProjectSortBy.NAME, sortDir = SortDirection.ASC } = dto;
+
+    const userMembershipSubquery = db(TableName.ProjectMembership).where({ userId: dto.actorId }).select("projectId");
+    const groups = db(TableName.UserGroupMembership).where({ userId: dto.actorId }).select("groupId");
+    const groupMembershipSubquery = db(TableName.GroupProjectMembership).whereIn("groupId", groups).select("projectId");
+
+    const identityMembershipSubQuery = db(TableName.IdentityProjectMembership)
+      .where({ identityId: dto.actorId })
+      .select("projectId");
+
+    // Get the SQL strings for the subqueries
+    const userMembershipSql = userMembershipSubquery.toQuery();
+    const groupMembershipSql = groupMembershipSubquery.toQuery();
+    const identityMembershipSql = identityMembershipSubQuery.toQuery();
+
+    const query = db
+      .replicaNode()(TableName.Project)
+      .where(`${TableName.Project}.orgId`, dto.orgId)
+      .select(selectAllTableCols(TableName.Project))
+      .select(db.raw("COUNT(*) OVER() AS count"))
+      .select<(TProjects & { isMember: boolean; count: number })[]>(
+        dto.actor === ActorType.USER
+          ? db.raw(
+              `
+          CASE
+            WHEN ${TableName.Project}.id IN (?) THEN TRUE
+            WHEN ${TableName.Project}.id IN (?) THEN TRUE
+            ELSE FALSE
+          END as "isMember"
+        `,
+              [db.raw(userMembershipSql), db.raw(groupMembershipSql)]
+            )
+          : db.raw(
+              `
+          CASE
+            WHEN ${TableName.Project}.id IN (?) THEN TRUE
+            ELSE FALSE
+          END as "isMember"
+        `,
+              [db.raw(identityMembershipSql)]
+            )
+      )
+      .limit(limit)
+      .offset(offset);
+    if (sortBy === SearchProjectSortBy.NAME) {
+      void query.orderBy([{ column: `${TableName.Project}.name`, order: sortDir }]);
+    }
+
+    if (dto.type) {
+      void query.where(`${TableName.Project}.type`, dto.type);
+    }
+    if (dto.name) {
+      void query.whereILike(`${TableName.Project}.name`, `%${dto.name}%`);
+    }
+    const docs = await query;
+
+    return { docs, totalCount: Number(docs?.[0]?.count ?? 0) };
+  };
+
   return {
     ...projectOrm,
-    findAllProjects,
+    findUserProjects,
     setProjectUpgradeStatus,
     findAllProjectsByIdentity,
     findProjectGhostUser,
@@ -363,6 +436,7 @@ export const projectDALFactory = (db: TDbClient) => {
     findProjectBySlug,
     findProjectWithOrg,
     checkProjectUpgradeStatus,
-    getProjectFromSplitId
+    getProjectFromSplitId,
+    searchProjects
   };
 };

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

@@ -23,6 +23,7 @@ import { TSshCertificateAuthorityDALFactory } from "@app/ee/services/ssh/ssh-cer
 import { TSshCertificateDALFactory } from "@app/ee/services/ssh-certificate/ssh-certificate-dal";
 import { TSshCertificateTemplateDALFactory } from "@app/ee/services/ssh-certificate-template/ssh-certificate-template-dal";
 import { TKeyStoreFactory } from "@app/keystore/keystore";
+import { getConfig } from "@app/lib/config/env";
 import { infisicalSymmetricEncypt } from "@app/lib/crypto/encryption";
 import { BadRequestError, ForbiddenRequestError, NotFoundError } from "@app/lib/errors";
 import { groupBy } from "@app/lib/fn";
@@ -57,6 +58,7 @@ import { ROOT_FOLDER_NAME, TSecretFolderDALFactory } from "../secret-folder/secr
 import { TSecretV2BridgeDALFactory } from "../secret-v2-bridge/secret-v2-bridge-dal";
 import { TProjectSlackConfigDALFactory } from "../slack/project-slack-config-dal";
 import { TSlackIntegrationDALFactory } from "../slack/slack-integration-dal";
+import { SmtpTemplates, TSmtpService } from "../smtp/smtp-service";
 import { TUserDALFactory } from "../user/user-dal";
 import { TProjectDALFactory } from "./project-dal";
 import { assignWorkspaceKeysToMembers, createProjectKey } from "./project-fns";
@@ -76,6 +78,8 @@ import {
   TListProjectSshCertificatesDTO,
   TListProjectSshCertificateTemplatesDTO,
   TLoadProjectKmsBackupDTO,
+  TProjectAccessRequestDTO,
+  TSearchProjectsDTO,
   TToggleProjectAutoCapitalizationDTO,
   TUpdateAuditLogsRetentionDTO,
   TUpdateProjectDTO,
@@ -106,7 +110,10 @@ type TProjectServiceFactoryDep = {
   identityProjectDAL: TIdentityProjectDALFactory;
   identityProjectMembershipRoleDAL: Pick<TIdentityProjectMembershipRoleDALFactory, "create">;
   projectKeyDAL: Pick<TProjectKeyDALFactory, "create" | "findLatestProjectKey" | "delete" | "find" | "insertMany">;
-  projectMembershipDAL: Pick<TProjectMembershipDALFactory, "create" | "findProjectGhostUser" | "findOne" | "delete">;
+  projectMembershipDAL: Pick<
+    TProjectMembershipDALFactory,
+    "create" | "findProjectGhostUser" | "findOne" | "delete" | "findAllProjectMembers"
+  >;
   groupProjectDAL: Pick<TGroupProjectDALFactory, "delete">;
   projectSlackConfigDAL: Pick<TProjectSlackConfigDALFactory, "findOne" | "transaction" | "updateById" | "create">;
   slackIntegrationDAL: Pick<TSlackIntegrationDALFactory, "findById" | "findByIdWithWorkflowIntegrationDetails">;
@@ -123,6 +130,7 @@ type TProjectServiceFactoryDep = {
   orgService: Pick<TOrgServiceFactory, "addGhostUser">;
   licenseService: Pick<TLicenseServiceFactory, "getPlan">;
   queueService: Pick<TQueueServiceFactory, "stopRepeatableJob">;
+  smtpService: Pick<TSmtpService, "sendMail">;
 
   orgDAL: Pick<TOrgDALFactory, "findOne">;
   keyStore: Pick<TKeyStoreFactory, "deleteItem">;
@@ -177,7 +185,8 @@ export const projectServiceFactory = ({
   projectSlackConfigDAL,
   slackIntegrationDAL,
   projectTemplateService,
-  groupProjectDAL
+  groupProjectDAL,
+  smtpService
 }: TProjectServiceFactoryDep) => {
   /*
    * Create workspace. Make user the admin
@@ -506,7 +515,7 @@ export const projectServiceFactory = ({
     actorOrgId,
     type = ProjectType.SecretManager
   }: TListProjectsDTO) => {
-    const workspaces = await projectDAL.findAllProjects(actorId, actorOrgId, type);
+    const workspaces = await projectDAL.findUserProjects(actorId, actorOrgId, type);
 
     if (includeRoles) {
       const { permission } = await permissionService.getUserOrgPermission(
@@ -1339,6 +1348,85 @@ export const projectServiceFactory = ({
     });
   };
 
+  const searchProjects = async ({
+    name,
+    offset,
+    permission,
+    limit,
+    type,
+    orderBy,
+    orderDirection
+  }: TSearchProjectsDTO) => {
+    // check user belong to org
+    await permissionService.getOrgPermission(
+      permission.type,
+      permission.id,
+      permission.orgId,
+      permission.authMethod,
+      permission.orgId
+    );
+
+    return projectDAL.searchProjects({
+      limit,
+      offset,
+      name,
+      type,
+      orgId: permission.orgId,
+      actor: permission.type,
+      actorId: permission.id,
+      sortBy: orderBy,
+      sortDir: orderDirection
+    });
+  };
+
+  const requestProjectAccess = async ({ permission, comment, projectId }: TProjectAccessRequestDTO) => {
+    // check user belong to org
+    await permissionService.getOrgPermission(
+      permission.type,
+      permission.id,
+      permission.orgId,
+      permission.authMethod,
+      permission.orgId
+    );
+
+    const projectMember = await permissionService
+      .getProjectPermission({
+        actor: permission.type,
+        actorId: permission.id,
+        projectId,
+        actionProjectType: ActionProjectType.Any,
+        actorAuthMethod: permission.authMethod,
+        actorOrgId: permission.orgId
+      })
+      .catch(() => {
+        return null;
+      });
+    if (projectMember) throw new BadRequestError({ message: "User already has access to the project" });
+
+    const projectMembers = await projectMembershipDAL.findAllProjectMembers(projectId);
+    const filteredProjectMembers = projectMembers
+      .filter((member) => member.roles.some((role) => role.role === ProjectMembershipRole.Admin))
+      .map((el) => el.user.email!);
+    const org = await orgDAL.findOne({ id: permission.orgId });
+    const project = await projectDAL.findById(projectId);
+    const userDetails = await userDAL.findById(permission.id);
+    const appCfg = getConfig();
+
+    await smtpService.sendMail({
+      template: SmtpTemplates.ProjectAccessRequest,
+      recipients: filteredProjectMembers,
+      subjectLine: "Project Access Request",
+      substitutions: {
+        requesterName: `${userDetails.firstName} ${userDetails.lastName}`,
+        requesterEmail: userDetails.email,
+        projectName: project?.name,
+        orgName: org?.name,
+        note: comment,
+        callback_url: `${appCfg.SITE_URL}/${project.type}/${project.id}/access-management?selectedTab=members&requesterEmail=${userDetails.email}`
+      }
+    });
+  };
+
   return {
     createProject,
     deleteProject,
@@ -1364,6 +1452,8 @@ export const projectServiceFactory = ({
     loadProjectKmsBackup,
     getProjectKmsKeys,
     getProjectSlackConfig,
-    updateProjectSlackConfig
+    updateProjectSlackConfig,
+    requestProjectAccess,
+    searchProjects
   };
 };

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

@@ -1,7 +1,7 @@
 import { Knex } from "knex";
 
-import { ProjectType, TProjectKeys } from "@app/db/schemas";
-import { TProjectPermission } from "@app/lib/types";
+import { ProjectType, SortDirection, TProjectKeys } from "@app/db/schemas";
+import { OrgServiceActor, TProjectPermission } from "@app/lib/types";
 
 import { ActorAuthMethod, ActorType } from "../auth/auth-type";
 
@@ -158,3 +158,23 @@ export type TUpdateProjectSlackConfig = {
   isSecretRequestNotificationEnabled: boolean;
   secretRequestChannels: string;
 } & TProjectPermission;
+
+export enum SearchProjectSortBy {
+  NAME = "name"
+}
+
+export type TSearchProjectsDTO = {
+  permission: OrgServiceActor;
+  name?: string;
+  type?: ProjectType;
+  limit?: number;
+  offset?: number;
+  orderBy?: SearchProjectSortBy;
+  orderDirection?: SortDirection;
+};
+
+export type TProjectAccessRequestDTO = {
+  permission: OrgServiceActor;
+  projectId: string;
+  comment?: string;
+};

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

@@ -40,7 +40,9 @@ export enum SmtpTemplates {
   ExternalImportSuccessful = "externalImportSuccessful.handlebars",
   ExternalImportFailed = "externalImportFailed.handlebars",
   ExternalImportStarted = "externalImportStarted.handlebars",
-  SecretRequestCompleted = "secretRequestCompleted.handlebars"
+  SecretRequestCompleted = "secretRequestCompleted.handlebars",
+  ProjectAccessRequest = "projectAccess.handlebars",
+  OrgAdminProjectDirectAccess = "orgAdminProjectGrantAccess.handlebars"
 }
 
 export enum SmtpHost {

backend/src/services/smtp/templates/accessApprovalRequest.handlebars

@@ -49,4 +49,4 @@
     {{emailFooter}}
   </body>
 
-</html>
+</html>

backend/src/services/smtp/templates/orgAdminProjectGrantAccess.handlebars

@@ -0,0 +1,16 @@
+<html>
+
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>Organization admin issued direct access to project</title>
+  </head>
+
+  <body>
+    <h2>Infisical</h2>
+		<p>The organization admin {{email}} has granted direct access to the project "{{projectName}}".</p>
+
+    {{emailFooter}}
+  </body>
+
+</html>

backend/src/services/smtp/templates/projectAccess.handlebars

@@ -0,0 +1,26 @@
+<html>
+
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>Project Access Request</title> 
+  </head>
+
+  <body>
+    <h2>Infisical</h2>
+    <h2>You have a new project access request!</h2>
+    <ul>
+				<li>Requester Name: "{{requesterName}}"</li>
+				<li>Requester Email: "{{requesterEmail}}"</li>
+				<li>Project Name: "{{projectName}}"</li>
+				<li>Organization Name: "{{orgName}}"</li>
+				<li>User Note: "{{note}}"</li>
+		</ul>
+		<p>
+		 Please click on the link below to grant access
+		</p>
+    <a href="{{callback_url}}">Grant Access</a>
+    {{emailFooter}}
+  </body>
+
+</html>

docker-compose.dev.yml

@@ -132,6 +132,8 @@ services:
   pgadmin:
     image: dpage/pgadmin4
     restart: always
+    volumes:
+      - ./servers.json:/pgadmin4/servers.json
     environment:
       PGADMIN_DEFAULT_EMAIL: admin@example.com
       PGADMIN_DEFAULT_PASSWORD: pass

docs/documentation/platform/access-controls/project-access-requests.mdx

@@ -0,0 +1,36 @@
+---
+title: "Project Access Requests"
+description: "Learn how to request access to projects in Infisical."
+---
+
+The Project Access Request feature allows users to view all projects within organization, including those they don't currently have access to.
+Users can request access to these projects by submitting a request that automatically notifies project administrators via email, along with any comments provided by the user.
+
+# Viewing Available Projects
+
+From the Infisical dashboard, users can view all projects within the organization:
+
+1.  Navigate to the main dashboard after logging in
+2.  The overview page for each product displays two tabs:
+
+        		- **My Projects**: Projects you currently have access to
+        		- **All Projects**: Complete list of projects in the organization
+
+![all-project-view](/images/platform/project-access-requests/all-project-view.png)
+
+# Requesting Access to a Project
+
+To request access to a project you don't currently have access for:
+
+1. Click the **Request Access** button next to the project name
+   ![all-project-view](/images/platform/project-access-requests/request-access.png)
+
+2. Add a comment explaining why you need access
+   ![all-project-view](/images/platform/project-access-requests/access-comment.png)
+
+3. Click **Submit Request**
+
+<Info>
+  Project administrators will receive email notification with details regarding
+  the access request.
+</Info>

docs/documentation/platform/admin-panel/org-admin-console.mdx

@@ -4,13 +4,13 @@ description: "View and manage resources across your organization"
 ---
 
 <Note>
-    The Organization Admin Console can only be accessed by organization members with admin status.
+  The Organization Admin Console can only be accessed by organization members
+  with admin status.
 </Note>
 
-
 ## Accessing the Organization Admin Console
 
-On the sidebar, tap on your initials to access the settings dropdown and press the **Organization Admin Console** option.
+On the sidebar, hover over **Admin** to access the settings dropdown and press the **Organization Admin Console** option.
 
 ![Access Organization Admin Console](/images/platform/admin-panels/access-org-admin-console.png)
 
@@ -20,12 +20,9 @@ The Projects tab lists all the projects within your organization, including thos
 
 ![Projects Section](/images/platform/admin-panels/org-admin-console-projects.png)
 
-
 ### Accessing a Project in Your Organization
 
 You can access a project that you are not a member of by tapping on the options menu of the project row and pressing the **Access** button.
 Doing so will grant you admin permissions for the selected project and add you as a member.
 
 ![Access project](/images/platform/admin-panels/org-admin-console-access.png)
-
-

docs/documentation/platform/admin-panel/server-admin.mdx

@@ -13,7 +13,7 @@ customize settings and manage users for their entire Infisical instance.
 
 ## Accessing the Server Admin Console
 
-On the sidebar, tap on your initials to access the settings dropdown and press the **Server Admin Console** option.
+On the sidebar, hover over **Admin** to access the settings dropdown and press the **Server Admin Console** option.
 
 ![Access Server Admin Console](/images/platform/admin-panels/access-server-admin-panel.png)
 
@@ -40,7 +40,7 @@ If you're using SAML/LDAP/OIDC for only one organization on your instance, you c
 
 By default, users signing up through SAML/LDAP/OIDC will still need to verify their email address to prevent email spoofing. This requirement can be skipped by enabling the switch to trust logins through the respective method.
 
-### Notices
+### Broadcast Messages
 
 Auth consent content is displayed to users on the login page. They can be used to display important information to users, such as a maintenance message or a new feature announcement. Both HTML and Markdown formatting are supported, allowing for customized styling like below:
 

docs/documentation/platform/project.mdx

@@ -3,19 +3,21 @@ title: "Projects"
 description: "Learn more and understand the concept of Infisical projects."
 ---
 
-A project in Infisical belongs to an [organization](./organization) and contains a number of environments, folders, and secrets. 
-Only users and machine identities who belong to a project can access resources inside of it according to predefined permissions. 
+A project in Infisical belongs to an [organization](./organization) and contains a number of environments, folders, and secrets.
+Only users and machine identities who belong to a project can access resources inside of it according to predefined permissions.
+
+Infisical also allows users to request project access. Refer to the [project access request section](./access-controls/project-access-requests)
 
 ## Project environments
 
-For both visual and organizational structure, Infisical allows splitting up secrets into environments (e.g., development, staging, production). In project settings, such environments can be 
-customized depending on the intended use case. 
+For both visual and organizational structure, Infisical allows splitting up secrets into environments (e.g., development, staging, production). In project settings, such environments can be
+customized depending on the intended use case.
 
 ![project secrets overview](../../images/platform/project/project-environments.png)
 
 ## Secrets Overview
 
-The **Secrets Overview** page captures a birds-eye-view of secrets and [folders](./folder) across environments. 
+The **Secrets Overview** page captures a birds-eye-view of secrets and [folders](./folder) across environments.
 This is useful for comparing secrets, identifying if anything is missing, and making quick changes.
 
 ![project secrets overview](../../images/platform/project/project-secrets-overview-open.png)
@@ -98,7 +100,7 @@ Then:
 - If users B and C fetch the secret D back, they both get the value E.
 
 <Info>
-    Please keep in mind that secret reminders won't work with personal overrides.
+  Please keep in mind that secret reminders won't work with personal overrides.
 </Info>
 
 ![project override secret](../../images/platform/project/project-secrets-override.png)
@@ -112,4 +114,3 @@ To view the full details of each secret, you can hover over it and press on the
 This opens up a side-drawer:
 
 ![project secrets drawer](../../images/platform/project/project-secrets-drawer.png)
-

docs/documentation/platform/secret-reference.mdx

@@ -11,10 +11,11 @@ This means that updating the value of a base secret propagates directly to other
 
 ![secret referencing](../../images/platform/secret-references-imports/secret-reference.png)
 
-Since secret referencing works by reconstructing values back on the client side, the client, be it a user, service token, or a machine identity, fetching back secrets 
-must be permissioned access to all base and dependent secrets.
+Since secret referencing reconstructs values on the client side, any client (user, service token, or machine identity) fetching secrets must have proper permissions to access all base and dependent secrets. Without sufficient permissions, secret references will not resolve to their appropriate values.
 
-For example, to access some secret `A` whose values depend on secrets `B` and `C` from different scopes, a client must have `read` access to the scopes of secrets `A`, `B`, and `C`.
+For example, if secret A references values from secrets B and C located in different scopes, the client must have read access to all three scopes containing secrets A, B, and C. If permission to any referenced secret is missing, the reference will remain unresolved, potentially causing application errors or unexpected behavior.
+
+This is an important security consideration when planning your secret access strategy, especially when working with cross-environment or cross-folder references.
 
 ### Syntax
 
@@ -28,11 +29,11 @@ Then consider the following scenarios:
 
 Here are a few more helpful examples for how to reference secrets in different contexts:
 
-| Reference syntax                | Environment | Folder       | Secret Key |
-| --------------------- | ----------- | ------------ | ---------- |
-| `${KEY1}`               | same env    | same folder | KEY1       |
-| `${dev.KEY2}`           | `dev`         | `/` (root of dev environment)            | KEY2       |
-| `${prod.frontend.KEY2}` | `prod`        | `/frontend`    | KEY2       |
+| Reference syntax        | Environment | Folder                        | Secret Key |
+| ----------------------- | ----------- | ----------------------------- | ---------- |
+| `${KEY1}`               | same env    | same folder                   | KEY1       |
+| `${dev.KEY2}`           | `dev`       | `/` (root of dev environment) | KEY2       |
+| `${prod.frontend.KEY2}` | `prod`      | `/frontend`                   | KEY2       |
 
 ## Secret Imports
 
@@ -59,4 +60,12 @@ To reorder a secret import, hover over it and drag the arrows handle to the posi
 
 ![reorder secret import](../../images/platform/secret-references-imports/secret-import-reorder.png)
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/o11bMU0pXRs?si=dCprt3xLWPrSOJxy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/o11bMU0pXRs?si=dCprt3xLWPrSOJxy"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowfullscreen
+></iframe>

docs/mint.json

@@ -161,6 +161,7 @@
             "documentation/platform/access-controls/additional-privileges",
             "documentation/platform/access-controls/temporary-access",
             "documentation/platform/access-controls/access-requests",
+            "documentation/platform/access-controls/project-access-requests",
             "documentation/platform/pr-workflows",
             "documentation/platform/groups"
           ]
@@ -210,7 +211,10 @@
         },
         {
           "group": "Gateway",
-          "pages": ["documentation/platform/gateways/overview", "documentation/platform/gateways/gateway-security"]
+          "pages": [
+            "documentation/platform/gateways/overview",
+            "documentation/platform/gateways/gateway-security"
+          ]
         },
         "documentation/platform/project-templates",
         {

frontend/src/components/v2/PageHeader/PageHeader.tsx

@@ -9,12 +9,12 @@ type Props = {
 };
 
 export const PageHeader = ({ title, description, children, className }: Props) => (
-  <div className={twMerge("mb-4", className)}>
+  <div className={twMerge("mb-4 w-full", className)}>
     <div className="flex w-full justify-between">
       <div className="w-full">
         <h1 className="mr-4 text-3xl font-semibold capitalize text-white">{title}</h1>
       </div>
-      <div>{children}</div>
+      <div className="flex items-center">{children}</div>
     </div>
     <div className="mt-2 text-gray-400">{description}</div>
   </div>

frontend/src/components/v2/PasswordGenerator/PasswordGenerator.tsx

@@ -0,0 +1,273 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { faCheck, faCopy, faKey, faRefresh } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, Checkbox, IconButton, Slider } from "@app/components/v2";
+import { useTimedReset } from "@app/hooks";
+
+type PasswordOptionsType = {
+  length: number;
+  useUppercase: boolean;
+  useLowercase: boolean;
+  useNumbers: boolean;
+  useSpecialChars: boolean;
+};
+
+type PasswordGeneratorModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onUsePassword?: (password: string) => void;
+  minLength?: number;
+  maxLength?: number;
+};
+
+const PasswordGeneratorModal = ({
+  isOpen,
+  onClose,
+  onUsePassword,
+  minLength = 12,
+  maxLength = 64
+}: PasswordGeneratorModalProps) => {
+  const [copyText, isCopying, setCopyText] = useTimedReset<string>({
+    initialState: "Copy"
+  });
+  const [refresh, setRefresh] = useState(false);
+  const [passwordOptions, setPasswordOptions] = useState<PasswordOptionsType>({
+    length: minLength,
+    useUppercase: true,
+    useLowercase: true,
+    useNumbers: true,
+    useSpecialChars: true
+  });
+
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const generatePassword = () => {
+    const charset = {
+      uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+      lowercase: "abcdefghijklmnopqrstuvwxyz",
+      numbers: "0123456789",
+      specialChars: "-_.~!*"
+    };
+
+    let availableChars = "";
+    if (passwordOptions.useUppercase) availableChars += charset.uppercase;
+    if (passwordOptions.useLowercase) availableChars += charset.lowercase;
+    if (passwordOptions.useNumbers) availableChars += charset.numbers;
+    if (passwordOptions.useSpecialChars) availableChars += charset.specialChars;
+
+    if (availableChars === "") availableChars = charset.lowercase + charset.numbers;
+
+    let newPassword = "";
+    for (let i = 0; i < passwordOptions.length; i += 1) {
+      const randomIndex = Math.floor(Math.random() * availableChars.length);
+      newPassword += availableChars[randomIndex];
+    }
+
+    return newPassword;
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+          onClose();
+        }
+      };
+
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {};
+  }, [isOpen, onClose]);
+
+  const password = useMemo(() => {
+    return generatePassword();
+  }, [passwordOptions, refresh]);
+
+  const copyToClipboard = () => {
+    navigator.clipboard
+      .writeText(password)
+      .then(() => {
+        setCopyText("Copied");
+      })
+      .catch(() => {
+        setCopyText("Copy failed");
+      });
+  };
+
+  const usePassword = () => {
+    if (onUsePassword) {
+      onUsePassword(password);
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
+      <div
+        ref={modalRef}
+        className="w-full max-w-lg rounded-lg border border-mineshaft-600 bg-mineshaft-800 shadow-xl"
+      >
+        <div className="p-6">
+          <h2 className="mb-1 text-xl font-semibold text-bunker-200">Password Generator</h2>
+          <p className="mb-6 text-sm text-bunker-400">Generate strong unique passwords</p>
+
+          <div className="relative mb-4 rounded-md bg-mineshaft-900 p-4">
+            <div className="flex items-center justify-between">
+              <div className="w-4/5 select-all break-all pr-2 font-mono text-lg">{password}</div>
+              <div className="flex flex-col gap-1">
+                <Button
+                  size="xs"
+                  colorSchema="secondary"
+                  variant="outline_bg"
+                  onClick={() => setRefresh((prev) => !prev)}
+                  className="w-full text-bunker-300 hover:text-bunker-100"
+                >
+                  <FontAwesomeIcon icon={faRefresh} className="mr-1 h-3 w-3" />
+                  Refresh
+                </Button>
+
+                <Button
+                  size="xs"
+                  colorSchema="secondary"
+                  variant="outline_bg"
+                  onClick={copyToClipboard}
+                  className="w-full text-bunker-300 hover:text-bunker-100"
+                >
+                  <FontAwesomeIcon icon={isCopying ? faCheck : faCopy} className="mr-1 h-3 w-3" />
+                  {copyText}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <div className="mb-1 flex items-center justify-between">
+              <label htmlFor="password-length" className="text-sm text-bunker-300">
+                Password length: {passwordOptions.length}
+              </label>
+            </div>
+            <Slider
+              id="password-length"
+              min={minLength}
+              max={maxLength}
+              value={passwordOptions.length}
+              onChange={(value) => setPasswordOptions({ ...passwordOptions, length: value })}
+              className="mb-1"
+              aria-labelledby="password-length-label"
+            />
+          </div>
+
+          <div className="mb-6 flex flex-row justify-between gap-2">
+            <Checkbox
+              id="useUppercase"
+              className="mr-2 data-[state=checked]:bg-primary"
+              isChecked={passwordOptions.useUppercase}
+              onCheckedChange={(checked) =>
+                setPasswordOptions({ ...passwordOptions, useUppercase: checked as boolean })
+              }
+            >
+              A-Z
+            </Checkbox>
+
+            <Checkbox
+              id="useLowercase"
+              className="mr-2 data-[state=checked]:bg-primary"
+              isChecked={passwordOptions.useLowercase}
+              onCheckedChange={(checked) =>
+                setPasswordOptions({ ...passwordOptions, useLowercase: checked as boolean })
+              }
+            >
+              a-z
+            </Checkbox>
+
+            <Checkbox
+              id="useNumbers"
+              className="mr-2 data-[state=checked]:bg-primary"
+              isChecked={passwordOptions.useNumbers}
+              onCheckedChange={(checked) =>
+                setPasswordOptions({ ...passwordOptions, useNumbers: checked as boolean })
+              }
+            >
+              0-9
+            </Checkbox>
+
+            <Checkbox
+              id="useSpecialChars"
+              className="mr-2 data-[state=checked]:bg-primary"
+              isChecked={passwordOptions.useSpecialChars}
+              onCheckedChange={(checked) =>
+                setPasswordOptions({ ...passwordOptions, useSpecialChars: checked as boolean })
+              }
+            >
+              -_.~!*
+            </Checkbox>
+          </div>
+
+          <div className="flex justify-end">
+            <Button size="sm" colorSchema="primary" variant="outline_bg" onClick={onClose}>
+              Close
+            </Button>
+            {onUsePassword && (
+              <Button
+                size="sm"
+                colorSchema="primary"
+                variant="outline_bg"
+                onClick={usePassword}
+                className="ml-2"
+              >
+                Use Password
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export type PasswordGeneratorProps = {
+  onUsePassword?: (password: string) => void;
+  isDisabled?: boolean;
+  minLength?: number;
+  maxLength?: number;
+};
+
+export const PasswordGenerator = ({
+  onUsePassword,
+  isDisabled = false,
+  minLength = 12,
+  maxLength = 64
+}: PasswordGeneratorProps) => {
+  const [showGenerator, setShowGenerator] = useState(false);
+
+  const toggleGenerator = () => {
+    setShowGenerator(!showGenerator);
+  };
+
+  return (
+    <>
+      <IconButton
+        ariaLabel="generate password"
+        colorSchema="secondary"
+        size="sm"
+        onClick={toggleGenerator}
+        isDisabled={isDisabled}
+        className="rounded text-bunker-400 transition-colors duration-150 hover:bg-mineshaft-700 hover:text-bunker-200"
+      >
+        <FontAwesomeIcon icon={faKey} />
+      </IconButton>
+
+      <PasswordGeneratorModal
+        isOpen={showGenerator}
+        onClose={() => setShowGenerator(false)}
+        onUsePassword={onUsePassword}
+        minLength={minLength}
+        maxLength={maxLength}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,2 @@
+export type { PasswordGeneratorProps } from "./PasswordGenerator";
+export { PasswordGenerator } from "./PasswordGenerator";

frontend/src/components/v2/Slider/Slider.tsx

@@ -0,0 +1,237 @@
+import {
+  forwardRef,
+  InputHTMLAttributes,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { cva, VariantProps } from "cva";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+  min: number;
+  max: number;
+  step?: number;
+  isDisabled?: boolean;
+  isRequired?: boolean;
+  showValue?: boolean;
+  valuePosition?: "top" | "right";
+  containerClassName?: string;
+  trackClassName?: string;
+  fillClassName?: string;
+  thumbClassName?: string;
+  onChange?: (value: number) => void;
+  onChangeComplete?: (value: number) => void;
+};
+
+const sliderTrackVariants = cva("h-1 w-full bg-mineshaft-600 rounded-full relative", {
+  variants: {
+    variant: {
+      default: "",
+      thin: "h-0.5",
+      thick: "h-1.5"
+    },
+    isDisabled: {
+      true: "opacity-50 cursor-not-allowed",
+      false: ""
+    }
+  }
+});
+
+const sliderFillVariants = cva("absolute h-full rounded-full", {
+  variants: {
+    variant: {
+      default: "bg-primary-500",
+      secondary: "bg-secondary-500",
+      danger: "bg-red-500"
+    },
+    isDisabled: {
+      true: "opacity-50",
+      false: ""
+    }
+  }
+});
+
+const sliderThumbVariants = cva(
+  "absolute w-4 h-4 rounded-full shadow transform -translate-x-1/2 -mt-1.5 focus:outline-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-500 focus:ring-2 focus:ring-primary-400/50",
+        secondary: "bg-secondary-500 focus:ring-2 focus:ring-secondary-400/50",
+        danger: "bg-red-500 focus:ring-2 focus:ring-red-400/50"
+      },
+      isDisabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: "cursor-pointer"
+      },
+      size: {
+        sm: "w-3 h-3 -mt-1",
+        md: "w-4 h-4 -mt-1.5",
+        lg: "w-5 h-5 -mt-2"
+      }
+    }
+  }
+);
+
+const sliderContainerVariants = cva("relative inline-flex font-inter", {
+  variants: {
+    isFullWidth: {
+      true: "w-full",
+      false: ""
+    }
+  }
+});
+
+export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> &
+  VariantProps<typeof sliderTrackVariants> &
+  VariantProps<typeof sliderThumbVariants> &
+  VariantProps<typeof sliderContainerVariants> &
+  Props;
+
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(
+  (
+    {
+      className,
+      containerClassName,
+      trackClassName,
+      fillClassName,
+      thumbClassName,
+      min = 0,
+      max = 100,
+      step = 1,
+      value,
+      defaultValue,
+      isDisabled = false,
+      isFullWidth = true,
+      isRequired = false,
+      showValue = false,
+      valuePosition = "top",
+      variant = "default",
+      size = "md",
+      onChange,
+      onChangeComplete,
+      ...props
+    },
+    ref
+  ): JSX.Element => {
+    let initialValue = min;
+    if (value !== undefined) {
+      initialValue = Number(value);
+    } else if (defaultValue !== undefined) {
+      initialValue = Number(defaultValue);
+    }
+
+    const [currentValue, setCurrentValue] = useState<number>(initialValue);
+    const [isDragging, setIsDragging] = useState(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const percentage = Math.max(0, Math.min(100, ((currentValue - min) / (max - min)) * 100));
+
+    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
+
+    useEffect(() => {
+      if (value !== undefined && Number(value) !== currentValue) {
+        setCurrentValue(Number(value));
+      }
+    }, [value, currentValue]);
+
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = Number(e.target.value);
+        setCurrentValue(newValue);
+        onChange?.(newValue);
+      },
+      [onChange]
+    );
+
+    const handleMouseDown = useCallback(() => {
+      if (!isDisabled) {
+        setIsDragging(true);
+      }
+    }, [isDisabled]);
+
+    const handleChangeComplete = useCallback(() => {
+      if (isDragging) {
+        onChangeComplete?.(currentValue);
+        setIsDragging(false);
+      }
+    }, [isDragging, currentValue, onChangeComplete]);
+
+    useEffect(() => {
+      if (isDragging) {
+        const handleGlobalMouseUp = () => handleChangeComplete();
+
+        document.addEventListener("mouseup", handleGlobalMouseUp);
+        document.addEventListener("touchend", handleGlobalMouseUp);
+
+        return () => {
+          document.removeEventListener("mouseup", handleGlobalMouseUp);
+          document.removeEventListener("touchend", handleGlobalMouseUp);
+        };
+      }
+      return () => {};
+    }, [isDragging, handleChangeComplete]);
+
+    const ValueDisplay = showValue ? (
+      <div className="text-xs text-bunker-300">{currentValue}</div>
+    ) : null;
+
+    return (
+      <div
+        className={twMerge(
+          sliderContainerVariants({ isFullWidth, className: containerClassName }),
+          "my-2"
+        )}
+      >
+        {showValue && valuePosition === "top" && ValueDisplay}
+
+        <div className="relative flex w-full items-center">
+          <div
+            className={twMerge(
+              sliderTrackVariants({ variant, isDisabled, className: trackClassName })
+            )}
+          >
+            <div
+              className={twMerge(
+                sliderFillVariants({ variant, isDisabled, className: fillClassName }),
+                "left-0"
+              )}
+              style={{ width: `${percentage}%` }}
+            />
+
+            <div
+              className={twMerge(
+                sliderThumbVariants({ variant, isDisabled, size, className: thumbClassName })
+              )}
+              style={{ left: `${percentage}%` }}
+            />
+          </div>
+
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={currentValue}
+            onChange={handleChange}
+            onMouseDown={handleMouseDown}
+            onTouchStart={handleMouseDown}
+            disabled={isDisabled}
+            required={isRequired}
+            ref={inputRef}
+            className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+            {...props}
+          />
+
+          {showValue && valuePosition === "right" && (
+            <div className="ml-2 text-xs text-bunker-300">{currentValue}</div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+Slider.displayName = "Slider";

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

@@ -0,0 +1,2 @@
+export type { SliderProps } from "./Slider";
+export { Slider } from "./Slider";

frontend/src/components/v2/index.tsx

@@ -24,10 +24,12 @@ export * from "./Modal";
 export * from "./NoticeBanner";
 export * from "./PageHeader";
 export * from "./Pagination";
+export * from "./PasswordGenerator";
 export * from "./Popoverv2";
 export * from "./SecretInput";
 export * from "./Select";
 export * from "./Skeleton";
+export * from "./Slider";
 export * from "./Spinner";
 export * from "./Stepper";
 export * from "./Switch";

frontend/src/hooks/api/workspace/index.tsx

@@ -3,6 +3,7 @@ export {
   useDeleteGroupFromWorkspace,
   useLeaveProject,
   useMigrateProjectToV3,
+  useRequestProjectAccess,
   useUpdateGroupWorkspaceRole
 } from "./mutations";
 export {
@@ -36,6 +37,7 @@ export {
   useListWorkspaceSshCertificates,
   useListWorkspaceSshCertificateTemplates,
   useNameWorkspaceSecrets,
+  useSearchProjects,
   useToggleAutoCapitalization,
   useUpdateIdentityWorkspaceRole,
   useUpdateProject,

frontend/src/hooks/api/workspace/mutations.tsx

@@ -107,3 +107,13 @@ export const useMigrateProjectToV3 = () => {
     }
   });
 };
+
+export const useRequestProjectAccess = () => {
+  return useMutation<object, object, { projectId: string; comment: string }>({
+    mutationFn: ({ projectId, comment }) => {
+      return apiRequest.post(`/api/v1/workspace/${projectId}/project-access`, {
+        comment
+      });
+    }
+  });
+};

frontend/src/hooks/api/workspace/queries.tsx

@@ -32,6 +32,7 @@ import {
   TGetUpgradeProjectStatusDTO,
   TListProjectIdentitiesDTO,
   ToggleAutoCapitalizationDTO,
+  TSearchProjectsDTO,
   TUpdateWorkspaceIdentityRoleDTO,
   TUpdateWorkspaceUserRoleDTO,
   UpdateAuditLogsRetentionDTO,
@@ -145,14 +146,31 @@ export const useGetWorkspaceById = (
 
 export const useGetUserWorkspaces = ({
   includeRoles,
-  type = "all"
+  type = "all",
+  options = {}
 }: {
   includeRoles?: boolean;
   type?: ProjectType | "all";
+  options?: { enabled?: boolean };
 } = {}) =>
   useQuery({
     queryKey: workspaceKeys.getAllUserWorkspace(type),
-    queryFn: () => fetchUserWorkspaces(includeRoles, type)
+    queryFn: () => fetchUserWorkspaces(includeRoles, type),
+    ...options
+  });
+
+export const useSearchProjects = ({ options, ...dto }: TSearchProjectsDTO) =>
+  useQuery({
+    queryKey: workspaceKeys.searchWorkspace(dto),
+    queryFn: async () => {
+      const { data } = await apiRequest.post<{
+        projects: (Workspace & { isMember: boolean })[];
+        totalCount: number;
+      }>("/api/v1/workspace/search", dto);
+
+      return data;
+    },
+    ...options
   });
 
 const fetchUserWorkspaceMemberships = async (orgId: string) => {

frontend/src/hooks/api/workspace/query-keys.tsx

@@ -1,4 +1,4 @@
-import { TListProjectIdentitiesDTO } from "@app/hooks/api/workspace/types";
+import { TListProjectIdentitiesDTO, TSearchProjectsDTO } from "@app/hooks/api/workspace/types";
 
 import type { CaStatus } from "../ca";
 
@@ -28,6 +28,7 @@ export const workspaceKeys = {
     ...params
   }: TListProjectIdentitiesDTO) =>
     [...workspaceKeys.getWorkspaceIdentityMemberships(workspaceId), params] as const,
+  searchWorkspace: (dto: TSearchProjectsDTO) => ["search-projects", dto] as const,
   getWorkspaceGroupMemberships: (workspaceId: string) =>
     [{ workspaceId }, "workspace-groups"] as const,
   getWorkspaceCas: ({ projectSlug }: { projectSlug: string }) =>

frontend/src/hooks/api/workspace/types.ts

@@ -173,3 +173,12 @@ export type TListProjectIdentitiesDTO = {
 export enum ProjectIdentityOrderBy {
   Name = "name"
 }
+export type TSearchProjectsDTO = {
+  type?: ProjectType;
+  name?: string;
+  limit?: number;
+  offset?: number;
+  options?: { enabled?: boolean };
+  orderBy?: ProjectIdentityOrderBy;
+  orderDirection?: OrderByDirection;
+};

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

@@ -14,6 +14,7 @@ import {
   faPlug,
   faSignOut,
   faUser,
+  faUserCog,
   faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -385,6 +386,19 @@ export const MinimizedOrgSidebar = () => {
                       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>
@@ -541,18 +555,6 @@ export const MinimizedOrgSidebar = () => {
                     />
                   </DropdownMenuItem>
                 </a>
-                {user?.superAdmin && (
-                  <Link to="/admin">
-                    <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
-                      Server Admin Console
-                    </DropdownMenuItem>
-                  </Link>
-                )}
-                <div className="mt-1 border-t border-mineshaft-600 pt-1">
-                  <Link to="/organization/admin">
-                    <DropdownMenuItem>Organization Admin Console</DropdownMenuItem>
-                  </Link>
-                </div>
                 <div className="mt-1 h-1 border-t border-mineshaft-600" />
                 <DropdownMenuItem onClick={logOutUser} icon={<FontAwesomeIcon icon={faSignOut} />}>
                   Log Out

frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx

@@ -91,7 +91,8 @@ export const AccessManagementPage = () => {
             <p className="mb-2 mt-1 text-sm text-bunker-300">
               We&apos;ve developed an improved privilege management system to better serve your
               security needs. Upgrade to our new permission-based approach that allows you to
-              explicitly designate who can modify specific access levels, rather than relying on hierarchy comparisons.
+              explicitly designate who can modify specific access levels, rather than relying on
+              hierarchy comparisons.
             </p>
             <Button
               colorSchema="primary"

frontend/src/pages/organization/SecretManagerOverviewPage/SecretManagerOverviewPage.tsx

@@ -1,62 +1,21 @@
 // REFACTOR(akhilmhdh): This file needs to be split into multiple components too complex
-import { ReactNode, useMemo, useState } from "react";
+import { useState } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { faFolderOpen, faStar } from "@fortawesome/free-regular-svg-icons";
-import {
-  faArrowDownAZ,
-  faArrowRight,
-  faArrowUpZA,
-  faBorderAll,
-  faExclamationCircle,
-  faList,
-  faMagnifyingGlass,
-  faPlus,
-  faSearch,
-  faStar as faSolidStar
-} from "@fortawesome/free-solid-svg-icons";
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useNavigate } from "@tanstack/react-router";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { createNotification } from "@app/components/notifications";
-import { OrgPermissionCan } from "@app/components/permissions";
 import { NewProjectModal } from "@app/components/projects";
-import {
-  Button,
-  IconButton,
-  Input,
-  PageHeader,
-  Pagination,
-  Skeleton,
-  Tooltip
-} from "@app/components/v2";
-import {
-  OrgPermissionActions,
-  OrgPermissionSubjects,
-  useOrganization,
-  useSubscription
-} from "@app/context";
-import { getProjectHomePage } from "@app/helpers/project";
-import { usePagination, useResetPageHelper } from "@app/hooks";
-import { useGetUserWorkspaces } from "@app/hooks/api";
-import { OrderByDirection } from "@app/hooks/api/generic/types";
-// import { fetchUserWsKey } from "@app/hooks/api/keys/queries";
+import { PageHeader } from "@app/components/v2";
+import { useSubscription } from "@app/context";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
-import { Workspace } from "@app/hooks/api/types";
-import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
-import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-enum ProjectsViewMode {
-  GRID = "grid",
-  LIST = "list"
-}
-
-enum ProjectOrderBy {
-  Name = "name"
-}
+import { AllProjectView } from "./components/AllProjectView";
+import { MyProjectView } from "./components/MyProjectView";
+import { ProjectListToggle, ProjectListView } from "./components/ProjectListToggle";
 
 const formatDescription = (type: ProjectType) => {
   if (type === ProjectType.SecretManager)
@@ -76,295 +35,20 @@ type Props = {
 export const ProductOverviewPage = ({ type }: Props) => {
   const { t } = useTranslation();
 
-  const navigate = useNavigate();
-
-  const { data: workspaces, isPending: isWorkspaceLoading } = useGetUserWorkspaces({ type });
-  const { currentOrg } = useOrganization();
-  const orgWorkspaces = workspaces || [];
-  const { data: projectFavorites, isPending: isProjectFavoritesLoading } =
-    useGetUserProjectFavorites(currentOrg?.id);
-  const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();
-
-  const isProjectViewLoading = isWorkspaceLoading || isProjectFavoritesLoading;
+  const [projectListView, setProjectListView] = useState(ProjectListView.MyProjects);
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
     "addNewWs",
     "upgradePlan"
   ] as const);
 
-  const [searchFilter, setSearchFilter] = useState("");
   const { data: serverDetails } = useFetchServerStatus();
-  const [projectsViewMode, setProjectsViewMode] = useState<ProjectsViewMode>(
-    (localStorage.getItem("projectsViewMode") as ProjectsViewMode) || ProjectsViewMode.GRID
-  );
-
   const { subscription } = useSubscription();
 
   const isAddingProjectsAllowed = subscription?.workspaceLimit
     ? subscription.workspacesUsed < subscription.workspaceLimit
     : true;
 
-  const isWorkspaceEmpty = !isProjectViewLoading && orgWorkspaces?.length === 0;
-
-  const {
-    setPage,
-    perPage,
-    setPerPage,
-    page,
-    offset,
-    limit,
-    toggleOrderDirection,
-    orderDirection
-  } = usePagination(ProjectOrderBy.Name, { initPerPage: 24 });
-
-  const filteredWorkspaces = useMemo(
-    () =>
-      orgWorkspaces
-        .filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase()))
-        .sort((a, b) =>
-          orderDirection === OrderByDirection.ASC
-            ? a.name.toLowerCase().localeCompare(b.name.toLowerCase())
-            : b.name.toLowerCase().localeCompare(a.name.toLowerCase())
-        ),
-    [searchFilter, orderDirection, orgWorkspaces]
-  );
-
-  useResetPageHelper({
-    setPage,
-    offset,
-    totalCount: filteredWorkspaces.length
-  });
-
-  const { workspacesWithFaveProp } = useMemo(() => {
-    const workspacesWithFav = filteredWorkspaces
-      .map((w): Workspace & { isFavorite: boolean } => ({
-        ...w,
-        isFavorite: Boolean(projectFavorites?.includes(w.id))
-      }))
-      .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite))
-      .slice(offset, limit * page);
-
-    return {
-      workspacesWithFaveProp: workspacesWithFav
-    };
-  }, [filteredWorkspaces, projectFavorites, offset, limit, page]);
-
-  const addProjectToFavorites = async (projectId: string) => {
-    try {
-      if (currentOrg?.id) {
-        await updateUserProjectFavorites({
-          orgId: currentOrg?.id,
-          projectFavorites: [...(projectFavorites || []), projectId]
-        });
-      }
-    } catch {
-      createNotification({
-        text: "Failed to add project to favorites.",
-        type: "error"
-      });
-    }
-  };
-
-  const removeProjectFromFavorites = async (projectId: string) => {
-    try {
-      if (currentOrg?.id) {
-        await updateUserProjectFavorites({
-          orgId: currentOrg?.id,
-          projectFavorites: [...(projectFavorites || []).filter((entry) => entry !== projectId)]
-        });
-      }
-    } catch {
-      createNotification({
-        text: "Failed to remove project from favorites.",
-        type: "error"
-      });
-    }
-  };
-
-  const renderProjectGridItem = (workspace: Workspace, isFavorite: boolean) => (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-    <div
-      onClick={() => {
-        navigate({
-          to: getProjectHomePage(workspace),
-          params: {
-            projectId: workspace.id
-          }
-        });
-      }}
-      key={workspace.id}
-      className="flex h-40 min-w-72 cursor-pointer flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
-    >
-      <div className="flex flex-row justify-between">
-        <div className="mt-0 truncate text-lg text-mineshaft-100">{workspace.name}</div>
-        {isFavorite ? (
-          <FontAwesomeIcon
-            icon={faSolidStar}
-            className="text-sm text-yellow-600 hover:text-mineshaft-400"
-            onClick={(e) => {
-              e.stopPropagation();
-              removeProjectFromFavorites(workspace.id);
-            }}
-          />
-        ) : (
-          <FontAwesomeIcon
-            icon={faStar}
-            className="text-sm text-mineshaft-400 hover:text-mineshaft-300"
-            onClick={(e) => {
-              e.stopPropagation();
-              addProjectToFavorites(workspace.id);
-            }}
-          />
-        )}
-      </div>
-
-      <div
-        className="mb-2.5 mt-1 grow text-sm text-mineshaft-300"
-        style={{
-          overflow: "hidden",
-          display: "-webkit-box",
-          WebkitBoxOrient: "vertical",
-          WebkitLineClamp: 2
-        }}
-      >
-        {workspace.description}
-      </div>
-
-      <div className="flex w-full flex-row items-end justify-between place-self-end">
-        {type === ProjectType.SecretManager && (
-          <div className="mt-0 text-xs text-mineshaft-400">
-            {workspace.environments?.length || 0} environments
-          </div>
-        )}
-        <button type="button">
-          <div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 px-4 py-2 text-sm text-mineshaft-300 transition-all hover:border-primary-500/80 hover:bg-primary-800/20 hover:text-mineshaft-200">
-            Explore{" "}
-            <FontAwesomeIcon
-              icon={faArrowRight}
-              className="pl-1.5 pr-0.5 duration-200 hover:pl-2 hover:pr-0"
-            />
-          </div>
-        </button>
-      </div>
-    </div>
-  );
-
-  const renderProjectListItem = (workspace: Workspace, isFavorite: boolean, index: number) => (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-    <div
-      onClick={() => {
-        navigate({
-          to: getProjectHomePage(workspace),
-          params: {
-            projectId: workspace.id
-          }
-        });
-      }}
-      key={workspace.id}
-      className={`group grid h-14 min-w-72 cursor-pointer grid-cols-6 border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
-        index === 0 && "rounded-t-md"
-      }`}
-    >
-      <div className="flex items-center sm:col-span-3 lg:col-span-4">
-        <div className="truncate text-sm text-mineshaft-100">{workspace.name}</div>
-      </div>
-      <div className="flex items-center justify-end sm:col-span-3 lg:col-span-2">
-        <div className="text-center text-sm text-mineshaft-300">
-          {workspace.environments?.length || 0} environments
-        </div>
-        {isFavorite ? (
-          <FontAwesomeIcon
-            icon={faSolidStar}
-            className="ml-6 text-sm text-yellow-600 hover:text-mineshaft-400"
-            onClick={(e) => {
-              e.stopPropagation();
-              removeProjectFromFavorites(workspace.id);
-            }}
-          />
-        ) : (
-          <FontAwesomeIcon
-            icon={faStar}
-            className="ml-6 text-sm text-mineshaft-400 hover:text-mineshaft-300"
-            onClick={(e) => {
-              e.stopPropagation();
-              addProjectToFavorites(workspace.id);
-            }}
-          />
-        )}
-      </div>
-    </div>
-  );
-
-  let projectsComponents: ReactNode;
-
-  if (filteredWorkspaces.length || isProjectViewLoading) {
-    switch (projectsViewMode) {
-      case ProjectsViewMode.GRID:
-        projectsComponents = (
-          <div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-            {isProjectViewLoading &&
-              Array.apply(0, Array(3)).map((_x, i) => (
-                <div
-                  key={`workspace-cards-loading-${i + 1}`}
-                  className="flex h-40 min-w-72 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
-                >
-                  <div className="mt-0 text-lg text-mineshaft-100">
-                    <Skeleton className="w-3/4 bg-mineshaft-600" />
-                  </div>
-                  <div className="mt-0 pb-6 text-sm text-mineshaft-300">
-                    <Skeleton className="w-1/2 bg-mineshaft-600" />
-                  </div>
-                  <div className="flex justify-end">
-                    <Skeleton className="w-1/2 bg-mineshaft-600" />
-                  </div>
-                </div>
-              ))}
-            {!isProjectViewLoading && (
-              <>
-                {workspacesWithFaveProp.map((workspace) =>
-                  renderProjectGridItem(workspace, workspace.isFavorite)
-                )}
-              </>
-            )}
-          </div>
-        );
-
-        break;
-      case ProjectsViewMode.LIST:
-      default:
-        projectsComponents = (
-          <div className="mt-4 w-full rounded-md">
-            {isProjectViewLoading &&
-              Array.apply(0, Array(3)).map((_x, i) => (
-                <div
-                  key={`workspace-cards-loading-${i + 1}`}
-                  className={`group flex h-12 min-w-72 cursor-pointer flex-row items-center justify-between border border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
-                    i === 0 && "rounded-t-md"
-                  } ${i === 2 && "rounded-b-md border-b"}`}
-                >
-                  <Skeleton className="w-full bg-mineshaft-600" />
-                </div>
-              ))}
-            {!isProjectViewLoading &&
-              workspacesWithFaveProp.map((workspace, ind) =>
-                renderProjectListItem(workspace, workspace.isFavorite, ind)
-              )}
-          </div>
-        );
-        break;
-    }
-  } else if (orgWorkspaces.length && searchFilter) {
-    projectsComponents = (
-      <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
-        <FontAwesomeIcon
-          icon={faSearch}
-          className="mb-4 mt-2 w-full text-center text-5xl text-mineshaft-400"
-        />
-        <div className="text-center font-light">No projects match search...</div>
-      </div>
-    );
-  }
-
   return (
     <div className="mx-auto flex max-w-7xl flex-col justify-start bg-bunker-800">
       <Helmet>
@@ -395,116 +79,30 @@ export const ProductOverviewPage = ({ type }: Props) => {
         </div>
       )}
       <div className="mb-4 flex flex-col items-start justify-start">
-        <PageHeader title="Projects" description={formatDescription(type)} />
-        <div className="flex w-full flex-row">
-          <Input
-            className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
-            placeholder="Search by project name..."
-            value={searchFilter}
-            onChange={(e) => setSearchFilter(e.target.value)}
-            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-          />
-          <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
-            <Tooltip content="Toggle Sort Direction">
-              <IconButton
-                className="min-w-[2.4rem] border-none hover:bg-mineshaft-600"
-                ariaLabel={`Sort ${
-                  orderDirection === OrderByDirection.ASC ? "descending" : "ascending"
-                }`}
-                variant="plain"
-                size="xs"
-                colorSchema="secondary"
-                onClick={toggleOrderDirection}
-              >
-                <FontAwesomeIcon
-                  icon={orderDirection === OrderByDirection.ASC ? faArrowDownAZ : faArrowUpZA}
-                />
-              </IconButton>
-            </Tooltip>
-          </div>
-          <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
-            <IconButton
-              variant="outline_bg"
-              onClick={() => {
-                localStorage.setItem("projectsViewMode", ProjectsViewMode.GRID);
-                setProjectsViewMode(ProjectsViewMode.GRID);
-              }}
-              ariaLabel="grid"
-              size="xs"
-              className={`${
-                projectsViewMode === ProjectsViewMode.GRID ? "bg-mineshaft-500" : "bg-transparent"
-              } min-w-[2.4rem] border-none hover:bg-mineshaft-600`}
-            >
-              <FontAwesomeIcon icon={faBorderAll} />
-            </IconButton>
-            <IconButton
-              variant="outline_bg"
-              onClick={() => {
-                localStorage.setItem("projectsViewMode", ProjectsViewMode.LIST);
-                setProjectsViewMode(ProjectsViewMode.LIST);
-              }}
-              ariaLabel="list"
-              size="xs"
-              className={`${
-                projectsViewMode === ProjectsViewMode.LIST ? "bg-mineshaft-500" : "bg-transparent"
-              } min-w-[2.4rem] border-none hover:bg-mineshaft-600`}
-            >
-              <FontAwesomeIcon icon={faList} />
-            </IconButton>
-          </div>
-          <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Workspace}>
-            {(isAllowed) => (
-              <Button
-                isDisabled={!isAllowed}
-                colorSchema="primary"
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                onClick={() => {
-                  if (isAddingProjectsAllowed) {
-                    handlePopUpOpen("addNewWs");
-                  } else {
-                    handlePopUpOpen("upgradePlan");
-                  }
-                }}
-                className="ml-2"
-              >
-                Add New Project
-              </Button>
-            )}
-          </OrgPermissionCan>
-        </div>
-        {projectsComponents}
-        {!isProjectViewLoading && Boolean(filteredWorkspaces.length) && (
-          <Pagination
-            className={
-              projectsViewMode === ProjectsViewMode.GRID
-                ? "col-span-full !justify-start border-transparent bg-transparent pl-2"
-                : "rounded-b-md border border-mineshaft-600"
-            }
-            perPage={perPage}
-            perPageList={[12, 24, 48, 96]}
-            count={filteredWorkspaces.length}
-            page={page}
-            onChangePage={setPage}
-            onChangePerPage={setPerPage}
-          />
-        )}
-        {isWorkspaceEmpty && (
-          <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
-            <FontAwesomeIcon
-              icon={faFolderOpen}
-              className="mb-4 mt-2 w-full text-center text-5xl text-mineshaft-400"
-            />
-            <div className="text-center font-light">
-              You are not part of any projects in this organization yet. When you are, they will
-              appear here.
+        <PageHeader
+          title={
+            <div className="flex items-center gap-4">
+              <ProjectListToggle value={projectListView} onChange={setProjectListView} />
             </div>
-            <div className="mt-0.5 text-center font-light">
-              Create a new project, or ask other organization members to give you necessary
-              permissions.
-            </div>
-          </div>
-        )}
+          }
+          description={formatDescription(type)}
+        />
       </div>
+      {projectListView === ProjectListView.MyProjects ? (
+        <MyProjectView
+          type={type}
+          onAddNewProject={() => handlePopUpOpen("addNewWs")}
+          onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
+          isAddingProjectsAllowed={isAddingProjectsAllowed}
+        />
+      ) : (
+        <AllProjectView
+          type={type}
+          onAddNewProject={() => handlePopUpOpen("addNewWs")}
+          onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
+          isAddingProjectsAllowed={isAddingProjectsAllowed}
+        />
+      )}
       <NewProjectModal
         isOpen={popUp.addNewWs.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("addNewWs", isOpen)}

frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx

@@ -0,0 +1,305 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import {
+  faArrowDownAZ,
+  faBorderAll,
+  faCheck,
+  faFolderOpen,
+  faList,
+  faMagnifyingGlass,
+  faPlus
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Pagination,
+  Skeleton,
+  Tooltip
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { getProjectHomePage } from "@app/helpers/project";
+import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
+import { useRequestProjectAccess, useSearchProjects } from "@app/hooks/api";
+import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+
+type Props = {
+  type: ProjectType;
+  onAddNewProject: () => void;
+  onUpgradePlan: () => void;
+  isAddingProjectsAllowed: boolean;
+};
+
+type RequestAccessModalProps = {
+  projectId: string;
+  onPopUpToggle: () => void;
+};
+
+const RequestAccessModal = ({ projectId, onPopUpToggle }: RequestAccessModalProps) => {
+  const form = useForm<{ note: string }>();
+
+  const requestProjectAccess = useRequestProjectAccess();
+
+  const onFormSubmit = ({ note }: { note: string }) => {
+    if (requestProjectAccess.isPending) return;
+    requestProjectAccess.mutate(
+      {
+        comment: note,
+        projectId
+      },
+      {
+        onSuccess: () => {
+          createNotification({
+            type: "success",
+            title: "Project Access Request Sent",
+            text: "Project admins will receive an email of your request"
+          });
+          onPopUpToggle();
+        }
+      }
+    );
+  };
+
+  return (
+    <form onSubmit={form.handleSubmit(onFormSubmit)}>
+      <FormControl label="Note">
+        <Input {...form.register("note")} />
+      </FormControl>
+      <div className="mt-4 flex items-center">
+        <Button className="mr-4" size="sm" type="submit" isLoading={form.formState.isSubmitting}>
+          Submit Request
+        </Button>
+        <Button colorSchema="secondary" variant="plain" onClick={() => onPopUpToggle()}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export const AllProjectView = ({
+  type,
+  onAddNewProject,
+  onUpgradePlan,
+  isAddingProjectsAllowed
+}: Props) => {
+  const navigate = useNavigate();
+  const [searchFilter, setSearchFilter] = useState("");
+  const [debouncedSearch] = useDebounce(searchFilter);
+  const {
+    setPage,
+    perPage,
+    setPerPage,
+    page,
+    offset,
+    limit,
+    toggleOrderDirection,
+    orderDirection
+  } = usePagination("name", { initPerPage: 50 });
+  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp([
+    "requestAccessConfirmation"
+  ] as const);
+
+  const { data: searchedProjects, isPending: isProjectLoading } = useSearchProjects({
+    limit,
+    offset,
+    type,
+    name: debouncedSearch || undefined,
+    orderDirection
+  });
+
+  useResetPageHelper({
+    setPage,
+    offset,
+    totalCount: searchedProjects?.totalCount || 0
+  });
+  const requestedWorkspaceDetails = (popUp.requestAccessConfirmation.data || {}) as Workspace;
+
+  return (
+    <div>
+      <div className="flex w-full flex-row">
+        <div className="flex-grow" />
+        <Input
+          className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
+          containerClassName="w-full"
+          placeholder="Search by project name..."
+          value={searchFilter}
+          onChange={(e) => setSearchFilter(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        />
+        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+          <Tooltip content="Toggle Sort Direction">
+            <IconButton
+              className="min-w-[2.4rem] border-none hover:bg-mineshaft-600"
+              ariaLabel="Sort asc"
+              variant="plain"
+              size="xs"
+              colorSchema="secondary"
+              onClick={toggleOrderDirection}
+            >
+              <FontAwesomeIcon icon={faArrowDownAZ} />
+            </IconButton>
+          </Tooltip>
+        </div>
+        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+          <Tooltip content="Disabled across All Project view.">
+            <IconButton
+              variant="outline_bg"
+              ariaLabel="grid"
+              size="xs"
+              className="min-w-[2.4rem] border-none bg-transparent hover:bg-mineshaft-600"
+            >
+              <FontAwesomeIcon icon={faBorderAll} />
+            </IconButton>
+          </Tooltip>
+          <IconButton
+            variant="outline_bg"
+            ariaLabel="list"
+            size="xs"
+            className="min-w-[2.4rem] border-none bg-mineshaft-500 hover:bg-mineshaft-600"
+          >
+            <FontAwesomeIcon icon={faList} />
+          </IconButton>
+        </div>
+        <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Workspace}>
+          {(isAllowed) => (
+            <Button
+              isDisabled={!isAllowed}
+              colorSchema="primary"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => {
+                if (isAddingProjectsAllowed) {
+                  onAddNewProject();
+                } else {
+                  onUpgradePlan();
+                }
+              }}
+              className="ml-2"
+            >
+              Add New Project
+            </Button>
+          )}
+        </OrgPermissionCan>
+      </div>
+      <div className="mt-4 w-full rounded-md">
+        {isProjectLoading &&
+          Array.apply(0, Array(3)).map((_x, i) => (
+            <div
+              key={`workspace-cards-loading-${i + 1}`}
+              className={twMerge(
+                "flex h-12 min-w-72 cursor-pointer flex-row items-center justify-between border border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700",
+                i === 0 && "rounded-t-md",
+                i === 2 && "rounded-b-md border-b"
+              )}
+            >
+              <Skeleton className="w-full bg-mineshaft-600" />
+            </div>
+          ))}
+        {!isProjectLoading &&
+          searchedProjects?.projects?.map((workspace) => (
+            <div
+              role="button"
+              tabIndex={0}
+              onKeyDown={(evt) => {
+                if (evt.key === "Enter" && workspace.isMember) {
+                  navigate({
+                    to: getProjectHomePage(workspace),
+                    params: {
+                      projectId: workspace.id
+                    }
+                  });
+                }
+              }}
+              onClick={() => {
+                if (workspace.isMember) {
+                  navigate({
+                    to: getProjectHomePage(workspace),
+                    params: {
+                      projectId: workspace.id
+                    }
+                  });
+                }
+              }}
+              key={workspace.id}
+              className={twMerge(
+                "group flex min-w-72 grid-cols-6 items-center justify-center border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 py-3 first:rounded-t-md",
+                workspace.isMember ? "cursor-pointer hover:bg-mineshaft-700" : "cursor-default"
+              )}
+            >
+              <div className="w-full items-center">
+                <div className="flex flex-grow items-center">
+                  <div className="flex-grow truncate text-sm text-mineshaft-100">
+                    {workspace.name}
+                  </div>
+                  <div className="flex items-center">
+                    {workspace.isMember ? (
+                      <div className="flex items-center text-center text-sm text-primary">
+                        <FontAwesomeIcon icon={faCheck} className="mr-2" />
+                        Joined
+                      </div>
+                    ) : (
+                      <div className="opacity-0 transition-all group-hover:opacity-100">
+                        <Button
+                          size="xs"
+                          variant="outline_bg"
+                          onClick={() => handlePopUpOpen("requestAccessConfirmation", workspace)}
+                        >
+                          Request Access
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className="mt-1 max-w-lg overflow-hidden text-ellipsis whitespace-nowrap text-xs text-mineshaft-300">
+                  {workspace.description}
+                </div>
+              </div>
+            </div>
+          ))}
+      </div>
+      {!isProjectLoading && Boolean(searchedProjects?.totalCount) && (
+        <Pagination
+          className="rounded-b-md border border-mineshaft-600"
+          perPage={perPage}
+          perPageList={[12, 24, 48, 96]}
+          count={searchedProjects?.totalCount || 0}
+          page={page}
+          onChangePage={setPage}
+          onChangePerPage={setPerPage}
+        />
+      )}
+      {!isProjectLoading && !searchedProjects?.totalCount && (
+        <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
+          <FontAwesomeIcon
+            icon={faFolderOpen}
+            className="mb-4 mt-2 w-full text-center text-5xl text-mineshaft-400"
+          />
+          <div className="text-center font-light">No Projects Found</div>
+        </div>
+      )}
+      <Modal
+        isOpen={popUp.requestAccessConfirmation.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("requestAccessConfirmation", isOpen)}
+      >
+        <ModalContent
+          title="Confirm Access Request"
+          subTitle={`Requesting access to project ${requestedWorkspaceDetails?.name}. You may include an optional note for project admins to review your request.`}
+        >
+          <RequestAccessModal
+            onPopUpToggle={() => handlePopUpToggle("requestAccessConfirmation")}
+            projectId={requestedWorkspaceDetails?.id}
+          />
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+};

frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx

@@ -0,0 +1,439 @@
+import { ReactNode, useMemo, useState } from "react";
+import { faFolderOpen, faStar } from "@fortawesome/free-regular-svg-icons";
+import {
+  faArrowDownAZ,
+  faArrowRight,
+  faArrowUpZA,
+  faBorderAll,
+  faList,
+  faMagnifyingGlass,
+  faPlus,
+  faSearch,
+  faStar as faSolidStar
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, IconButton, Input, Pagination, Skeleton, Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { getProjectHomePage } from "@app/helpers/project";
+import { usePagination, useResetPageHelper } from "@app/hooks";
+import { useGetUserWorkspaces } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
+import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
+import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+
+type Props = {
+  type: ProjectType;
+  onAddNewProject: () => void;
+  onUpgradePlan: () => void;
+  isAddingProjectsAllowed: boolean;
+};
+
+enum ProjectOrderBy {
+  Name = "name"
+}
+
+enum ProjectsViewMode {
+  GRID = "grid",
+  LIST = "list"
+}
+
+export const MyProjectView = ({
+  type,
+  onAddNewProject,
+  onUpgradePlan,
+  isAddingProjectsAllowed
+}: Props) => {
+  const navigate = useNavigate();
+  const { currentOrg } = useOrganization();
+
+  const { data: workspaces = [], isPending: isWorkspaceLoading } = useGetUserWorkspaces({
+    type
+  });
+  const {
+    setPage,
+    perPage,
+    setPerPage,
+    page,
+    offset,
+    limit,
+    toggleOrderDirection,
+    orderDirection
+  } = usePagination(ProjectOrderBy.Name, { initPerPage: 24 });
+  const { data: projectFavorites, isPending: isProjectFavoritesLoading } =
+    useGetUserProjectFavorites(currentOrg?.id);
+
+  const [projectsViewMode, setProjectsViewMode] = useState<ProjectsViewMode>(
+    (localStorage.getItem("projectsViewMode") as ProjectsViewMode) || ProjectsViewMode.GRID
+  );
+  const [searchFilter, setSearchFilter] = useState("");
+
+  const isProjectViewLoading = isWorkspaceLoading || isProjectFavoritesLoading;
+  const isWorkspaceEmpty = !isProjectViewLoading && workspaces?.length === 0;
+  const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();
+
+  const filteredWorkspaces = useMemo(
+    () =>
+      workspaces
+        .filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase()))
+        .sort((a, b) =>
+          orderDirection === OrderByDirection.ASC
+            ? a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+            : b.name.toLowerCase().localeCompare(a.name.toLowerCase())
+        ),
+    [searchFilter, orderDirection, workspaces]
+  );
+
+  useResetPageHelper({
+    setPage,
+    offset,
+    totalCount: filteredWorkspaces.length
+  });
+
+  const { workspacesWithFaveProp } = useMemo(() => {
+    const workspacesWithFav = filteredWorkspaces
+      .map((w): Workspace & { isFavorite: boolean } => ({
+        ...w,
+        isFavorite: Boolean(projectFavorites?.includes(w.id))
+      }))
+      .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite))
+      .slice(offset, limit * page);
+
+    return {
+      workspacesWithFaveProp: workspacesWithFav
+    };
+  }, [filteredWorkspaces, projectFavorites, offset, limit, page]);
+
+  const addProjectToFavorites = async (projectId: string) => {
+    try {
+      if (currentOrg?.id) {
+        await updateUserProjectFavorites({
+          orgId: currentOrg?.id,
+          projectFavorites: [...(projectFavorites || []), projectId]
+        });
+      }
+    } catch {
+      createNotification({
+        text: "Failed to add project to favorites.",
+        type: "error"
+      });
+    }
+  };
+  const removeProjectFromFavorites = async (projectId: string) => {
+    try {
+      if (currentOrg?.id) {
+        await updateUserProjectFavorites({
+          orgId: currentOrg?.id,
+          projectFavorites: [...(projectFavorites || []).filter((entry) => entry !== projectId)]
+        });
+      }
+    } catch {
+      createNotification({
+        text: "Failed to remove project from favorites.",
+        type: "error"
+      });
+    }
+  };
+
+  const renderProjectGridItem = (workspace: Workspace, isFavorite: boolean) => (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+    <div
+      onClick={() => {
+        navigate({
+          to: getProjectHomePage(workspace),
+          params: {
+            projectId: workspace.id
+          }
+        });
+      }}
+      key={workspace.id}
+      className="flex h-40 min-w-72 cursor-pointer flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
+    >
+      <div className="flex flex-row justify-between">
+        <div className="mt-0 truncate text-lg text-mineshaft-100">{workspace.name}</div>
+        {isFavorite ? (
+          <FontAwesomeIcon
+            icon={faSolidStar}
+            className="text-sm text-yellow-600 hover:text-mineshaft-400"
+            onClick={(e) => {
+              e.stopPropagation();
+              removeProjectFromFavorites(workspace.id);
+            }}
+          />
+        ) : (
+          <FontAwesomeIcon
+            icon={faStar}
+            className="text-sm text-mineshaft-400 hover:text-mineshaft-300"
+            onClick={(e) => {
+              e.stopPropagation();
+              addProjectToFavorites(workspace.id);
+            }}
+          />
+        )}
+      </div>
+
+      <div
+        className="mb-2.5 mt-1 grow text-sm text-mineshaft-300"
+        style={{
+          overflow: "hidden",
+          display: "-webkit-box",
+          WebkitBoxOrient: "vertical",
+          WebkitLineClamp: 2
+        }}
+      >
+        {workspace.description}
+      </div>
+
+      <div className="flex w-full flex-row items-end justify-between place-self-end">
+        {type === ProjectType.SecretManager && (
+          <div className="mt-0 text-xs text-mineshaft-400">
+            {workspace.environments?.length || 0} environments
+          </div>
+        )}
+        <button type="button">
+          <div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 px-4 py-2 text-sm text-mineshaft-300 transition-all hover:border-primary-500/80 hover:bg-primary-800/20 hover:text-mineshaft-200">
+            Explore{" "}
+            <FontAwesomeIcon
+              icon={faArrowRight}
+              className="pl-1.5 pr-0.5 duration-200 hover:pl-2 hover:pr-0"
+            />
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+  const renderProjectListItem = (workspace: Workspace, isFavorite: boolean, index: number) => (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+    <div
+      onClick={() => {
+        navigate({
+          to: getProjectHomePage(workspace),
+          params: {
+            projectId: workspace.id
+          }
+        });
+      }}
+      key={workspace.id}
+      className={`group grid h-14 min-w-72 cursor-pointer grid-cols-6 border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
+        index === 0 && "rounded-t-md"
+      }`}
+    >
+      <div className="flex items-center sm:col-span-3 lg:col-span-4">
+        <div className="truncate text-sm text-mineshaft-100">{workspace.name}</div>
+      </div>
+      <div className="flex items-center justify-end sm:col-span-3 lg:col-span-2">
+        {type === ProjectType.SecretManager && (
+          <div className="text-center text-sm text-mineshaft-300">
+            {workspace.environments?.length || 0} environments
+          </div>
+        )}
+        {isFavorite ? (
+          <FontAwesomeIcon
+            icon={faSolidStar}
+            className="ml-6 text-sm text-yellow-600 hover:text-mineshaft-400"
+            onClick={(e) => {
+              e.stopPropagation();
+              removeProjectFromFavorites(workspace.id);
+            }}
+          />
+        ) : (
+          <FontAwesomeIcon
+            icon={faStar}
+            className="ml-6 text-sm text-mineshaft-400 hover:text-mineshaft-300"
+            onClick={(e) => {
+              e.stopPropagation();
+              addProjectToFavorites(workspace.id);
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+  let projectsComponents: ReactNode;
+
+  if (filteredWorkspaces.length || isProjectViewLoading) {
+    switch (projectsViewMode) {
+      case ProjectsViewMode.GRID:
+        projectsComponents = (
+          <div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+            {isProjectViewLoading &&
+              Array.apply(0, Array(3)).map((_x, i) => (
+                <div
+                  key={`workspace-cards-loading-${i + 1}`}
+                  className="flex h-40 min-w-72 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
+                >
+                  <div className="mt-0 text-lg text-mineshaft-100">
+                    <Skeleton className="w-3/4 bg-mineshaft-600" />
+                  </div>
+                  <div className="mt-0 pb-6 text-sm text-mineshaft-300">
+                    <Skeleton className="w-1/2 bg-mineshaft-600" />
+                  </div>
+                  <div className="flex justify-end">
+                    <Skeleton className="w-1/2 bg-mineshaft-600" />
+                  </div>
+                </div>
+              ))}
+            {!isProjectViewLoading && (
+              <>
+                {workspacesWithFaveProp.map((workspace) =>
+                  renderProjectGridItem(workspace, workspace.isFavorite)
+                )}
+              </>
+            )}
+          </div>
+        );
+
+        break;
+      case ProjectsViewMode.LIST:
+      default:
+        projectsComponents = (
+          <div className="mt-4 w-full rounded-md">
+            {isProjectViewLoading &&
+              Array.apply(0, Array(3)).map((_x, i) => (
+                <div
+                  key={`workspace-cards-loading-${i + 1}`}
+                  className={`group flex h-12 min-w-72 cursor-pointer flex-row items-center justify-between border border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
+                    i === 0 && "rounded-t-md"
+                  } ${i === 2 && "rounded-b-md border-b"}`}
+                >
+                  <Skeleton className="w-full bg-mineshaft-600" />
+                </div>
+              ))}
+            {!isProjectViewLoading &&
+              workspacesWithFaveProp.map((workspace, ind) =>
+                renderProjectListItem(workspace, workspace.isFavorite, ind)
+              )}
+          </div>
+        );
+        break;
+    }
+  } else if (workspaces.length && searchFilter) {
+    projectsComponents = (
+      <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
+        <FontAwesomeIcon
+          icon={faSearch}
+          className="mb-4 mt-2 w-full text-center text-5xl text-mineshaft-400"
+        />
+        <div className="text-center font-light">No projects match search...</div>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <div className="flex w-full flex-row">
+        <div className="flex-grow" />
+        <Input
+          className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
+          containerClassName="w-full"
+          placeholder="Search by project name..."
+          value={searchFilter}
+          onChange={(e) => setSearchFilter(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        />
+        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+          <Tooltip content="Toggle Sort Direction">
+            <IconButton
+              className="min-w-[2.4rem] border-none hover:bg-mineshaft-600"
+              ariaLabel={`Sort ${
+                orderDirection === OrderByDirection.ASC ? "descending" : "ascending"
+              }`}
+              variant="plain"
+              size="xs"
+              colorSchema="secondary"
+              onClick={toggleOrderDirection}
+            >
+              <FontAwesomeIcon
+                icon={orderDirection === OrderByDirection.ASC ? faArrowDownAZ : faArrowUpZA}
+              />
+            </IconButton>
+          </Tooltip>
+        </div>
+        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+          <IconButton
+            variant="outline_bg"
+            onClick={() => {
+              localStorage.setItem("projectsViewMode", ProjectsViewMode.GRID);
+              setProjectsViewMode(ProjectsViewMode.GRID);
+            }}
+            ariaLabel="grid"
+            size="xs"
+            className={`${
+              projectsViewMode === ProjectsViewMode.GRID ? "bg-mineshaft-500" : "bg-transparent"
+            } min-w-[2.4rem] border-none hover:bg-mineshaft-600`}
+          >
+            <FontAwesomeIcon icon={faBorderAll} />
+          </IconButton>
+          <IconButton
+            variant="outline_bg"
+            onClick={() => {
+              localStorage.setItem("projectsViewMode", ProjectsViewMode.LIST);
+              setProjectsViewMode(ProjectsViewMode.LIST);
+            }}
+            ariaLabel="list"
+            size="xs"
+            className={`${
+              projectsViewMode === ProjectsViewMode.LIST ? "bg-mineshaft-500" : "bg-transparent"
+            } min-w-[2.4rem] border-none hover:bg-mineshaft-600`}
+          >
+            <FontAwesomeIcon icon={faList} />
+          </IconButton>
+        </div>
+        <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Workspace}>
+          {(isAllowed) => (
+            <Button
+              isDisabled={!isAllowed}
+              colorSchema="primary"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => {
+                if (isAddingProjectsAllowed) {
+                  onAddNewProject();
+                } else {
+                  onUpgradePlan();
+                }
+              }}
+              className="ml-2"
+            >
+              Add New Project
+            </Button>
+          )}
+        </OrgPermissionCan>
+      </div>
+      {projectsComponents}
+      {!isProjectViewLoading && Boolean(filteredWorkspaces.length) && (
+        <Pagination
+          className={
+            projectsViewMode === ProjectsViewMode.GRID
+              ? "col-span-full !justify-start border-transparent bg-transparent pl-2"
+              : "rounded-b-md border border-mineshaft-600"
+          }
+          perPage={perPage}
+          perPageList={[12, 24, 48, 96]}
+          count={filteredWorkspaces.length}
+          page={page}
+          onChangePage={setPage}
+          onChangePerPage={setPerPage}
+        />
+      )}
+      {isWorkspaceEmpty && (
+        <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
+          <FontAwesomeIcon
+            icon={faFolderOpen}
+            className="mb-4 mt-2 w-full text-center text-5xl text-mineshaft-400"
+          />
+          <div className="text-center font-light">
+            You are not part of any projects in this organization yet. When you are, they will
+            appear here.
+          </div>
+          <div className="mt-0.5 text-center font-light">
+            Create a new project, or ask other organization members to give you necessary
+            permissions.
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/pages/organization/SecretManagerOverviewPage/components/ProjectListToggle.tsx

@@ -0,0 +1,40 @@
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Select, SelectItem } from "@app/components/v2";
+
+export enum ProjectListView {
+  MyProjects = "my-projects",
+  AllProjects = "all-projects"
+}
+
+type Props = {
+  value: ProjectListView;
+  onChange: (value: ProjectListView) => void;
+};
+
+export const ProjectListToggle = ({ value, onChange }: Props) => {
+  const getDisplayText = (listView: ProjectListView) => {
+    return listView === ProjectListView.MyProjects ? "My Projects" : "All Projects";
+  };
+
+  return (
+    <div className="group relative flex cursor-pointer items-center gap-2">
+      <h1 className="text-3xl font-semibold transition-colors group-hover:text-gray-500">
+        {getDisplayText(value)}
+      </h1>
+      <Select
+        value={value}
+        onValueChange={onChange}
+        className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
+      >
+        <SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem>
+        <SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem>
+      </Select>
+      <FontAwesomeIcon
+        icon={faChevronDown}
+        className="text-lg transition-colors group-hover:text-gray-500"
+      />
+    </div>
+  );
+};

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/AddMemberModal.tsx

@@ -1,11 +1,20 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, useSearch } from "@tanstack/react-router";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FilterableSelect, FormControl, Modal, ModalContent } from "@app/components/v2";
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  FilterableSelect,
+  FormControl,
+  Modal,
+  ModalContent
+} from "@app/components/v2";
 import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import {
   OrgPermissionActions,
@@ -48,7 +57,12 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
   const { t } = useTranslation();
   const { currentOrg } = useOrganization();
   const { currentWorkspace } = useWorkspace();
+  const navigate = useNavigate({ from: "" });
   const { permission } = useOrgPermission();
+  const requesterEmail = useSearch({
+    strict: false,
+    select: (el) => el?.requesterEmail
+  });
 
   const orgId = currentOrg?.id || "";
   const workspaceId = currentWorkspace?.id || "";
@@ -62,6 +76,7 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
     control,
     handleSubmit,
     reset,
+    setValue,
     watch,
     formState: { isSubmitting, errors }
   } = useForm<TAddMemberForm>({
@@ -71,6 +86,12 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
 
   const { mutateAsync: addMembersToProject } = useAddUsersToOrg();
 
+  useEffect(() => {
+    if (requesterEmail) {
+      handlePopUpToggle("addMember", true);
+    }
+  }, [requesterEmail]);
+
   const onAddMembers = async ({ orgMemberships, projectRoleSlugs }: TAddMemberForm) => {
     if (!currentWorkspace) return;
     if (!currentOrg?.id) return;
@@ -126,12 +147,13 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
     reset();
   };
 
-  const filteredOrgUsers = useMemo(() => {
+  const { append } = useFieldArray<TAddMemberForm>({ control, name: "orgMemberships" });
+  const projectInviteList = useMemo(() => {
     const wsUserUsernames = new Map();
     members?.forEach((member) => {
       wsUserUsernames.set(member.user.username, true);
     });
-    return (orgUsers || [])
+    const list = (orgUsers || [])
       .filter(({ user: u }) => !wsUserUsernames.has(u.username))
       .map(({ id, inviteEmail, user: { firstName, lastName, email } }) => ({
         value: id,
@@ -140,13 +162,31 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
             ? `${firstName} ${lastName}`
             : firstName || lastName || email || inviteEmail
       }));
+    const requesterStatus = { isProjectUser: wsUserUsernames.has(requesterEmail), userLabel: "" };
+    if (!requesterStatus.isProjectUser) {
+      const userDetails = orgUsers?.find((el) => el.user.username === requesterEmail);
+      if (userDetails) {
+        const { user } = userDetails;
+        const label =
+          user.firstName && user.lastName
+            ? `${user.firstName} ${user.lastName}`
+            : user.firstName || user.lastName || (user.email as string);
+        requesterStatus.userLabel = label;
+        setValue("orgMemberships", [
+          {
+            value: userDetails.id,
+            label
+          }
+        ]);
+      }
+    }
+
+    return { list, requesterStatus };
   }, [orgUsers, members]);
 
   const selectedOrgMemberships = watch("orgMemberships");
   const selectedRoleSlugs = watch("projectRoleSlugs");
 
-  const { append } = useFieldArray<TAddMemberForm>({ control, name: "orgMemberships" });
-
   const canInviteNewMembers = permission.can(
     OrgPermissionActions.Create,
     OrgPermissionSubjects.Member
@@ -155,7 +195,13 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
   return (
     <Modal
       isOpen={popUp?.addMember?.isOpen}
-      onOpenChange={(isOpen) => handlePopUpToggle("addMember", isOpen)}
+      onOpenChange={(isOpen) => {
+        if (!isOpen)
+          navigate({
+            search: (prev) => ({ ...prev, requesterEmail: "" })
+          });
+        handlePopUpToggle("addMember", isOpen);
+      }}
     >
       <ModalContent
         bodyClassName="overflow-visible"
@@ -185,7 +231,7 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
                       noOptionsMessage={() => (
                         <>
                           <p>
-                            {!filteredOrgUsers.length && (
+                            {!projectInviteList.list.length && (
                               <p>All organization members are already assigned to this project.</p>
                             )}
                           </p>
@@ -221,7 +267,7 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
                       placeholder="Add one or more users..."
                       isMulti
                       name="members"
-                      options={filteredOrgUsers}
+                      options={projectInviteList.list}
                       value={field.value}
                       onChange={field.onChange}
                     />
@@ -231,7 +277,7 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
                       placeholder="Add one or more users..."
                       isMulti
                       name="members"
-                      options={filteredOrgUsers}
+                      options={projectInviteList.list}
                       value={field.value}
                       onChange={field.onChange}
                     />
@@ -239,7 +285,6 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
                 </FormControl>
               )}
             />
-
             <Controller
               control={control}
               name="projectRoleSlugs"
@@ -263,6 +308,19 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
                 </FormControl>
               )}
             />
+            {requesterEmail && projectInviteList.requesterStatus.isProjectUser && (
+              <Alert hideTitle variant="danger">
+                <AlertDescription>Requested user is part of the project.</AlertDescription>
+              </Alert>
+            )}
+            {requesterEmail && !projectInviteList.requesterStatus.isProjectUser && (
+              <Alert hideTitle>
+                <AlertDescription>
+                  Assign a role to provide access to requesting user{" "}
+                  <b>{projectInviteList.requesterStatus.userLabel}</b>.
+                </AlertDescription>
+              </Alert>
+            )}
           </div>
           <div className="mt-8 flex items-center">
             <Button

frontend/src/pages/project/AccessControlPage/route-cert-manager.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -7,7 +7,8 @@ import { ProjectAccessControlTabs } from "@app/types/project";
 import { AccessControlPage } from "./AccessControlPage";
 
 const AccessControlPageQuerySchema = z.object({
-  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member)
+  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch("")
 });
 
 export const Route = createFileRoute(
@@ -15,6 +16,9 @@ export const Route = createFileRoute(
 )({
   component: AccessControlPage,
   validateSearch: zodValidator(AccessControlPageQuerySchema),
+  search: {
+    middlewares: [stripSearchParams({ requesterEmail: "" })]
+  },
   beforeLoad: ({ context, params }) => {
     return {
       breadcrumbs: [

frontend/src/pages/project/AccessControlPage/route-kms.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -7,7 +7,8 @@ import { ProjectAccessControlTabs } from "@app/types/project";
 import { AccessControlPage } from "./AccessControlPage";
 
 const AccessControlPageQuerySchema = z.object({
-  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member)
+  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch("")
 });
 
 export const Route = createFileRoute(
@@ -15,6 +16,9 @@ export const Route = createFileRoute(
 )({
   component: AccessControlPage,
   validateSearch: zodValidator(AccessControlPageQuerySchema),
+  search: {
+    middlewares: [stripSearchParams({ requesterEmail: "" })]
+  },
   beforeLoad: ({ context, params }) => {
     return {
       breadcrumbs: [

frontend/src/pages/project/AccessControlPage/route-secret-manager.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -7,7 +7,8 @@ import { ProjectAccessControlTabs } from "@app/types/project";
 import { AccessControlPage } from "./AccessControlPage";
 
 const AccessControlPageQuerySchema = z.object({
-  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member)
+  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch("")
 });
 
 export const Route = createFileRoute(
@@ -15,6 +16,9 @@ export const Route = createFileRoute(
 )({
   component: AccessControlPage,
   validateSearch: zodValidator(AccessControlPageQuerySchema),
+  search: {
+    middlewares: [stripSearchParams({ requesterEmail: "" })]
+  },
   beforeLoad: ({ context, params }) => {
     return {
       breadcrumbs: [

frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -7,7 +7,13 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FilterableSelect, FormControl, Input } from "@app/components/v2";
+import {
+  Button,
+  FilterableSelect,
+  FormControl,
+  Input,
+  PasswordGenerator
+} from "@app/components/v2";
 import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import {
@@ -226,10 +232,13 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
             isError={Boolean(errors?.value)}
             errorText={errors?.value?.message}
           >
-            <InfisicalSecretInput
-              {...field}
-              containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
-            />
+            <div className="flex items-center gap-2">
+              <InfisicalSecretInput
+                {...field}
+                containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+              />
+              <PasswordGenerator onUsePassword={field.onChange} />
+            </div>
           </FormControl>
         )}
       />

frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input } from "@app/components/v2";
+import { Button, FormControl, Input, PasswordGenerator } from "@app/components/v2";
 import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
@@ -162,12 +162,15 @@ export const CreateSecretForm = ({
             isError={Boolean(errors?.value)}
             errorText={errors?.value?.message}
           >
-            <InfisicalSecretInput
-              {...field}
-              environment={environment}
-              secretPath={secretPath}
-              containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
-            />
+            <div className="flex items-center gap-2">
+              <InfisicalSecretInput
+                {...field}
+                environment={environment}
+                secretPath={secretPath}
+                containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+              />
+              <PasswordGenerator onUsePassword={field.onChange} />
+            </div>
           </FormControl>
         )}
       />

servers.json

@@ -0,0 +1,15 @@
+{
+  "Servers": {
+    "1": {
+      "Name": "Infisical DB",
+      "Group": "Servers",
+      "Host": "host.docker.internal",
+      "Port": 5432,
+      "MaintenanceDB": "infisical",
+      "Username": "infisical",
+      "PassFile": "/pgpass",
+      "SSLMode": "disable",
+      "SavePassword": true
+    }
+  }
+}