From c32f6c985a9796efa4e03d4746aceb579aa00609 Mon Sep 17 00:00:00 2001 From: Rayyan Alam Date: Thu, 5 Oct 2023 03:19:35 +0530 Subject: [PATCH 1/8] fix: Added Warning and Error icons to Worlflow settings component --- .../components/LackIntegrationAlert.tsx | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx index 0f3d3925c79..03529495192 100644 --- a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx +++ b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx @@ -5,7 +5,7 @@ import styled from '@emotion/styled'; import { ChannelTypeEnum } from '@novu/shared'; import { colors, Text } from '../../../design-system'; -import { ProviderMissing } from '../../../design-system/icons'; +import { ErrorIcon, WarningIcon } from '../../../design-system/icons'; import { IntegrationsStoreModal } from '../../integrations/IntegrationsStoreModal'; import { useSegment } from '../../../components/providers/SegmentProvider'; import { stepNames, TemplateEditorAnalyticsEnum } from '../constants'; @@ -41,8 +41,9 @@ export function LackIntegrationAlert({
- { if (isPrimaryMissing) { openSelectPrimaryIntegrationModal({ @@ -84,10 +85,22 @@ export function LackIntegrationAlert({ ); } -const MissingIcon = styled(ProviderMissing)<{ color?: string | undefined }>` - cursor: pointer; - color: ${({ color }) => color}; -`; +const AlertIcon = ({ + color, + alertType, + onClick, +}: { + color?: string | undefined; + alertType: alertType; + onClick: () => void; +}) => { + switch (alertType) { + case 'warning': + return ; + default: + return ; + } +}; const WarningMessage = styled.div<{ backgroundColor: string }>` display: flex; From e5607f6fcdd9afc4ce550a2665e819f16ab62f19 Mon Sep 17 00:00:00 2001 From: Rayyan Alam Date: Fri, 6 Oct 2023 04:35:07 +0530 Subject: [PATCH 2/8] fix: Added the text color of warning and fixed the color of Warning Icon --- apps/web/src/design-system/icons/general/WarningIcon.tsx | 4 ++-- .../src/pages/templates/components/LackIntegrationAlert.tsx | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/apps/web/src/design-system/icons/general/WarningIcon.tsx b/apps/web/src/design-system/icons/general/WarningIcon.tsx index 1ab7e039542..601d8262698 100644 --- a/apps/web/src/design-system/icons/general/WarningIcon.tsx +++ b/apps/web/src/design-system/icons/general/WarningIcon.tsx @@ -2,10 +2,10 @@ import React from 'react'; /* eslint-disable */ export function WarningIcon(props: React.ComponentPropsWithoutRef<'svg'>) { return ( - + ); diff --git a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx index 03529495192..5129e98ae5d 100644 --- a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx +++ b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx @@ -118,7 +118,7 @@ const WarningMessage = styled.div<{ backgroundColor: string }>` function alertTypeToDoubleArrowColor(type: alertType) { switch (type) { case 'warning': - return 'rgba(234, 169, 0, 1)'; + return 'rgb(234, 169, 0)'; default: return 'undefined'; } @@ -139,7 +139,8 @@ function alertTypeToMessageTextColor(type: alertType) { switch (type) { case 'error': return colors.error; - + case 'warning': + return 'rgb(234, 169, 0)'; default: return undefined; } From 40e1fa4507c3ef300bafd23f0b07362c0ff99ee5 Mon Sep 17 00:00:00 2001 From: Rayyan Alam Date: Fri, 6 Oct 2023 12:13:05 +0530 Subject: [PATCH 3/8] fix: Changed the color of warning color prop --- apps/web/src/design-system/config/colors.ts | 2 +- .../src/pages/templates/components/LackIntegrationAlert.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/web/src/design-system/config/colors.ts b/apps/web/src/design-system/config/colors.ts index 14a62bcf883..8402a58b69e 100644 --- a/apps/web/src/design-system/config/colors.ts +++ b/apps/web/src/design-system/config/colors.ts @@ -18,7 +18,7 @@ export const colors = { gradientStart, gradientEnd, success: '#4D9980', - warning: '#FF8000', + warning: '#EAA900', error: '#E54545', vertical: `linear-gradient(0deg, ${gradientStart} 0%, ${gradientEnd} 100%)`, horizontal: `linear-gradient(99deg, ${gradientEnd} 0% 0%, ${gradientStart} 100% 100%)`, diff --git a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx index 5129e98ae5d..6d9b254275e 100644 --- a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx +++ b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx @@ -19,7 +19,7 @@ type alertType = 'error' | 'warning'; export function LackIntegrationAlert({ channelType, text, - type = 'error', + type = 'warning', isPrimaryMissing, }: { channelType: ChannelTypeEnum; @@ -118,7 +118,7 @@ const WarningMessage = styled.div<{ backgroundColor: string }>` function alertTypeToDoubleArrowColor(type: alertType) { switch (type) { case 'warning': - return 'rgb(234, 169, 0)'; + return colors.warning; default: return 'undefined'; } @@ -140,7 +140,7 @@ function alertTypeToMessageTextColor(type: alertType) { case 'error': return colors.error; case 'warning': - return 'rgb(234, 169, 0)'; + return colors.warning; default: return undefined; } From 19d44626db5b4156d93b2d269476b86b78d19360 Mon Sep 17 00:00:00 2001 From: Rayyan Alam Date: Fri, 6 Oct 2023 12:24:38 +0530 Subject: [PATCH 4/8] fix: Reverted back to the default color for warning color --- apps/web/src/design-system/config/colors.ts | 2 +- .../src/pages/templates/components/LackIntegrationAlert.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/web/src/design-system/config/colors.ts b/apps/web/src/design-system/config/colors.ts index 8402a58b69e..14a62bcf883 100644 --- a/apps/web/src/design-system/config/colors.ts +++ b/apps/web/src/design-system/config/colors.ts @@ -18,7 +18,7 @@ export const colors = { gradientStart, gradientEnd, success: '#4D9980', - warning: '#EAA900', + warning: '#FF8000', error: '#E54545', vertical: `linear-gradient(0deg, ${gradientStart} 0%, ${gradientEnd} 100%)`, horizontal: `linear-gradient(99deg, ${gradientEnd} 0% 0%, ${gradientStart} 100% 100%)`, diff --git a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx index 6d9b254275e..5129e98ae5d 100644 --- a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx +++ b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx @@ -19,7 +19,7 @@ type alertType = 'error' | 'warning'; export function LackIntegrationAlert({ channelType, text, - type = 'warning', + type = 'error', isPrimaryMissing, }: { channelType: ChannelTypeEnum; @@ -118,7 +118,7 @@ const WarningMessage = styled.div<{ backgroundColor: string }>` function alertTypeToDoubleArrowColor(type: alertType) { switch (type) { case 'warning': - return colors.warning; + return 'rgb(234, 169, 0)'; default: return 'undefined'; } @@ -140,7 +140,7 @@ function alertTypeToMessageTextColor(type: alertType) { case 'error': return colors.error; case 'warning': - return colors.warning; + return 'rgb(234, 169, 0)'; default: return undefined; } From 42a433bbacf1fa1aad0e6fe333e1892797747cbf Mon Sep 17 00:00:00 2001 From: Rayyan Alam Date: Mon, 9 Oct 2023 12:54:11 +0530 Subject: [PATCH 5/8] fix: WarningIcon not showing color in other areas --- apps/web/src/design-system/icons/general/WarningIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/design-system/icons/general/WarningIcon.tsx b/apps/web/src/design-system/icons/general/WarningIcon.tsx index 601d8262698..919ee1f464d 100644 --- a/apps/web/src/design-system/icons/general/WarningIcon.tsx +++ b/apps/web/src/design-system/icons/general/WarningIcon.tsx @@ -5,7 +5,7 @@ export function WarningIcon(props: React.ComponentPropsWithoutRef<'svg'>) { ); From daa3d9aa61aad1d963bb2620e44464f59b007df2 Mon Sep 17 00:00:00 2001 From: Rayyan Alam Date: Sat, 14 Oct 2023 04:42:02 +0530 Subject: [PATCH 6/8] fix: Updated some changes for the ux --- .../components/LackIntegrationAlert.tsx | 57 ++++++++----------- 1 file changed, 24 insertions(+), 33 deletions(-) diff --git a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx index 5129e98ae5d..8c5b9749169 100644 --- a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx +++ b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx @@ -5,7 +5,7 @@ import styled from '@emotion/styled'; import { ChannelTypeEnum } from '@novu/shared'; import { colors, Text } from '../../../design-system'; -import { ErrorIcon, WarningIcon } from '../../../design-system/icons'; +import { ErrorIcon, WarningIcon, CircleArrowRight } from '../../../design-system/icons'; import { IntegrationsStoreModal } from '../../integrations/IntegrationsStoreModal'; import { useSegment } from '../../../components/providers/SegmentProvider'; import { stepNames, TemplateEditorAnalyticsEnum } from '../constants'; @@ -38,33 +38,31 @@ export function LackIntegrationAlert({ return ( <> - + { + if (isPrimaryMissing) { + openSelectPrimaryIntegrationModal({ + environmentId: environment?._id, + channelType: channelType, + onClose: () => { + segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PRIMARY_PROVIDER_BANNER_CLICK); + }, + }); + } else { + openIntegrationsModal(true); + segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PROVIDER_BANNER_CLICK); + } + }} + > -
- { - if (isPrimaryMissing) { - openSelectPrimaryIntegrationModal({ - environmentId: environment?._id, - channelType: channelType, - onClose: () => { - segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PRIMARY_PROVIDER_BANNER_CLICK); - }, - }); - } else { - openIntegrationsModal(true); - segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PROVIDER_BANNER_CLICK); - } - }} - /> -
+ {text ? text : `Please configure or activate a provider instance for the ${stepNames[channelType]} channel to send notifications over this node`} + {isMultiProviderConfigurationEnabled ? ( @@ -85,20 +83,12 @@ export function LackIntegrationAlert({ ); } -const AlertIcon = ({ - color, - alertType, - onClick, -}: { - color?: string | undefined; - alertType: alertType; - onClick: () => void; -}) => { +const AlertIcon = ({ color, alertType }: { color?: string | undefined; alertType: alertType }) => { switch (alertType) { case 'warning': - return ; + return ; default: - return ; + return ; } }; @@ -110,6 +100,7 @@ const WarningMessage = styled.div<{ backgroundColor: string }>` padding: 15px; margin-bottom: 40px; color: #e54545; + cursor: pointer; background: ${({ backgroundColor }) => backgroundColor}; border-radius: 7px; From 7c7d818d68ff8003bc6bec2681b8c6f4e3170f8b Mon Sep 17 00:00:00 2001 From: Rayyan Alam Date: Tue, 17 Oct 2023 02:42:51 +0530 Subject: [PATCH 7/8] fix: Arrow icon at the end of row and Warning alert being shown at the top --- .../components/LackIntegrationAlert.tsx | 49 ++++++++++--------- .../templates/components/ListProviders.tsx | 10 +++- 2 files changed, 33 insertions(+), 26 deletions(-) diff --git a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx index 8c5b9749169..d80de95b9e4 100644 --- a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx +++ b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx @@ -36,33 +36,34 @@ export function LackIntegrationAlert({ const onIntegrationModalClose = () => openIntegrationsModal(false); + function handleErrorRectangleClick() { + if (isPrimaryMissing) { + openSelectPrimaryIntegrationModal({ + environmentId: environment?._id, + channelType: channelType, + onClose: () => { + segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PRIMARY_PROVIDER_BANNER_CLICK); + }, + }); + } else { + openIntegrationsModal(true); + segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PROVIDER_BANNER_CLICK); + } + } + return ( <> - { - if (isPrimaryMissing) { - openSelectPrimaryIntegrationModal({ - environmentId: environment?._id, - channelType: channelType, - onClose: () => { - segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PRIMARY_PROVIDER_BANNER_CLICK); - }, - }); - } else { - openIntegrationsModal(true); - segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PROVIDER_BANNER_CLICK); - } - }} - > - + + - - {text - ? text - : `Please configure or activate a provider instance for the ${stepNames[channelType]} channel to send notifications over this node`} - - +
+ + {text + ? text + : `Please configure or activate a provider instance for the ${stepNames[channelType]} channel to send notifications over this node`} + +
+ {isMultiProviderConfigurationEnabled ? ( diff --git a/apps/web/src/pages/templates/components/ListProviders.tsx b/apps/web/src/pages/templates/components/ListProviders.tsx index be5c63de652..2868991d971 100644 --- a/apps/web/src/pages/templates/components/ListProviders.tsx +++ b/apps/web/src/pages/templates/components/ListProviders.tsx @@ -57,7 +57,6 @@ export const ListProviders = ({
- {providers .filter((provider) => provider.connected && provider.environmentId === currentEnvironment?._id) .map((provider) => { @@ -132,6 +131,7 @@ export const ListProviders = ({ ); })} + ); }; @@ -143,6 +143,7 @@ const LackIntegrationByType = ({ providers: IIntegratedProvider[]; channel: ChannelTypeEnum; }) => { + const { environment: currentEnvironment } = useEnvController(); const containsNovuProvider = NOVU_SMS_EMAIL_PROVIDERS.some( (providerId) => providerId === providers.find((provider) => provider.connected)?.providerId ); @@ -161,7 +162,12 @@ const LackIntegrationByType = ({ /> - provider.connected).length === 1 && containsNovuProvider}> + provider.connected && provider.environmentId === currentEnvironment?._id) + .length === 1 && containsNovuProvider + } + >
Date: Wed, 18 Oct 2023 00:42:20 +0530 Subject: [PATCH 8/8] fix: Remove duplicate function --- .../templates/components/LackIntegrationAlert.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx index 67dd670dc12..f8f818c170f 100644 --- a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx +++ b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx @@ -50,21 +50,6 @@ export function LackIntegrationAlert({ } }; - function handleErrorRectangleClick() { - if (isPrimaryMissing) { - openSelectPrimaryIntegrationModal({ - environmentId: environment?._id, - channelType: channelType, - onClose: () => { - segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PRIMARY_PROVIDER_BANNER_CLICK); - }, - }); - } else { - openIntegrationsModal(true); - segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PROVIDER_BANNER_CLICK); - } - } - return ( <>