Merge pull request #4110 from Infisical/secret-scanning-config-access-banner

improvement(frontend): show upgrade modal and access banner for secret scanning config page when feature is disabled

frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx

@@ -1,7 +1,7 @@
 import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Spinner } from "@app/components/v2";
+import { ContentLoader } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useListSecretScanningFindings } from "@app/hooks/api/secretScanningV2";
 
@@ -17,12 +17,7 @@ export const SecretScanningFindingsSection = () => {
     }
   );
 
-  if (isFindingsPending)
-    return (
-      <div className="flex h-[60vh] flex-col items-center justify-center gap-2">
-        <Spinner />
-      </div>
-    );
+  if (isFindingsPending) return <ContentLoader />;
 
   return (
     <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">

frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx

@@ -1,16 +1,54 @@
+import { useEffect } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { faLock } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSub, useSubscription } from "@app/context";
 import { ProjectPermissionSecretScanningConfigActions } from "@app/context/ProjectPermissionContext/types";
+import { usePopUp } from "@app/hooks";
 
 import { ProjectScanningConfigTab } from "./components/ProjectScanningConfigTab";
 
 export const SettingsPage = () => {
   const { t } = useTranslation();
 
+  const { subscription } = useSubscription();
+
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
+
+  useEffect(() => {
+    if (!subscription.secretScanning) {
+      handlePopUpOpen("upgradePlan");
+    }
+  }, [subscription.secretScanning]);
+
+  if (!subscription.secretScanning) {
+    return (
+      <>
+        <div className="container mx-auto flex h-full items-center justify-center">
+          <div className="flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300">
+            <div>
+              <FontAwesomeIcon icon={faLock} size="6x" />
+            </div>
+            <div>
+              <div className="mb-2 text-4xl font-medium">Access Restricted</div>
+              <div className="text-sm">Upgrade your plan to access Secret Scanning</div>
+            </div>
+          </div>
+        </div>
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text="Secret Scanning is not available on your current plan."
+        />
+      </>
+    );
+  }
+
   return (
     <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
       <Helmet>