Skip to content

Commit 3bfd308

Browse files
ameliahsuameliahsu
authored
feat(aci): add subfilters list to remaining frequency conditions (#94621)
create/edit view <img width="1062" alt="Screenshot 2025-06-30 at 9 58 42 AM" src="https://github.com/user-attachments/assets/0bd092a4-3f1c-418e-9779-b9e1a8d4fec0" /> details view <img width="342" alt="Screenshot 2025-06-30 at 9 59 18 AM" src="https://github.com/user-attachments/assets/98624a70-8440-4536-aa12-55dd230c5379" />
1 parent 577385f commit 3bfd308

File tree

2 files changed

+122
-46
lines changed

2 files changed

+122
-46
lines changed

‎static/app/views/automations/components/actionFilters/eventUniqueUserFrequency.tsx

Lines changed: 62 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import {RowLine} from 'sentry/components/workflowEngine/form/automationBuilderRowLine';
12
import {AutomationBuilderSelect} from 'sentry/components/workflowEngine/form/automationBuilderSelect';
2-
import {tct} from 'sentry/locale';
3+
import {ConditionBadge} from 'sentry/components/workflowEngine/ui/conditionBadge';
4+
import {t, tct} from 'sentry/locale';
35
import type {SelectValue} from 'sentry/types/core';
46
import type {DataCondition} from 'sentry/types/workflowEngine/dataConditions';
57
import {DataConditionType} from 'sentry/types/workflowEngine/dataConditions';
@@ -11,45 +13,83 @@ import {
1113
COMPARISON_INTERVAL_CHOICES,
1214
INTERVAL_CHOICES,
1315
} from 'sentry/views/automations/components/actionFilters/constants';
16+
import {
17+
SubfilterDetailsList,
18+
SubfiltersList,
19+
} from 'sentry/views/automations/components/actionFilters/subfiltersList';
1420
import {useDataConditionNodeContext} from 'sentry/views/automations/components/dataConditionNodes';
1521

1622
export function EventUniqueUserFrequencyCountDetails({
1723
condition,
1824
}: {
1925
condition: DataCondition;
2026
}) {
21-
return tct('Number of users affected by an issue is more than [value] [interval]', {
22-
value: condition.comparison.value,
23-
interval:
24-
INTERVAL_CHOICES.find(choice => choice.value === condition.comparison.interval)
25-
?.label || condition.comparison.interval,
26-
});
27+
const hasSubfilters = condition.comparison.filters?.length > 0;
28+
return (
29+
<div>
30+
{tct(
31+
'Number of users affected by an issue is more than [value] [interval] [where]',
32+
{
33+
value: condition.comparison.value,
34+
interval:
35+
INTERVAL_CHOICES.find(
36+
choice => choice.value === condition.comparison.interval
37+
)?.label || condition.comparison.interval,
38+
where: hasSubfilters ? t('where') : null,
39+
}
40+
)}
41+
{hasSubfilters && (
42+
<SubfilterDetailsList subfilters={condition.comparison.filters} />
43+
)}
44+
</div>
45+
);
2746
}
2847

2948
export function EventUniqueUserFrequencyPercentDetails({
3049
condition,
3150
}: {
3251
condition: DataCondition;
3352
}) {
34-
return tct(
35-
'Number of users affected by an issue is [value]% higher [interval] compared to [comparison_interval]',
36-
{
37-
value: condition.comparison.value,
38-
interval:
39-
INTERVAL_CHOICES.find(choice => choice.value === condition.comparison.interval)
40-
?.label || condition.comparison.interval,
41-
comparison_interval:
42-
COMPARISON_INTERVAL_CHOICES.find(
43-
choice => choice.value === condition.comparison.comparison_interval
44-
)?.label || condition.comparison.comparison_interval,
45-
}
53+
const hasSubfilters = condition.comparison.filters?.length > 0;
54+
return (
55+
<div>
56+
{tct(
57+
'Number of users affected by an issue is [value]% higher [interval] compared to [comparison_interval] [where]',
58+
{
59+
value: condition.comparison.value,
60+
interval:
61+
INTERVAL_CHOICES.find(
62+
choice => choice.value === condition.comparison.interval
63+
)?.label || condition.comparison.interval,
64+
comparison_interval:
65+
COMPARISON_INTERVAL_CHOICES.find(
66+
choice => choice.value === condition.comparison.comparison_interval
67+
)?.label || condition.comparison.comparison_interval,
68+
where: hasSubfilters ? t('where') : null,
69+
}
70+
)}
71+
{hasSubfilters && (
72+
<SubfilterDetailsList subfilters={condition.comparison.filters} />
73+
)}
74+
</div>
4675
);
4776
}
4877

4978
export function EventUniqueUserFrequencyNode() {
50-
return tct('Number of users affected by an issue is [select]', {
51-
select: <ComparisonTypeField />,
52-
});
79+
const {condition} = useDataConditionNodeContext();
80+
const hasSubfilters = condition.comparison.filters?.length > 0;
81+
82+
return (
83+
<div>
84+
<RowLine>
85+
{tct('Number of users affected by an issue is [select] [where]', {
86+
select: <ComparisonTypeField />,
87+
where: hasSubfilters ? <ConditionBadge>{t('Where')}</ConditionBadge> : null,
88+
})}
89+
</RowLine>
90+
<SubfiltersList />
91+
</div>
92+
);
5393
}
5494

5595
function ComparisonTypeField() {

‎static/app/views/automations/components/actionFilters/percentSessions.tsx

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import {RowLine} from 'sentry/components/workflowEngine/form/automationBuilderRowLine';
12
import {AutomationBuilderSelect} from 'sentry/components/workflowEngine/form/automationBuilderSelect';
2-
import {tct} from 'sentry/locale';
3+
import {ConditionBadge} from 'sentry/components/workflowEngine/ui/conditionBadge';
4+
import {t, tct} from 'sentry/locale';
35
import type {SelectValue} from 'sentry/types/core';
46
import type {DataCondition} from 'sentry/types/workflowEngine/dataConditions';
57
import {DataConditionType} from 'sentry/types/workflowEngine/dataConditions';
@@ -11,40 +13,74 @@ import {
1113
COMPARISON_INTERVAL_CHOICES,
1214
INTERVAL_CHOICES,
1315
} from 'sentry/views/automations/components/actionFilters/constants';
16+
import {
17+
SubfilterDetailsList,
18+
SubfiltersList,
19+
} from 'sentry/views/automations/components/actionFilters/subfiltersList';
1420
import {useDataConditionNodeContext} from 'sentry/views/automations/components/dataConditionNodes';
1521

1622
export function PercentSessionsCountDetails({condition}: {condition: DataCondition}) {
17-
return tct(
18-
'Percentage of sessions affected by an issue is more than [value] [interval]',
19-
{
20-
value: condition.comparison.value,
21-
interval:
22-
INTERVAL_CHOICES.find(choice => choice.value === condition.comparison.interval)
23-
?.label || condition.comparison.interval,
24-
}
23+
const hasSubfilters = condition.comparison.filters?.length > 0;
24+
return (
25+
<div>
26+
{tct(
27+
'Percentage of sessions affected by an issue is more than [value] [interval] [where]',
28+
{
29+
value: condition.comparison.value,
30+
interval:
31+
INTERVAL_CHOICES.find(
32+
choice => choice.value === condition.comparison.interval
33+
)?.label || condition.comparison.interval,
34+
where: hasSubfilters ? t('where') : null,
35+
}
36+
)}
37+
{hasSubfilters && (
38+
<SubfilterDetailsList subfilters={condition.comparison.filters} />
39+
)}
40+
</div>
2541
);
2642
}
2743

2844
export function PercentSessionsPercentDetails({condition}: {condition: DataCondition}) {
29-
return tct(
30-
'Percentage of sessions affected by an issue is [value]% higher [interval] compared to [comparison_interval]',
31-
{
32-
value: condition.comparison.value,
33-
interval:
34-
INTERVAL_CHOICES.find(choice => choice.value === condition.comparison.interval)
35-
?.label || condition.comparison.interval,
36-
comparison_interval:
37-
COMPARISON_INTERVAL_CHOICES.find(
38-
choice => choice.value === condition.comparison.comparison_interval
39-
)?.label || condition.comparison.comparison_interval,
40-
}
45+
const hasSubfilters = condition.comparison.filters?.length > 0;
46+
return (
47+
<div>
48+
{tct(
49+
'Percentage of sessions affected by an issue is [value]% higher [interval] compared to [comparison_interval] [where]',
50+
{
51+
value: condition.comparison.value,
52+
interval:
53+
INTERVAL_CHOICES.find(
54+
choice => choice.value === condition.comparison.interval
55+
)?.label || condition.comparison.interval,
56+
comparison_interval:
57+
COMPARISON_INTERVAL_CHOICES.find(
58+
choice => choice.value === condition.comparison.comparison_interval
59+
)?.label || condition.comparison.comparison_interval,
60+
where: hasSubfilters ? t('where') : null,
61+
}
62+
)}
63+
{hasSubfilters && (
64+
<SubfilterDetailsList subfilters={condition.comparison.filters} />
65+
)}
66+
</div>
4167
);
4268
}
4369

4470
export function PercentSessionsNode() {
45-
return tct('Percentage of sessions affected by an issue is [select]', {
46-
select: <ComparisonTypeField />,
47-
});
71+
const {condition} = useDataConditionNodeContext();
72+
const hasSubfilters = condition.comparison.filters?.length > 0;
73+
return (
74+
<div>
75+
<RowLine>
76+
{tct('Percentage of sessions affected by an issue is [select] [where]', {
77+
select: <ComparisonTypeField />,
78+
where: hasSubfilters ? <ConditionBadge>{t('Where')}</ConditionBadge> : null,
79+
})}
80+
</RowLine>
81+
<SubfiltersList />
82+
</div>
83+
);
4884
}
4985

5086
function ComparisonTypeField() {

0 commit comments

Comments
 (0)