Merge pull request #3633 from Infisical/ENG-2807

feat(secret-sync): Move OCI Vault Sync + OCI App Connection to enterprise

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

@@ -2,16 +2,23 @@ import { faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { 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 { SecretSync, useSecretSyncOptions } from "@app/hooks/api/secretSyncs";
 
+import { UpgradePlanModal } from "../license/UpgradePlanModal";
+
 type Props = {
   onSelect: (destination: SecretSync) => void;
 };
 
 export const SecretSyncSelect = ({ onSelect }: Props) => {
+  const { subscription } = useSubscription();
   const { isPending, data: secretSyncOptions } = useSecretSyncOptions();
 
+  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">
@@ -23,14 +30,17 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
 
   return (
     <div className="grid grid-cols-4 gap-2">
-      {secretSyncOptions?.map(({ destination }) => {
+      {secretSyncOptions?.map(({ destination, enterprise }) => {
         const { image, name } = SECRET_SYNC_MAP[destination];
         return (
           <button
             type="button"
-            key={destination}
-            onClick={() => onSelect(destination)}
-            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"
+            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}`}
@@ -45,6 +55,11 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
           </button>
         );
       })}
+      <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"

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/secretSyncs/types/index.ts

@@ -21,6 +21,7 @@ export type TSecretSyncOption = {
   name: string;
   destination: SecretSync;
   canImportSecrets: boolean;
+  enterprise?: boolean;
 };
 
 export type TSecretSync =

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

@@ -50,4 +50,6 @@ export type SubscriptionPlan = {
   enforceMfa: boolean;
   projectTemplates: boolean;
   kmip: boolean;
+  enterpriseSecretSyncs: boolean;
+  enterpriseAppConnections: boolean;
 };

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

@@ -1,8 +1,11 @@
 import { faWrench } 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 { 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 +14,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,13 +31,16 @@ 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)}
+            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"
           >
             <img
@@ -48,6 +57,11 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
           </button>
         );
       })}
+      <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"