Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Added Warning and Error icons to Worlflow settings component #4413

Merged
merged 20 commits into from
Oct 22, 2023
Merged

fix: Added Warning and Error icons to Worlflow settings component #4413

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
c32f6c9
fix: Added Warning and Error icons to Worlflow settings component
rayy40 Oct 4, 2023
ed9ee69
Merge branch 'next' into fix/add-icons-to-alert-component
rayy40 Oct 4, 2023
83b9a7c
Merge branch 'next' into fix/add-icons-to-alert-component
davidsoderberg Oct 5, 2023
e5607f6
fix: Added the text color of warning and fixed the color of Warning Icon
rayy40 Oct 5, 2023
cb66538
Merge branch 'next' into fix/add-icons-to-alert-component
rayy40 Oct 5, 2023
40e1fa4
fix: Changed the color of warning color prop
rayy40 Oct 6, 2023
dfd7feb
Merge branch 'fix/add-icons-to-alert-component' of https://github.com…
rayy40 Oct 6, 2023
b4343d3
Merge branch 'next' into fix/add-icons-to-alert-component
rayy40 Oct 6, 2023
19d4462
fix: Reverted back to the default color for warning color
rayy40 Oct 6, 2023
fb6b9f9
Merge branch 'fix/add-icons-to-alert-component' of https://github.com…
rayy40 Oct 6, 2023
42a433b
fix: WarningIcon not showing color in other areas
rayy40 Oct 9, 2023
b352cc6
Merge branch 'next' into fix/add-icons-to-alert-component
rayy40 Oct 9, 2023
19e4bff
Merge branch 'next' into fix/add-icons-to-alert-component
LetItRock Oct 11, 2023
daa3d9a
fix: Updated some changes for the ux
rayy40 Oct 13, 2023
d345560
Merge branch 'next' into fix/add-icons-to-alert-component
rayy40 Oct 13, 2023
7c7d818
fix: Arrow icon at the end of row and Warning alert being shown at th…
rayy40 Oct 16, 2023
ca27b0c
Merge branch 'next' into fix/add-icons-to-alert-component
rayy40 Oct 16, 2023
a12f61a
fix: Remove duplicate function
rayy40 Oct 17, 2023
abfa50a
Merge branch 'next' into fix/add-icons-to-alert-component
rayy40 Oct 17, 2023
1d7aee8
Merge branch 'next' into fix/add-icons-to-alert-component
ainouzgali Oct 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/web/src/design-system/icons/general/WarningIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
59 changes: 32 additions & 27 deletions apps/web/src/pages/templates/components/LackIntegrationAlert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -38,32 +38,31 @@ export function LackIntegrationAlert({

return (
<>
<WarningMessage backgroundColor={alertTypeToMessageBackgroundColor(type)}>
<WarningMessage
backgroundColor={alertTypeToMessageBackgroundColor(type)}
onClick={() => {
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);
}
}}
>
<Group spacing={12} noWrap>
<div>
<MissingIcon
color={alertTypeToDoubleArrowColor(type)}
onClick={() => {
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);
}
}}
/>
</div>
<AlertIcon color={alertTypeToDoubleArrowColor(type)} alertType={type} />
<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 />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The correct color should be passed here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, I believe this arrow will be shown immediately after the text, and will not at the end of the row like it should.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, I believe this arrow will be shown immediately after the text, and will not at the end of the row like it should.

When placing it just after the text, I need to add another flex container to align the items, and I feel like it's redundant since there is already a flex container Group which is a parent for AlertIcons and Text, so I just added CircleArrowRight there too.

Please let me know if I am missing something or need to go with a different approach.

Copy link
Contributor

@ainouzgali ainouzgali Oct 16, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rayy40, in the comment below I added a screenshot 0f your result, as you can see the arrow is not at the end of the row :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ainouzgali , Ah sorry. I wasn't able to understand you before ;(

</Group>
</WarningMessage>
{isMultiProviderConfigurationEnabled ? (
Expand All @@ -84,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;
Expand All @@ -97,6 +100,7 @@ const WarningMessage = styled.div<{ backgroundColor: string }>`
padding: 15px;
margin-bottom: 40px;
color: #e54545;
cursor: pointer;

background: ${({ backgroundColor }) => backgroundColor};
border-radius: 7px;
Expand All @@ -105,7 +109,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';
}
Expand All @@ -126,7 +130,8 @@ function alertTypeToMessageTextColor(type: alertType) {
switch (type) {
case 'error':
return colors.error;

case 'warning':
return 'rgb(234, 169, 0)';
default:
return undefined;
}
Expand Down
Loading