feat: add warnings

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 (
     <div className="mb-8">
       <div className="mx-4 mb-4 mt-6 flex flex-col items-start justify-between px-2 text-xl">
@@ -45,7 +50,26 @@ export const IntegrationsSection = ({
           <Skeleton className="h-28" />
         </div>
       )}
-      {!isLoading && !integrations.length && (
+
+      {!bot?.isActive && (
+        <div className="px-6 py-4">
+          <EmptyState
+            icon={faExclamationTriangle}
+            className="rounded-md border border-mineshaft-700 pt-8 pb-4"
+            title={
+              <>
+                No active integrations found. Enable End-to-End Encryption in{" "}
+                <Link href={`/project/${currentWorkspace?._id}/settings`} passHref>
+                  <a className="underline underline-offset-2">project settings </a>
+                </Link>
+                .{" "}
+              </>
+            }
+          />
+        </div>
+      )}
+
+      {!isLoading && !integrations.length && bot?.isActive && (
         <div className="mx-6">
           <EmptyState
             className="rounded-md border border-mineshaft-700 pt-8 pb-4"
@@ -53,7 +77,7 @@ export const IntegrationsSection = ({
           />
         </div>
       )}
-      {!isLoading && (
+      {!isLoading && bot?.isActive && (
         <div className="flex flex-col space-y-4 p-6 pt-0">
           {integrations?.map((integration) => (
             <div
@@ -117,7 +141,7 @@ export const IntegrationsSection = ({
                     </div>
                   </div>
                 )}
-                {(integration.integration === "checkly") && (
+                {integration.integration === "checkly" && (
                   <div className="ml-2 flex flex-col">
                     <FormLabel label="Secret Suffix" />
                     <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">

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 ? (
-    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <p className="mb-3 text-xl font-semibold">End-to-End Encryption</p>
-      <p className="text-gray-400 mb-8">
+      <p className="mb-8 text-gray-400">
         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.
       </p>
-      <p className="text-gray-400 mb-8">
+      <p className="mb-8 text-gray-400">
         Note that, even with E2EE disabled, your secrets are always encrypted at rest.
       </p>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
         {(isAllowed) => (
-          <div className="w-max">
-            <Checkbox
-              className="data-[state=checked]:bg-primary"
-              id="autoCapitalization"
-              isChecked={!bot.isActive}
-              isDisabled={!isAllowed}
-              onCheckedChange={async () => {
-                await toggleBotActivate();
-              }}
-            >
-              End-to-end encryption enabled
-            </Checkbox>
+          <div className="flex w-full flex-col gap-y-3">
+            <div className="w-max">
+              <Checkbox
+                className="data-[state=checked]:bg-primary"
+                id="autoCapitalization"
+                isChecked={!bot.isActive}
+                isDisabled={!isAllowed}
+                onCheckedChange={async () => {
+                  await toggleBotActivate();
+                }}
+              >
+                End-to-end encryption enabled
+              </Checkbox>
+            </div>
+            <div>
+              <Alert variant="warning">
+                <FontAwesomeIcon icon={faExclamationTriangle} />
+                <AlertTitle>Warning !</AlertTitle>
+                <AlertDescription>
+                  Enabling End-to-end encryption disables all the integrations
+                </AlertDescription>
+              </Alert>
+            </div>
           </div>
         )}
       </ProjectPermissionCan>