diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx index 701766a9e..044bb09d9 100644 --- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx +++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx @@ -1,4 +1,5 @@ -import { faArrowRight, faXmark } from "@fortawesome/free-solid-svg-icons"; +import Link from "next/link"; +import { faArrowRight, faExclamationTriangle, faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { integrationSlugNameMapping } from "public/data/frequentConstants"; @@ -14,8 +15,9 @@ import { Skeleton, Tooltip } from "@app/components/v2"; -import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context"; +import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context"; import { usePopUp } from "@app/hooks"; +import { useGetWorkspaceBot } from "@app/hooks/api"; import { TIntegration } from "@app/hooks/api/types"; type Props = { @@ -34,6 +36,9 @@ export const IntegrationsSection = ({ const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([ "deleteConfirmation" ] as const); + + const { currentWorkspace } = useWorkspace(); + const { data: bot } = useGetWorkspaceBot(currentWorkspace?._id ?? ""); return (
@@ -45,7 +50,26 @@ export const IntegrationsSection = ({
)} - {!isLoading && !integrations.length && ( + + {!bot?.isActive && ( +
+ + No active integrations found. Enable End-to-End Encryption in{" "} + + project settings + + .{" "} + + } + /> +
+ )} + + {!isLoading && !integrations.length && bot?.isActive && (
)} - {!isLoading && ( + {!isLoading && bot?.isActive && (
{integrations?.map((integration) => (
)} - {(integration.integration === "checkly") && ( + {integration.integration === "checkly" && (
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx index 11e6128e7..5f691c6e5 100644 --- a/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx +++ b/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx @@ -1,9 +1,12 @@ +import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + import { ProjectPermissionCan } from "@app/components/permissions"; import { decryptAssymmetric, encryptAssymmetric } from "@app/components/utilities/cryptography/crypto"; -import { Checkbox } from "@app/components/v2"; +import { Alert, AlertDescription, AlertTitle, Checkbox } from "@app/components/v2"; import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context"; import { useGetUserWsKey, useGetWorkspaceBot, useUpdateBotActiveStatus } from "@app/hooks/api"; @@ -76,30 +79,41 @@ export const E2EESection = () => { }; return bot ? ( -
+

End-to-End Encryption

-

+

Disabling, end-to-end encryption (E2EE) unlocks capabilities like native integrations to cloud providers as well as HTTP calls to get secrets back raw but enables the server to read/decrypt your secret values.

-

+

Note that, even with E2EE disabled, your secrets are always encrypted at rest.

{(isAllowed) => ( -
- { - await toggleBotActivate(); - }} - > - End-to-end encryption enabled - +
+
+ { + await toggleBotActivate(); + }} + > + End-to-end encryption enabled + +
+
+ + + Warning ! + + Enabling End-to-end encryption disables all the integrations + + +
)}