From 257b4b049051ba0e8226635df714bcc829c8b1ea Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Tue, 19 Sep 2023 17:08:54 +0530 Subject: [PATCH 01/10] chore: disable prop-types rule --- frontend/.eslintrc.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 692fecd97..2bb62e579 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -8,7 +8,7 @@ module.exports = { env: { browser: true, es2021: true, - "es6": true + es6: true }, extends: [ "airbnb", @@ -29,6 +29,7 @@ module.exports = { }, plugins: ["react", "prettier", "simple-import-sort", "import"], rules: { + "react/prop-types": "off", quotes: ["error", "double", { avoidEscape: true }], "comma-dangle": ["error", "only-multiline"], "react/react-in-jsx-scope": "off", From 6f57ef03d19e53fdbbaafffe0bfce6f522b04e6b Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Tue, 19 Sep 2023 17:24:33 +0530 Subject: [PATCH 02/10] feat: add alert component --- .../src/components/v2/Alert/Alert.stories.tsx | 54 +++++++++++++++++++ frontend/src/components/v2/Alert/Alert.tsx | 51 ++++++++++++++++++ frontend/src/components/v2/Alert/index.tsx | 1 + frontend/src/components/v2/index.tsx | 1 + 4 files changed, 107 insertions(+) create mode 100644 frontend/src/components/v2/Alert/Alert.stories.tsx create mode 100644 frontend/src/components/v2/Alert/Alert.tsx create mode 100644 frontend/src/components/v2/Alert/index.tsx diff --git a/frontend/src/components/v2/Alert/Alert.stories.tsx b/frontend/src/components/v2/Alert/Alert.stories.tsx new file mode 100644 index 000000000..ef42a9af4 --- /dev/null +++ b/frontend/src/components/v2/Alert/Alert.stories.tsx @@ -0,0 +1,54 @@ +import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import type { Meta, StoryObj } from "@storybook/react"; + +import { Alert, AlertDescription, AlertTitle } from "./Alert"; + +const meta: Meta = { + title: "Components/Alert", + component: Alert, + tags: ["v2"] +}; + +export default meta; + +type Story = StoryObj; + +const ExampleComponent = () => ( + <> + this is a title + this is a description + +); + +export const Default: Story = { + args: { + children: + } +}; + +export const Warning: Story = { + args: { + children: , + variant: "warning" + } +}; + +export const Destructive: Story = { + args: { + children: , + variant: "destructive" + } +}; + +export const WithIcon: Story = { + args: { + children: ( + <> + + + + ), + variant: "warning" + } +}; diff --git a/frontend/src/components/v2/Alert/Alert.tsx b/frontend/src/components/v2/Alert/Alert.tsx new file mode 100644 index 000000000..d28fc059a --- /dev/null +++ b/frontend/src/components/v2/Alert/Alert.tsx @@ -0,0 +1,51 @@ +import * as React from "react"; +import { type VariantProps, cva } from "cva"; + +import { cn } from "@app/helpers/classNames"; + +const alertVariants = cva( + "relative w-full bg-mineshaft-800 rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", + { + variants: { + variant: { + default: "", + destructive: "text-red border-red", + warning: "text-yellow border-yellow" + } + }, + defaultVariants: { + variant: "default" + } + } +); + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)); +Alert.displayName = "Alert"; + +const AlertTitle = React.forwardRef>( + ({ className, children, ...props }, ref) => ( +
+ {children} +
+ ) +); +AlertTitle.displayName = "AlertTitle"; + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +AlertDescription.displayName = "AlertDescription"; + +export { Alert, AlertDescription, AlertTitle }; diff --git a/frontend/src/components/v2/Alert/index.tsx b/frontend/src/components/v2/Alert/index.tsx new file mode 100644 index 000000000..1b2cdda51 --- /dev/null +++ b/frontend/src/components/v2/Alert/index.tsx @@ -0,0 +1 @@ +export { Alert, AlertDescription, AlertTitle } from "./Alert"; diff --git a/frontend/src/components/v2/index.tsx b/frontend/src/components/v2/index.tsx index eb49f0d88..ea4263c90 100644 --- a/frontend/src/components/v2/index.tsx +++ b/frontend/src/components/v2/index.tsx @@ -1,4 +1,5 @@ export * from "./Accordion"; +export * from "./Alert"; export * from "./Button"; export * from "./Card"; export * from "./Checkbox"; From 4a227d05cea83a072ec925dd404854e105383f8d Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Tue, 19 Sep 2023 17:25:03 +0530 Subject: [PATCH 03/10] feat: add className utility --- frontend/src/helpers/classNames.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 frontend/src/helpers/classNames.ts diff --git a/frontend/src/helpers/classNames.ts b/frontend/src/helpers/classNames.ts new file mode 100644 index 000000000..920e506d1 --- /dev/null +++ b/frontend/src/helpers/classNames.ts @@ -0,0 +1,7 @@ +import type { CxOptions } from "cva"; +import { cx } from "cva"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: CxOptions) { + return twMerge(cx(inputs)); +} From 20c4e956aadf0326d2f4f4db4724457b7436b8cc Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Tue, 19 Sep 2023 17:25:37 +0530 Subject: [PATCH 04/10] feat: add warnings --- .../IntegrationsSection.tsx | 34 ++++++++++++-- .../components/E2EESection/E2EESection.tsx | 46 ++++++++++++------- 2 files changed, 59 insertions(+), 21 deletions(-) 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 + + +
)} From 7fa4e09874711082c7826e9e4eaf0dc6fda4717d Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Wed, 20 Sep 2023 23:09:03 +0530 Subject: [PATCH 05/10] feat: use alert component --- .../IntegrationsSection.tsx | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx index 044bb09d9..8a798f2cc 100644 --- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx +++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx @@ -5,6 +5,8 @@ import { integrationSlugNameMapping } from "public/data/frequentConstants"; import { ProjectPermissionCan } from "@app/components/permissions"; import { + Alert, + AlertDescription, DeleteActionModal, EmptyState, FormControl, @@ -53,19 +55,16 @@ export const IntegrationsSection = ({ {!bot?.isActive && (
- - No active integrations found. Enable End-to-End Encryption in{" "} - - project settings - - .{" "} - - } - /> + + + + All the active integrations will be disabled. Disable End-to-End Encryption in{" "} + + project settings + + to re-enable it . + +
)} From a2ad9e10b4c59e692a1acb4a6e32f4ca906665ed Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Fri, 22 Sep 2023 22:37:36 +0530 Subject: [PATCH 06/10] chore: enable prop types --- frontend/.eslintrc.js | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 2bb62e579..6e74f20a6 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -29,7 +29,6 @@ module.exports = { }, plugins: ["react", "prettier", "simple-import-sort", "import"], rules: { - "react/prop-types": "off", quotes: ["error", "double", { avoidEscape: true }], "comma-dangle": ["error", "only-multiline"], "react/react-in-jsx-scope": "off", From a024eecf2c19a8143519f09d955f79b6088c9560 Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Fri, 22 Sep 2023 23:10:46 +0530 Subject: [PATCH 07/10] chore: remove utils --- frontend/src/helpers/classNames.ts | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 frontend/src/helpers/classNames.ts diff --git a/frontend/src/helpers/classNames.ts b/frontend/src/helpers/classNames.ts deleted file mode 100644 index 920e506d1..000000000 --- a/frontend/src/helpers/classNames.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { CxOptions } from "cva"; -import { cx } from "cva"; -import { twMerge } from "tailwind-merge"; - -export function cn(...inputs: CxOptions) { - return twMerge(cx(inputs)); -} From 2eff06cf06e116752ab4afa1a28821bde17329a4 Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Fri, 22 Sep 2023 23:20:45 +0530 Subject: [PATCH 08/10] fix: alert component styles --- .../src/components/v2/Alert/Alert.stories.tsx | 39 ++++++---- frontend/src/components/v2/Alert/Alert.tsx | 75 ++++++++++++++----- frontend/src/components/v2/Alert/index.tsx | 2 +- .../IntegrationsSection.tsx | 5 +- .../components/E2EESection/E2EESection.tsx | 7 +- 5 files changed, 82 insertions(+), 46 deletions(-) diff --git a/frontend/src/components/v2/Alert/Alert.stories.tsx b/frontend/src/components/v2/Alert/Alert.stories.tsx index ef42a9af4..3cfc983cb 100644 --- a/frontend/src/components/v2/Alert/Alert.stories.tsx +++ b/frontend/src/components/v2/Alert/Alert.stories.tsx @@ -1,8 +1,8 @@ -import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"; +import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import type { Meta, StoryObj } from "@storybook/react"; -import { Alert, AlertDescription, AlertTitle } from "./Alert"; +import { Alert, AlertDescription } from "./Alert"; const meta: Meta = { title: "Components/Alert", @@ -14,12 +14,7 @@ export default meta; type Story = StoryObj; -const ExampleComponent = () => ( - <> - this is a title - this is a description - -); +const ExampleComponent = () => this is a description; export const Default: Story = { args: { @@ -41,14 +36,26 @@ export const Destructive: Story = { } }; -export const WithIcon: Story = { +export const WithCustomIcon: Story = { args: { - children: ( - <> - - - - ), - variant: "warning" + children: , + variant: "warning", + icon: + } +}; + +export const WithOutIcon: Story = { + args: { + children: , + variant: "warning", + icon: null + } +}; + +export const WithOutTitle: Story = { + args: { + children: , + variant: "warning", + hideTitle: true } }; diff --git a/frontend/src/components/v2/Alert/Alert.tsx b/frontend/src/components/v2/Alert/Alert.tsx index d28fc059a..7aba947b4 100644 --- a/frontend/src/components/v2/Alert/Alert.tsx +++ b/frontend/src/components/v2/Alert/Alert.tsx @@ -1,10 +1,16 @@ +/* eslint-disable react/prop-types */ import * as React from "react"; +import { + faExclamationCircle, + faExclamationTriangle, + faInfoCircle +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { type VariantProps, cva } from "cva"; - -import { cn } from "@app/helpers/classNames"; +import { twMerge } from "tailwind-merge"; const alertVariants = cva( - "relative w-full bg-mineshaft-800 rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", + "w-full bg-mineshaft-800 rounded-lg border px-4 py-3 text-sm flex items-center gap-x-4", { variants: { variant: { @@ -19,33 +25,62 @@ const alertVariants = cva( } ); +type AlertProps = { + title?: string; + hideTitle?: boolean; + icon?: React.ReactNode; +}; + +const variantTitleMap = { + default: "Info", + destructive: "Danger", + warning: "Warning" +}; + +const variantIconMap = { + default: faInfoCircle, + destructive: faExclamationCircle, + warning: faExclamationTriangle +}; + const Alert = React.forwardRef< HTMLDivElement, - React.HTMLAttributes & VariantProps ->(({ className, variant, ...props }, ref) => ( -
-)); -Alert.displayName = "Alert"; - -const AlertTitle = React.forwardRef>( - ({ className, children, ...props }, ref) => ( -
& VariantProps & AlertProps +>(({ className, variant, title, icon, hideTitle = false, children, ...props }, ref) => { + const defaultTitle = title ?? variantTitleMap[variant ?? "default"]; + return ( +
- {children} -
- ) -); -AlertTitle.displayName = "AlertTitle"; +
+ {typeof icon !== "undefined" ? ( + <>{icon} + ) : ( + + )} +
+
+ {hideTitle ? null : ( +
+ {defaultTitle} +
+ )} + {children} +
+
+ ); +}); +Alert.displayName = "Alert"; const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -
+
)); AlertDescription.displayName = "AlertDescription"; -export { Alert, AlertDescription, AlertTitle }; +export { Alert, AlertDescription }; diff --git a/frontend/src/components/v2/Alert/index.tsx b/frontend/src/components/v2/Alert/index.tsx index 1b2cdda51..7851a0943 100644 --- a/frontend/src/components/v2/Alert/index.tsx +++ b/frontend/src/components/v2/Alert/index.tsx @@ -1 +1 @@ -export { Alert, AlertDescription, AlertTitle } from "./Alert"; +export { Alert, AlertDescription } from "./Alert"; diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx index 8a798f2cc..59577aab4 100644 --- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx +++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx @@ -1,5 +1,5 @@ import Link from "next/link"; -import { faArrowRight, faExclamationTriangle, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { faArrowRight, faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { integrationSlugNameMapping } from "public/data/frequentConstants"; @@ -55,8 +55,7 @@ export const IntegrationsSection = ({ {!bot?.isActive && (
- - + All the active integrations will be disabled. Disable End-to-End Encryption in{" "} diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx index 5f691c6e5..2d62034d6 100644 --- a/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx +++ b/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx @@ -1,12 +1,9 @@ -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 { Alert, AlertDescription, AlertTitle, Checkbox } from "@app/components/v2"; +import { Alert, AlertDescription, Checkbox } from "@app/components/v2"; import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context"; import { useGetUserWsKey, useGetWorkspaceBot, useUpdateBotActiveStatus } from "@app/hooks/api"; @@ -107,8 +104,6 @@ export const E2EESection = () => {
- - Warning ! Enabling End-to-end encryption disables all the integrations From 59c861c695dccbaa7609707eff9409755af6c49c Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Sat, 30 Sep 2023 17:07:52 +0530 Subject: [PATCH 09/10] fix: rename variants --- frontend/src/components/v2/Alert/Alert.stories.tsx | 4 ++-- frontend/src/components/v2/Alert/Alert.tsx | 13 ++++++------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/v2/Alert/Alert.stories.tsx b/frontend/src/components/v2/Alert/Alert.stories.tsx index 3cfc983cb..49e8ca43c 100644 --- a/frontend/src/components/v2/Alert/Alert.stories.tsx +++ b/frontend/src/components/v2/Alert/Alert.stories.tsx @@ -29,10 +29,10 @@ export const Warning: Story = { } }; -export const Destructive: Story = { +export const Danger: Story = { args: { children: , - variant: "destructive" + variant: "danger" } }; diff --git a/frontend/src/components/v2/Alert/Alert.tsx b/frontend/src/components/v2/Alert/Alert.tsx index 7aba947b4..9de25193c 100644 --- a/frontend/src/components/v2/Alert/Alert.tsx +++ b/frontend/src/components/v2/Alert/Alert.tsx @@ -1,5 +1,4 @@ -/* eslint-disable react/prop-types */ -import * as React from "react"; +import { forwardRef } from "react"; import { faExclamationCircle, faExclamationTriangle, @@ -15,7 +14,7 @@ const alertVariants = cva( variants: { variant: { default: "", - destructive: "text-red border-red", + danger: "text-red border-red", warning: "text-yellow border-yellow" } }, @@ -33,17 +32,17 @@ type AlertProps = { const variantTitleMap = { default: "Info", - destructive: "Danger", + danger: "Danger", warning: "Warning" }; const variantIconMap = { default: faInfoCircle, - destructive: faExclamationCircle, + danger: faExclamationCircle, warning: faExclamationTriangle }; -const Alert = React.forwardRef< +const Alert = forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps & AlertProps >(({ className, variant, title, icon, hideTitle = false, children, ...props }, ref) => { @@ -75,7 +74,7 @@ const Alert = React.forwardRef< }); Alert.displayName = "Alert"; -const AlertDescription = React.forwardRef< +const AlertDescription = forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( From 9546916aadac9ce5776705a74b017879e80c045e Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Sat, 30 Sep 2023 17:12:52 +0530 Subject: [PATCH 10/10] fix: add props --- .../IntegrationsPage/IntegrationsPage.tsx | 2 ++ .../IntegrationsSection.tsx | 19 ++++++++++--------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx index fdc04af9d..fda0f6a1d 100644 --- a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx +++ b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx @@ -202,6 +202,8 @@ export const IntegrationsPage = withProjectPermission( integrations={integrations} environments={environments} onIntegrationDelete={({ _id: id }, cb) => handleIntegrationDelete(id, cb)} + isBotActive={bot?.isActive} + workspaceId={workspaceId} /> void) => void; + isBotActive: boolean | undefined; + workspaceId: string; }; export const IntegrationsSection = ({ integrations = [], environments = [], isLoading, - onIntegrationDelete + onIntegrationDelete, + isBotActive, + workspaceId }: Props) => { const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([ "deleteConfirmation" ] as const); - const { currentWorkspace } = useWorkspace(); - const { data: bot } = useGetWorkspaceBot(currentWorkspace?._id ?? ""); return (
@@ -53,12 +54,12 @@ export const IntegrationsSection = ({
)} - {!bot?.isActive && ( + {!isBotActive && (
All the active integrations will be disabled. Disable End-to-End Encryption in{" "} - + project settings to re-enable it . @@ -67,7 +68,7 @@ export const IntegrationsSection = ({
)} - {!isLoading && !integrations.length && bot?.isActive && ( + {!isLoading && !integrations.length && isBotActive && (
)} - {!isLoading && bot?.isActive && ( + {!isLoading && isBotActive && (
{integrations?.map((integration) => (