fix: remove manual css overrides of checkbox checked state

Clarify relationship between path and key schema for AWS parameter store

backend/src/ee/services/secret-scanning/secret-scanning-queue/secret-scanning-queue.ts

@@ -1,17 +1,11 @@
-import { ProbotOctokit } from "probot";
-
-import { OrgMembershipRole, TableName } from "@app/db/schemas";
-import { getConfig } from "@app/lib/config/env";
-import { logger } from "@app/lib/logger";
-import { QueueJobs, QueueName, TQueueServiceFactory } from "@app/queue";
+import { InternalServerError } from "@app/lib/errors";
+import { TQueueServiceFactory } from "@app/queue";
 import { TOrgDALFactory } from "@app/services/org/org-dal";
-import { SmtpTemplates, TSmtpService } from "@app/services/smtp/smtp-service";
+import { TSmtpService } from "@app/services/smtp/smtp-service";
 import { TTelemetryServiceFactory } from "@app/services/telemetry/telemetry-service";
-import { PostHogEventTypes } from "@app/services/telemetry/telemetry-types";
 
 import { TSecretScanningDALFactory } from "../secret-scanning-dal";
-import { scanContentAndGetFindings, scanFullRepoContentAndGetFindings } from "./secret-scanning-fns";
-import { SecretMatch, TScanFullRepoEventPayload, TScanPushEventPayload } from "./secret-scanning-queue-types";
+import { TScanFullRepoEventPayload, TScanPushEventPayload } from "./secret-scanning-queue-types";
 
 type TSecretScanningQueueFactoryDep = {
   queueService: TQueueServiceFactory;
@@ -23,227 +17,21 @@ type TSecretScanningQueueFactoryDep = {
 
 export type TSecretScanningQueueFactory = ReturnType<typeof secretScanningQueueFactory>;
 
-export const secretScanningQueueFactory = ({
-  queueService,
-  secretScanningDAL,
-  smtpService,
-  telemetryService,
-  orgMembershipDAL: orgMemberDAL
-}: TSecretScanningQueueFactoryDep) => {
-  const startFullRepoScan = async (payload: TScanFullRepoEventPayload) => {
-    await queueService.queue(QueueName.SecretFullRepoScan, QueueJobs.SecretScan, payload, {
-      attempts: 3,
-      backoff: {
-        type: "exponential",
-        delay: 5000
-      },
-      removeOnComplete: true,
-      removeOnFail: {
-        count: 20 // keep the most recent 20 jobs
-      }
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const secretScanningQueueFactory = (_props: TSecretScanningQueueFactoryDep) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const startFullRepoScan = async (_payload: TScanFullRepoEventPayload) => {
+    throw new InternalServerError({
+      message: "Secret Scanning V1 has been deprecated. Please migrate to Secret Scanning V2"
     });
   };
 
-  const startPushEventScan = async (payload: TScanPushEventPayload) => {
-    await queueService.queue(QueueName.SecretPushEventScan, QueueJobs.SecretScan, payload, {
-      attempts: 3,
-      backoff: {
-        type: "exponential",
-        delay: 5000
-      },
-      removeOnComplete: true,
-      removeOnFail: {
-        count: 20 // keep the most recent 20 jobs
-      }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const startPushEventScan = async (_payload: TScanPushEventPayload) => {
+    throw new InternalServerError({
+      message: "Secret Scanning V1 has been deprecated. Please migrate to Secret Scanning V2"
     });
   };
 
-  const getOrgAdminEmails = async (organizationId: string) => {
-    // get emails of admins
-    const adminsOfWork = await orgMemberDAL.findMembership({
-      [`${TableName.Organization}.id` as string]: organizationId,
-      role: OrgMembershipRole.Admin
-    });
-    return adminsOfWork.filter((userObject) => userObject.email).map((userObject) => userObject.email as string);
-  };
-
-  queueService.start(QueueName.SecretPushEventScan, async (job) => {
-    const appCfg = getConfig();
-    const { organizationId, commits, pusher, repository, installationId } = job.data;
-    const [owner, repo] = repository.fullName.split("/");
-    const octokit = new ProbotOctokit({
-      auth: {
-        appId: appCfg.SECRET_SCANNING_GIT_APP_ID,
-        privateKey: appCfg.SECRET_SCANNING_PRIVATE_KEY,
-        installationId
-      }
-    });
-    const allFindingsByFingerprint: { [key: string]: SecretMatch } = {};
-
-    for (const commit of commits) {
-      for (const filepath of [...commit.added, ...commit.modified]) {
-        // eslint-disable-next-line
-        const fileContentsResponse = await octokit.repos.getContent({
-          owner,
-          repo,
-          path: filepath
-        });
-
-        const { data } = fileContentsResponse;
-        const fileContent = Buffer.from((data as { content: string }).content, "base64").toString();
-
-        // eslint-disable-next-line
-        const findings = await scanContentAndGetFindings(`\n${fileContent}`); // extra line to count lines correctly
-
-        for (const finding of findings) {
-          const fingerPrintWithCommitId = `${commit.id}:${filepath}:${finding.RuleID}:${finding.StartLine}`;
-          const fingerPrintWithoutCommitId = `${filepath}:${finding.RuleID}:${finding.StartLine}`;
-          finding.Fingerprint = fingerPrintWithCommitId;
-          finding.FingerPrintWithoutCommitId = fingerPrintWithoutCommitId;
-          finding.Commit = commit.id;
-          finding.File = filepath;
-          finding.Author = commit.author.name;
-          finding.Email = commit?.author?.email ? commit?.author?.email : "";
-
-          allFindingsByFingerprint[fingerPrintWithCommitId] = finding;
-        }
-      }
-    }
-    await secretScanningDAL.transaction(async (tx) => {
-      if (!Object.keys(allFindingsByFingerprint).length) return;
-      await secretScanningDAL.upsert(
-        Object.keys(allFindingsByFingerprint).map((key) => ({
-          installationId,
-          email: allFindingsByFingerprint[key].Email,
-          author: allFindingsByFingerprint[key].Author,
-          date: allFindingsByFingerprint[key].Date,
-          file: allFindingsByFingerprint[key].File,
-          tags: allFindingsByFingerprint[key].Tags,
-          commit: allFindingsByFingerprint[key].Commit,
-          ruleID: allFindingsByFingerprint[key].RuleID,
-          endLine: String(allFindingsByFingerprint[key].EndLine),
-          entropy: String(allFindingsByFingerprint[key].Entropy),
-          message: allFindingsByFingerprint[key].Message,
-          endColumn: String(allFindingsByFingerprint[key].EndColumn),
-          startLine: String(allFindingsByFingerprint[key].StartLine),
-          startColumn: String(allFindingsByFingerprint[key].StartColumn),
-          fingerPrintWithoutCommitId: allFindingsByFingerprint[key].FingerPrintWithoutCommitId,
-          description: allFindingsByFingerprint[key].Description,
-          symlinkFile: allFindingsByFingerprint[key].SymlinkFile,
-          orgId: organizationId,
-          pusherEmail: pusher.email,
-          pusherName: pusher.name,
-          repositoryFullName: repository.fullName,
-          repositoryId: String(repository.id),
-          fingerprint: allFindingsByFingerprint[key].Fingerprint
-        })),
-        tx
-      );
-    });
-
-    const adminEmails = await getOrgAdminEmails(organizationId);
-    if (pusher?.email) {
-      adminEmails.push(pusher.email);
-    }
-    if (Object.keys(allFindingsByFingerprint).length) {
-      await smtpService.sendMail({
-        template: SmtpTemplates.SecretLeakIncident,
-        subjectLine: `Incident alert: leaked secrets found in Github repository ${repository.fullName}`,
-        recipients: adminEmails.filter((email) => email).map((email) => email),
-        substitutions: {
-          numberOfSecrets: Object.keys(allFindingsByFingerprint).length,
-          pusher_email: pusher.email,
-          pusher_name: pusher.name
-        }
-      });
-    }
-
-    await telemetryService.sendPostHogEvents({
-      event: PostHogEventTypes.SecretScannerPush,
-      distinctId: repository.fullName,
-      properties: {
-        numberOfRisks: Object.keys(allFindingsByFingerprint).length
-      }
-    });
-  });
-
-  queueService.start(QueueName.SecretFullRepoScan, async (job) => {
-    const appCfg = getConfig();
-    const { organizationId, repository, installationId } = job.data;
-    const octokit = new ProbotOctokit({
-      auth: {
-        appId: appCfg.SECRET_SCANNING_GIT_APP_ID,
-        privateKey: appCfg.SECRET_SCANNING_PRIVATE_KEY,
-        installationId
-      }
-    });
-
-    const findings = await scanFullRepoContentAndGetFindings(
-      // this is because of collision of octokit in probot and github
-      // eslint-disable-next-line
-      octokit as any,
-      installationId,
-      repository.fullName
-    );
-    await secretScanningDAL.transaction(async (tx) => {
-      if (!findings.length) return;
-      // eslint-disable-next-line
-      await secretScanningDAL.upsert(
-        findings.map((finding) => ({
-          installationId,
-          email: finding.Email,
-          author: finding.Author,
-          date: finding.Date,
-          file: finding.File,
-          tags: finding.Tags,
-          commit: finding.Commit,
-          ruleID: finding.RuleID,
-          endLine: String(finding.EndLine),
-          entropy: String(finding.Entropy),
-          message: finding.Message,
-          endColumn: String(finding.EndColumn),
-          startLine: String(finding.StartLine),
-          startColumn: String(finding.StartColumn),
-          fingerPrintWithoutCommitId: finding.FingerPrintWithoutCommitId,
-          description: finding.Description,
-          symlinkFile: finding.SymlinkFile,
-          orgId: organizationId,
-          repositoryFullName: repository.fullName,
-          repositoryId: String(repository.id),
-          fingerprint: finding.Fingerprint
-        })),
-        tx
-      );
-    });
-
-    const adminEmails = await getOrgAdminEmails(organizationId);
-    if (findings.length) {
-      await smtpService.sendMail({
-        template: SmtpTemplates.SecretLeakIncident,
-        subjectLine: `Incident alert: leaked secrets found in Github repository ${repository.fullName}`,
-        recipients: adminEmails.filter((email) => email).map((email) => email),
-        substitutions: {
-          numberOfSecrets: findings.length
-        }
-      });
-    }
-
-    await telemetryService.sendPostHogEvents({
-      event: PostHogEventTypes.SecretScannerFull,
-      distinctId: repository.fullName,
-      properties: {
-        numberOfRisks: findings.length
-      }
-    });
-  });
-
-  queueService.listen(QueueName.SecretPushEventScan, "failed", (job, err) => {
-    logger.error(err, "Failed to secret scan on push", job?.data);
-  });
-
-  queueService.listen(QueueName.SecretFullRepoScan, "failed", (job, err) => {
-    logger.error(err, "Failed to do full repo secret scan", job?.data);
-  });
-
   return { startFullRepoScan, startPushEventScan };
 };

backend/src/ee/services/secret-scanning/secret-scanning-service.ts

@@ -98,6 +98,7 @@ export const secretScanningServiceFactory = ({
     if (canUseSecretScanning(actorOrgId)) {
       await Promise.all(
         repositories.map(({ id, full_name }) =>
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-member-access
           secretScanningQueue.startFullRepoScan({
             organizationId: session.orgId,
             installationId,
@@ -180,6 +181,7 @@ export const secretScanningServiceFactory = ({
     if (!installationLink) return;
 
     if (canUseSecretScanning(installationLink.orgId)) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-member-access
       await secretScanningQueue.startPushEventScan({
         commits,
         pusher: { name: pusher.name, email: pusher.email },

backend/src/server/routes/index.ts

@@ -297,7 +297,6 @@ import { injectAssumePrivilege } from "../plugins/auth/inject-assume-privilege";
 import { injectIdentity } from "../plugins/auth/inject-identity";
 import { injectPermission } from "../plugins/auth/inject-permission";
 import { injectRateLimits } from "../plugins/inject-rate-limits";
-import { registerSecretScannerGhApp } from "../plugins/secret-scanner";
 import { registerV1Routes } from "./v1";
 import { registerV2Routes } from "./v2";
 import { registerV3Routes } from "./v3";
@@ -326,7 +325,6 @@ export const registerRoutes = async (
   }
 ) => {
   const appCfg = getConfig();
-  await server.register(registerSecretScannerGhApp, { prefix: "/ss-webhook" });
   await server.register(registerSecretScanningV2Webhooks, {
     prefix: "/secret-scanning/webhooks"
   });

backend/src/server/routes/v1/secret-sync-routers/cloudflare-pages-sync-router.ts

@@ -1,10 +1,11 @@
-import { SecretSync } from "@app/services/secret-sync/secret-sync-enums";
-import { registerSyncSecretsEndpoints } from "./secret-sync-endpoints";
 import {
   CloudflarePagesSyncSchema,
   CreateCloudflarePagesSyncSchema,
   UpdateCloudflarePagesSyncSchema
 } from "@app/services/secret-sync/cloudflare-pages/cloudflare-pages-schema";
+import { SecretSync } from "@app/services/secret-sync/secret-sync-enums";
+
+import { registerSyncSecretsEndpoints } from "./secret-sync-endpoints";
 
 export const registerCloudflarePagesSyncRouter = async (server: FastifyZodProvider) =>
   registerSyncSecretsEndpoints({

backend/src/services/app-connection/cloudflare/cloudflare-connection-schema.ts

@@ -1,6 +1,7 @@
 import z from "zod";
 
 import { AppConnections } from "@app/lib/api-docs";
+import { CharacterType, characterValidator } from "@app/lib/validator/validate-string";
 import { AppConnection } from "@app/services/app-connection/app-connection-enums";
 import {
   BaseAppConnectionSchema,
@@ -9,7 +10,6 @@ import {
 } from "@app/services/app-connection/app-connection-schemas";
 
 import { CloudflareConnectionMethod } from "./cloudflare-connection-enum";
-import { CharacterType, characterValidator } from "@app/lib/validator/validate-string";
 
 const accountIdCharacterValidator = characterValidator([
   CharacterType.AlphaNumeric,

frontend/src/components/secret-syncs/CreateSecretSyncModal.tsx

@@ -58,6 +58,7 @@ export const CreateSecretSyncModal = ({ onOpenChange, selectSync = null, ...prop
         }
         onPointerDownOutside={(e) => e.preventDefault()}
         className="max-w-2xl"
+        bodyClassName="overflow-visible"
         subTitle={selectedSync ? undefined : "Select a third-party service to sync secrets to."}
       >
         <Content

frontend/src/components/secret-syncs/SecretSyncSelect.tsx

@@ -1,10 +1,11 @@
-import { faWrench } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import { faInfoCircle, faMagnifyingGlass, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Spinner, Tooltip } from "@app/components/v2";
+import { EmptyState, Input, Pagination, Spinner, Tooltip } from "@app/components/v2";
 import { useSubscription } from "@app/context";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
-import { usePopUp } from "@app/hooks";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { SecretSync, useSecretSyncOptions } from "@app/hooks/api/secretSyncs";
 
 import { UpgradePlanModal } from "../license/UpgradePlanModal";
@@ -19,6 +20,26 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
 
+  const { search, setSearch, setPage, page, perPage, setPerPage, offset } = usePagination("", {
+    initPerPage: 16
+  });
+
+  const filteredOptions = useMemo(
+    () =>
+      secretSyncOptions?.filter(
+        ({ name, destination }) =>
+          name?.toLowerCase().includes(search.trim().toLowerCase()) ||
+          destination.toLowerCase().includes(search.toLowerCase())
+      ) ?? [],
+    [secretSyncOptions, search]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredOptions.length,
+    offset,
+    setPage
+  });
+
   if (isPending) {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
@@ -29,75 +50,103 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
   }
 
   return (
-    <div className="grid grid-cols-4 gap-2">
-      {secretSyncOptions?.map(({ destination, enterprise }) => {
-        const { image, name } = SECRET_SYNC_MAP[destination];
-        return (
-          <button
-            type="button"
-            onClick={() =>
-              enterprise && !subscription.enterpriseSecretSyncs
-                ? handlePopUpOpen("upgradePlan")
-                : onSelect(destination)
-            }
-            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
-          >
-            <img
-              src={`/images/integrations/${image}`}
-              height={40}
-              width={40}
-              className="mt-auto"
-              alt={`${name} logo`}
-            />
-            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-              {name}
-            </div>
-          </button>
-        );
-      })}
+    <div className="flex flex-col gap-4">
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search options..."
+        className="bg-mineshaft-800 placeholder:text-mineshaft-400"
+      />
+      <div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
+        {filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
+          const { image, name } = SECRET_SYNC_MAP[destination];
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                enterprise && !subscription.enterpriseSecretSyncs
+                  ? handlePopUpOpen("upgradePlan")
+                  : onSelect(destination)
+              }
+              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+            >
+              <img
+                src={`/images/integrations/${image}`}
+                height={40}
+                width={40}
+                className="mt-auto"
+                alt={`${name} logo`}
+              />
+              <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+                {name}
+              </div>
+            </button>
+          );
+        })}
+        {!filteredOptions?.length && (
+          <EmptyState
+            className="col-span-full mt-40"
+            title="No Secret Syncs match search"
+            icon={faSearch}
+          />
+        )}
+      </div>
+      {Boolean(filteredOptions.length) && (
+        <Pagination
+          startAdornment={
+            <Tooltip
+              side="bottom"
+              className="max-w-sm py-4"
+              content={
+                <>
+                  <p className="mb-2">Infisical is constantly adding support for more services.</p>
+                  <p>
+                    {`If you don't see the third-party
+            service you're looking for,`}{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://infisical.com/slack"
+                      rel="noopener noreferrer"
+                    >
+                      let us know on Slack
+                    </a>{" "}
+                    or{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://github.com/Infisical/infisical/discussions"
+                      rel="noopener noreferrer"
+                    >
+                      make a request on GitHub
+                    </a>
+                    .
+                  </p>
+                </>
+              }
+            >
+              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
+                <span className="text-xs">
+                  Don&#39;t see the third-party service you&#39;re looking for?
+                </span>
+                <FontAwesomeIcon size="xs" icon={faInfoCircle} />
+              </div>
+            </Tooltip>
+          }
+          count={filteredOptions.length}
+          page={page}
+          perPage={perPage}
+          onChangePage={setPage}
+          onChangePerPage={setPerPage}
+          perPageList={[16]}
+        />
+      )}
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use every Secret Sync if you switch to Infisical's Enterprise plan."
       />
-      <Tooltip
-        side="bottom"
-        className="max-w-sm py-4"
-        content={
-          <>
-            <p className="mb-2">Infisical is constantly adding support for more services.</p>
-            <p>
-              {`If you don't see the third-party
-            service you're looking for,`}{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://infisical.com/slack"
-                rel="noopener noreferrer"
-              >
-                let us know on Slack
-              </a>{" "}
-              or{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://github.com/Infisical/infisical/discussions"
-                rel="noopener noreferrer"
-              >
-                make a request on GitHub
-              </a>
-              .
-            </p>
-          </>
-        }
-      >
-        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4 hover:bg-mineshaft-900/50">
-          <FontAwesomeIcon className="mt-auto text-3xl" icon={faWrench} />
-          <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-            Coming Soon
-          </div>
-        </div>
-      </Tooltip>
     </div>
   );
 };

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

@@ -163,7 +163,7 @@ const PasswordGeneratorModal = ({
           <div className="mb-6 flex flex-row justify-between gap-2">
             <Checkbox
               id="useUppercase"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useUppercase}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useUppercase: checked as boolean })
@@ -174,7 +174,7 @@ const PasswordGeneratorModal = ({
 
             <Checkbox
               id="useLowercase"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useLowercase}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useLowercase: checked as boolean })
@@ -185,7 +185,7 @@ const PasswordGeneratorModal = ({
 
             <Checkbox
               id="useNumbers"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useNumbers}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useNumbers: checked as boolean })
@@ -196,7 +196,7 @@ const PasswordGeneratorModal = ({
 
             <Checkbox
               id="useSpecialChars"
-              className="mr-2 data-[state=checked]:bg-primary"
+              className="mr-2"
               isChecked={passwordOptions.useSpecialChars}
               onCheckedChange={(checked) =>
                 setPasswordOptions({ ...passwordOptions, useSpecialChars: checked as boolean })

frontend/src/pages/cert-manager/CertificatesPage/components/CertificateModal.tsx

@@ -446,7 +446,6 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
                                 <Checkbox
                                   id={optionValue}
                                   key={optionValue}
-                                  className="data-[state=checked]:bg-primary"
                                   isDisabled={Boolean(cert)}
                                   isChecked={value[optionValue]}
                                   onCheckedChange={(state) => {
@@ -481,7 +480,6 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
                                 <Checkbox
                                   id={optionValue}
                                   key={optionValue}
-                                  className="data-[state=checked]:bg-primary"
                                   isDisabled={Boolean(cert)}
                                   isChecked={value[optionValue]}
                                   onCheckedChange={(state) => {

frontend/src/pages/cert-manager/CertificatesPage/components/CertificateTemplateModal.tsx

@@ -405,7 +405,6 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
                               <Checkbox
                                 id={optionValue}
                                 key={optionValue}
-                                className="data-[state=checked]:bg-primary"
                                 isChecked={value[optionValue]}
                                 onCheckedChange={(state) => {
                                   onChange({
@@ -439,7 +438,6 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
                               <Checkbox
                                 id={optionValue}
                                 key={optionValue}
-                                className="data-[state=checked]:bg-primary"
                                 isChecked={value[optionValue]}
                                 onCheckedChange={(state) => {
                                   onChange({

frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscriberModal.tsx

@@ -408,7 +408,6 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
                                     <Checkbox
                                       id={optionValue}
                                       key={optionValue}
-                                      className="data-[state=checked]:bg-primary"
                                       isChecked={value[optionValue]}
                                       onCheckedChange={(state) => {
                                         onChange({
@@ -443,7 +442,6 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
                                       <Checkbox
                                         id={optionValue}
                                         key={optionValue}
-                                        className="data-[state=checked]:bg-primary"
                                         isChecked={value[optionValue]}
                                         onCheckedChange={(state) => {
                                           onChange({
@@ -477,12 +475,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
                     errorText={error?.message}
                     tooltipText="If enabled, a new certificate will be issued automatically X days before the current certificate expires."
                   >
-                    <Checkbox
-                      id="enableAutoRenewal"
-                      isChecked={value}
-                      onCheckedChange={onChange}
-                      className="data-[state=checked]:bg-primary"
-                    >
+                    <Checkbox id="enableAutoRenewal" isChecked={value} onCheckedChange={onChange}>
                       Enable Certificate Auto Renewal
                     </Checkbox>
                   </FormControl>

frontend/src/pages/cert-manager/PkiTemplateListPage/components/PkiTemplateForm.tsx

@@ -333,7 +333,6 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
                           <Checkbox
                             id={optionValue}
                             key={optionValue}
-                            className="data-[state=checked]:bg-primary"
                             isChecked={value[optionValue]}
                             onCheckedChange={(state) => {
                               onChange({
@@ -367,7 +366,6 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
                           <Checkbox
                             id={optionValue}
                             key={optionValue}
-                            className="data-[state=checked]:bg-primary"
                             isChecked={value[optionValue]}
                             onCheckedChange={(state) => {
                               onChange({

frontend/src/pages/kms/KmipPage/components/KmipClientModal.tsx

@@ -145,7 +145,6 @@ const KmipClientForm = ({ onComplete, kmipClient }: FormProps) => {
                     <Checkbox
                       id={optionValue}
                       key={optionValue}
-                      className="data-[state=checked]:bg-primary"
                       isChecked={value[optionValue]}
                       onCheckedChange={(state) => {
                         onChange({

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx

@@ -1,11 +1,12 @@
-import { faWrench } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import { faInfoCircle, faMagnifyingGlass, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { Spinner, Tooltip } from "@app/components/v2";
+import { EmptyState, Input, Pagination, Spinner, Tooltip } from "@app/components/v2";
 import { useSubscription } from "@app/context";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
-import { usePopUp } from "@app/hooks";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useAppConnectionOptions } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 
@@ -19,6 +20,26 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
 
+  const { search, setSearch, setPage, page, perPage, setPerPage, offset } = usePagination("", {
+    initPerPage: 16
+  });
+
+  const filteredOptions = useMemo(
+    () =>
+      appConnectionOptions?.filter(
+        ({ name, app }) =>
+          name?.toLowerCase().includes(search.trim().toLowerCase()) ||
+          app.toLowerCase().includes(search.toLowerCase())
+      ) ?? [],
+    [appConnectionOptions, search]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredOptions.length,
+    offset,
+    setPage
+  });
+
   if (isPending) {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
@@ -29,86 +50,120 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
   }
 
   return (
-    <div className="grid grid-cols-4 gap-2">
-      {appConnectionOptions?.map((option) => {
-        const { image, name, size = 50, enterprise = false, icon } = APP_CONNECTION_MAP[option.app];
+    <div className="flex flex-col gap-4">
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search options..."
+        className="bg-mineshaft-800 placeholder:text-mineshaft-400"
+      />
+      <div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
+        {filteredOptions.slice(offset, perPage * page)?.map((option) => {
+          const {
+            image,
+            name,
+            size = 50,
+            enterprise = false,
+            icon
+          } = APP_CONNECTION_MAP[option.app];
 
-        return (
-          <button
-            type="button"
-            onClick={() =>
-              enterprise && !subscription.enterpriseAppConnections
-                ? handlePopUpOpen("upgradePlan")
-                : onSelect(option.app)
-            }
-            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
-          >
-            <div className="relative">
-              <img
-                src={`/images/integrations/${image}`}
-                style={{
-                  width: `${size}px`
-                }}
-                className="mt-auto"
-                alt={`${name} logo`}
-              />
-              {icon && (
-                <FontAwesomeIcon
-                  className="absolute -bottom-1.5 -right-1.5 text-primary-700"
-                  size="xl"
-                  icon={icon}
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                enterprise && !subscription.enterpriseAppConnections
+                  ? handlePopUpOpen("upgradePlan")
+                  : onSelect(option.app)
+              }
+              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+            >
+              <div className="relative">
+                <img
+                  src={`/images/integrations/${image}`}
+                  style={{
+                    width: `${size}px`
+                  }}
+                  className="mt-auto"
+                  alt={`${name} logo`}
                 />
-              )}
-            </div>
-            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-              {name}
-            </div>
-          </button>
-        );
-      })}
+                {icon && (
+                  <FontAwesomeIcon
+                    className="absolute -bottom-1.5 -right-1.5 text-primary-700"
+                    size="xl"
+                    icon={icon}
+                  />
+                )}
+              </div>
+              <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+                {name}
+              </div>
+            </button>
+          );
+        })}
+        {!filteredOptions?.length && (
+          <EmptyState
+            className="col-span-full mt-40"
+            title="No App Connections match search"
+            icon={faSearch}
+          />
+        )}
+      </div>
+      {Boolean(filteredOptions.length) && (
+        <Pagination
+          startAdornment={
+            <Tooltip
+              side="bottom"
+              className="max-w-sm py-4"
+              content={
+                <>
+                  <p className="mb-2">Infisical is constantly adding support for more services.</p>
+                  <p>
+                    {`If you don't see the third-party
+            service you're looking for,`}{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://infisical.com/slack"
+                      rel="noopener noreferrer"
+                    >
+                      let us know on Slack
+                    </a>{" "}
+                    or{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://github.com/Infisical/infisical/discussions"
+                      rel="noopener noreferrer"
+                    >
+                      make a request on GitHub
+                    </a>
+                    .
+                  </p>
+                </>
+              }
+            >
+              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
+                <span className="text-xs">
+                  Don&#39;t see the third-party service you&#39;re looking for?
+                </span>
+                <FontAwesomeIcon size="xs" icon={faInfoCircle} />
+              </div>
+            </Tooltip>
+          }
+          count={filteredOptions.length}
+          page={page}
+          perPage={perPage}
+          onChangePage={setPage}
+          onChangePerPage={setPerPage}
+          perPageList={[16]}
+        />
+      )}
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use every App Connection if you switch to Infisical's Enterprise plan."
       />
-      <Tooltip
-        side="bottom"
-        className="max-w-sm py-4"
-        content={
-          <>
-            <p className="mb-2">Infisical is constantly adding support for more connections.</p>
-            <p>
-              {`If you don't see the third-party
-            app you're looking for,`}{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://infisical.com/slack"
-                rel="noopener noreferrer"
-              >
-                let us know on Slack
-              </a>{" "}
-              or{" "}
-              <a
-                target="_blank"
-                className="underline hover:text-mineshaft-300"
-                href="https://github.com/Infisical/infisical/discussions"
-                rel="noopener noreferrer"
-              >
-                make a request on GitHub
-              </a>
-              .
-            </p>
-          </>
-        }
-      >
-        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4">
-          <FontAwesomeIcon className="mt-auto text-xl" icon={faWrench} />
-          <div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-            Coming Soon
-          </div>
-        </div>
-      </Tooltip>
     </div>
   );
 };

frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -284,7 +284,6 @@ const ServiceTokenForm = () => {
                     <Checkbox
                       id={String(value[optionValue])}
                       key={optionValue}
-                      className="data-[state=checked]:bg-primary"
                       isChecked={value[optionValue]}
                       isDisabled={optionValue === "read"}
                       onCheckedChange={(state) => {

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/SecretTreeView.tsx

@@ -133,7 +133,6 @@ const Folder: React.FC<FolderProps> = ({
           {!isDisabled && (
             <Checkbox
               id="folder-root"
-              className="data-[state=indeterminate]:bg-secondary data-[state=checked]:bg-primary"
               isChecked={allSelected || someSelected}
               onCheckedChange={handleFolderSelect}
               isIndeterminate={someSelected && !allSelected}
@@ -167,7 +166,6 @@ const Folder: React.FC<FolderProps> = ({
                 {!isDisabled && (
                   <Checkbox
                     id={`folder-${item.id}`}
-                    className="data-[state=indeterminate]:bg-secondary data-[state=checked]:bg-primary"
                     isChecked={selectedItemIds.includes(item.id)}
                     onCheckedChange={(checked) => onItemSelect(item, !!checked)}
                     isDisabled={isDisabled}

frontend/src/pages/secret-manager/SettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx

@@ -42,7 +42,6 @@ export const AutoCapitalizationSection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="autoCapitalization"
               isDisabled={!isAllowed}
               isChecked={currentWorkspace?.autoCapitalization ?? false}

frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx

@@ -38,7 +38,6 @@ export const DeleteProjectProtection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="hasDeleteProtection"
               isDisabled={!isAllowed}
               isChecked={currentWorkspace?.hasDeleteProtection ?? false}

frontend/src/pages/secret-manager/SettingsPage/components/SecretSharingSection/SecretSharingSection.tsx

@@ -48,7 +48,6 @@ export const SecretSharingSection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="secretSharing"
               isDisabled={!isAllowed || isLoading}
               isChecked={currentWorkspace?.secretSharing ?? true}

frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx

@@ -48,7 +48,6 @@ export const SecretSnapshotsLegacySection = () => {
         {(isAllowed) => (
           <div className="w-max">
             <Checkbox
-              className="data-[state=checked]:bg-primary"
               id="showSnapshotsLegacy"
               isDisabled={!isAllowed || isLoading}
               isChecked={currentWorkspace?.showSnapshotsLegacy ?? false}