Skip to content

Commit cdd075c

Browse files
natemoo-renatemoo-re
committed
giant demo mess
1 parent fc80582 commit cdd075c

31 files changed

+1416
-118
lines changed

‎static/app/components/workflowEngine/form/control/priorityControl.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export default function PriorityControl({
7676
flexibleControlStateSize
7777
size="sm"
7878
suffix="s"
79+
placeholder="0"
7980
// empty string required to keep this as a controlled input
8081
value={thresholds[PriorityLevel.MEDIUM] ?? ''}
8182
onChange={threshold => setMediumThreshold(Number(threshold))}
@@ -96,6 +97,7 @@ export default function PriorityControl({
9697
flexibleControlStateSize
9798
size="sm"
9899
suffix="s"
100+
placeholder="0"
99101
// empty string required to keep this as a controlled input
100102
value={thresholds[PriorityLevel.HIGH] ?? ''}
101103
onChange={threshold => setHighThreshold(Number(threshold))}

‎static/app/components/workflowEngine/gridCell/actionCell.tsx

Lines changed: 71 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,68 @@ import {IconMail} from 'sentry/icons';
88
import {t} from 'sentry/locale';
99
import {PluginIcon} from 'sentry/plugins/components/pluginIcon';
1010
import {space} from 'sentry/styles/space';
11+
import {ActionType} from 'sentry/types/workflowEngine/actions';
1112

12-
const ActionMetadata = {
13-
slack: {name: t('Slack'), icon: <PluginIcon pluginId="slack" size={20} />},
14-
discord: {name: t('Discord'), icon: <PluginIcon pluginId={'discord'} size={20} />},
15-
email: {name: t('Email'), icon: <IconMail size="md" />},
16-
};
17-
18-
export type Action = keyof typeof ActionMetadata;
13+
const ICON_SIZE = 20;
14+
const ActionMetadata: Partial<Record<ActionType, {icon: React.ReactNode; name: string}>> =
15+
{
16+
[ActionType.AZURE_DEVOPS]: {
17+
name: t('Azure DevOps'),
18+
icon: <PluginIcon pluginId="vsts" size={ICON_SIZE} />,
19+
},
20+
[ActionType.DISCORD]: {
21+
name: t('Discord'),
22+
icon: <PluginIcon pluginId={'discord'} size={ICON_SIZE} />,
23+
},
24+
[ActionType.EMAIL]: {name: t('Email'), icon: <IconMail size="md" />},
25+
[ActionType.GITHUB]: {
26+
name: t('GitHub'),
27+
icon: <PluginIcon pluginId="github" size={ICON_SIZE} />,
28+
},
29+
[ActionType.GITHUB_ENTERPRISE]: {
30+
name: t('GitHub Enterprise'),
31+
icon: <PluginIcon pluginId="github_enterprise" size={ICON_SIZE} />,
32+
},
33+
[ActionType.JIRA]: {
34+
name: t('JIRA'),
35+
icon: <PluginIcon pluginId="jira" size={ICON_SIZE} />,
36+
},
37+
[ActionType.JIRA_SERVER]: {
38+
name: t('JIRA Server'),
39+
icon: <PluginIcon pluginId="jira_server" size={ICON_SIZE} />,
40+
},
41+
[ActionType.MSTEAMS]: {
42+
name: t('Teams'),
43+
icon: <PluginIcon pluginId="msteams" size={ICON_SIZE} />,
44+
},
45+
[ActionType.OPSGENIE]: {
46+
name: t('Ops Genie'),
47+
icon: <PluginIcon pluginId="opsgenie" size={ICON_SIZE} />,
48+
},
49+
[ActionType.PAGERDUTY]: {
50+
name: t('Pager Duty'),
51+
icon: <PluginIcon pluginId="pagerduty" size={ICON_SIZE} />,
52+
},
53+
[ActionType.PLUGIN]: {
54+
name: t('Plugin'),
55+
icon: <PluginIcon pluginId="placeholder" size={ICON_SIZE} />,
56+
},
57+
[ActionType.SENTRY_APP]: {
58+
name: t('Sentry App'),
59+
icon: <PluginIcon pluginId="sentry" size={ICON_SIZE} />,
60+
},
61+
[ActionType.SLACK]: {
62+
name: t('Slack'),
63+
icon: <PluginIcon pluginId="slack" size={ICON_SIZE} />,
64+
},
65+
[ActionType.WEBHOOK]: {
66+
name: t('Webhook'),
67+
icon: <PluginIcon pluginId="webhooks" size={ICON_SIZE} />,
68+
},
69+
};
1970

2071
type ActionCellProps = {
21-
actions: Action[];
72+
actions: ActionType[];
2273
disabled?: boolean;
2374
};
2475

@@ -27,14 +78,18 @@ export function ActionCell({actions, disabled}: ActionCellProps) {
2778
return <EmptyCell />;
2879
}
2980
if (actions.length === 1 && actions[0]) {
81+
const {name, icon} = ActionMetadata[actions[0]]!;
3082
return (
3183
<Flex align="center" gap={space(0.75)}>
32-
<IconContainer>{ActionMetadata[actions[0]].icon}</IconContainer>
33-
{ActionMetadata[actions[0]].name}
84+
<IconContainer>{icon}</IconContainer>
85+
{name}
3486
</Flex>
3587
);
3688
}
37-
const actionsList = actions.map(action => ActionMetadata[action].name).join(', ');
89+
const actionsList = actions
90+
.map(action => ActionMetadata[action]?.name)
91+
.filter(x => x)
92+
.join(', ');
3893
return (
3994
<ActionContainer align="center" gap={space(0.75)}>
4095
<IconContainer>
@@ -48,17 +103,17 @@ export function ActionCell({actions, disabled}: ActionCellProps) {
48103
}
49104

50105
const ActionContainer = styled(Flex)`
51-
/* overflow: hidden;
52-
white-space: nowrap; */
106+
overflow: hidden;
107+
white-space: nowrap;
108+
text-overflow: ellipsis;
53109
`;
54110

55111
const ActionsList = styled('span')`
56112
${p => p.theme.tooltipUnderline()};
57-
text-overflow: ellipsis;
58-
display: flex;
59113
overflow: hidden;
60114
white-space: nowrap;
61-
max-width: 100%;
115+
text-overflow: ellipsis;
116+
display: flex;
62117
`;
63118

64119
const IconContainer = styled('div')`

‎static/app/components/workflowEngine/gridCell/connectionCell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const links: Record<ConnectionCellProps['type'], (id: string) => string> = {
2626
};
2727

2828
export function ConnectionCell({
29-
ids: items,
29+
ids: items = [],
3030
type,
3131
disabled = false,
3232
className,

‎static/app/components/workflowEngine/gridCell/index.stories.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@ import {Fragment} from 'react';
22

33
import type {GridColumnOrder} from 'sentry/components/gridEditable';
44
import GridEditable from 'sentry/components/gridEditable';
5-
import {
6-
type Action,
7-
ActionCell,
8-
} from 'sentry/components/workflowEngine/gridCell/actionCell';
5+
import {ActionCell} from 'sentry/components/workflowEngine/gridCell/actionCell';
96
import {
107
ConnectionCell,
118
type ConnectionCellProps,
@@ -25,9 +22,10 @@ import {
2522
type UserCellProps,
2623
} from 'sentry/components/workflowEngine/gridCell/userCell';
2724
import storyBook from 'sentry/stories/storyBook';
25+
import {ActionType} from 'sentry/types/workflowEngine/actions';
2826

2927
type ExampleAutomation = {
30-
action: Action[];
28+
action: ActionType[];
3129
creator: UserCellProps['user'];
3230
linkedItems: ConnectionCellProps;
3331
openIssues: number;
@@ -44,15 +42,15 @@ export default storyBook('Grid Cell Components', story => {
4442
projectId: '1',
4543
link: '/issues/monitors/1',
4644
},
47-
action: ['slack'],
45+
action: [ActionType.SLACK],
4846
timeAgo: new Date(),
4947
linkedItems: {
5048
ids: ['abc123'],
5149
type: 'workflow',
5250
},
5351
openIssues: 3,
5452
creator: '1',
55-
type: 'trace',
53+
type: 'uptime',
5654
},
5755
{
5856
title: {
@@ -61,7 +59,7 @@ export default storyBook('Grid Cell Components', story => {
6159
details: ['transaction.duration', '2s warn, 2.5s critical threshold'],
6260
link: '/issues/monitors/2',
6361
},
64-
action: ['discord'],
62+
action: [ActionType.DISCORD],
6563
timeAgo: new Date(Date.now() - 2 * 60 * 60 * 1000),
6664
linkedItems: {
6765
ids: ['abc123', 'def456', 'ghi789'],
@@ -78,7 +76,7 @@ export default storyBook('Grid Cell Components', story => {
7876
details: ['Every hour'],
7977
link: '/issues/monitors/3',
8078
},
81-
action: ['email'],
79+
action: [ActionType.EMAIL],
8280
timeAgo: new Date(Date.now() - 25 * 60 * 60 * 1000),
8381
linkedItems: {
8482
ids: ['abc123', 'def456'],
@@ -95,9 +93,9 @@ export default storyBook('Grid Cell Components', story => {
9593
link: '/issues/monitors/4',
9694
disabled: true,
9795
},
98-
action: ['slack', 'discord', 'email'],
96+
action: [ActionType.SLACK, ActionType.DISCORD, ActionType.EMAIL],
9997
creator: 'sentry',
100-
type: 'errors',
98+
type: 'uptime',
10199
timeAgo: null,
102100
linkedItems: {
103101
ids: [],

‎static/app/components/workflowEngine/layout/actions.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import {createContext, useContext} from 'react';
22

3-
import {ButtonBar} from 'sentry/components/core/button/buttonBar';
3+
import {Flex} from 'sentry/components/container/flex';
44
import {HeaderActions} from 'sentry/components/layouts/thirds';
5+
import {space} from 'sentry/styles/space';
56

67
const ActionContext = createContext<React.ReactNode | undefined>(undefined);
78

@@ -26,9 +27,7 @@ export function ActionsFromContext() {
2627
}
2728
return (
2829
<HeaderActions>
29-
<ButtonBar merged={false} gap={1}>
30-
{actions}
31-
</ButtonBar>
30+
<Flex gap={space(1)}>{actions}</Flex>
3231
</HeaderActions>
3332
);
3433
}

‎static/app/components/workflowEngine/ui/container.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const Container = styled('div')`
77
flex-direction: column;
88
gap: ${space(2)};
99
justify-content: flex-start;
10-
background-color: ${p => p.theme.backgroundSecondary};
10+
background-color: ${p => p.theme.background};
1111
border: 1px solid ${p => p.theme.translucentBorder};
1212
border-radius: ${p => p.theme.borderRadius};
1313
padding: ${space(1.5)};

‎static/app/components/workflowEngine/ui/footer.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {space} from 'sentry/styles/space';
55
export const StickyFooter = styled('div')`
66
position: sticky;
77
margin-top: auto;
8+
margin-bottom: -56px;
89
bottom: 0;
910
right: 0;
1011
width: 100%;

‎static/app/components/workflowEngine/ui/section.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,28 @@ import {space} from 'sentry/styles/space';
66
type SectionProps = {
77
children: React.ReactNode;
88
title: string;
9+
description?: string;
910
};
1011

11-
export default function Section({children, title}: SectionProps) {
12+
export default function Section({children, title, description}: SectionProps) {
1213
return (
1314
<Flex column gap={space(1)}>
1415
<SectionHeading>{title}</SectionHeading>
16+
{description && <SectionDescription>{description}</SectionDescription>}
1517
{children}
1618
</Flex>
1719
);
1820
}
1921

20-
const SectionHeading = styled('h4')`
22+
export const SectionHeading = styled('h4')`
23+
font-size: ${p => p.theme.fontSizeLarge};
24+
font-weight: ${p => p.theme.fontWeightBold};
25+
margin: 0;
26+
`;
27+
28+
export const SectionDescription = styled('p')`
2129
font-size: ${p => p.theme.fontSizeMedium};
30+
font-weight: ${p => p.theme.fontWeightNormal};
31+
color: ${p => p.theme.subText};
2232
margin: 0;
2333
`;

‎static/app/plugins/components/pluginIcon.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const PLUGIN_ICONS = {
6969
} satisfies Record<string, string>;
7070

7171
export interface PluginIconProps extends React.RefAttributes<HTMLDivElement> {
72-
pluginId: string | keyof typeof PLUGIN_ICONS;
72+
pluginId: keyof typeof PLUGIN_ICONS | (string & {});
7373
/**
7474
* @default 20
7575
*/

‎static/app/types/workflowEngine/automations.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type {DataConditionGroup} from 'sentry/types/workflowEngine/dataConditions';
2+
3+
export interface NewAutomation {
4+
actionFilters: DataConditionGroup[];
5+
detectorIds: string[];
6+
name: string;
7+
triggers: DataConditionGroup;
8+
disabled?: boolean;
9+
}
10+
11+
export interface Automation extends Readonly<NewAutomation> {
12+
readonly id: string;
13+
readonly lastTriggered: Date;
14+
}

‎static/app/types/workflowEngine/detectors.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ import type {
44
} from 'sentry/types/workflowEngine/dataConditions';
55

66
export type DetectorType =
7-
| 'metric'
7+
| 'crons'
88
| 'errors'
9+
| 'metric'
910
| 'performance'
10-
| 'trace'
1111
| 'replay'
12+
| 'trace'
1213
| 'uptime';
1314

1415
interface NewDetector {

‎static/app/views/automations/components/automationForm.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,45 @@ export default function AutomationForm() {
3838
const title = useDocumentTitle();
3939
const {state, actions} = useAutomationBuilderReducer();
4040
const [model] = useState(() => new FormModel());
41+
const [monitor1Connected, setMonitor1Connected] = useState(true);
42+
const [monitor2Connected, setMonitor2Connected] = useState(true);
43+
44+
const data: MonitorsData[] = [
45+
{
46+
name: {
47+
name: 'Error Grouping',
48+
project: {
49+
slug: 'javascript',
50+
platform: 'javascript',
51+
},
52+
link: '/issues/1',
53+
},
54+
lastIssue: {shortId: 'JAVASCRIPT-SHGH', platform: 'javascript'},
55+
type: 'errors',
56+
createdBy: 'sentry',
57+
connect: {connected: monitor1Connected, toggleConnected: setMonitor1Connected},
58+
},
59+
{
60+
name: {
61+
name: 'Error Grouping',
62+
project: {
63+
slug: 'javascript',
64+
platform: 'javascript',
65+
},
66+
link: '/issues/1',
67+
},
68+
lastIssue: {shortId: 'JAVASCRIPT-SHGH', platform: 'javascript'},
69+
type: 'metric',
70+
createdBy: {
71+
email: 'miahsu@sentry.io',
72+
name: 'Mia Hsu',
73+
username: 'f4ea91ef8dc34fe8a54b3732030fbf7b',
74+
id: '3286015',
75+
ip_address: '1.1.1.1',
76+
},
77+
connect: {connected: monitor2Connected, toggleConnected: setMonitor2Connected},
78+
},
79+
];
4180

4281
useEffect(() => {
4382
model.setValue('name', title);

0 commit comments

Comments
 (0)