diff --git a/static/app/debug/notifications/previews/discordPreview.tsx b/static/app/debug/notifications/previews/discordPreview.tsx
index adab8c87596b5f..daff8d216f5653 100644
--- a/static/app/debug/notifications/previews/discordPreview.tsx
+++ b/static/app/debug/notifications/previews/discordPreview.tsx
@@ -1,9 +1,145 @@
+import styled from '@emotion/styled';
+import moment from 'moment-timezone';
+
+import {CodeSnippet} from 'sentry/components/codeSnippet';
+import {Container, Flex, Grid} from 'sentry/components/core/layout';
+import {Text} from 'sentry/components/core/text';
import {DebugNotificationsPreview} from 'sentry/debug/notifications/components/debugNotificationsPreview';
+import {
+ NotificationProviderKey,
+ type NotificationTemplateRegistration,
+} from 'sentry/debug/notifications/types';
-export function DiscordPreview() {
+export function DiscordPreview({
+ registration,
+}: {
+ registration: NotificationTemplateRegistration;
+}) {
+ const {body, actions, subject, chart, footer} = registration.example;
+ const previewTime = moment(new Date()).format('MM/DD/YY, h:mm A');
+ const payload = registration.previews[NotificationProviderKey.DISCORD];
return (
- todo: insert discord preview here
+
+
+
+
+
+
+ Sentry
+
+
+ APP
+
+
+ {previewTime}
+
+
+
+ {subject}
+
+ {body}
+ {chart && }
+ {footer && {footer}}
+
+
+ {actions.map(action => (
+
+ {action.label}
+
+ ))}
+
+
+
+
+ Below is the JSON payload that will be sent to Discord. There is no online
+ preview tool, so we're mocking it here, so use this as an approximation of
+ what it'll look like on Discord.
+
+
+ {payload ? JSON.stringify(payload, null, 2) : ''}
+
+
+
);
}
+
+function SentryDiscordAppIcon() {
+ return (
+
+
+
+ );
+}
+
+const DiscordMessageContainer = styled('div')`
+ border: 1px solid #5865f2;
+ border-radius: 4px 4px 0 0;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: ${p => `${p.theme.space.xs} ${p.theme.space.md}`};
+ background: #1a1a1e;
+ padding: ${p => p.theme.space.xl};
+ cursor: default;
+`;
+
+const DiscordWhiteText = styled(Text)`
+ color: #fff !important;
+`;
+
+const DiscordIconGradient = styled('svg')`
+ background: linear-gradient(to top right, #362c58 0%, #8d5394 100%);
+ border-radius: 1000px;
+ grid-row: span 3;
+ height: 40px;
+ width: 40px;
+`;
+
+const DiscordAppBadge = styled(Text)`
+ background-color: #5865f2;
+ border-radius: 4px;
+ padding: 0 4px;
+ color: #fff;
+`;
+
+const DiscordEmbedContainer = styled('div')`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: ${p => p.theme.space.md};
+ background: #242429;
+ border-radius: 2px;
+ border: 0.5px solid #3a3a40;
+ border-left-width: 3px;
+ padding: ${p => `${p.theme.space.lg} ${p.theme.space.xl}`};
+`;
+
+const DiscordChart = styled('img')`
+ height: 100px;
+ object-fit: contain;
+ border-radius: 4px;
+`;
+
+const DiscordActionRow = styled('div')`
+ display: flex;
+ gap: ${p => p.theme.space.xs};
+`;
+
+const DiscordLinkButton = styled('a')`
+ display: block;
+ font-size: 12px;
+ font-weight: bold;
+ border-radius: 8px;
+ padding: ${p => `${p.theme.space.sm} ${p.theme.space.md}`};
+ background: #242429;
+ color: #fff;
+`;
+
+const DiscordTimeText = styled(Text)`
+ color: #81828a;
+ font-weight: 500;
+`;
diff --git a/static/app/debug/notifications/types.ts b/static/app/debug/notifications/types.ts
index 522d834f354383..3a20b98a658b56 100644
--- a/static/app/debug/notifications/types.ts
+++ b/static/app/debug/notifications/types.ts
@@ -20,17 +20,9 @@ export interface NotificationTemplateRegistration {
subject: string;
text_content: string;
};
- [NotificationProviderKey.TEAMS]: {
- card: {
- $schema: string;
- body: any[]; // Can't really be more specific since it's a list of arbitrary cards
- type: 'AdaptiveCard';
- version: string;
- };
- };
- [NotificationProviderKey.SLACK]: {
- blocks: Array>;
- };
+ [NotificationProviderKey.TEAMS]: {card: Record};
+ [NotificationProviderKey.SLACK]: {blocks: Array>};
+ [NotificationProviderKey.DISCORD]: Record;
};
source: string;
}
diff --git a/static/app/debug/notifications/views/index.tsx b/static/app/debug/notifications/views/index.tsx
index d2d192b905db2e..9749ead011c33c 100644
--- a/static/app/debug/notifications/views/index.tsx
+++ b/static/app/debug/notifications/views/index.tsx
@@ -63,7 +63,7 @@ export default function DebugNotificationsIndex() {
>
-
+