diff --git a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx index 9aaf719b9..82ea049f9 100644 --- a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx +++ b/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 ( -
- -
- ); + if (isFindingsPending) return ; return (
diff --git a/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx b/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx index ba061dd15..333479984 100644 --- a/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx +++ b/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 ( + <> +
+
+
+ +
+
+
Access Restricted
+
Upgrade your plan to access Secret Scanning
+
+
+
+ handlePopUpToggle("upgradePlan", isOpen)} + text="Secret Scanning is not available on your current plan." + /> + + ); + } + return (