Merge

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"

frontend/src/pages/organization/SsoPage/components/OrgSsoTab/OrgGeneralAuthSection.tsx

@@ -129,7 +129,16 @@ export const OrgGeneralAuthSection = () => {
                       level.
                     </span>
                     <p className="mt-4">
-                      In case of a lockout, admins can use the admin login portal at{" "}
+                      In case of a lockout, admins can use the{" "}
+                      <a
+                        target="_blank"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href="https://infisical.com/docs/documentation/platform/sso/overview#admin-login-portal"
+                        rel="noreferrer"
+                      >
+                        Admin Login Portal
+                      </a>{" "}
+                      at{" "}
                       <a
                         target="_blank"
                         rel="noopener noreferrer"

frontend/src/pages/organization/SsoPage/components/OrgSsoTab/OrgOIDCSection.tsx

@@ -212,7 +212,16 @@ export const OrgOIDCSection = (): JSX.Element => {
                       level.
                     </span>
                     <p className="mt-4">
-                      In case of a lockout, admins can use the admin login portal at{" "}
+                      In case of a lockout, admins can use the{" "}
+                      <a
+                        target="_blank"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href="https://infisical.com/docs/documentation/platform/sso/overview#admin-login-portal"
+                        rel="noreferrer"
+                      >
+                        Admin Login Portal
+                      </a>{" "}
+                      at{" "}
                       <a
                         target="_blank"
                         rel="noopener noreferrer"