Merge pull request #4413 from rayy40/fix/add-icons-to-alert-component

fix: Added Warning and Error icons to Worlflow settings component
novuhq · Oct 22, 2023 · 11e9b3f · 11e9b3f
2 parents 5046d88 + 1d7aee8
commit 11e9b3f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 19 deletions.
diff --git 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 (
-    <svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
         d="M16.8125 13.0312L10.125 1.65625C9.625 0.78125 8.34375 0.78125 7.8125 1.65625L1.15625 13.0312C0.65625 13.9062 1.28125 15 2.3125 15H15.6562C16.6875 15 17.3125 13.9062 16.8125 13.0312ZM8.25 5.25C8.25 4.84375 8.5625 4.5 9 4.5C9.40625 4.5 9.75 4.84375 9.75 5.25V9.25C9.75 9.6875 9.40625 10 9 10C8.5625 10 8.25 9.6875 8.25 9.25V5.25ZM9 13C8.4375 13 8 12.5625 8 12.0312C8 11.5 8.4375 11.0625 9 11.0625C9.53125 11.0625 9.96875 11.5 9.96875 12.0312C9.96875 12.5625 9.53125 13 9 13Z"
-        fill="#FF8000"
+        fill={props.color || '#FF8000'}
       />
     </svg>
   );

diff --git 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, CircleArrowRight } from '../../../design-system/icons';
 import { IntegrationsStoreModal } from '../../integrations/IntegrationsStoreModal';
 import { useSegment } from '../../../components/providers/SegmentProvider';
 import { stepNames, TemplateEditorAnalyticsEnum } from '../constants';
@@ -53,15 +53,16 @@ export function LackIntegrationAlert({
   return (
     <>
       <WarningMessage onClick={handleErrorRectangleClick} backgroundColor={alertTypeToMessageBackgroundColor(type)}>
-        <Group spacing={12} noWrap>
-          <div>
-            <MissingIcon color={alertTypeToDoubleArrowColor(type)} />
+        <Group style={{ width: `100%` }} spacing={12} noWrap>
+          <AlertIcon color={alertTypeToDoubleArrowColor(type)} alertType={type} />
+          <div style={{ flex: 1 }}>
+            <Text color={alertTypeToMessageTextColor(type)}>
+              {text
+                ? text
+                : `Please configure or activate a provider instance for the ${stepNames[channelType]} channel to send notifications over this node`}
+            </Text>
           </div>
-          <Text color={alertTypeToMessageTextColor(type)}>
-            {text
-              ? text
-              : `Please configure or activate a provider instance for the ${stepNames[channelType]} channel to send notifications over this node`}
-          </Text>
+          <CircleArrowRight color={alertTypeToDoubleArrowColor(type)} />
         </Group>
       </WarningMessage>
       {isMultiProviderConfigurationEnabled ? (
@@ -82,10 +83,14 @@ export function LackIntegrationAlert({
   );
 }
 
-const MissingIcon = styled(ProviderMissing)<{ color?: string | undefined }>`
-  cursor: pointer;
-  color: ${({ color }) => color};
-`;
+const AlertIcon = ({ color, alertType }: { color?: string | undefined; alertType: alertType }) => {
+  switch (alertType) {
+    case 'warning':
+      return <WarningIcon width="22px" height="22px" color={color} />;
+    default:
+      return <ErrorIcon width="22px" height="22px" color={color} />;
+  }
+};
 
 const WarningMessage = styled.div<{ backgroundColor: string }>`
   display: flex;
@@ -95,6 +100,7 @@ const WarningMessage = styled.div<{ backgroundColor: string }>`
   padding: 15px;
   margin-bottom: 40px;
   color: #e54545;
+  cursor: pointer;
 
   background: ${({ backgroundColor }) => backgroundColor};
   border-radius: 7px;
@@ -104,7 +110,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';
   }
@@ -125,7 +131,8 @@ function alertTypeToMessageTextColor(type: alertType) {
   switch (type) {
     case 'error':
       return colors.error;
-
+    case 'warning':
+      return 'rgb(234, 169, 0)';
     default:
       return undefined;
   }

diff --git 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 = ({
           </Button>
         </Group>
       </div>
-      <LackIntegrationByType providers={providers} channel={channel} />
       {providers
         .filter((provider) => provider.connected && provider.environmentId === currentEnvironment?._id)
         .map((provider) => {
@@ -132,6 +131,7 @@ export const ListProviders = ({
             </UnstyledButton>
           );
         })}
+      <LackIntegrationByType providers={providers} channel={channel} />
     </div>
   );
 };
@@ -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 = ({
           />
         </div>
       </When>
-      <When truthy={providers.filter((provider) => provider.connected).length === 1 && containsNovuProvider}>
+      <When
+        truthy={
+          providers.filter((provider) => provider.connected && provider.environmentId === currentEnvironment?._id)
+            .length === 1 && containsNovuProvider
+        }
+      >
         <div
           style={{
             marginBottom: -28,