app connection + finishing touches

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

@@ -1,13 +1,14 @@
 import { faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { Spinner, Tooltip } from "@app/components/v2";
-import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
-import { SecretSync, useSecretSyncOptions } from "@app/hooks/api/secretSyncs";
-import { twMerge } from "tailwind-merge";
-import { UpgradePlanModal } from "../license/UpgradePlanModal";
-import { usePopUp } from "@app/hooks";
 import { useSubscription } from "@app/context";
+import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
+import { usePopUp } from "@app/hooks";
+import { SecretSync, useSecretSyncOptions } from "@app/hooks/api/secretSyncs";
+
+import { UpgradePlanModal } from "../license/UpgradePlanModal";
 
 type Props = {
   onSelect: (destination: SecretSync) => void;
@@ -52,7 +53,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
               )}
             >
               {enterprise && !subscription.enterpriseSecretSyncs && (
-                <div className="absolute h-full w-full backdrop-blur-[1px]"></div>
+                <div className="absolute h-full w-full backdrop-blur-[1px]" />
               )}
               <img
                 src={`/images/integrations/${image}`}

frontend/src/helpers/appConnections.ts

@@ -34,7 +34,7 @@ import { OCIConnectionMethod } from "@app/hooks/api/appConnections/types/oci-con
 
 export const APP_CONNECTION_MAP: Record<
   AppConnection,
-  { name: string; image: string; size?: number }
+  { name: string; image: string; size?: number; enterprise?: boolean }
 > = {
   [AppConnection.AWS]: { name: "AWS", image: "Amazon Web Services.png" },
   [AppConnection.GitHub]: { name: "GitHub", image: "GitHub.png" },
@@ -63,7 +63,7 @@ export const APP_CONNECTION_MAP: Record<
   [AppConnection.HCVault]: { name: "Hashicorp Vault", image: "Vault.png", size: 65 },
   [AppConnection.LDAP]: { name: "LDAP", image: "LDAP.png", size: 65 },
   [AppConnection.TeamCity]: { name: "TeamCity", image: "TeamCity.png" },
-  [AppConnection.OCI]: { name: "OCI", image: "Oracle.png" }
+  [AppConnection.OCI]: { name: "OCI", image: "Oracle.png", enterprise: true }
 };
 
 export const getAppConnectionMethodDetails = (method: TAppConnection["method"]) => {

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

@@ -51,4 +51,5 @@ export type SubscriptionPlan = {
   projectTemplates: boolean;
   kmip: boolean;
   enterpriseSecretSyncs: boolean;
+  enterpriseAppConnections: boolean;
 };

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

@@ -1,8 +1,12 @@
 import { faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { 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 { useAppConnectionOptions } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 
@@ -11,8 +15,11 @@ type Props = {
 };
 
 export const AppConnectionsSelect = ({ onSelect }: Props) => {
+  const { subscription } = useSubscription();
   const { isPending, data: appConnectionOptions } = useAppConnectionOptions();
 
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
+
   if (isPending) {
     return (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
@@ -25,29 +32,52 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
   return (
     <div className="grid grid-cols-4 gap-2">
       {appConnectionOptions?.map((option) => {
-        const { image, name, size = 50 } = APP_CONNECTION_MAP[option.app];
+        const { image, name, size = 50, enterprise = false } = APP_CONNECTION_MAP[option.app];
 
         return (
-          <button
-            type="button"
-            key={option.app}
-            onClick={() => 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"
+          <Tooltip
+            content={
+              enterprise && !subscription.enterpriseAppConnections
+                ? "Enterprise Plan Only"
+                : undefined
+            }
           >
-            <img
-              src={`/images/integrations/${image}`}
-              style={{
-                width: `${size}px`
-              }}
-              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>
+            <button
+              type="button"
+              key={option.app}
+              onClick={() =>
+                enterprise && !subscription.enterpriseAppConnections
+                  ? handlePopUpOpen("upgradePlan")
+                  : onSelect(option.app)
+              }
+              className={twMerge(
+                "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",
+                enterprise && !subscription.enterpriseAppConnections ? "border-0 bg-opacity-0" : ""
+              )}
+            >
+              {enterprise && !subscription.enterpriseAppConnections && (
+                <div className="absolute h-full w-full backdrop-blur-[1px]" />
+              )}
+              <img
+                src={`/images/integrations/${image}`}
+                style={{
+                  width: `${size}px`
+                }}
+                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>
+          </Tooltip>
         );
       })}
+      <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"

frontend/src/pages/organization/SecretSharingSettingsPage/components/OrgSecretShareLimitSection/OrgSecretShareLimitSection.tsx

@@ -1,7 +1,7 @@
+import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import { useEffect } from "react";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";