fix: backend/package.json & backend/package-lock.json to reduce vulnerabilities

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-JS-AXIOS-6671926

.env.example

@@ -74,8 +74,8 @@ CAPTCHA_SECRET=
 
 NEXT_PUBLIC_CAPTCHA_SITE_KEY=
 
-OTEL_TELEMETRY_COLLECTION_ENABLED=false
-OTEL_EXPORT_TYPE=prometheus
+OTEL_TELEMETRY_COLLECTION_ENABLED=
+OTEL_EXPORT_TYPE=
 OTEL_EXPORT_OTLP_ENDPOINT=
 OTEL_OTLP_PUSH_INTERVAL=
 

backend/package-lock.json

@@ -33,7 +33,6 @@
         "@octokit/plugin-retry": "^5.0.5",
         "@octokit/rest": "^20.0.2",
         "@octokit/webhooks-types": "^7.3.1",
-        "@octopusdeploy/api-client": "^3.4.1",
         "@opentelemetry/api": "^1.9.0",
         "@opentelemetry/auto-instrumentations-node": "^0.53.0",
         "@opentelemetry/exporter-metrics-otlp-proto": "^0.55.0",
@@ -53,7 +52,7 @@
         "ajv": "^8.12.0",
         "argon2": "^0.31.2",
         "aws-sdk": "^2.1553.0",
-        "axios": "^1.6.7",
+        "axios": "^1.7.8",
         "axios-retry": "^4.0.0",
         "bcrypt": "^5.1.1",
         "bullmq": "^5.4.2",
@@ -6956,21 +6955,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/webhooks-types/-/webhooks-types-7.1.0.tgz",
       "integrity": "sha512-y92CpG4kFFtBBjni8LHoV12IegJ+KFxLgKRengrVjKmGE5XMeCuGvlfRe75lTRrgXaG6XIWJlFpIDTlkoJsU8w=="
     },
-    "node_modules/@octopusdeploy/api-client": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/@octopusdeploy/api-client/-/api-client-3.4.1.tgz",
-      "integrity": "sha512-j6FRgDNzc6AQoT3CAguYLWxoMR4W5TKCT1BCPpqjEN9mknmdMSKfYORs3djn/Yj/BhqtITTydDpBoREbzKY5+g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "adm-zip": "^0.5.9",
-        "axios": "^1.2.1",
-        "form-data": "^4.0.0",
-        "glob": "^8.0.3",
-        "lodash": "^4.17.21",
-        "semver": "^7.3.8",
-        "urijs": "^1.19.11"
-      }
-    },
     "node_modules/@opentelemetry/api": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
@@ -11889,9 +11873,10 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
-      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz",
+      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
+      "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -22413,12 +22398,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/urijs": {
-      "version": "1.19.11",
-      "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.11.tgz",
-      "integrity": "sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ==",
-      "license": "MIT"
-    },
     "node_modules/url": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",

backend/package.json

@@ -141,7 +141,6 @@
     "@octokit/plugin-retry": "^5.0.5",
     "@octokit/rest": "^20.0.2",
     "@octokit/webhooks-types": "^7.3.1",
-    "@octopusdeploy/api-client": "^3.4.1",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/auto-instrumentations-node": "^0.53.0",
     "@opentelemetry/exporter-metrics-otlp-proto": "^0.55.0",
@@ -161,7 +160,7 @@
     "ajv": "^8.12.0",
     "argon2": "^0.31.2",
     "aws-sdk": "^2.1553.0",
-    "axios": "^1.6.7",
+    "axios": "^1.7.8",
     "axios-retry": "^4.0.0",
     "bcrypt": "^5.1.1",
     "bullmq": "^5.4.2",

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

@@ -1082,8 +1082,7 @@ export const INTEGRATION = {
       shouldDisableDelete: "The flag to disable deletion of secrets in AWS Parameter Store.",
       shouldMaskSecrets: "Specifies if the secrets synced from Infisical to Gitlab should be marked as 'Masked'.",
       shouldProtectSecrets: "Specifies if the secrets synced from Infisical to Gitlab should be marked as 'Protected'.",
-      shouldEnableDelete: "The flag to enable deletion of secrets.",
-      octopusDeployScopeValues: "Specifies the scope values to set on synced secrets to Octopus Deploy."
+      shouldEnableDelete: "The flag to enable deletion of secrets."
     }
   },
   UPDATE: {

backend/src/lib/config/env.ts

@@ -10,7 +10,7 @@ export const GITLAB_URL = "https://gitlab.com";
 export const IS_PACKAGED = (process as any)?.pkg !== undefined;
 
 const zodStrBool = z
-  .string()
+  .enum(["true", "false"])
   .optional()
   .transform((val) => val === "true");
 

backend/src/server/routes/v1/integration-auth-router.ts

@@ -5,7 +5,6 @@ import { INTEGRATION_AUTH } from "@app/lib/api-docs";
 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 { OctopusDeployScope } from "@app/services/integration-auth/integration-auth-types";
 
 import { integrationAuthPubSchema } from "../sanitizedSchemas";
 
@@ -1009,118 +1008,4 @@ export const registerIntegrationAuthRouter = async (server: FastifyZodProvider)
       return { buildConfigs };
     }
   });
-
-  server.route({
-    method: "GET",
-    url: "/:integrationAuthId/octopus-deploy/scope-values",
-    config: {
-      rateLimit: readLimit
-    },
-    onRequest: verifyAuth([AuthMode.JWT]),
-    schema: {
-      params: z.object({
-        integrationAuthId: z.string().trim()
-      }),
-      querystring: z.object({
-        scope: z.nativeEnum(OctopusDeployScope),
-        spaceId: z.string().trim(),
-        resourceId: z.string().trim()
-      }),
-      response: {
-        200: z.object({
-          Environments: z
-            .object({
-              Name: z.string(),
-              Id: z.string()
-            })
-            .array(),
-          Machines: z
-            .object({
-              Name: z.string(),
-              Id: z.string()
-            })
-            .array(),
-          Actions: z
-            .object({
-              Name: z.string(),
-              Id: z.string()
-            })
-            .array(),
-          Roles: z
-            .object({
-              Name: z.string(),
-              Id: z.string()
-            })
-            .array(),
-          Channels: z
-            .object({
-              Name: z.string(),
-              Id: z.string()
-            })
-            .array(),
-          TenantTags: z
-            .object({
-              Name: z.string(),
-              Id: z.string()
-            })
-            .array(),
-          Processes: z
-            .object({
-              ProcessType: z.string(),
-              Name: z.string(),
-              Id: z.string()
-            })
-            .array()
-        })
-      }
-    },
-    handler: async (req) => {
-      const scopeValues = await server.services.integrationAuth.getOctopusDeployScopeValues({
-        actorId: req.permission.id,
-        actor: req.permission.type,
-        actorAuthMethod: req.permission.authMethod,
-        actorOrgId: req.permission.orgId,
-        id: req.params.integrationAuthId,
-        scope: req.query.scope,
-        spaceId: req.query.spaceId,
-        resourceId: req.query.resourceId
-      });
-      return scopeValues;
-    }
-  });
-
-  server.route({
-    method: "GET",
-    url: "/:integrationAuthId/octopus-deploy/spaces",
-    config: {
-      rateLimit: readLimit
-    },
-    onRequest: verifyAuth([AuthMode.JWT]),
-    schema: {
-      params: z.object({
-        integrationAuthId: z.string().trim()
-      }),
-      response: {
-        200: z.object({
-          spaces: z
-            .object({
-              Name: z.string(),
-              Id: z.string(),
-              IsDefault: z.boolean()
-            })
-            .array()
-        })
-      }
-    },
-    handler: async (req) => {
-      const spaces = await server.services.integrationAuth.getOctopusDeploySpaces({
-        actorId: req.permission.id,
-        actor: req.permission.type,
-        actorAuthMethod: req.permission.authMethod,
-        actorOrgId: req.permission.orgId,
-        id: req.params.integrationAuthId
-      });
-      return { spaces };
-    }
-  });
 };

backend/src/server/routes/v3/signup-router.ts

@@ -119,6 +119,13 @@ export const registerSignupRouter = async (server: FastifyZodProvider) => {
       if (!userAgent) throw new Error("user agent header is required");
       const appCfg = getConfig();
 
+      const serverCfg = await getServerCfg();
+      if (!serverCfg.allowSignUp) {
+        throw new ForbiddenRequestError({
+          message: "Signup's are disabled"
+        });
+      }
+
       const { user, accessToken, refreshToken, organizationId } =
         await server.services.signup.completeEmailAccountSignup({
           ...req.body,

backend/src/services/auth/auth-signup-service.ts

@@ -9,7 +9,7 @@ import { isAuthMethodSaml } from "@app/ee/services/permission/permission-fns";
 import { getConfig } from "@app/lib/config/env";
 import { infisicalSymmetricDecrypt, infisicalSymmetricEncypt } from "@app/lib/crypto/encryption";
 import { generateUserSrpKeys, getUserPrivateKey } from "@app/lib/crypto/srp";
-import { ForbiddenRequestError, NotFoundError } from "@app/lib/errors";
+import { NotFoundError } from "@app/lib/errors";
 import { isDisposableEmail } from "@app/lib/validator";
 import { TGroupProjectDALFactory } from "@app/services/group-project/group-project-dal";
 import { TProjectDALFactory } from "@app/services/project/project-dal";
@@ -23,7 +23,6 @@ import { TOrgServiceFactory } from "../org/org-service";
 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 { getServerCfg } from "../super-admin/super-admin-service";
 import { TUserDALFactory } from "../user/user-dal";
 import { UserEncryption } from "../user/user-types";
 import { TAuthDALFactory } from "./auth-dal";
@@ -152,8 +151,6 @@ export const authSignupServiceFactory = ({
     authorization
   }: TCompleteAccountSignupDTO) => {
     const appCfg = getConfig();
-    const serverCfg = await getServerCfg();
-
     const user = await userDAL.findOne({ username: email });
     if (!user || (user && user.isAccepted)) {
       throw new Error("Failed to complete account for complete user");
@@ -166,12 +163,6 @@ export const authSignupServiceFactory = ({
       authMethod = userAuthMethod;
       organizationId = orgId;
     } else {
-      // disallow signup if disabled. we are not doing this for providerAuthToken because we allow signups via saml or sso
-      if (!serverCfg.allowSignUp) {
-        throw new ForbiddenRequestError({
-          message: "Signup's are disabled"
-        });
-      }
       validateSignUpAuthorization(authorization, user.id);
     }
 

backend/src/services/integration-auth/integration-app-list.ts

@@ -1,7 +1,6 @@
 /* eslint-disable no-await-in-loop */
 import { createAppAuth } from "@octokit/auth-app";
 import { Octokit } from "@octokit/rest";
-import { Client as OctopusDeployClient, ProjectRepository as OctopusDeployRepository } from "@octopusdeploy/api-client";
 
 import { TIntegrationAuths } from "@app/db/schemas";
 import { getConfig } from "@app/lib/config/env";
@@ -1088,33 +1087,6 @@ const getAppsAzureDevOps = async ({ accessToken, orgName }: { accessToken: strin
   return apps;
 };
 
-const getAppsOctopusDeploy = async ({
-  apiKey,
-  instanceURL,
-  spaceName = "Default"
-}: {
-  apiKey: string;
-  instanceURL: string;
-  spaceName?: string;
-}) => {
-  const client = await OctopusDeployClient.create({
-    instanceURL,
-    apiKey,
-    userAgentApp: "Infisical Integration"
-  });
-
-  const repository = new OctopusDeployRepository(client, spaceName);
-
-  const projects = await repository.list({
-    take: 1000
-  });
-
-  return projects.Items.map((project) => ({
-    name: project.Name,
-    appId: project.Id
-  }));
-};
-
 export const getApps = async ({
   integration,
   integrationAuth,
@@ -1288,13 +1260,6 @@ export const getApps = async ({
         orgName: azureDevOpsOrgName as string
       });
 
-    case Integrations.OCTOPUS_DEPLOY:
-      return getAppsOctopusDeploy({
-        apiKey: accessToken,
-        instanceURL: url!,
-        spaceName: workspaceSlug
-      });
-
     default:
       throw new NotFoundError({ message: `Integration '${integration}' not found` });
   }

backend/src/services/integration-auth/integration-auth-service.ts

@@ -1,7 +1,6 @@
 import { ForbiddenError } from "@casl/ability";
 import { createAppAuth } from "@octokit/auth-app";
 import { Octokit } from "@octokit/rest";
-import { Client as OctopusClient, SpaceRepository as OctopusSpaceRepository } from "@octopusdeploy/api-client";
 import AWS from "aws-sdk";
 
 import { SecretEncryptionAlgo, SecretKeyEncoding, TIntegrationAuths, TIntegrationAuthsInsert } from "@app/db/schemas";
@@ -10,7 +9,7 @@ import { ProjectPermissionActions, ProjectPermissionSub } from "@app/ee/services
 import { getConfig } from "@app/lib/config/env";
 import { request } from "@app/lib/config/request";
 import { decryptSymmetric128BitHexKeyUTF8, encryptSymmetric128BitHexKeyUTF8 } from "@app/lib/crypto";
-import { BadRequestError, InternalServerError, NotFoundError } from "@app/lib/errors";
+import { BadRequestError, NotFoundError } from "@app/lib/errors";
 import { TGenericPermission, TProjectPermission } from "@app/lib/types";
 
 import { TIntegrationDALFactory } from "../integration/integration-dal";
@@ -21,7 +20,6 @@ import { getApps } from "./integration-app-list";
 import { TIntegrationAuthDALFactory } from "./integration-auth-dal";
 import { IntegrationAuthMetadataSchema, TIntegrationAuthMetadata } from "./integration-auth-schema";
 import {
-  OctopusDeployScope,
   TBitbucketEnvironment,
   TBitbucketWorkspace,
   TChecklyGroups,
@@ -40,8 +38,6 @@ import {
   TIntegrationAuthGithubOrgsDTO,
   TIntegrationAuthHerokuPipelinesDTO,
   TIntegrationAuthNorthflankSecretGroupDTO,
-  TIntegrationAuthOctopusDeployProjectScopeValuesDTO,
-  TIntegrationAuthOctopusDeploySpacesDTO,
   TIntegrationAuthQoveryEnvironmentsDTO,
   TIntegrationAuthQoveryOrgsDTO,
   TIntegrationAuthQoveryProjectDTO,
@@ -52,7 +48,6 @@ import {
   TIntegrationAuthVercelBranchesDTO,
   TNorthflankSecretGroup,
   TOauthExchangeDTO,
-  TOctopusDeployVariableSet,
   TSaveIntegrationAccessTokenDTO,
   TTeamCityBuildConfig,
   TVercelBranches
@@ -1526,88 +1521,6 @@ export const integrationAuthServiceFactory = ({
     return integrationAuthDAL.create(newIntegrationAuth);
   };
 
-  const getOctopusDeploySpaces = async ({
-    actorId,
-    actor,
-    actorOrgId,
-    actorAuthMethod,
-    id
-  }: TIntegrationAuthOctopusDeploySpacesDTO) => {
-    const integrationAuth = await integrationAuthDAL.findById(id);
-    if (!integrationAuth) throw new NotFoundError({ message: `Integration auth with ID '${id}' not found` });
-
-    const { permission } = await permissionService.getProjectPermission(
-      actor,
-      actorId,
-      integrationAuth.projectId,
-      actorAuthMethod,
-      actorOrgId
-    );
-    ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Read, ProjectPermissionSub.Integrations);
-    const { shouldUseSecretV2Bridge, botKey } = await projectBotService.getBotKey(integrationAuth.projectId);
-    const { accessToken } = await getIntegrationAccessToken(integrationAuth, shouldUseSecretV2Bridge, botKey);
-
-    const client = await OctopusClient.create({
-      apiKey: accessToken,
-      instanceURL: integrationAuth.url!,
-      userAgentApp: "Infisical Integration"
-    });
-
-    const spaceRepository = new OctopusSpaceRepository(client);
-
-    const spaces = await spaceRepository.list({
-      partialName: "", // throws error if no string is present...
-      take: 1000
-    });
-
-    return spaces.Items;
-  };
-
-  const getOctopusDeployScopeValues = async ({
-    actorId,
-    actor,
-    actorOrgId,
-    actorAuthMethod,
-    id,
-    scope,
-    spaceId,
-    resourceId
-  }: TIntegrationAuthOctopusDeployProjectScopeValuesDTO) => {
-    const integrationAuth = await integrationAuthDAL.findById(id);
-    if (!integrationAuth) throw new NotFoundError({ message: `Integration auth with ID '${id}' not found` });
-
-    const { permission } = await permissionService.getProjectPermission(
-      actor,
-      actorId,
-      integrationAuth.projectId,
-      actorAuthMethod,
-      actorOrgId
-    );
-    ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Read, ProjectPermissionSub.Integrations);
-    const { shouldUseSecretV2Bridge, botKey } = await projectBotService.getBotKey(integrationAuth.projectId);
-    const { accessToken } = await getIntegrationAccessToken(integrationAuth, shouldUseSecretV2Bridge, botKey);
-
-    let url: string;
-    switch (scope) {
-      case OctopusDeployScope.Project:
-        url = `${integrationAuth.url}/api/${spaceId}/projects/${resourceId}/variables`;
-        break;
-      // future support tenant, variable set etc.
-      default:
-        throw new InternalServerError({ message: `Unhandled Octopus Deploy scope` });
-    }
-
-    // SDK doesn't support variable set...
-    const { data: variableSet } = await request.get<TOctopusDeployVariableSet>(url, {
-      headers: {
-        "X-NuGet-ApiKey": accessToken,
-        Accept: "application/json"
-      }
-    });
-
-    return variableSet.ScopeValues;
-  };
-
   return {
     listIntegrationAuthByProjectId,
     listOrgIntegrationAuth,
@@ -1639,8 +1552,6 @@ export const integrationAuthServiceFactory = ({
     getBitbucketWorkspaces,
     getBitbucketEnvironments,
     getIntegrationAccessToken,
-    duplicateIntegrationAuth,
-    getOctopusDeploySpaces,
-    getOctopusDeployScopeValues
+    duplicateIntegrationAuth
   };
 };

backend/src/services/integration-auth/integration-auth-types.ts

@@ -193,72 +193,3 @@ export type TIntegrationsWithEnvironment = TIntegrations & {
     | null
     | undefined;
 };
-
-export type TIntegrationAuthOctopusDeploySpacesDTO = {
-  id: string;
-} & Omit<TProjectPermission, "projectId">;
-
-export type TIntegrationAuthOctopusDeployProjectScopeValuesDTO = {
-  id: string;
-  spaceId: string;
-  resourceId: string;
-  scope: OctopusDeployScope;
-} & Omit<TProjectPermission, "projectId">;
-
-export enum OctopusDeployScope {
-  Project = "project"
-  // add tenant, variable set, etc.
-}
-
-export type TOctopusDeployVariableSet = {
-  Id: string;
-  OwnerId: string;
-  Version: number;
-  Variables: {
-    Id: string;
-    Name: string;
-    Value: string;
-    Description: string;
-    Scope: {
-      Environment?: string[];
-      Machine?: string[];
-      Role?: string[];
-      TargetRole?: string[];
-      Action?: string[];
-      User?: string[];
-      Trigger?: string[];
-      ParentDeployment?: string[];
-      Private?: string[];
-      Channel?: string[];
-      TenantTag?: string[];
-      Tenant?: string[];
-      ProcessOwner?: string[];
-    };
-    IsEditable: boolean;
-    Prompt: {
-      Description: string;
-      DisplaySettings: Record<string, string>;
-      Label: string;
-      Required: boolean;
-    } | null;
-    Type: "String";
-    IsSensitive: boolean;
-  }[];
-  ScopeValues: {
-    Environments: { Id: string; Name: string }[];
-    Machines: { Id: string; Name: string }[];
-    Actions: { Id: string; Name: string }[];
-    Roles: { Id: string; Name: string }[];
-    Channels: { Id: string; Name: string }[];
-    TenantTags: { Id: string; Name: string }[];
-    Processes: {
-      ProcessType: string;
-      Id: string;
-      Name: string;
-    }[];
-  };
-  SpaceId: string;
-  Links: {
-    Self: string;
-  };
-};

backend/src/services/integration-auth/integration-list.ts

@@ -34,8 +34,7 @@ export enum Integrations {
   HASURA_CLOUD = "hasura-cloud",
   RUNDECK = "rundeck",
   AZURE_DEVOPS = "azure-devops",
-  AZURE_APP_CONFIGURATION = "azure-app-configuration",
-  OCTOPUS_DEPLOY = "octopus-deploy"
+  AZURE_APP_CONFIGURATION = "azure-app-configuration"
 }
 
 export enum IntegrationType {
@@ -414,15 +413,6 @@ export const getIntegrationOptions = async () => {
       type: "pat",
       clientId: "",
       docsLink: ""
-    },
-    {
-      name: "Octopus Deploy",
-      slug: "octopus-deploy",
-      image: "Octopus Deploy.png",
-      isAvailable: true,
-      type: "sat",
-      clientId: "",
-      docsLink: ""
     }
   ];
 

backend/src/services/integration-auth/integration-sync-secret.ts

@@ -32,14 +32,14 @@ import { z } from "zod";
 import { SecretType, TIntegrationAuths, TIntegrations } from "@app/db/schemas";
 import { getConfig } from "@app/lib/config/env";
 import { request } from "@app/lib/config/request";
-import { BadRequestError, InternalServerError } from "@app/lib/errors";
+import { BadRequestError } from "@app/lib/errors";
 import { logger } from "@app/lib/logger";
 import { TCreateManySecretsRawFn, TUpdateManySecretsRawFn } from "@app/services/secret/secret-types";
 
 import { TIntegrationDALFactory } from "../integration/integration-dal";
 import { IntegrationMetadataSchema } from "../integration/integration-schema";
 import { IntegrationAuthMetadataSchema } from "./integration-auth-schema";
-import { OctopusDeployScope, TIntegrationsWithEnvironment, TOctopusDeployVariableSet } from "./integration-auth-types";
+import { TIntegrationsWithEnvironment } from "./integration-auth-types";
 import {
   IntegrationInitialSyncBehavior,
   IntegrationMappingBehavior,
@@ -473,7 +473,7 @@ const syncSecretsAzureKeyVault = async ({
     id: string; // secret URI
     value: string;
     attributes: {
-      enabled: boolean;
+      enabled: true;
       created: number;
       updated: number;
       recoveryLevel: string;
@@ -509,19 +509,10 @@ const syncSecretsAzureKeyVault = async ({
 
   const getAzureKeyVaultSecrets = await paginateAzureKeyVaultSecrets(`${integration.app}/secrets?api-version=7.3`);
 
-  const enabledAzureKeyVaultSecrets = getAzureKeyVaultSecrets.filter((secret) => secret.attributes.enabled);
-
-  // disabled keys to skip sending updates to
-  const disabledAzureKeyVaultSecretKeys = getAzureKeyVaultSecrets
-    .filter(({ attributes }) => !attributes.enabled)
-    .map((getAzureKeyVaultSecret) => {
-      return getAzureKeyVaultSecret.id.substring(getAzureKeyVaultSecret.id.lastIndexOf("/") + 1);
-    });
-
   let lastSlashIndex: number;
   const res = (
     await Promise.all(
-      enabledAzureKeyVaultSecrets.map(async (getAzureKeyVaultSecret) => {
+      getAzureKeyVaultSecrets.map(async (getAzureKeyVaultSecret) => {
         if (!lastSlashIndex) {
           lastSlashIndex = getAzureKeyVaultSecret.id.lastIndexOf("/");
         }
@@ -667,7 +658,6 @@ const syncSecretsAzureKeyVault = async ({
   }) => {
     let isSecretSet = false;
     let maxTries = 6;
-    if (disabledAzureKeyVaultSecretKeys.includes(key)) return;
 
     while (!isSecretSet && maxTries > 0) {
       // try to set secret
@@ -4211,61 +4201,6 @@ const syncSecretsRundeck = async ({
   }
 };
 
-const syncSecretsOctopusDeploy = async ({
-  integration,
-  integrationAuth,
-  secrets,
-  accessToken
-}: {
-  integration: TIntegrations;
-  integrationAuth: TIntegrationAuths;
-  secrets: Record<string, { value: string; comment?: string }>;
-  accessToken: string;
-}) => {
-  let url: string;
-  switch (integration.scope) {
-    case OctopusDeployScope.Project:
-      url = `${integrationAuth.url}/api/${integration.targetEnvironmentId}/projects/${integration.appId}/variables`;
-      break;
-    // future support tenant, variable set, etc.
-    default:
-      throw new InternalServerError({ message: `Unhandled Octopus Deploy scope: ${integration.scope}` });
-  }
-
-  // SDK doesn't support variable set...
-  const { data: variableSet } = await request.get<TOctopusDeployVariableSet>(url, {
-    headers: {
-      "X-NuGet-ApiKey": accessToken,
-      Accept: "application/json"
-    }
-  });
-
-  await request.put(
-    url,
-    {
-      ...variableSet,
-      Variables: Object.entries(secrets).map(([key, value]) => ({
-        Name: key,
-        Value: value.value,
-        Description: value.comment ?? "",
-        Scope:
-          (integration.metadata as { octopusDeployScopeValues: TOctopusDeployVariableSet["ScopeValues"] })
-            ?.octopusDeployScopeValues ?? {},
-        IsEditable: false,
-        Prompt: null,
-        Type: "String",
-        IsSensitive: true
-      }))
-    } as unknown as TOctopusDeployVariableSet,
-    {
-      headers: {
-        "X-NuGet-ApiKey": accessToken,
-        Accept: "application/json"
-      }
-    }
-  );
-};
-
 /**
  * Sync/push [secrets] to [app] in integration named [integration]
  *
@@ -4578,14 +4513,6 @@ export const syncIntegrationSecrets = async ({
         accessToken
       });
       break;
-    case Integrations.OCTOPUS_DEPLOY:
-      await syncSecretsOctopusDeploy({
-        integration,
-        integrationAuth,
-        secrets,
-        accessToken
-      });
-      break;
     default:
       throw new BadRequestError({ message: "Invalid integration" });
   }

backend/src/services/integration/integration-schema.ts

@@ -46,18 +46,5 @@ export const IntegrationMetadataSchema = z.object({
   shouldDisableDelete: z.boolean().optional().describe(INTEGRATION.CREATE.metadata.shouldDisableDelete),
   shouldEnableDelete: z.boolean().optional().describe(INTEGRATION.CREATE.metadata.shouldEnableDelete),
   shouldMaskSecrets: z.boolean().optional().describe(INTEGRATION.CREATE.metadata.shouldMaskSecrets),
-  shouldProtectSecrets: z.boolean().optional().describe(INTEGRATION.CREATE.metadata.shouldProtectSecrets),
-
-  octopusDeployScopeValues: z
-    .object({
-      // in Octopus Deploy Scope Value Format
-      Environment: z.string().array().optional(),
-      Action: z.string().array().optional(),
-      Channel: z.string().array().optional(),
-      Machine: z.string().array().optional(),
-      ProcessOwner: z.string().array().optional(),
-      Role: z.string().array().optional()
-    })
-    .optional()
-    .describe(INTEGRATION.CREATE.metadata.octopusDeployScopeValues)
+  shouldProtectSecrets: z.boolean().optional().describe(INTEGRATION.CREATE.metadata.shouldProtectSecrets)
 });

docs/integrations/cicd/octopus-deploy.mdx

@@ -1,76 +0,0 @@
----
-title: "Octopus Deploy"
-description: "Learn how to sync secrets from Infisical to Octopus Deploy"
----
-
-Prerequisites:
-
-- Set up and add secrets to [Infisical Cloud](https://app.infisical.com)
-
-<Steps>
-    <Step title="Create a Service Account for Infisical in Octopus Deploy">
-        Navigate to **Configuration** > **Users** and click on the **Create Service Account** button.
-
-        ![integrations octopus deploy
-        users](/images/integrations/octopus-deploy/integrations-octopus-deploy-user-settings.png)
-
-        Fill out the required fields and click on the **Save** button.
-        ![integrations octopus deploy service
-        account](/images/integrations/octopus-deploy/integrations-octopus-deploy-create-service-account.png)
-    </Step>
-    <Step title="Generate an API Key for your Service Account">
-        On the **Service Account** user page, expand the **API Keys** section and click on the **New API Key** button.
-
-        ![integrations octopus deploy
-        new api key](/images/integrations/octopus-deploy/integrations-octopus-deploy-create-api-key.png)
-
-        Fill out the required fields and click on the **Generate New** button.
-
-        ![integrations octopus deploy
-        generate api key](/images/integrations/octopus-deploy/integrations-octopus-deploy-generate-api-key.png)
-
-        <Note>If you configure your access token to expire,
-            you will need to generate a new API key for Infisical prior to this date to keep your integration running.</Note>
-
-        Copy the generated **API Key** and click on the **Close** button.
-
-        ![integrations octopus deploy
-        copy api key](/images/integrations/octopus-deploy/integrations-octopus-deploy-copy-api-key.png)
-    </Step>
-    <Step title="Create a Service Accounts Team and assign your Service Account">
-        <Note>You can skip creating a new team if you already have an Octopus Deploy team configured with
-            the **Project Contributor** role to assign your Service Account to.</Note>
-
-        Navigate to **Configuration** > **Teams** and click on the **Add Team** button.
-
-        ![integrations octopus deploy
-        teams](/images/integrations/octopus-deploy/integrations-octopus-deploy-team-settings.png)
-
-        Create a new team for **Service Accounts** and click on the **Save** button.
-        ![integrations octopus deploy add
-        team](/images/integrations/octopus-deploy/integrations-octopus-deploy-create-team.png)
-
-        On the **Members** tab, click on the **Add Member** button, add your **Infisical Service Account** and click on the **Add** button.
-        ![integrations octopus deploy add service account to team](/images/integrations/octopus-deploy/integrations-octopus-deploy-add-to-team.png)
-
-        On the **User Roles** tab, click on the **Include User Role** button, and add the **Project Contributor** role. Optionally,
-        click on the **Define Scope** button to further refine what projects your Service Account has access to. Click on the **Apply** button once complete.
-        ![integrations octopus deploy add user roles to team](/images/integrations/octopus-deploy/integrations-octopus-deploy-add-role.png)
-
-        Save your team changes by clicking on the **Save** button.
-        ![integrations octopus deploy save team changes](/images/integrations/octopus-deploy/integrations-octopus-deploy-save-team.png)
-    </Step>
-    <Step title="Setup Integration">
-        In Infisical, navigate to your **Project** > **Integrations** page and select the **Octopus Deploy** integration.
-        ![integration octopus deploy](/images/integrations/octopus-deploy/integrations-octopus-deploy-integrations.png)
-
-        Enter your **Instance URL** and **API Key** from **Octopus Deploy** to authorize Infisical.
-        ![integration octopus deploy](/images/integrations/octopus-deploy/integrations-octopus-deploy-authorize.png)
-
-        Select a **Space** and **Project** from **Octopus Deploy** to sync secrets to; configuring additional **Scope Values** as needed. Click on the **Create Integration** button once configured.
-        ![integration octopus deploy](/images/integrations/octopus-deploy/integrations-octopus-deploy-create.png)
-
-        Your Infisical secrets will begin to sync to **Octopus Deploy**.
-        ![integration octopus deploy](/images/integrations/octopus-deploy/integrations-octopus-deploy-sync.png)
-    </Step>
-</Steps>

docs/integrations/overview.mdx

@@ -42,7 +42,6 @@ Missing an integration? [Throw in a request](https://github.com/Infisical/infisi
 | [CircleCI](/integrations/cicd/circleci)                        | CI/CD                  | Available   |
 | [Travis CI](/integrations/cicd/travisci)                       | CI/CD                  | Available   |
 | [Rundeck](/integrations/cicd/rundeck)                          | CI/CD                  | Available   |
-| [Octopus Deploy](/integrations/cicd/octopus-deploy)            | CI/CD                  | Available   |
 | [React](/integrations/frameworks/react)                        | Framework              | Available   |
 | [Vue](/integrations/frameworks/vue)                            | Framework              | Available   |
 | [Express](/integrations/frameworks/express)                    | Framework              | Available   |

docs/mint.json

@@ -423,8 +423,7 @@
             "integrations/cicd/travisci",
             "integrations/cicd/rundeck",
             "integrations/cicd/codefresh",
-            "integrations/cloud/checkly",
-            "integrations/cicd/octopus-deploy"
+            "integrations/cloud/checkly"
           ]
         }
       ]

frontend/next.config.js

@@ -2,7 +2,7 @@ const path = require("path");
 
 const ContentSecurityPolicy = `
 	default-src 'self';
-  connect-src 'self' https://*.posthog.com http://127.0.0.1:*;
+  connect-src 'self' https://*.posthog.com;
 	script-src 'self' https://*.posthog.com https://js.stripe.com https://api.stripe.com https://widget.intercom.io https://js.intercomcdn.com https://hcaptcha.com https://*.hcaptcha.com 'unsafe-inline' 'unsafe-eval';
 	style-src 'self' https://rsms.me 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com;
 	child-src https://api.stripe.com;

frontend/package-lock.json

@@ -89,7 +89,7 @@
         "react-mailchimp-subscribe": "^2.1.3",
         "react-markdown": "^8.0.3",
         "react-redux": "^8.0.2",
-        "react-select": "^5.8.3",
+        "react-select": "^5.8.1",
         "react-table": "^7.8.0",
         "react-toastify": "^9.1.3",
         "sanitize-html": "^2.12.1",
@@ -21259,9 +21259,9 @@
       }
     },
     "node_modules/react-select": {
-      "version": "5.8.3",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.3.tgz",
-      "integrity": "sha512-lVswnIq8/iTj1db7XCG74M/3fbGB6ZaluCzvwPGT5ZOjCdL/k0CLWhEK0vCBLuU5bHTEf6Gj8jtSvi+3v+tO1w==",
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.1.tgz",
+      "integrity": "sha512-RT1CJmuc+ejqm5MPgzyZujqDskdvB9a9ZqrdnVLsvAHjJ3Tj0hELnLeVPQlmYdVKCdCpxanepl6z7R5KhXhWzg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.0",

frontend/package.json

@@ -162,4 +162,4 @@
     "tailwindcss": "3.2",
     "typescript": "^4.9.3"
   }
-}
+}

frontend/public/data/frequentConstants.ts

@@ -36,8 +36,7 @@ const integrationSlugNameMapping: Mapping = {
   "hasura-cloud": "Hasura Cloud",
   rundeck: "Rundeck",
   "azure-devops": "Azure DevOps",
-  "azure-app-configuration": "Azure App Configuration",
-  "octopus-deploy": "Octopus Deploy"
+  "azure-app-configuration": "Azure App Configuration"
 };
 
 const envMapping: Mapping = {

frontend/src/components/v2/CreatableSelect/CreatableSelect.tsx

@@ -1,68 +0,0 @@
-import { GroupBase } from "react-select";
-import ReactSelectCreatable, { CreatableProps } from "react-select/creatable";
-import { twMerge } from "tailwind-merge";
-
-import { ClearIndicator, DropdownIndicator, MultiValueRemove, Option } from "../Select/components";
-
-export const CreatableSelect = <T,>({
-  isMulti,
-  closeMenuOnSelect,
-  ...props
-}: CreatableProps<T, boolean, GroupBase<T>>) => {
-  return (
-    <ReactSelectCreatable
-      isMulti={isMulti}
-      closeMenuOnSelect={closeMenuOnSelect ?? !isMulti}
-      hideSelectedOptions={false}
-      unstyled
-      styles={{
-        input: (base) => ({
-          ...base,
-          "input:focus": {
-            boxShadow: "none"
-          }
-        }),
-        multiValueLabel: (base) => ({
-          ...base,
-          whiteSpace: "normal",
-          overflow: "visible"
-        }),
-        control: (base) => ({
-          ...base,
-          transition: "none"
-        })
-      }}
-      components={{ DropdownIndicator, ClearIndicator, MultiValueRemove, Option }}
-      classNames={{
-        container: () => "w-full font-inter",
-        control: ({ isFocused }) =>
-          twMerge(
-            isFocused ? "border-primary-400/50" : "border-mineshaft-600 hover:border-gray-400",
-            "border w-full p-0.5 rounded-md text-mineshaft-200 font-inter bg-mineshaft-900 hover:cursor-pointer"
-          ),
-        placeholder: () => "text-mineshaft-400 text-sm pl-1 py-0.5",
-        input: () => "pl-1 py-0.5",
-        valueContainer: () => `p-1 max-h-[14rem] ${isMulti ? "!overflow-y-scroll" : ""} gap-1`,
-        singleValue: () => "leading-7 ml-1",
-        multiValue: () => "bg-mineshaft-600 rounded items-center py-0.5 px-2 gap-1.5",
-        multiValueLabel: () => "leading-6 text-sm",
-        multiValueRemove: () => "hover:text-red text-bunker-400",
-        indicatorsContainer: () => "p-1 gap-1",
-        clearIndicator: () => "p-1 hover:text-red text-bunker-400",
-        indicatorSeparator: () => "bg-bunker-400",
-        dropdownIndicator: () => "text-bunker-200 p-1",
-        menu: () =>
-          "mt-2 border text-sm text-mineshaft-200 bg-mineshaft-900 border-mineshaft-600 rounded-md",
-        groupHeading: () => "ml-3 mt-2 mb-1 text-mineshaft-400 text-sm",
-        option: ({ isFocused, isSelected }) =>
-          twMerge(
-            isFocused && "bg-mineshaft-700 active:bg-mineshaft-600",
-            isSelected && "text-mineshaft-200",
-            "hover:cursor-pointer text-xs px-3 py-2"
-          ),
-        noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md"
-      }}
-      {...props}
-    />
-  );
-};

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

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

frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx

@@ -1,7 +1,50 @@
-import Select, { Props } from "react-select";
+import Select, {
+  ClearIndicatorProps,
+  components,
+  DropdownIndicatorProps,
+  MultiValueRemoveProps,
+  OptionProps,
+  Props
+} from "react-select";
+import { faCheckCircle, faCircleXmark } from "@fortawesome/free-regular-svg-icons";
+import { faChevronDown, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { ClearIndicator, DropdownIndicator, MultiValueRemove, Option } from "../Select/components";
+const DropdownIndicator = <T,>(props: DropdownIndicatorProps<T>) => {
+  return (
+    <components.DropdownIndicator {...props}>
+      <FontAwesomeIcon icon={faChevronDown} size="xs" />
+    </components.DropdownIndicator>
+  );
+};
+
+const ClearIndicator = <T,>(props: ClearIndicatorProps<T>) => {
+  return (
+    <components.ClearIndicator {...props}>
+      <FontAwesomeIcon icon={faCircleXmark} />
+    </components.ClearIndicator>
+  );
+};
+
+const MultiValueRemove = (props: MultiValueRemoveProps) => {
+  return (
+    <components.MultiValueRemove {...props}>
+      <FontAwesomeIcon icon={faXmark} size="xs" />
+    </components.MultiValueRemove>
+  );
+};
+
+const Option = <T,>({ isSelected, children, ...props }: OptionProps<T>) => {
+  return (
+    <components.Option isSelected={isSelected} {...props}>
+      {children}
+      {isSelected && (
+        <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+      )}
+    </components.Option>
+  );
+};
 
 export const FilterableSelect = <T,>({ isMulti, closeMenuOnSelect, ...props }: Props<T>) => (
   <Select
@@ -36,8 +79,7 @@ export const FilterableSelect = <T,>({ isMulti, closeMenuOnSelect, ...props }: P
         ),
       placeholder: () => "text-mineshaft-400 text-sm pl-1 py-0.5",
       input: () => "pl-1 py-0.5",
-      valueContainer: () =>
-        `p-1 max-h-[14rem] ${isMulti ? "!overflow-y-auto thin-scrollbar" : ""} gap-1`,
+      valueContainer: () => `p-1 max-h-[14rem] ${isMulti ? "!overflow-y-scroll" : ""} gap-1`,
       singleValue: () => "leading-7 ml-1",
       multiValue: () => "bg-mineshaft-600 rounded items-center py-0.5 px-2 gap-1.5",
       multiValueLabel: () => "leading-6 text-sm",

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

@@ -1,45 +0,0 @@
-import {
-  ClearIndicatorProps,
-  components,
-  DropdownIndicatorProps,
-  MultiValueRemoveProps,
-  OptionProps
-} from "react-select";
-import { faCheckCircle, faCircleXmark } from "@fortawesome/free-regular-svg-icons";
-import { faChevronDown, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-export const DropdownIndicator = <T,>(props: DropdownIndicatorProps<T>) => {
-  return (
-    <components.DropdownIndicator {...props}>
-      <FontAwesomeIcon icon={faChevronDown} size="xs" />
-    </components.DropdownIndicator>
-  );
-};
-
-export const ClearIndicator = <T,>(props: ClearIndicatorProps<T>) => {
-  return (
-    <components.ClearIndicator {...props}>
-      <FontAwesomeIcon icon={faCircleXmark} />
-    </components.ClearIndicator>
-  );
-};
-
-export const MultiValueRemove = (props: MultiValueRemoveProps) => {
-  return (
-    <components.MultiValueRemove {...props}>
-      <FontAwesomeIcon icon={faXmark} size="xs" />
-    </components.MultiValueRemove>
-  );
-};
-
-export const Option = <T,>({ isSelected, children, ...props }: OptionProps<T>) => {
-  return (
-    <components.Option isSelected={isSelected} {...props}>
-      {children}
-      {isSelected && (
-        <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
-      )}
-    </components.Option>
-  );
-};

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

@@ -17,9 +17,7 @@ import {
   Project,
   Service,
   Team,
-  TeamCityBuildConfig,
-  TGetIntegrationAuthOctopusDeployScopeValuesDTO,
-  TOctopusDeployVariableSetScopeValues
+  TeamCityBuildConfig
 } from "./types";
 
 const integrationAuthKeys = {
@@ -121,14 +119,7 @@ const integrationAuthKeys = {
   }: {
     integrationAuthId: string;
     appId: string;
-  }) => [{ integrationAuthId, appId }, "integrationAuthTeamCityBranchConfigs"] as const,
-  getIntegrationAuthOctopusDeploySpaces: (integrationAuthId: string) =>
-    [{ integrationAuthId }, "getIntegrationAuthOctopusDeploySpaces"] as const,
-  getIntegrationAuthOctopusDeployScopeValues: ({
-    integrationAuthId,
-    ...params
-  }: TGetIntegrationAuthOctopusDeployScopeValuesDTO) =>
-    [{ integrationAuthId }, "getIntegrationAuthOctopusDeployScopeValues", params] as const
+  }) => [{ integrationAuthId, appId }, "integrationAuthTeamCityBranchConfigs"] as const
 };
 
 const fetchIntegrationAuthById = async (integrationAuthId: string) => {
@@ -488,28 +479,6 @@ const fetchIntegrationAuthTeamCityBuildConfigs = async ({
   return buildConfigs;
 };
 
-const fetchIntegrationAuthOctopusDeploySpaces = async (integrationAuthId: string) => {
-  const {
-    data: { spaces }
-  } = await apiRequest.get<{
-    spaces: { Name: string; Slug: string; Id: string; IsDefault: boolean }[];
-  }>(`/api/v1/integration-auth/${integrationAuthId}/octopus-deploy/spaces`);
-  return spaces;
-};
-
-const fetchIntegrationAuthOctopusDeployScopeValues = async ({
-  integrationAuthId,
-  scope,
-  spaceId,
-  resourceId
-}: TGetIntegrationAuthOctopusDeployScopeValuesDTO) => {
-  const { data } = await apiRequest.get<TOctopusDeployVariableSetScopeValues>(
-    `/api/v1/integration-auth/${integrationAuthId}/octopus-deploy/scope-values`,
-    { params: { scope, spaceId, resourceId } }
-  );
-  return data;
-};
-
 export const useGetIntegrationAuthById = (integrationAuthId: string) => {
   return useQuery({
     queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
@@ -518,24 +487,17 @@ export const useGetIntegrationAuthById = (integrationAuthId: string) => {
   });
 };
 
-export const useGetIntegrationAuthApps = (
-  {
-    integrationAuthId,
-    teamId,
-    azureDevOpsOrgName,
-    workspaceSlug
-  }: {
-    integrationAuthId: string;
-    teamId?: string;
-    azureDevOpsOrgName?: string;
-    workspaceSlug?: string;
-  },
-  options?: UseQueryOptions<
-    Awaited<ReturnType<typeof fetchIntegrationAuthApps>>,
-    unknown,
-    Awaited<ReturnType<typeof fetchIntegrationAuthApps>>
-  >
-) => {
+export const useGetIntegrationAuthApps = ({
+  integrationAuthId,
+  teamId,
+  azureDevOpsOrgName,
+  workspaceSlug
+}: {
+  integrationAuthId: string;
+  teamId?: string;
+  azureDevOpsOrgName?: string;
+  workspaceSlug?: string;
+}) => {
   return useQuery({
     queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId, teamId, workspaceSlug),
     queryFn: () =>
@@ -545,7 +507,7 @@ export const useGetIntegrationAuthApps = (
         azureDevOpsOrgName,
         workspaceSlug
       }),
-    ...options
+    enabled: true
   });
 };
 
@@ -797,27 +759,6 @@ export const useGetIntegrationAuthBitBucketWorkspaces = (integrationAuthId: stri
   });
 };
 
-export const useGetIntegrationAuthOctopusDeploySpaces = (integrationAuthId: string) => {
-  return useQuery({
-    queryKey: integrationAuthKeys.getIntegrationAuthOctopusDeploySpaces(integrationAuthId),
-    queryFn: () => fetchIntegrationAuthOctopusDeploySpaces(integrationAuthId)
-  });
-};
-
-export const useGetIntegrationAuthOctopusDeployScopeValues = (
-  params: TGetIntegrationAuthOctopusDeployScopeValuesDTO,
-  options?: UseQueryOptions<
-    TOctopusDeployVariableSetScopeValues,
-    unknown,
-    TOctopusDeployVariableSetScopeValues
-  >
-) =>
-  useQuery({
-    queryKey: integrationAuthKeys.getIntegrationAuthOctopusDeployScopeValues(params),
-    queryFn: () => fetchIntegrationAuthOctopusDeployScopeValues(params),
-    ...options
-  });
-
 export const useGetIntegrationAuthBitBucketEnvironments = (
   {
     integrationAuthId,

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

@@ -99,29 +99,3 @@ export type TDuplicateIntegrationAuthDTO = {
   integrationAuthId: string;
   projectId: string;
 };
-
-export enum OctopusDeployScope {
-  Project = "project"
-  // tenant, variable set
-}
-
-export type TGetIntegrationAuthOctopusDeployScopeValuesDTO = {
-  integrationAuthId: string;
-  spaceId: string;
-  resourceId: string;
-  scope: OctopusDeployScope;
-};
-
-export type TOctopusDeployVariableSetScopeValues = {
-  Environments: { Id: string; Name: string }[];
-  Machines: { Id: string; Name: string }[];
-  Actions: { Id: string; Name: string }[];
-  Roles: { Id: string; Name: string }[];
-  Channels: { Id: string; Name: string }[];
-  TenantTags: { Id: string; Name: string }[];
-  Processes: {
-    ProcessType: string;
-    Id: string;
-    Name: string;
-  }[];
-};

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

@@ -4,7 +4,7 @@ import { createNotification } from "@app/components/notifications";
 import { apiRequest } from "@app/config/request";
 
 import { workspaceKeys } from "../workspace";
-import { TCloudIntegration, TIntegrationWithEnv, TOctopusDeployScopeValues } from "./types";
+import { TCloudIntegration, TIntegrationWithEnv } from "./types";
 
 export const integrationQueryKeys = {
   getIntegrations: () => ["integrations"] as const,
@@ -87,7 +87,6 @@ export const useCreateIntegration = () => {
         shouldMaskSecrets?: boolean;
         shouldProtectSecrets?: boolean;
         shouldEnableDelete?: boolean;
-        octopusDeployScopeValues?: TOctopusDeployScopeValues;
       };
     }) => {
       const {

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

@@ -58,21 +58,11 @@ export type TIntegration = {
     shouldProtectSecrets?: boolean;
     shouldEnableDelete?: boolean;
 
-    octopusDeployScopeValues?: TOctopusDeployScopeValues;
     awsIamRole?: string;
     region?: string;
   };
 };
 
-export type TOctopusDeployScopeValues = {
-  Environment?: string[];
-  Action?: string[];
-  Channel?: string[];
-  Machine?: string[];
-  ProcessOwner?: string[];
-  Role?: string[];
-};
-
 export type TIntegrationWithEnv = TIntegration & {
   environment: {
     id: string;

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

@@ -52,7 +52,7 @@ export type Invoice = {
 };
 
 export type PmtMethod = {
-  _id: string;
+  id: string;
   brand: string;
   exp_month: number;
   exp_year: number;

frontend/src/hooks/usePagination.tsx

@@ -3,16 +3,9 @@ import { useState } from "react";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useDebounce } from "@app/hooks/useDebounce";
 
-export const usePagination = <T extends string>(
-  initialOrderBy: T,
-  {
-    initPerPage = 100
-  }: {
-    initPerPage?: number;
-  } = {}
-) => {
+export const usePagination = <T extends string>(initialOrderBy: T) => {
   const [page, setPage] = useState(1);
-  const [perPage, setPerPage] = useState(initPerPage);
+  const [perPage, setPerPage] = useState(100);
   const [orderDirection, setOrderDirection] = useState(OrderByDirection.ASC);
   const [orderBy, setOrderBy] = useState<T>(initialOrderBy);
   const [search, setSearch] = useState("");
@@ -33,10 +26,6 @@ export const usePagination = <T extends string>(
     search,
     setSearch,
     orderBy,
-    setOrderBy,
-    toggleOrderDirection: () =>
-      setOrderDirection((prev) =>
-        prev === OrderByDirection.DESC ? OrderByDirection.ASC : OrderByDirection.DESC
-      )
+    setOrderBy
   };
 };

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -457,11 +457,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         value={currentWorkspace?.id}
                         className="w-full bg-mineshaft-600 py-2.5 font-medium [&>*:first-child]:truncate"
                         onValueChange={(value) => {
+                          router.push(`/project/${value}/secrets/overview`);
                           localStorage.setItem("projectData.id", value);
-                          // this is not using react query because react query in overview is throwing error when envs are not exact same count
-                          // to reproduce change this back to router.push and switch between two projects with different env count
-                          // look into this on dashboard revamp
-                          window.location.assign(`/project/${value}/secrets/overview`);
                         }}
                         position="popper"
                         dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 z-50 max-h-96 border-gray-700"

frontend/src/pages/integrations/bitbucket/create.tsx

@@ -181,7 +181,7 @@ export default function BitBucketCreateIntegrationPage() {
                 onChange={onChange}
                 options={currentWorkspace?.environments}
                 placeholder="Select a project environment"
-                isDisabled={!currentWorkspace?.environments.length}
+                isDisabled={!bitbucketWorkspaces?.length}
               />
             </FormControl>
           )}

frontend/src/pages/integrations/octopus-deploy/authorize.tsx

@@ -1,138 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import Head from "next/head";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import { Button, Card, CardTitle, FormControl, Input } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import { removeTrailingSlash } from "@app/helpers/string";
-import { useSaveIntegrationAccessToken } from "@app/hooks/api";
-
-const formSchema = z.object({
-  instanceUrl: z.string().min(1, { message: "Instance URL required" }),
-  apiKey: z.string().min(1, { message: "API Key required" })
-});
-
-type TForm = z.infer<typeof formSchema>;
-
-export default function OctopusDeployIntegrationPage() {
-  const router = useRouter();
-  const { mutateAsync, isLoading } = useSaveIntegrationAccessToken();
-  const { currentWorkspace } = useWorkspace();
-
-  const { control, handleSubmit } = useForm<TForm>({
-    resolver: zodResolver(formSchema)
-  });
-
-  const onSubmit = async ({ instanceUrl, apiKey }: TForm) => {
-    try {
-      const integrationAuth = await mutateAsync({
-        workspaceId: currentWorkspace!.id,
-        integration: "octopus-deploy",
-        url: removeTrailingSlash(instanceUrl),
-        accessToken: apiKey
-      });
-
-      router.push(`/integrations/octopus-deploy/create?integrationAuthId=${integrationAuth.id}`);
-    } catch (err: any) {
-      createNotification({
-        type: "error",
-        text: err.message ?? "Error authorizing integration"
-      });
-      console.error(err);
-    }
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="flex h-full w-full items-center justify-center"
-    >
-      <Head>
-        <title>Authorize Octopus Deploy Integration</title>
-        <link rel="icon" href="/infisical.ico" />
-      </Head>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
-        <CardTitle
-          className="px-6 text-left text-xl"
-          subTitle="After adding your credentials, you will be prompted to set up an integration for a particular environment and secret path."
-        >
-          <div className="flex flex-row items-center">
-            <div className="inline-flex items-center pb-0.5">
-              <Image
-                src="/images/integrations/Octopus Deploy.png"
-                height={30}
-                width={30}
-                alt="Octopus Deploy logo"
-              />
-            </div>
-            <span className="ml-1.5">Octopus Deploy Integration</span>
-            <Link href="https://infisical.com/docs/integrations/cloud/octopus-deploy" passHref>
-              <a target="_blank" rel="noopener noreferrer">
-                <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  Docs
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="ml-1.5 mb-[0.07rem] text-xxs"
-                  />
-                </div>
-              </a>
-            </Link>
-          </div>
-        </CardTitle>
-        <Controller
-          render={({ field: { value, onChange }, fieldState: { error } }) => (
-            <FormControl
-              label="Octopus Deploy Instance URL"
-              errorText={error?.message}
-              isError={Boolean(error)}
-              className="px-6"
-            >
-              <Input value={value} onChange={onChange} placeholder="https://xxxx.octopus.app" />
-            </FormControl>
-          )}
-          name="instanceUrl"
-          control={control}
-        />
-        <Controller
-          render={({ field: { value, onChange }, fieldState: { error } }) => (
-            <FormControl
-              label="Octopus Deploy API Key"
-              errorText={error?.message}
-              isError={Boolean(error)}
-              className="px-6"
-            >
-              <Input
-                value={value}
-                onChange={onChange}
-                placeholder="API-XXXXXXXXXXXXXXXXXXXXXXXX"
-                type="password"
-              />
-            </FormControl>
-          )}
-          name="apiKey"
-          control={control}
-        />
-        <Button
-          type="submit"
-          colorSchema="primary"
-          variant="outline_bg"
-          className="mb-6 mt-2 ml-auto mr-6 w-min"
-          isLoading={isLoading}
-          isDisabled={isLoading}
-        >
-          Connect to Octopus Deploy
-        </Button>
-      </Card>
-    </form>
-  );
-}
-
-OctopusDeployIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/octopus-deploy/create.tsx

@@ -1,444 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { SiOctopusdeploy } from "react-icons/si";
-import { useRouter } from "next/router";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  Card,
-  CardTitle,
-  FilterableSelect,
-  FormControl,
-  Spinner
-} from "@app/components/v2";
-import { SecretPathInput } from "@app/components/v2/SecretPathInput";
-import { useWorkspace } from "@app/context";
-import { useCreateIntegration, useGetIntegrationAuthApps } from "@app/hooks/api";
-import {
-  useGetIntegrationAuthOctopusDeployScopeValues,
-  useGetIntegrationAuthOctopusDeploySpaces
-} from "@app/hooks/api/integrationAuth/queries";
-import { OctopusDeployScope } from "@app/hooks/api/integrationAuth/types";
-
-const formSchema = z.object({
-  scope: z.nativeEnum(OctopusDeployScope),
-  secretPath: z.string().default("/"),
-  sourceEnvironment: z.object({ name: z.string(), slug: z.string() }),
-  targetSpace: z.object({ Name: z.string(), Id: z.string() }),
-  targetResource: z.object({ appId: z.string().optional(), name: z.string() }),
-  targetEnvironments: z.object({ Name: z.string(), Id: z.string() }).array().optional(),
-  targetRoles: z.object({ Name: z.string(), Id: z.string() }).array().optional(),
-  targetMachines: z.object({ Name: z.string(), Id: z.string() }).array().optional(),
-  targetProcesses: z
-    .object({ Name: z.string(), Id: z.string(), ProcessType: z.string() })
-    .array()
-    .optional(),
-  targetActions: z.object({ Name: z.string(), Id: z.string() }).array().optional(),
-  targetChannels: z.object({ Name: z.string(), Id: z.string() }).array().optional()
-});
-
-type TFormData = z.infer<typeof formSchema>;
-
-export default function OctopusDeployCreateIntegrationPage() {
-  const router = useRouter();
-  const createIntegration = useCreateIntegration();
-
-  const { watch, control, reset, handleSubmit } = useForm<TFormData>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      secretPath: "/",
-      scope: OctopusDeployScope.Project
-    }
-  });
-
-  const integrationAuthId = router.query.integrationAuthId as string;
-
-  const { currentWorkspace, isLoading: isProjectLoading } = useWorkspace();
-
-  const { data: octopusDeploySpaces, isLoading: isLoadingOctopusDeploySpaces } =
-    useGetIntegrationAuthOctopusDeploySpaces((integrationAuthId as string) ?? "");
-
-  const currentSpace = watch("targetSpace", octopusDeploySpaces?.[0]);
-  const currentScope = watch("scope");
-  const sourceEnv = watch("sourceEnvironment");
-
-  const { data: octopusDeployResources, isLoading: isOctopusDeployResourcesLoading } =
-    useGetIntegrationAuthApps(
-      {
-        integrationAuthId,
-        workspaceSlug: currentSpace?.Name
-        // scope once we support other resources than project
-      },
-      {
-        enabled: Boolean(currentSpace ?? octopusDeploySpaces?.find((space) => space.IsDefault))
-      }
-    );
-
-  const currentResource = watch("targetResource", octopusDeployResources?.[0]);
-
-  const { data: octopusDeployScopeValues, isLoading: isOctopusDeployScopeValuesLoading } =
-    useGetIntegrationAuthOctopusDeployScopeValues(
-      {
-        integrationAuthId,
-        spaceId: currentSpace?.Id,
-        resourceId: currentResource?.appId!,
-        scope: currentScope
-      },
-      { enabled: Boolean(currentSpace && currentResource) }
-    );
-
-  const onSubmit = async ({
-    sourceEnvironment,
-    secretPath,
-    targetEnvironments,
-    targetResource,
-    targetSpace,
-    targetChannels,
-    targetActions,
-    targetMachines,
-    targetProcesses,
-    targetRoles,
-    scope
-  }: TFormData) => {
-    try {
-      await createIntegration.mutateAsync({
-        integrationAuthId,
-        isActive: true,
-        scope,
-        app: targetResource.name,
-        appId: targetResource.appId,
-        targetEnvironment: targetSpace.Name,
-        targetEnvironmentId: targetSpace.Id,
-        metadata: {
-          octopusDeployScopeValues: {
-            Environment: targetEnvironments?.map(({ Id }) => Id),
-            Action: targetActions?.map(({ Id }) => Id),
-            Channel: targetChannels?.map(({ Id }) => Id),
-            ProcessOwner: targetProcesses?.map(({ Id }) => Id),
-            Role: targetRoles?.map(({ Id }) => Id),
-            Machine: targetMachines?.map(({ Id }) => Id)
-          }
-        },
-        sourceEnvironment: sourceEnvironment.slug,
-        secretPath
-      });
-
-      createNotification({
-        type: "success",
-        text: "Successfully created integration"
-      });
-      router.push(`/integrations/${currentWorkspace?.id}`);
-    } catch (err) {
-      createNotification({
-        type: "error",
-        text: "Failed to create integration"
-      });
-      console.error(err);
-    }
-  };
-
-  useEffect(() => {
-    if (!octopusDeployResources || !octopusDeploySpaces || !currentWorkspace) return;
-
-    reset({
-      targetResource: octopusDeployResources[0],
-      targetSpace: octopusDeploySpaces.find((space) => space.IsDefault),
-      sourceEnvironment: currentWorkspace.environments[0],
-      secretPath: "/",
-      scope: OctopusDeployScope.Project
-    });
-  }, [octopusDeploySpaces, octopusDeployResources, currentWorkspace]);
-
-  if (isProjectLoading || isLoadingOctopusDeploySpaces || isOctopusDeployResourcesLoading)
-    return (
-      <div className="flex h-full w-full items-center justify-center p-24">
-        <Spinner />
-      </div>
-    );
-
-  return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="flex h-full w-full items-center justify-center"
-    >
-      <Card className="max-w-4xl rounded-md p-8 pt-4">
-        <CardTitle className=" text-center">
-          <SiOctopusdeploy size="1.2rem" className="mr-2 mb-1 inline-block" />
-          Octopus Deploy Integration
-        </CardTitle>
-        <div className="grid grid-cols-2 gap-4">
-          <Controller
-            control={control}
-            name="sourceEnvironment"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                errorText={error?.message}
-                isError={Boolean(error)}
-                label="Project Environment"
-              >
-                <FilterableSelect
-                  getOptionValue={(option) => option.slug}
-                  value={value}
-                  getOptionLabel={(option) => option.name}
-                  onChange={onChange}
-                  options={currentWorkspace?.environments}
-                  placeholder="Select a project environment"
-                  isDisabled={!currentWorkspace?.environments.length}
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="secretPath"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl isError={Boolean(error)} label="Secrets Path">
-                <SecretPathInput
-                  placeholder="/"
-                  environment={sourceEnv?.slug}
-                  value={value}
-                  onChange={onChange}
-                />
-              </FormControl>
-            )}
-          />
-          <div className="col-span-2 flex w-full flex-row items-center pb-2">
-            <div className="w-full border-t border-mineshaft-500" />
-            <span className="mx-2 whitespace-nowrap text-xs text-mineshaft-400">Sync To</span>
-            <div className="w-full border-t border-mineshaft-500" />
-          </div>
-          <Controller
-            control={control}
-            name="targetSpace"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                errorText={error?.message}
-                isError={Boolean(error)}
-                label="Octopus Deploy Space"
-              >
-                <FilterableSelect
-                  getOptionValue={(option) => option.Id}
-                  value={value}
-                  getOptionLabel={(option) => option.Name}
-                  onChange={onChange}
-                  options={octopusDeploySpaces}
-                  placeholder={
-                    octopusDeploySpaces?.length ? "Select a space..." : "No spaces found..."
-                  }
-                  isDisabled={!octopusDeploySpaces?.length}
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="targetResource"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                errorText={error?.message}
-                isError={Boolean(error)}
-                className="capitalize"
-                label={`Octopus Deploy ${currentScope}`}
-              >
-                <FilterableSelect
-                  getOptionValue={(option) => option.appId!}
-                  value={value}
-                  getOptionLabel={(option) => option.name}
-                  onChange={onChange}
-                  options={octopusDeployResources}
-                  placeholder={
-                    octopusDeployResources?.length ? "Select a project..." : "No projects found..."
-                  }
-                  isDisabled={!octopusDeployResources?.length}
-                />
-              </FormControl>
-            )}
-          />
-
-          <Controller
-            control={control}
-            name="targetEnvironments"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                errorText={error?.message}
-                isError={Boolean(error)}
-                label="Octopus Deploy Environments"
-                isOptional
-              >
-                <FilterableSelect
-                  isMulti
-                  getOptionValue={(option) => option.Name}
-                  value={value}
-                  getOptionLabel={(option) => option.Name}
-                  onChange={onChange}
-                  isLoading={isOctopusDeployScopeValuesLoading}
-                  options={octopusDeployScopeValues?.Environments}
-                  placeholder={
-                    octopusDeployScopeValues?.Environments?.length
-                      ? "Select environments..."
-                      : "No environments found..."
-                  }
-                  isDisabled={!octopusDeployScopeValues?.Environments?.length}
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="targetRoles"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                errorText={error?.message}
-                isError={Boolean(error)}
-                label="Octopus Deploy Target Tags"
-                isOptional
-              >
-                <FilterableSelect
-                  isMulti
-                  getOptionValue={(option) => option.Name}
-                  value={value}
-                  getOptionLabel={(option) => option.Name}
-                  onChange={onChange}
-                  isLoading={isOctopusDeployScopeValuesLoading}
-                  options={octopusDeployScopeValues?.Roles}
-                  placeholder={
-                    octopusDeployScopeValues?.Roles?.length
-                      ? "Select target tags..."
-                      : "No target tags found..."
-                  }
-                  isDisabled={!octopusDeployScopeValues?.Roles?.length}
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="targetMachines"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                errorText={error?.message}
-                isError={Boolean(error)}
-                label="Octopus Deploy Targets"
-                isOptional
-              >
-                <FilterableSelect
-                  isMulti
-                  getOptionValue={(option) => option.Name}
-                  value={value}
-                  getOptionLabel={(option) => option.Name}
-                  onChange={onChange}
-                  isLoading={isOctopusDeployScopeValuesLoading}
-                  options={octopusDeployScopeValues?.Machines}
-                  placeholder={
-                    octopusDeployScopeValues?.Machines?.length
-                      ? "Select targets..."
-                      : "No targets found..."
-                  }
-                  isDisabled={!octopusDeployScopeValues?.Machines?.length}
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="targetProcesses"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                errorText={error?.message}
-                isError={Boolean(error)}
-                label="Octopus Deploy Processes"
-                isOptional
-              >
-                <FilterableSelect
-                  isMulti
-                  getOptionValue={(option) => option.Name}
-                  value={value}
-                  getOptionLabel={(option) => option.Name}
-                  onChange={onChange}
-                  isLoading={isOctopusDeployScopeValuesLoading}
-                  options={octopusDeployScopeValues?.Processes}
-                  placeholder={
-                    octopusDeployScopeValues?.Processes?.length
-                      ? "Select processes..."
-                      : "No processes found..."
-                  }
-                  isDisabled={!octopusDeployScopeValues?.Processes?.length}
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="targetActions"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                errorText={error?.message}
-                isError={Boolean(error)}
-                label="Octopus Deploy Deployment Steps"
-                isOptional
-              >
-                <FilterableSelect
-                  isMulti
-                  getOptionValue={(option) => option.Name}
-                  value={value}
-                  getOptionLabel={(option) => option.Name}
-                  onChange={onChange}
-                  isLoading={isOctopusDeployScopeValuesLoading}
-                  options={octopusDeployScopeValues?.Actions}
-                  placeholder={
-                    octopusDeployScopeValues?.Actions?.length
-                      ? "Select deployment steps..."
-                      : "No deployment steps found..."
-                  }
-                  isDisabled={!octopusDeployScopeValues?.Actions?.length}
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="targetChannels"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                errorText={error?.message}
-                isError={Boolean(error)}
-                label="Octopus Deploy Channels"
-                isOptional
-              >
-                <FilterableSelect
-                  isMulti
-                  getOptionValue={(option) => option.Name}
-                  value={value}
-                  getOptionLabel={(option) => option.Name}
-                  onChange={onChange}
-                  isLoading={isOctopusDeployScopeValuesLoading}
-                  options={octopusDeployScopeValues?.Channels}
-                  placeholder={
-                    octopusDeployScopeValues?.Channels?.length
-                      ? "Select channels..."
-                      : "No channels found..."
-                  }
-                  isDisabled={!octopusDeployScopeValues?.Channels?.length}
-                />
-              </FormControl>
-            )}
-          />
-        </div>
-        <Button
-          type="submit"
-          colorSchema="primary"
-          className="mt-4"
-          isLoading={createIntegration.isLoading}
-          isDisabled={createIntegration.isLoading || !octopusDeployResources?.length}
-        >
-          Create Integration
-        </Button>
-      </Card>
-    </form>
-  );
-}
-
-OctopusDeployCreateIntegrationPage.requireAuth = true;

frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationConnectionSection.tsx

@@ -55,8 +55,6 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
           return "Path";
         case "bitbucket":
           return "Repository";
-        case "octopus-deploy":
-          return "Project";
         case "github":
           if (["github-env", "github-repo"].includes(integration.scope!)) {
             return "Repository";
@@ -106,16 +104,6 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
         </div>
       );
     }
-
-    if (integration.integration === "octopus-deploy") {
-      return (
-        <div>
-          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Space" />
-          <div className="text-sm text-mineshaft-300">{integration.targetEnvironment}</div>
-        </div>
-      );
-    }
-
     if (
       ["vercel", "netlify", "railway", "gitlab", "teamcity"].includes(integration.integration) ||
       (integration.integration === "github" && integration.scope === "github-env")

frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationSettingsSection.tsx

@@ -1,5 +1,4 @@
 import { TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
-import { OctopusDeployScopeValues } from "@app/views/IntegrationsPage/IntegrationDetailsPage/components/OctopusDeployScopeValues";
 
 type Props = {
   integration: TIntegrationWithEnv;
@@ -28,7 +27,6 @@ const metadataMappings: Record<keyof NonNullable<TIntegrationWithEnv["metadata"]
   shouldMaskSecrets: "GitLab Secrets Masking Enabled",
   shouldProtectSecrets: "GitLab Secret Protection Enabled",
   shouldEnableDelete: "GitHub Secret Deletion Enabled",
-  octopusDeployScopeValues: "Octopus Deploy Scope Values",
   awsIamRole: "AWS IAM Role",
   region: "Region"
 } as const;
@@ -37,9 +35,6 @@ export const IntegrationSettingsSection = ({ integration }: Props) => {
   const renderValue = <K extends MetadataKey>(key: K, value: MetadataValue<K>) => {
     if (!value) return null;
 
-    if (key === "octopusDeployScopeValues")
-      return <OctopusDeployScopeValues integration={integration} />;
-
     // If it's a boolean, we render a generic "Yes" or "No" response.
     if (typeof value === "boolean") {
       return value ? "Yes" : "No";
@@ -56,7 +51,7 @@ export const IntegrationSettingsSection = ({ integration }: Props) => {
       }
 
       if (key === "githubVisibilityRepoIds") {
-        return (value as string[]).join(", ");
+        return value.join(", ");
       }
     }
 

frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/OctopusDeployScopeValues.tsx

@@ -1,90 +0,0 @@
-import { FormLabel, Spinner } from "@app/components/v2";
-import { useGetIntegrationAuthOctopusDeployScopeValues } from "@app/hooks/api/integrationAuth/queries";
-import {
-  OctopusDeployScope,
-  TOctopusDeployVariableSetScopeValues
-} from "@app/hooks/api/integrationAuth/types";
-import { TIntegration, TOctopusDeployScopeValues } from "@app/hooks/api/integrations/types";
-
-type OctopusDeployScopeValuesProps = {
-  integration: TIntegration;
-};
-
-// remove plural since Octopus Deploy can decide whether they want to use singular or plural...
-const modifyKey = (key: keyof TOctopusDeployVariableSetScopeValues) => {
-  switch (key) {
-    case "Processes":
-      return "ProcessOwner";
-    default:
-      return key.substring(0, key.length - 1);
-  }
-};
-
-export const OctopusDeployScopeValues = ({ integration }: OctopusDeployScopeValuesProps) => {
-  const hasScopeValues = Boolean(
-    Object.values(integration.metadata?.octopusDeployScopeValues ?? {}).some(
-      (values) => values.length > 0
-    )
-  );
-
-  const { data: scopeValues = {}, isLoading } = useGetIntegrationAuthOctopusDeployScopeValues(
-    {
-      scope: OctopusDeployScope.Project,
-      spaceId: integration.targetEnvironmentId!,
-      resourceId: integration.appId!,
-      integrationAuthId: integration.integrationAuthId
-    },
-    {
-      enabled: hasScopeValues
-    }
-  );
-
-  if (!integration.metadata?.octopusDeployScopeValues)
-    return <span className="text-sm text-mineshaft-400">Not Configured</span>;
-
-  if (isLoading) return <Spinner size="sm" className="mt-2 ml-2" />;
-
-  const scopeValuesMap = new Map(
-    Object.entries(scopeValues).map(([key, values]) => [
-      modifyKey(key as keyof TOctopusDeployVariableSetScopeValues),
-      new Map((values as { Name: string; Id: string }[]).map((value) => [value.Id, value.Name]))
-    ])
-  );
-
-  return (
-    <>
-      {Object.entries(integration.metadata.octopusDeployScopeValues).map(([key, values]) => {
-        if (!values.length) return null;
-
-        const getLabel = (scope: string) => {
-          switch (scope as keyof TOctopusDeployScopeValues) {
-            case "Role":
-              return "Target Tags";
-            case "Machine":
-              return "Targets";
-            case "ProcessOwner":
-              return "Processes";
-            case "Action":
-              return "Steps";
-            default:
-              return `${scope}s`;
-          }
-        };
-
-        return (
-          <div className="mt-4" key={key}>
-            <FormLabel className="text-sm font-semibold text-mineshaft-200" label={getLabel(key)} />
-
-            <div className="text-sm text-mineshaft-300">
-              {values
-                .map((value) => scopeValuesMap.get(key)?.get(value)!)
-                .map((name) => (
-                  <p key={name}>{name}</p>
-                ))}
-            </div>
-          </div>
-        );
-      })}
-    </>
-  );
-};

frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx

@@ -140,9 +140,6 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
       case "azure-devops":
         link = `${window.location.origin}/integrations/azure-devops/authorize`;
         break;
-      case "octopus-deploy":
-        link = `${window.location.origin}/integrations/octopus-deploy/authorize`;
-        break;
       default:
         break;
     }

frontend/src/views/IntegrationsPage/components/IntegrationsSection/ConfiguredIntegrationItem.tsx

@@ -76,14 +76,6 @@ export const ConfiguredIntegrationItem = ({
             {integrationSlugNameMapping[integration.integration]}
           </div>
         </div>
-        {integration.integration === "octopus-deploy" && (
-          <div className="ml-2 flex flex-col">
-            <FormLabel label="Space" />
-            <div className="overflow-clip text-ellipsis whitespace-nowrap rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-              {integration.targetEnvironment || integration.targetEnvironmentId}
-            </div>
-          </div>
-        )}
         {integration.integration === "qovery" && (
           <div className="flex flex-row">
             <div className="ml-2 flex flex-col">
@@ -116,7 +108,6 @@ export const ConfiguredIntegrationItem = ({
                 (integration.integration === "qovery" && integration?.scope) ||
                 (integration.integration === "circleci" && "Project") ||
                 (integration.integration === "bitbucket" && "Repository") ||
-                (integration.integration === "octopus-deploy" && "Project") ||
                 (integration.integration === "aws-secret-manager" && "Secret") ||
                 (["aws-parameter-store", "rundeck"].includes(integration.integration) && "Path") ||
                 (integration?.integration === "terraform-cloud" && "Project") ||

frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx

@@ -62,7 +62,7 @@ export const IdentityProjectRow = ({
         });
       }}
     >
-      <Td className="max-w-0 truncate">{project.name}</Td>
+      <Td>{project.name}</Td>
       <Td>{`${formatRoleName(roles[0].role, roles[0].customRoleName)}${
         roles.length > 1 ? ` (+${roles.length - 1})` : ""
       }`}</Td>

frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx

@@ -1,18 +1,7 @@
-import { useMemo } from "react";
-import {
-  faArrowDown,
-  faArrowUp,
-  faFolder,
-  faMagnifyingGlass,
-  faSearch
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
 
 import {
   EmptyState,
-  IconButton,
-  Input,
-  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -21,9 +10,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
-import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetIdentityProjectMemberships } from "@app/hooks/api";
-import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { IdentityProjectRow } from "./IdentityProjectRow";
@@ -36,115 +23,36 @@ type Props = {
   ) => void;
 };
 
-enum IdentityProjectsOrderBy {
-  Name = "name"
-}
-
 export const IdentityProjectsTable = ({ identityId, handlePopUpOpen }: Props) => {
-  const { data: projectMemberships = [], isLoading } = useGetIdentityProjectMemberships(identityId);
-
-  const {
-    search,
-    setSearch,
-    setPage,
-    page,
-    perPage,
-    setPerPage,
-    offset,
-    orderDirection,
-    toggleOrderDirection
-  } = usePagination(IdentityProjectsOrderBy.Name, { initPerPage: 10 });
-
-  const filteredProjectMemberships = useMemo(
-    () =>
-      projectMemberships
-        ?.filter((membership) =>
-          membership.project.name.toLowerCase().includes(search.trim().toLowerCase())
-        )
-        .sort((a, b) => {
-          const [membershipOne, membershipTwo] =
-            orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
-
-          return membershipOne.project.name
-            .toLowerCase()
-            .localeCompare(membershipTwo.project.name.toLowerCase());
-        }),
-    [projectMemberships, orderDirection, search]
-  );
-
-  useResetPageHelper({
-    totalCount: filteredProjectMemberships.length,
-    offset,
-    setPage
-  });
-
+  const { data: projectMemberships, isLoading } = useGetIdentityProjectMemberships(identityId);
   return (
-    <div>
-      <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search projects..."
-      />
-      <TableContainer className="mt-4">
-        <Table>
-          <THead>
-            <Tr>
-              <Th className="w-2/3">
-                <div className="flex items-center">
-                  Name
-                  <IconButton
-                    variant="plain"
-                    className="ml-2"
-                    ariaLabel="sort"
-                    onClick={toggleOrderDirection}
-                  >
-                    <FontAwesomeIcon
-                      icon={orderDirection === OrderByDirection.DESC ? faArrowUp : faArrowDown}
-                    />
-                  </IconButton>
-                </div>
-              </Th>
-
-              <Th>Role</Th>
-              <Th>Added On</Th>
-              <Th className="w-5" />
-            </Tr>
-          </THead>
-          <TBody>
-            {isLoading && <TableSkeleton columns={4} innerKey="identity-project-memberships" />}
-            {!isLoading &&
-              filteredProjectMemberships.slice(offset, perPage * page).map((membership) => {
-                return (
-                  <IdentityProjectRow
-                    key={`identity-project-membership-${membership.id}`}
-                    membership={membership}
-                    handlePopUpOpen={handlePopUpOpen}
-                  />
-                );
-              })}
-          </TBody>
-        </Table>
-        {Boolean(filteredProjectMemberships.length) && (
-          <Pagination
-            count={filteredProjectMemberships.length}
-            page={page}
-            perPage={perPage}
-            onChangePage={setPage}
-            onChangePerPage={setPerPage}
-          />
-        )}
-        {!isLoading && !filteredProjectMemberships?.length && (
-          <EmptyState
-            title={
-              projectMemberships.length
-                ? "No projects match search..."
-                : "This identity has not been assigned to any projects"
-            }
-            icon={projectMemberships.length ? faSearch : faFolder}
-          />
-        )}
-      </TableContainer>
-    </div>
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Name</Th>
+            <Th>Role</Th>
+            <Th>Added On</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isLoading && <TableSkeleton columns={4} innerKey="identity-project-memberships" />}
+          {!isLoading &&
+            projectMemberships?.map((membership) => {
+              return (
+                <IdentityProjectRow
+                  key={`identity-project-membership-${membership.id}`}
+                  membership={membership}
+                  handlePopUpOpen={handlePopUpOpen}
+                />
+              );
+            })}
+        </TBody>
+      </Table>
+      {!isLoading && !projectMemberships?.length && (
+        <EmptyState title="This identity has not been assigned to any projects" icon={faFolder} />
+      )}
+    </TableContainer>
   );
 };

frontend/src/views/Org/MembersPage/MembersPage.tsx

@@ -7,7 +7,7 @@ import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { withPermission } from "@app/hoc";
 import { isTabSection, TabSections } from "@app/views/Org/Types";
 
-import { OrgGroupsTab, OrgIdentityTab, OrgMembersTab, OrgRoleTabSection } from "./components";
+import { OrgIdentityTab, OrgMembersTab, OrgRoleTabSection } from "./components";
 
 export const MembersPage = withPermission(
   () => {
@@ -25,9 +25,9 @@ export const MembersPage = withPermission(
     const updateSelectedTab = (tab: string) => {
       router.push({
         pathname: router.pathname,
-        query: { ...router.query, selectedTab: tab }
+        query: { ...router.query, selectedTab: tab },
       });
-    };
+    }
 
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
@@ -36,20 +36,16 @@ export const MembersPage = withPermission(
           <Tabs value={activeTab} onValueChange={updateSelectedTab}>
             <TabList>
               <Tab value={TabSections.Member}>Users</Tab>
-              <Tab value={TabSections.Groups}>Groups</Tab>
               <Tab value={TabSections.Identities}>
                 <div className="flex items-center">
                   <p>Machine Identities</p>
                 </div>
               </Tab>
-              <Tab value={TabSections.Roles}>Organization Roles</Tab>
+            <Tab value={TabSections.Roles}>Organization Roles</Tab>
             </TabList>
             <TabPanel value={TabSections.Member}>
               <OrgMembersTab />
             </TabPanel>
-            <TabPanel value={TabSections.Groups}>
-              <OrgGroupsTab />
-            </TabPanel>
             <TabPanel value={TabSections.Identities}>
               <OrgIdentityTab />
             </TabPanel>

frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx

@@ -57,7 +57,7 @@ export const OrgGroupsSection = () => {
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-semibold text-mineshaft-100">Groups</p>
+        <p className="text-xl font-semibold text-mineshaft-100">User Groups</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => (
             <Button

frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx

@@ -1,10 +1,9 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import {
   faArrowDown,
   faArrowUp,
   faEllipsis,
   faMagnifyingGlass,
-  faSearch,
   faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -20,7 +19,6 @@ import {
   EmptyState,
   IconButton,
   Input,
-  Pagination,
   Select,
   SelectItem,
   Table,
@@ -33,7 +31,7 @@ import {
   Tr
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { usePagination, useResetPageHelper } from "@app/hooks";
+import { useDebounce } from "@app/hooks";
 import { useGetOrganizationGroups, useGetOrgRoles, useUpdateGroup } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -61,10 +59,14 @@ enum GroupsOrderBy {
 }
 
 export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
+  const [searchGroupsFilter, setSearchGroupsFilter] = useState("");
+  const [debouncedSearch] = useDebounce(searchGroupsFilter.trim());
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
-  const { isLoading, data: groups = [] } = useGetOrganizationGroups(orgId);
+  const { isLoading, data: groups } = useGetOrganizationGroups(orgId);
   const { mutateAsync: updateMutateAsync } = useUpdateGroup();
+  const [orderBy, setOrderBy] = useState(GroupsOrderBy.Name);
+  const [orderDirection, setOrderDirection] = useState(OrderByDirection.ASC);
 
   const { data: roles } = useGetOrgRoles(orgId);
 
@@ -88,27 +90,12 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
     }
   };
 
-  const {
-    search,
-    setSearch,
-    setPage,
-    page,
-    perPage,
-    setPerPage,
-    offset,
-    orderDirection,
-    orderBy,
-    setOrderBy,
-    setOrderDirection,
-    toggleOrderDirection
-  } = usePagination<GroupsOrderBy>(GroupsOrderBy.Name, { initPerPage: 20 });
-
   const filteredGroups = useMemo(() => {
-    const filtered = search
+    const filtered = debouncedSearch
       ? groups?.filter(
           ({ name, slug }) =>
-            name.toLowerCase().includes(search.toLowerCase()) ||
-            slug.toLowerCase().includes(search.toLowerCase())
+            name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
+            slug.toLowerCase().includes(debouncedSearch.toLowerCase())
         )
       : groups;
 
@@ -126,11 +113,13 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
     });
 
     return orderDirection === OrderByDirection.ASC ? ordered : ordered?.reverse();
-  }, [search, groups, orderBy, orderDirection]);
+  }, [debouncedSearch, groups, orderBy, orderDirection]);
 
   const handleSort = (column: GroupsOrderBy) => {
     if (column === orderBy) {
-      toggleOrderDirection();
+      setOrderDirection((prev) =>
+        prev === OrderByDirection.ASC ? OrderByDirection.DESC : OrderByDirection.ASC
+      );
       return;
     }
 
@@ -138,17 +127,11 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
     setOrderDirection(OrderByDirection.ASC);
   };
 
-  useResetPageHelper({
-    totalCount: filteredGroups.length,
-    offset,
-    setPage
-  });
-
   return (
     <div>
       <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
+        value={searchGroupsFilter}
+        onChange={(e) => setSearchGroupsFilter(e.target.value)}
         leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
         placeholder="Search groups..."
       />
@@ -219,160 +202,143 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
           <TBody>
             {isLoading && <TableSkeleton columns={4} innerKey="org-groups" />}
             {!isLoading &&
-              filteredGroups
-                .slice(offset, perPage * page)
-                .map(({ id, name, slug, role, customRole }) => {
-                  return (
-                    <Tr className="h-10" key={`org-group-${id}`}>
-                      <Td>{name}</Td>
-                      <Td>{slug}</Td>
-                      <Td>
-                        <OrgPermissionCan
-                          I={OrgPermissionActions.Edit}
-                          a={OrgPermissionSubjects.Groups}
-                        >
-                          {(isAllowed) => {
-                            return (
-                              <Select
-                                value={role === "custom" ? (customRole?.slug as string) : role}
-                                isDisabled={!isAllowed}
-                                className="w-48 bg-mineshaft-600"
-                                dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                                onValueChange={(selectedRole) =>
-                                  handleChangeRole({
-                                    id,
-                                    role: selectedRole
-                                  })
-                                }
+              filteredGroups?.map(({ id, name, slug, role, customRole }) => {
+                return (
+                  <Tr className="h-10" key={`org-group-${id}`}>
+                    <Td>{name}</Td>
+                    <Td>{slug}</Td>
+                    <Td>
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Edit}
+                        a={OrgPermissionSubjects.Groups}
+                      >
+                        {(isAllowed) => {
+                          return (
+                            <Select
+                              value={role === "custom" ? (customRole?.slug as string) : role}
+                              isDisabled={!isAllowed}
+                              className="w-48 bg-mineshaft-600"
+                              dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                              onValueChange={(selectedRole) =>
+                                handleChangeRole({
+                                  id,
+                                  role: selectedRole
+                                })
+                              }
+                            >
+                              {(roles || []).map(({ slug: roleSlug, name: roleName }) => (
+                                <SelectItem value={roleSlug} key={`role-option-${roleSlug}`}>
+                                  {roleName}
+                                </SelectItem>
+                              ))}
+                            </Select>
+                          );
+                        }}
+                      </OrgPermissionCan>
+                    </Td>
+                    <Td>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              createNotification({
+                                text: "Copied group ID to clipboard",
+                                type: "info"
+                              });
+                              navigator.clipboard.writeText(id);
+                            }}
+                          >
+                            Copy Group ID
+                          </DropdownMenuItem>
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Edit}
+                            a={OrgPermissionSubjects.Identity}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("groupMembers", {
+                                    groupId: id,
+                                    slug
+                                  });
+                                }}
+                                disabled={!isAllowed}
                               >
-                                {(roles || []).map(({ slug: roleSlug, name: roleName }) => (
-                                  <SelectItem value={roleSlug} key={`role-option-${roleSlug}`}>
-                                    {roleName}
-                                  </SelectItem>
-                                ))}
-                              </Select>
-                            );
-                          }}
-                        </OrgPermissionCan>
-                      </Td>
-                      <Td>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild className="rounded-lg">
-                            <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                              <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                            </div>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="start" className="p-1">
-                            <DropdownMenuItem
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                createNotification({
-                                  text: "Copied group ID to clipboard",
-                                  type: "info"
-                                });
-                                navigator.clipboard.writeText(id);
-                              }}
-                            >
-                              Copy Group ID
-                            </DropdownMenuItem>
-                            <OrgPermissionCan
-                              I={OrgPermissionActions.Edit}
-                              a={OrgPermissionSubjects.Identity}
-                            >
-                              {(isAllowed) => (
-                                <DropdownMenuItem
-                                  className={twMerge(
-                                    !isAllowed &&
-                                      "pointer-events-none cursor-not-allowed opacity-50"
-                                  )}
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handlePopUpOpen("groupMembers", {
-                                      groupId: id,
-                                      slug
-                                    });
-                                  }}
-                                  disabled={!isAllowed}
-                                >
-                                  Manage Users
-                                </DropdownMenuItem>
-                              )}
-                            </OrgPermissionCan>
-                            <OrgPermissionCan
-                              I={OrgPermissionActions.Edit}
-                              a={OrgPermissionSubjects.Identity}
-                            >
-                              {(isAllowed) => (
-                                <DropdownMenuItem
-                                  className={twMerge(
-                                    !isAllowed &&
-                                      "pointer-events-none cursor-not-allowed opacity-50"
-                                  )}
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handlePopUpOpen("group", {
-                                      groupId: id,
-                                      name,
-                                      slug,
-                                      role,
-                                      customRole
-                                    });
-                                  }}
-                                  disabled={!isAllowed}
-                                >
-                                  Edit Group
-                                </DropdownMenuItem>
-                              )}
-                            </OrgPermissionCan>
-                            <OrgPermissionCan
-                              I={OrgPermissionActions.Delete}
-                              a={OrgPermissionSubjects.Groups}
-                            >
-                              {(isAllowed) => (
-                                <DropdownMenuItem
-                                  className={twMerge(
-                                    isAllowed
-                                      ? "hover:!bg-red-500 hover:!text-white"
-                                      : "pointer-events-none cursor-not-allowed opacity-50"
-                                  )}
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handlePopUpOpen("deleteGroup", {
-                                      groupId: id,
-                                      name
-                                    });
-                                  }}
-                                  disabled={!isAllowed}
-                                >
-                                  Delete Group
-                                </DropdownMenuItem>
-                              )}
-                            </OrgPermissionCan>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </Td>
-                    </Tr>
-                  );
-                })}
+                                Manage Users
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Edit}
+                            a={OrgPermissionSubjects.Identity}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("group", {
+                                    groupId: id,
+                                    name,
+                                    slug,
+                                    role,
+                                    customRole
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Edit Group
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Delete}
+                            a={OrgPermissionSubjects.Groups}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  isAllowed
+                                    ? "hover:!bg-red-500 hover:!text-white"
+                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deleteGroup", {
+                                    groupId: id,
+                                    name
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Delete Group
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
           </TBody>
         </Table>
-        {Boolean(filteredGroups.length) && (
-          <Pagination
-            count={filteredGroups.length}
-            page={page}
-            perPage={perPage}
-            onChangePage={setPage}
-            onChangePerPage={setPerPage}
-          />
-        )}
-        {!isLoading && !filteredGroups?.length && (
+        {filteredGroups?.length === 0 && (
           <EmptyState
-            title={
-              groups.length
-                ? "No organization groups match search..."
-                : "No organization groups found"
-            }
-            icon={groups.length ? faSearch : faUsers}
+            title={groups?.length === 0 ? "No groups found" : "No groups match search"}
+            icon={faUsers}
           />
         )}
       </TableContainer>

frontend/src/views/Org/MembersPage/components/OrgMembersTab/OrgMembersTab.tsx

@@ -1,5 +1,6 @@
 import { motion } from "framer-motion";
 
+import { OrgGroupsSection } from "../OrgGroupsTab/components";
 import { OrgMembersSection } from "./components";
 
 export const OrgMembersTab = () => {
@@ -12,6 +13,7 @@ export const OrgMembersTab = () => {
       exit={{ opacity: 0, translateX: 30 }}
     >
       <OrgMembersSection />
+      <OrgGroupsSection />
     </motion.div>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -1,13 +1,6 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useRouter } from "next/router";
-import {
-  faArrowDown,
-  faArrowUp,
-  faEllipsis,
-  faMagnifyingGlass,
-  faSearch,
-  faUsers
-} from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis, faMagnifyingGlass, faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
@@ -21,9 +14,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   EmptyState,
-  IconButton,
   Input,
-  Pagination,
   Select,
   SelectItem,
   Table,
@@ -42,7 +33,6 @@ import {
   useSubscription,
   useUser
 } from "@app/context";
-import { usePagination, useResetPageHelper } from "@app/hooks";
 import {
   useAddUsersToOrg,
   useFetchServerStatus,
@@ -50,7 +40,6 @@ import {
   useGetOrgUsers,
   useUpdateOrgMembership
 } from "@app/hooks/api";
-import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
@@ -65,11 +54,6 @@ type Props = {
   setCompleteInviteLinks: (links: Array<{ email: string; link: string }> | null) => void;
 };
 
-enum OrgMembersOrderBy {
-  Name = "firstName",
-  Email = "email"
-}
-
 export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Props) => {
   const router = useRouter();
   const { subscription } = useSubscription();
@@ -80,8 +64,10 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
 
   const { data: roles, isLoading: isRolesLoading } = useGetOrgRoles(orgId);
 
+  const [searchMemberFilter, setSearchMemberFilter] = useState("");
+
   const { data: serverDetails } = useFetchServerStatus();
-  const { data: members = [], isLoading: isMembersLoading } = useGetOrgUsers(orgId);
+  const { data: members, isLoading: isMembersLoading } = useGetOrgUsers(orgId);
 
   const { mutateAsync: addUsersMutateAsync } = useAddUsersToOrg();
   const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();
@@ -158,78 +144,24 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
     [roles]
   );
 
-  const {
-    search,
-    setSearch,
-    setPage,
-    page,
-    perPage,
-    setPerPage,
-    offset,
-    orderDirection,
-    orderBy,
-    setOrderBy,
-    setOrderDirection,
-    toggleOrderDirection
-  } = usePagination<OrgMembersOrderBy>(OrgMembersOrderBy.Name, { initPerPage: 20 });
-
-  const filteredUsers = useMemo(
+  const filterdUser = useMemo(
     () =>
-      members
-        ?.filter(
-          ({ user: u, inviteEmail }) =>
-            u?.firstName?.toLowerCase().includes(search.toLowerCase()) ||
-            u?.lastName?.toLowerCase().includes(search.toLowerCase()) ||
-            u?.username?.toLowerCase().includes(search.toLowerCase()) ||
-            u?.email?.toLowerCase().includes(search.toLowerCase()) ||
-            inviteEmail?.toLowerCase().includes(search.toLowerCase())
-        )
-        .sort((a, b) => {
-          const [memberOne, memberTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
-
-          let valueOne: string;
-          let valueTwo: string;
-
-          switch (orderBy) {
-            case OrgMembersOrderBy.Email:
-              valueOne = memberOne.user.email || memberOne.inviteEmail;
-              valueTwo = memberTwo.user.email || memberTwo.inviteEmail;
-              break;
-            case OrgMembersOrderBy.Name:
-            default:
-              valueOne = memberOne.user.firstName;
-              valueTwo = memberTwo.user.firstName;
-          }
-
-          if (!valueOne) return 1;
-          if (!valueTwo) return -1;
-
-          return valueOne.toLowerCase().localeCompare(valueTwo.toLowerCase());
-        }),
-    [members, search, orderDirection, orderBy]
+      members?.filter(
+        ({ user: u, inviteEmail }) =>
+          u?.firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.username?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.email?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          inviteEmail?.includes(searchMemberFilter.toLowerCase())
+      ),
+    [members, searchMemberFilter]
   );
 
-  const handleSort = (column: OrgMembersOrderBy) => {
-    if (column === orderBy) {
-      toggleOrderDirection();
-      return;
-    }
-
-    setOrderBy(column);
-    setOrderDirection(OrderByDirection.ASC);
-  };
-
-  useResetPageHelper({
-    totalCount: filteredUsers.length,
-    offset,
-    setPage
-  });
-
   return (
     <div>
       <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
+        value={searchMemberFilter}
+        onChange={(e) => setSearchMemberFilter(e.target.value)}
         leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
         placeholder="Search members..."
       />
@@ -237,46 +169,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
         <Table>
           <THead>
             <Tr>
-              <Th className="w-1/3">
-                <div className="flex items-center">
-                  Name
-                  <IconButton
-                    variant="plain"
-                    className={`ml-2 ${orderBy === OrgMembersOrderBy.Name ? "" : "opacity-30"}`}
-                    ariaLabel="sort"
-                    onClick={() => handleSort(OrgMembersOrderBy.Name)}
-                  >
-                    <FontAwesomeIcon
-                      icon={
-                        orderDirection === OrderByDirection.DESC &&
-                        orderBy === OrgMembersOrderBy.Name
-                          ? faArrowUp
-                          : faArrowDown
-                      }
-                    />
-                  </IconButton>
-                </div>
-              </Th>
-              <Th className="w-1/3">
-                <div className="flex items-center">
-                  Email
-                  <IconButton
-                    variant="plain"
-                    className={`ml-2 ${orderBy === OrgMembersOrderBy.Email ? "" : "opacity-30"}`}
-                    ariaLabel="sort"
-                    onClick={() => handleSort(OrgMembersOrderBy.Email)}
-                  >
-                    <FontAwesomeIcon
-                      icon={
-                        orderDirection === OrderByDirection.DESC &&
-                        orderBy === OrgMembersOrderBy.Email
-                          ? faArrowUp
-                          : faArrowDown
-                      }
-                    />
-                  </IconButton>
-                </div>
-              </Th>
+              <Th>Name</Th>
+              <Th>Username</Th>
               <Th>Role</Th>
               <Th className="w-5" />
             </Tr>
@@ -284,231 +178,212 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
           <TBody>
             {isLoading && <TableSkeleton columns={5} innerKey="org-members" />}
             {!isLoading &&
-              filteredUsers
-                .slice(offset, perPage * page)
-                .map(
-                  ({
-                    user: u,
-                    inviteEmail,
-                    role,
-                    roleId,
-                    id: orgMembershipId,
-                    status,
-                    isActive
-                  }) => {
-                    const name = u && u.firstName ? `${u.firstName} ${u.lastName}` : "-";
-                    const email = u?.email || inviteEmail;
-                    const username = u?.username ?? inviteEmail ?? "-";
-                    return (
-                      <Tr
-                        key={`org-membership-${orgMembershipId}`}
-                        className="h-10 w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
-                        onClick={() => router.push(`/org/${orgId}/memberships/${orgMembershipId}`)}
-                      >
-                        <Td className={isActive ? "" : "text-mineshaft-400"}>
-                          {name}
-                          {u.superAdmin && (
-                            <Badge variant="primary" className="ml-2">
-                              Server Admin
-                            </Badge>
-                          )}
-                        </Td>
-                        <Td className={isActive ? "" : "text-mineshaft-400"}>{username}</Td>
-                        <Td>
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
-                            a={OrgPermissionSubjects.Member}
-                          >
-                            {(isAllowed) => (
-                              <>
-                                {!isActive && (
+              filterdUser?.map(
+                ({ user: u, inviteEmail, role, roleId, id: orgMembershipId, status, isActive }) => {
+                  const name = u && u.firstName ? `${u.firstName} ${u.lastName}` : "-";
+                  const email = u?.email || inviteEmail;
+                  const username = u?.username ?? inviteEmail ?? "-";
+                  return (
+                    <Tr
+                      key={`org-membership-${orgMembershipId}`}
+                      className="h-10 w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                      onClick={() => router.push(`/org/${orgId}/memberships/${orgMembershipId}`)}
+                    >
+                      <Td className={isActive ? "" : "text-mineshaft-400"}>
+                        {name}
+                        {u.superAdmin && (
+                          <Badge variant="primary" className="ml-2">
+                            Server Admin
+                          </Badge>
+                        )}
+                      </Td>
+                      <Td className={isActive ? "" : "text-mineshaft-400"}>{username}</Td>
+                      <Td>
+                        <OrgPermissionCan
+                          I={OrgPermissionActions.Edit}
+                          a={OrgPermissionSubjects.Member}
+                        >
+                          {(isAllowed) => (
+                            <>
+                              {!isActive && (
+                                <Button
+                                  isDisabled
+                                  className="w-40"
+                                  colorSchema="primary"
+                                  variant="outline_bg"
+                                  onClick={() => {}}
+                                >
+                                  Suspended
+                                </Button>
+                              )}
+                              {isActive && status === "accepted" && (
+                                <Select
+                                  value={role === "custom" ? findRoleFromId(roleId)?.slug : role}
+                                  isDisabled={userId === u?.id || !isAllowed}
+                                  className="w-48 bg-mineshaft-600"
+                                  dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                                  onValueChange={(selectedRole) =>
+                                    onRoleChange(orgMembershipId, selectedRole)
+                                  }
+                                >
+                                  {(roles || [])
+                                    .filter(({ slug }) =>
+                                      slug === "owner" ? isIamOwner || role === "owner" : true
+                                    )
+                                    .map(({ slug, name: roleName }) => (
+                                      <SelectItem value={slug} key={`owner-option-${slug}`}>
+                                        {roleName}
+                                      </SelectItem>
+                                    ))}
+                                </Select>
+                              )}
+                              {isActive &&
+                                (status === "invited" || status === "verified") &&
+                                email &&
+                                serverDetails?.emailConfigured && (
                                   <Button
-                                    isDisabled
-                                    className="w-40"
+                                    isDisabled={!isAllowed}
+                                    className="w-48"
                                     colorSchema="primary"
                                     variant="outline_bg"
-                                    onClick={() => {}}
+                                    onClick={() => onResendInvite(email)}
                                   >
-                                    Suspended
+                                    Resend invite
                                   </Button>
                                 )}
-                                {isActive && status === "accepted" && (
-                                  <Select
-                                    value={role === "custom" ? findRoleFromId(roleId)?.slug : role}
-                                    isDisabled={userId === u?.id || !isAllowed}
-                                    className="w-48 bg-mineshaft-600"
-                                    dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                                    onValueChange={(selectedRole) =>
-                                      onRoleChange(orgMembershipId, selectedRole)
-                                    }
-                                  >
-                                    {(roles || [])
-                                      .filter(({ slug }) =>
-                                        slug === "owner" ? isIamOwner || role === "owner" : true
-                                      )
-                                      .map(({ slug, name: roleName }) => (
-                                        <SelectItem value={slug} key={`owner-option-${slug}`}>
-                                          {roleName}
-                                        </SelectItem>
-                                      ))}
-                                  </Select>
-                                )}
-                                {isActive &&
-                                  (status === "invited" || status === "verified") &&
-                                  email &&
-                                  serverDetails?.emailConfigured && (
-                                    <Button
-                                      isDisabled={!isAllowed}
-                                      className="w-48"
-                                      colorSchema="primary"
-                                      variant="outline_bg"
-                                      onClick={() => onResendInvite(email)}
-                                    >
-                                      Resend invite
-                                    </Button>
-                                  )}
-                              </>
-                            )}
-                          </OrgPermissionCan>
-                        </Td>
-                        <Td>
-                          {userId !== u?.id && (
-                            <DropdownMenu>
-                              <DropdownMenuTrigger asChild className="rounded-lg">
-                                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                                  <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                                </div>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align="start" className="p-1">
-                                <OrgPermissionCan
-                                  I={OrgPermissionActions.Edit}
-                                  a={OrgPermissionSubjects.Member}
-                                >
-                                  {(isAllowed) => (
-                                    <DropdownMenuItem
-                                      className={twMerge(
-                                        !isAllowed &&
-                                          "pointer-events-none cursor-not-allowed opacity-50"
-                                      )}
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        router.push(`/org/${orgId}/memberships/${orgMembershipId}`);
-                                      }}
-                                      disabled={!isAllowed}
-                                    >
-                                      Edit User
-                                    </DropdownMenuItem>
-                                  )}
-                                </OrgPermissionCan>
-                                <OrgPermissionCan
-                                  I={OrgPermissionActions.Delete}
-                                  a={OrgPermissionSubjects.Member}
-                                >
-                                  {(isAllowed) => (
-                                    <DropdownMenuItem
-                                      className={
-                                        isActive
-                                          ? twMerge(
-                                              isAllowed
-                                                ? "hover:!bg-red-500 hover:!text-white"
-                                                : "pointer-events-none cursor-not-allowed opacity-50"
-                                            )
-                                          : ""
-                                      }
-                                      onClick={async (e) => {
-                                        e.stopPropagation();
-
-                                        if (currentOrg?.scimEnabled) {
-                                          createNotification({
-                                            text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
-                                            type: "error"
-                                          });
-                                          return;
-                                        }
-
-                                        if (!isActive) {
-                                          // activate user
-                                          await updateOrgMembership({
-                                            organizationId: orgId,
-                                            membershipId: orgMembershipId,
-                                            isActive: true
-                                          });
-
-                                          return;
-                                        }
-
-                                        // deactivate user
-                                        handlePopUpOpen("deactivateMember", {
-                                          orgMembershipId,
-                                          username
-                                        });
-                                      }}
-                                      disabled={!isAllowed}
-                                    >
-                                      {`${isActive ? "Deactivate" : "Activate"} User`}
-                                    </DropdownMenuItem>
-                                  )}
-                                </OrgPermissionCan>
-                                <OrgPermissionCan
-                                  I={OrgPermissionActions.Delete}
-                                  a={OrgPermissionSubjects.Member}
-                                >
-                                  {(isAllowed) => (
-                                    <DropdownMenuItem
-                                      className={twMerge(
-                                        isAllowed
-                                          ? "hover:!bg-red-500 hover:!text-white"
-                                          : "pointer-events-none cursor-not-allowed opacity-50"
-                                      )}
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-
-                                        if (currentOrg?.scimEnabled) {
-                                          createNotification({
-                                            text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
-                                            type: "error"
-                                          });
-                                          return;
-                                        }
-
-                                        handlePopUpOpen("removeMember", {
-                                          orgMembershipId,
-                                          username
-                                        });
-                                      }}
-                                      disabled={!isAllowed}
-                                    >
-                                      Remove User
-                                    </DropdownMenuItem>
-                                  )}
-                                </OrgPermissionCan>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
+                            </>
                           )}
-                        </Td>
-                      </Tr>
-                    );
-                  }
-                )}
+                        </OrgPermissionCan>
+                      </Td>
+                      <Td>
+                        {userId !== u?.id && (
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild className="rounded-lg">
+                              <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                                <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                              </div>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" className="p-1">
+                              <OrgPermissionCan
+                                I={OrgPermissionActions.Edit}
+                                a={OrgPermissionSubjects.Member}
+                              >
+                                {(isAllowed) => (
+                                  <DropdownMenuItem
+                                    className={twMerge(
+                                      !isAllowed &&
+                                        "pointer-events-none cursor-not-allowed opacity-50"
+                                    )}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      router.push(`/org/${orgId}/memberships/${orgMembershipId}`);
+                                    }}
+                                    disabled={!isAllowed}
+                                  >
+                                    Edit User
+                                  </DropdownMenuItem>
+                                )}
+                              </OrgPermissionCan>
+                              <OrgPermissionCan
+                                I={OrgPermissionActions.Delete}
+                                a={OrgPermissionSubjects.Member}
+                              >
+                                {(isAllowed) => (
+                                  <DropdownMenuItem
+                                    className={
+                                      isActive
+                                        ? twMerge(
+                                            isAllowed
+                                              ? "hover:!bg-red-500 hover:!text-white"
+                                              : "pointer-events-none cursor-not-allowed opacity-50"
+                                          )
+                                        : ""
+                                    }
+                                    onClick={async (e) => {
+                                      e.stopPropagation();
+
+                                      if (currentOrg?.scimEnabled) {
+                                        createNotification({
+                                          text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
+                                          type: "error"
+                                        });
+                                        return;
+                                      }
+
+                                      if (!isActive) {
+                                        // activate user
+                                        await updateOrgMembership({
+                                          organizationId: orgId,
+                                          membershipId: orgMembershipId,
+                                          isActive: true
+                                        });
+
+                                        return;
+                                      }
+
+                                      // deactivate user
+                                      handlePopUpOpen("deactivateMember", {
+                                        orgMembershipId,
+                                        username
+                                      });
+                                    }}
+                                    disabled={!isAllowed}
+                                  >
+                                    {`${isActive ? "Deactivate" : "Activate"} User`}
+                                  </DropdownMenuItem>
+                                )}
+                              </OrgPermissionCan>
+                              <OrgPermissionCan
+                                I={OrgPermissionActions.Delete}
+                                a={OrgPermissionSubjects.Member}
+                              >
+                                {(isAllowed) => (
+                                  <DropdownMenuItem
+                                    className={twMerge(
+                                      isAllowed
+                                        ? "hover:!bg-red-500 hover:!text-white"
+                                        : "pointer-events-none cursor-not-allowed opacity-50"
+                                    )}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+
+                                      if (currentOrg?.scimEnabled) {
+                                        createNotification({
+                                          text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
+                                          type: "error"
+                                        });
+                                        return;
+                                      }
+
+                                      handlePopUpOpen("removeMember", {
+                                        orgMembershipId,
+                                        username
+                                      });
+                                    }}
+                                    disabled={!isAllowed}
+                                  >
+                                    Remove User
+                                  </DropdownMenuItem>
+                                )}
+                              </OrgPermissionCan>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        )}
+                      </Td>
+                    </Tr>
+                  );
+                }
+              )}
           </TBody>
         </Table>
-        {Boolean(filteredUsers.length) && (
-          <Pagination
-            count={filteredUsers.length}
-            page={page}
-            perPage={perPage}
-            onChangePage={setPage}
-            onChangePerPage={setPerPage}
-          />
-        )}
-        {!isMembersLoading && !filteredUsers?.length && (
+        {!isLoading && filterdUser?.length === 0 && (
           <EmptyState
             title={
-              members.length
-                ? "No organization members match search..."
-                : "No organization members found"
+              members?.length === 0
+                ? "No organization members found"
+                : "No organization members match search"
             }
-            icon={members.length ? faSearch : faUsers}
+            icon={faUsers}
           />
         )}
       </TableContainer>

frontend/src/views/Org/Types/TabSections.ts

@@ -1,10 +1,9 @@
-export enum TabSections {
-  Member = "members",
-  Groups = "groups",
-  Roles = "roles",
-  Identities = "identities"
-}
-
-export const isTabSection = (value: string): value is TabSections => {
-  return (Object.values(TabSections) as string[]).includes(value);
-};
+export enum TabSections {
+  Member = "members",
+  Roles = "roles",
+  Identities = "identities"
+}
+
+export const isTabSection = (value: string): value is TabSections => {
+  return (Object.values(TabSections) as string[]).includes(value);
+}

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectRow.tsx

@@ -58,7 +58,7 @@ export const UserProjectRow = ({
         });
       }}
     >
-      <Td className="max-w-0 truncate">{project.name}</Td>
+      <Td>{project.name}</Td>
       <Td>{`${formatRoleName(roles[0].role, roles[0].customRoleName)}${
         roles.length > 1 ? ` (+${roles.length - 1})` : ""
       }`}</Td>

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsTable.tsx

@@ -1,18 +1,7 @@
-import { useMemo } from "react";
-import {
-  faArrowDown,
-  faArrowUp,
-  faFolder,
-  faMagnifyingGlass,
-  faSearch
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
 
 import {
   EmptyState,
-  IconButton,
-  Input,
-  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -22,9 +11,7 @@ import {
   Tr
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
-import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetOrgMembershipProjectMemberships } from "@app/hooks/api";
-import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { UserProjectRow } from "./UserProjectRow";
@@ -34,118 +21,42 @@ type Props = {
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromProject"]>, data?: {}) => void;
 };
 
-enum UserProjectsOrderBy {
-  Name = "Name"
-}
-
 export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
-  const {
-    search,
-    setSearch,
-    setPage,
-    page,
-    perPage,
-    setPerPage,
-    offset,
-    orderDirection,
-    toggleOrderDirection
-  } = usePagination(UserProjectsOrderBy.Name, { initPerPage: 10 });
 
-  const { data: projectMemberships = [], isLoading } = useGetOrgMembershipProjectMemberships(
+  const { data: projectMemberships, isLoading } = useGetOrgMembershipProjectMemberships(
     orgId,
     membershipId
   );
 
-  const filteredProjectMemberships = useMemo(
-    () =>
-      projectMemberships
-        ?.filter((membership) =>
-          membership.project.name.toLowerCase().includes(search.trim().toLowerCase())
-        )
-        .sort((a, b) => {
-          const [membershipOne, membershipTwo] =
-            orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
-
-          return membershipOne.project.name
-            .toLowerCase()
-            .localeCompare(membershipTwo.project.name.toLowerCase());
-        }),
-    [projectMemberships, orderDirection, search]
-  );
-
-  useResetPageHelper({
-    totalCount: filteredProjectMemberships.length,
-    offset,
-    setPage
-  });
-
   return (
-    <div>
-      <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search projects..."
-      />
-      <TableContainer className="mt-4">
-        <Table>
-          <THead>
-            <Tr>
-              <Th className="w-2/3">
-                <div className="flex items-center">
-                  Name
-                  <IconButton
-                    variant="plain"
-                    className="ml-2"
-                    ariaLabel="sort"
-                    onClick={toggleOrderDirection}
-                  >
-                    <FontAwesomeIcon
-                      icon={orderDirection === OrderByDirection.DESC ? faArrowUp : faArrowDown}
-                    />
-                  </IconButton>
-                </div>
-              </Th>
-              <Th>Role</Th>
-              <Th className="w-5" />
-            </Tr>
-          </THead>
-          <TBody>
-            {isLoading && <TableSkeleton columns={3} innerKey="user-project-memberships" />}
-            {!isLoading &&
-              filteredProjectMemberships.slice(offset, perPage * page).map((membership) => {
-                return (
-                  <UserProjectRow
-                    key={`user-project-membership-${membership.id}`}
-                    membership={membership}
-                    handlePopUpOpen={handlePopUpOpen}
-                  />
-                );
-              })}
-          </TBody>
-        </Table>
-        {Boolean(filteredProjectMemberships.length) && (
-          <Pagination
-            count={filteredProjectMemberships.length}
-            page={page}
-            perPage={perPage}
-            onChangePage={setPage}
-            onChangePerPage={setPerPage}
-          />
-        )}
-        {!isLoading && !filteredProjectMemberships?.length && (
-          <EmptyState
-            title={
-              projectMemberships.length
-                ? "No projects match search..."
-                : "This user has not been assigned to any projects"
-            }
-            icon={projectMemberships.length ? faSearch : faFolder}
-          />
-        )}
-      </TableContainer>
-    </div>
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Name</Th>
+            <Th>Role</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isLoading && <TableSkeleton columns={3} innerKey="user-project-memberships" />}
+          {!isLoading &&
+            projectMemberships?.map((membership) => {
+              return (
+                <UserProjectRow
+                  key={`user-project-membership-${membership.id}`}
+                  membership={membership}
+                  handlePopUpOpen={handlePopUpOpen}
+                />
+              );
+            })}
+        </TBody>
+      </Table>
+      {!isLoading && !projectMemberships?.length && (
+        <EmptyState title="This user has not been assigned to any projects" icon={faFolder} />
+      )}
+    </TableContainer>
   );
 };

frontend/src/views/Project/MembersPage/MembersPage.tsx

@@ -6,14 +6,9 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
 
-import { isTabSection, TabSections } from "../Types";
-import {
-  GroupsTab,
-  IdentityTab,
-  MembersTab,
-  ProjectRoleListTab,
-  ServiceTokenTab
-} from "./components";
+import { isTabSection,TabSections } from "../Types";
+import { IdentityTab, MembersTab,ProjectRoleListTab, ServiceTokenTab } from "./components";
+
 
 export const MembersPage = withProjectPermission(
   () => {
@@ -31,9 +26,9 @@ export const MembersPage = withProjectPermission(
     const updateSelectedTab = (tab: string) => {
       router.push({
         pathname: router.pathname,
-        query: { ...router.query, selectedTab: tab }
+        query: { ...router.query, selectedTab: tab },
       });
-    };
+    }
 
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
@@ -42,7 +37,6 @@ export const MembersPage = withProjectPermission(
           <Tabs value={activeTab} onValueChange={updateSelectedTab}>
             <TabList>
               <Tab value={TabSections.Member}>Users</Tab>
-              <Tab value={TabSections.Groups}>Groups</Tab>
               <Tab value={TabSections.Identities}>
                 <div className="flex items-center">
                   <p>Machine Identities</p>
@@ -54,9 +48,6 @@ export const MembersPage = withProjectPermission(
             <TabPanel value={TabSections.Member}>
               <MembersTab />
             </TabPanel>
-            <TabPanel value={TabSections.Groups}>
-              <GroupsTab />
-            </TabPanel>
             <TabPanel value={TabSections.Identities}>
               <IdentityTab />
             </TabPanel>

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx

@@ -1,12 +1,4 @@
-import { useMemo } from "react";
-import {
-  faArrowDown,
-  faArrowUp,
-  faMagnifyingGlass,
-  faSearch,
-  faTrash,
-  faUsers
-} from "@fortawesome/free-solid-svg-icons";
+import { faServer, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
@@ -14,8 +6,6 @@ import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   EmptyState,
   IconButton,
-  Input,
-  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -27,9 +17,7 @@ import {
   Tr
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useListWorkspaceGroups } from "@app/hooks/api";
-import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { GroupRoles } from "./GroupRoles";
@@ -44,159 +32,76 @@ type Props = {
   ) => void;
 };
 
-enum GroupsOrderBy {
-  Name = "name"
-}
-
 export const GroupTable = ({ handlePopUpOpen }: Props) => {
   const { currentWorkspace } = useWorkspace();
-
-  const {
-    search,
-    setSearch,
-    setPage,
-    page,
-    perPage,
-    setPerPage,
-    offset,
-    orderDirection,
-    orderBy,
-    toggleOrderDirection
-  } = usePagination(GroupsOrderBy.Name, { initPerPage: 20 });
-
-  const { data: groupMemberships = [], isLoading } = useListWorkspaceGroups(
-    currentWorkspace?.id || ""
-  );
-
-  const filteredGroupMemberships = useMemo(() => {
-    const filtered = search
-      ? groupMemberships?.filter(
-          ({ group: { name, slug } }) =>
-            name.toLowerCase().includes(search.toLowerCase()) ||
-            slug.toLowerCase().includes(search.toLowerCase())
-        )
-      : groupMemberships;
-
-    const ordered = filtered?.sort((a, b) =>
-      a.group.name.toLowerCase().localeCompare(b.group.name.toLowerCase())
-    );
-
-    return orderDirection === OrderByDirection.ASC ? ordered : ordered?.reverse();
-  }, [search, groupMemberships, orderBy, orderDirection]);
-
-  useResetPageHelper({
-    totalCount: filteredGroupMemberships.length,
-    offset,
-    setPage
-  });
-
+  const { data, isLoading } = useListWorkspaceGroups(currentWorkspace?.id || "");
   return (
-    <div>
-      <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search members..."
-      />
-      <TableContainer className="mt-4">
-        <Table>
-          <THead>
-            <Tr>
-              <Th className="w-1/3">
-                <div className="flex items-center">
-                  Name
-                  <IconButton
-                    variant="plain"
-                    className="ml-2"
-                    ariaLabel="sort"
-                    onClick={toggleOrderDirection}
-                  >
-                    <FontAwesomeIcon
-                      icon={orderDirection === OrderByDirection.DESC ? faArrowUp : faArrowDown}
-                    />
-                  </IconButton>
-                </div>
-              </Th>
-              <Th>Role</Th>
-              <Th>Added on</Th>
-              <Th className="w-5" />
-            </Tr>
-          </THead>
-          <TBody>
-            {isLoading && <TableSkeleton columns={4} innerKey="project-groups" />}
-            {!isLoading &&
-              filteredGroupMemberships &&
-              filteredGroupMemberships.length > 0 &&
-              filteredGroupMemberships
-                .slice(offset, perPage * page)
-                .map(({ group: { id, name }, roles, createdAt }) => {
-                  return (
-                    <Tr className="group h-10" key={`st-v3-${id}`}>
-                      <Td>{name}</Td>
-                      <Td>
-                        <ProjectPermissionCan
-                          I={ProjectPermissionActions.Edit}
-                          a={ProjectPermissionSub.Groups}
-                        >
-                          {(isAllowed) => (
-                            <GroupRoles roles={roles} disableEdit={!isAllowed} groupId={id} />
-                          )}
-                        </ProjectPermissionCan>
-                      </Td>
-                      <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
-                      <Td className="flex justify-end">
-                        <ProjectPermissionCan
-                          I={ProjectPermissionActions.Delete}
-                          a={ProjectPermissionSub.Groups}
-                        >
-                          {(isAllowed) => (
-                            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                              <Tooltip content="Remove">
-                                <IconButton
-                                  onClick={() => {
-                                    handlePopUpOpen("deleteGroup", {
-                                      id,
-                                      name
-                                    });
-                                  }}
-                                  colorSchema="danger"
-                                  variant="plain"
-                                  ariaLabel="update"
-                                  className="ml-4"
-                                  isDisabled={!isAllowed}
-                                >
-                                  <FontAwesomeIcon icon={faTrash} />
-                                </IconButton>
-                              </Tooltip>
-                            </div>
-                          )}
-                        </ProjectPermissionCan>
-                      </Td>
-                    </Tr>
-                  );
-                })}
-          </TBody>
-        </Table>
-        {Boolean(filteredGroupMemberships.length) && (
-          <Pagination
-            count={filteredGroupMemberships.length}
-            page={page}
-            perPage={perPage}
-            onChangePage={setPage}
-            onChangePerPage={setPerPage}
-          />
-        )}
-        {!isLoading && !filteredGroupMemberships?.length && (
-          <EmptyState
-            title={
-              groupMemberships.length
-                ? "No project groups match search..."
-                : "No project groups found"
-            }
-            icon={groupMemberships.length ? faSearch : faUsers}
-          />
-        )}
-      </TableContainer>
-    </div>
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Name</Th>
+            <Th>Role</Th>
+            <Th>Added on</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isLoading && <TableSkeleton columns={4} innerKey="project-groups" />}
+          {!isLoading &&
+            data &&
+            data.length > 0 &&
+            data.map(({ group: { id, name }, roles, createdAt }) => {
+              return (
+                <Tr className="group h-10" key={`st-v3-${id}`}>
+                  <Td>{name}</Td>
+                  <Td>
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Edit}
+                      a={ProjectPermissionSub.Groups}
+                    >
+                      {(isAllowed) => (
+                        <GroupRoles roles={roles} disableEdit={!isAllowed} groupId={id} />
+                      )}
+                    </ProjectPermissionCan>
+                  </Td>
+                  <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                  <Td className="flex justify-end">
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Delete}
+                      a={ProjectPermissionSub.Groups}
+                    >
+                      {(isAllowed) => (
+                        <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                          <Tooltip content="Remove">
+                            <IconButton
+                              onClick={() => {
+                                handlePopUpOpen("deleteGroup", {
+                                  id,
+                                  name
+                                });
+                              }}
+                              colorSchema="danger"
+                              variant="plain"
+                              ariaLabel="update"
+                              className="ml-4"
+                              isDisabled={!isAllowed}
+                            >
+                              <FontAwesomeIcon icon={faTrash} />
+                            </IconButton>
+                          </Tooltip>
+                        </div>
+                      )}
+                    </ProjectPermissionCan>
+                  </Td>
+                </Tr>
+              );
+            })}
+        </TBody>
+      </Table>
+      {!isLoading && data?.length === 0 && (
+        <EmptyState title="No groups have been added to this project" icon={faServer} />
+      )}
+    </TableContainer>
   );
 };

frontend/src/views/Project/MembersPage/components/MembersTab/MembersTab.tsx

@@ -1,8 +1,12 @@
 import { motion } from "framer-motion";
 
+import { useWorkspace } from "@app/context";
+
+import { GroupsSection } from "../GroupsTab/components";
 import { MembersSection } from "./components";
 
 export const MembersTab = () => {
+  const { currentWorkspace } = useWorkspace();
   return (
     <motion.div
       key="panel-project-members"
@@ -12,6 +16,7 @@ export const MembersTab = () => {
       exit={{ opacity: 0, translateX: 30 }}
     >
       <MembersSection />
+      {currentWorkspace?.version && currentWorkspace.version > 1 && <GroupsSection />}
     </motion.div>
   );
 };

frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx

@@ -121,12 +121,9 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
     });
     return (orgUsers || [])
       .filter(({ user: u }) => !wsUserUsernames.has(u.username))
-      .map(({ id, inviteEmail, user: { firstName, lastName, email } }) => ({
-        value: id,
-        label:
-          firstName && lastName
-            ? `${firstName} ${lastName}`
-            : firstName || lastName || email || inviteEmail
+      .map((member) => ({
+        value: member.id,
+        label: `${member.user.firstName} ${member.user.lastName}`
       }));
   }, [orgUsers, members]);
 

frontend/src/views/Project/MembersPage/components/MembersTab/components/MembersTable.tsx

@@ -1,12 +1,9 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useRouter } from "next/router";
 import {
-  faArrowDown,
-  faArrowUp,
   faClock,
   faEllipsisV,
   faMagnifyingGlass,
-  faSearch,
   faTrash,
   faUsers
 } from "@fortawesome/free-solid-svg-icons";
@@ -21,7 +18,6 @@ import {
   HoverCardTrigger,
   IconButton,
   Input,
-  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -39,9 +35,7 @@ import {
   useUser,
   useWorkspace
 } from "@app/context";
-import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetWorkspaceUsers } from "@app/hooks/api";
-import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -60,12 +54,9 @@ type Props = {
   ) => void;
 };
 
-enum MembersOrderBy {
-  Name = "firstName",
-  Email = "email"
-}
-
 export const MembersTable = ({ handlePopUpOpen }: Props) => {
+  const [searchMemberFilter, setSearchMemberFilter] = useState("");
+
   const { currentWorkspace } = useWorkspace();
   const { user } = useUser();
   const router = useRouter();
@@ -73,80 +64,26 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
   const userId = user?.id || "";
   const workspaceId = currentWorkspace?.id || "";
 
-  const {
-    search,
-    setSearch,
-    setPage,
-    page,
-    perPage,
-    setPerPage,
-    offset,
-    orderDirection,
-    orderBy,
-    setOrderBy,
-    setOrderDirection,
-    toggleOrderDirection
-  } = usePagination<MembersOrderBy>(MembersOrderBy.Name, { initPerPage: 20 });
+  const { data: members, isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
 
-  const { data: members = [], isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
-
-  const filteredUsers = useMemo(
+  const filterdUsers = useMemo(
     () =>
-      members
-        ?.filter(
-          ({ user: u, inviteEmail }) =>
-            u?.firstName?.toLowerCase().includes(search.toLowerCase()) ||
-            u?.lastName?.toLowerCase().includes(search.toLowerCase()) ||
-            u?.username?.toLowerCase().includes(search.toLowerCase()) ||
-            u?.email?.toLowerCase().includes(search.toLowerCase()) ||
-            inviteEmail?.toLowerCase().includes(search.toLowerCase())
-        )
-        .sort((a, b) => {
-          const [memberOne, memberTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
-
-          let valueOne: string;
-          let valueTwo: string;
-
-          switch (orderBy) {
-            case MembersOrderBy.Email:
-              valueOne = memberOne.user.email || memberOne.inviteEmail;
-              valueTwo = memberTwo.user.email || memberTwo.inviteEmail;
-              break;
-            case MembersOrderBy.Name:
-            default:
-              valueOne = memberOne.user.firstName;
-              valueTwo = memberTwo.user.firstName;
-          }
-
-          if (!valueOne) return 1;
-          if (!valueTwo) return -1;
-
-          return valueOne.toLowerCase().localeCompare(valueTwo.toLowerCase());
-        }),
-    [members, search, orderDirection, orderBy]
+      members?.filter(
+        ({ user: u, inviteEmail }) =>
+          u?.firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.username?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.email?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          inviteEmail?.includes(searchMemberFilter.toLowerCase())
+      ),
+    [members, searchMemberFilter]
   );
 
-  useResetPageHelper({
-    totalCount: filteredUsers.length,
-    offset,
-    setPage
-  });
-
-  const handleSort = (column: MembersOrderBy) => {
-    if (column === orderBy) {
-      toggleOrderDirection();
-      return;
-    }
-
-    setOrderBy(column);
-    setOrderDirection(OrderByDirection.ASC);
-  };
-
   return (
     <div>
       <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
+        value={searchMemberFilter}
+        onChange={(e) => setSearchMemberFilter(e.target.value)}
         leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
         placeholder="Search members..."
       />
@@ -154,44 +91,8 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
         <Table>
           <THead>
             <Tr>
-              <Th className="w-1/3">
-                <div className="flex items-center">
-                  Name
-                  <IconButton
-                    variant="plain"
-                    className={`ml-2 ${orderBy === MembersOrderBy.Name ? "" : "opacity-30"}`}
-                    ariaLabel="sort"
-                    onClick={() => handleSort(MembersOrderBy.Name)}
-                  >
-                    <FontAwesomeIcon
-                      icon={
-                        orderDirection === OrderByDirection.DESC && orderBy === MembersOrderBy.Name
-                          ? faArrowUp
-                          : faArrowDown
-                      }
-                    />
-                  </IconButton>
-                </div>
-              </Th>
-              <Th>
-                <div className="flex items-center">
-                  Email
-                  <IconButton
-                    variant="plain"
-                    className={`ml-2 ${orderBy === MembersOrderBy.Email ? "" : "opacity-30"}`}
-                    ariaLabel="sort"
-                    onClick={() => handleSort(MembersOrderBy.Email)}
-                  >
-                    <FontAwesomeIcon
-                      icon={
-                        orderDirection === OrderByDirection.DESC && orderBy === MembersOrderBy.Email
-                          ? faArrowUp
-                          : faArrowDown
-                      }
-                    />
-                  </IconButton>
-                </div>
-              </Th>
+              <Th>Name</Th>
+              <Th>Username</Th>
               <Th>Role</Th>
               <Th className="w-5" />
             </Tr>
@@ -199,7 +100,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
           <TBody>
             {isMembersLoading && <TableSkeleton columns={4} innerKey="project-members" />}
             {!isMembersLoading &&
-              filteredUsers.slice(offset, perPage * page).map((projectMember) => {
+              filterdUsers?.map((projectMember) => {
                 const { user: u, inviteEmail, id: membershipId, roles } = projectMember;
                 const name = u.firstName || u.lastName ? `${u.firstName} ${u.lastName || ""}` : "-";
                 const email = u?.email || inviteEmail;
@@ -338,22 +239,8 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
               })}
           </TBody>
         </Table>
-        {Boolean(filteredUsers.length) && (
-          <Pagination
-            count={filteredUsers.length}
-            page={page}
-            perPage={perPage}
-            onChangePage={setPage}
-            onChangePerPage={setPerPage}
-          />
-        )}
-        {!isMembersLoading && !filteredUsers?.length && (
-          <EmptyState
-            title={
-              members.length ? "No project members match search..." : "No project members found"
-            }
-            icon={members.length ? faSearch : faUsers}
-          />
+        {!isMembersLoading && filterdUsers?.length === 0 && (
+          <EmptyState title="No project members found" icon={faUsers} />
         )}
       </TableContainer>
     </div>

frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -6,12 +6,11 @@ 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 { CreatableSelect } from "@app/components/v2/CreatableSelect";
+import { Button, FilterableSelect, FormControl, Input } from "@app/components/v2";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { getKeyValue } from "@app/helpers/parseEnvVar";
-import { useCreateSecretV3, useCreateWsTag, useGetWsTags } from "@app/hooks/api";
+import { useCreateSecretV3, useGetWsTags } from "@app/hooks/api";
 import { SecretType } from "@app/hooks/api/types";
 
 import { PopUpNames, usePopUpAction } from "../../SecretMainPage.store";
@@ -51,32 +50,12 @@ export const CreateSecretForm = ({
   const { closePopUp } = usePopUpAction();
 
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
-  const createWsTag = useCreateWsTag();
-
   const { permission } = useProjectPermission();
   const canReadTags = permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.Tags);
   const { data: projectTags, isLoading: isTagsLoading } = useGetWsTags(
     canReadTags ? workspaceId : ""
   );
 
-  const slugSchema = z.string().trim().toLowerCase().min(1);
-  const createNewTag = async (slug: string) => {
-    // TODO: Replace with slugSchema generic
-    try {
-      const parsedSlug = slugSchema.parse(slug);
-      await createWsTag.mutateAsync({
-        workspaceID: workspaceId,
-        tagSlug: parsedSlug,
-        tagColor: ""
-      });
-    } catch {
-      createNotification({
-        type: "error",
-        text: "Failed to create new tag"
-      });
-    }
-  };
-
   const handleFormSubmit = async ({ key, value, tags }: TFormSchema) => {
     try {
       await createSecretV3({
@@ -169,18 +148,16 @@ export const CreateSecretForm = ({
               )
             }
           >
-            <CreatableSelect
-              isMulti
+            <FilterableSelect
               className="w-full"
               placeholder="Select tags to assign to secret..."
-              isValidNewOption={(v) => slugSchema.safeParse(v).success}
+              isMulti
               name="tagIds"
               isDisabled={!canReadTags}
               isLoading={isTagsLoading && canReadTags}
               options={projectTags?.map((el) => ({ label: el.slug, value: el.id }))}
               value={field.value}
               onChange={field.onChange}
-              onCreateOption={createNewTag}
             />
           </FormControl>
         )}

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -186,7 +186,7 @@ export const SecretOverviewPage = () => {
     useGetImportedSecretsAllEnvs({
       projectId: workspaceId,
       path: secretPath,
-      environments: (userAvailableEnvs || []).map(({ slug }) => slug)
+      environments: userAvailableEnvs.map(({ slug }) => slug)
     });
 
   const { isLoading: isOverviewLoading, data: overview } = useGetProjectSecretsOverview(
@@ -618,7 +618,7 @@ export const SecretOverviewPage = () => {
     }
   }, [router.query.search]);
 
-  if (isWorkspaceLoading || (isProjectV3 && visibleEnvs.length > 0 && isOverviewLoading)) {
+  if (isWorkspaceLoading || (isProjectV3 && isOverviewLoading)) {
     return (
       <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
         <img

frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -7,8 +7,15 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, Checkbox, FormControl, FormLabel, Input, Tooltip } from "@app/components/v2";
-import { CreatableSelect } from "@app/components/v2/CreatableSelect";
+import {
+  Button,
+  Checkbox,
+  FilterableSelect,
+  FormControl,
+  FormLabel,
+  Input,
+  Tooltip
+} from "@app/components/v2";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import {
   ProjectPermissionActions,
@@ -20,7 +27,6 @@ import { getKeyValue } from "@app/helpers/parseEnvVar";
 import {
   useCreateFolder,
   useCreateSecretV3,
-  useCreateWsTag,
   useGetWsTags,
   useUpdateSecretV3
 } from "@app/hooks/api";
@@ -193,25 +199,6 @@ export const CreateSecretForm = ({ secretPath = "/", getSecretByKey, onClose }:
     setValue("value", value);
   };
 
-  const createWsTag = useCreateWsTag();
-  const slugSchema = z.string().trim().toLowerCase().min(1);
-  const createNewTag = async (slug: string) => {
-    // TODO: Replace with slugSchema generic
-    try {
-      const parsedSlug = slugSchema.parse(slug);
-      await createWsTag.mutateAsync({
-        workspaceID: workspaceId,
-        tagSlug: parsedSlug,
-        tagColor: ""
-      });
-    } catch {
-      createNotification({
-        type: "error",
-        text: "Failed to create new tag"
-      });
-    }
-  };
-
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)} noValidate>
       <FormControl
@@ -262,18 +249,16 @@ export const CreateSecretForm = ({ secretPath = "/", getSecretByKey, onClose }:
               )
             }
           >
-            <CreatableSelect
-              isMulti
+            <FilterableSelect
               className="w-full"
-              placeholder="Select tags to assign to secret..."
-              isValidNewOption={(v) => slugSchema.safeParse(v).success}
+              placeholder="Select tags to assign to secrets..."
+              isMulti
               name="tagIds"
               isDisabled={!canReadTags}
               isLoading={isTagsLoading && canReadTags}
               options={projectTags?.map((el) => ({ label: el.slug, value: el.id }))}
               value={field.value}
               onChange={field.onChange}
-              onCreateOption={createNewTag}
             />
           </FormControl>
         )}

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx

@@ -1,10 +1,8 @@
 import { faCreditCard, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  DeleteActionModal,
   EmptyState,
   IconButton,
   Table,
@@ -17,101 +15,76 @@ import {
   Tr
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { usePopUp } from "@app/hooks";
 import { useDeleteOrgPmtMethod, useGetOrgPmtMethods } from "@app/hooks/api";
 
 export const PmtMethodsTable = () => {
   const { currentOrg } = useOrganization();
   const { data, isLoading } = useGetOrgPmtMethods(currentOrg?.id ?? "");
   const deleteOrgPmtMethod = useDeleteOrgPmtMethod();
-  const { handlePopUpOpen, handlePopUpClose, handlePopUpToggle, popUp } = usePopUp([
-    "removeCard"
-  ] as const);
 
-  const pmtMethodToRemove = popUp.removeCard.data as { id: string; last4: string } | undefined;
-
-  const handleDeletePmtMethodBtnClick = async () => {
-    if (!currentOrg?.id || !pmtMethodToRemove) return;
-    try {
-      await deleteOrgPmtMethod.mutateAsync({
-        organizationId: currentOrg.id,
-        pmtMethodId: pmtMethodToRemove.id
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully removed payment method"
-      });
-      handlePopUpClose("removeCard");
-    } catch (error: any) {
-      createNotification({
-        type: "error",
-        text: error.message ?? "Error removing payment method"
-      });
-    }
+  const handleDeletePmtMethodBtnClick = async (pmtMethodId: string) => {
+    if (!currentOrg?.id) return;
+    await deleteOrgPmtMethod.mutateAsync({
+      organizationId: currentOrg.id,
+      pmtMethodId
+    });
   };
 
   return (
-    <>
-      <TableContainer className="mt-4">
-        <Table>
-          <THead>
-            <Tr>
-              <Th className="flex-1">Brand</Th>
-              <Th className="flex-1">Type</Th>
-              <Th className="flex-1">Last 4 Digits</Th>
-              <Th className="flex-1">Expiration</Th>
-              <Th className="w-5" />
-            </Tr>
-          </THead>
-          <TBody>
-            {!isLoading &&
-              data &&
-              data?.length > 0 &&
-              data.map(({ _id: id, brand, exp_month, exp_year, funding, last4 }) => (
-                <Tr key={`pmt-method-${id}`} className="h-10">
-                  <Td>{brand.charAt(0).toUpperCase() + brand.slice(1)}</Td>
-                  <Td>{funding.charAt(0).toUpperCase() + funding.slice(1)}</Td>
-                  <Td>{last4}</Td>
-                  <Td>{`${exp_month}/${exp_year}`}</Td>
-                  <Td>
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Delete}
-                      a={OrgPermissionSubjects.Billing}
-                    >
-                      {(isAllowed) => (
-                        <IconButton
-                          onClick={() => handlePopUpOpen("removeCard", { id, last4 })}
-                          size="lg"
-                          isDisabled={!isAllowed}
-                          colorSchema="danger"
-                          variant="plain"
-                          ariaLabel="update"
-                        >
-                          <FontAwesomeIcon icon={faXmark} />
-                        </IconButton>
-                      )}
-                    </OrgPermissionCan>
-                  </Td>
-                </Tr>
-              ))}
-            {isLoading && <TableSkeleton columns={5} innerKey="pmt-methods" />}
-            {!isLoading && data && data?.length === 0 && (
-              <Tr>
-                <Td colSpan={5}>
-                  <EmptyState title="No payment methods on file" icon={faCreditCard} />
+    <TableContainer className="mt-4">
+      <Table>
+        <THead>
+          <Tr>
+            <Th className="flex-1">Brand</Th>
+            <Th className="flex-1">Type</Th>
+            <Th className="flex-1">Last 4 Digits</Th>
+            <Th className="flex-1">Expiration</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {!isLoading &&
+            data &&
+            data?.length > 0 &&
+            data.map(({ id, brand, exp_month, exp_year, funding, last4 }) => (
+              <Tr key={`pmt-method-${id}`} className="h-10">
+                <Td>{brand.charAt(0).toUpperCase() + brand.slice(1)}</Td>
+                <Td>{funding.charAt(0).toUpperCase() + funding.slice(1)}</Td>
+                <Td>{last4}</Td>
+                <Td>{`${exp_month}/${exp_year}`}</Td>
+                <Td>
+                  <OrgPermissionCan
+                    I={OrgPermissionActions.Delete}
+                    a={OrgPermissionSubjects.Billing}
+                  >
+                    {(isAllowed) => (
+                      <IconButton
+                        onClick={async () => {
+                          await handleDeletePmtMethodBtnClick(id);
+                        }}
+                        size="lg"
+                        isDisabled={!isAllowed}
+                        colorSchema="danger"
+                        variant="plain"
+                        ariaLabel="update"
+                      >
+                        <FontAwesomeIcon icon={faXmark} />
+                      </IconButton>
+                    )}
+                  </OrgPermissionCan>
                 </Td>
               </Tr>
-            )}
-          </TBody>
-        </Table>
-      </TableContainer>
-      <DeleteActionModal
-        isOpen={popUp.removeCard.isOpen}
-        deleteKey="confirm"
-        onChange={(isOpen) => handlePopUpToggle("removeCard", isOpen)}
-        title={`Remove payment method ending in *${pmtMethodToRemove?.last4}?`}
-        onDeleteApproved={handleDeletePmtMethodBtnClick}
-      />
-    </>
+            ))}
+          {isLoading && <TableSkeleton columns={5} innerKey="pmt-methods" />}
+          {!isLoading && data && data?.length === 0 && (
+            <Tr>
+              <Td colSpan={5}>
+                <EmptyState title="No payment methods on file" icon={faCreditCard} />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
   );
 };