From c90cf669a7bd3557b6c3b8c4b59f173f8ffc0f32 Mon Sep 17 00:00:00 2001
From: Mia Hsu <ameliahsu@gmail.com>
Date: Mon, 30 Jun 2025 09:55:12 -0700
Subject: [PATCH] feat(aci): add subfilters list to remaining frequency
 conditions

---
 .../eventUniqueUserFrequency.tsx              | 84 ++++++++++++++-----
 .../actionFilters/percentSessions.tsx         | 84 +++++++++++++------
 2 files changed, 122 insertions(+), 46 deletions(-)

diff --git a/static/app/views/automations/components/actionFilters/eventUniqueUserFrequency.tsx b/static/app/views/automations/components/actionFilters/eventUniqueUserFrequency.tsx
index 17ca23f7e90e87..f934f511a9d0a3 100644
--- a/static/app/views/automations/components/actionFilters/eventUniqueUserFrequency.tsx
+++ b/static/app/views/automations/components/actionFilters/eventUniqueUserFrequency.tsx
@@ -1,5 +1,7 @@
+import {RowLine} from 'sentry/components/workflowEngine/form/automationBuilderRowLine';
 import {AutomationBuilderSelect} from 'sentry/components/workflowEngine/form/automationBuilderSelect';
-import {tct} from 'sentry/locale';
+import {ConditionBadge} from 'sentry/components/workflowEngine/ui/conditionBadge';
+import {t, tct} from 'sentry/locale';
 import type {SelectValue} from 'sentry/types/core';
 import type {DataCondition} from 'sentry/types/workflowEngine/dataConditions';
 import {DataConditionType} from 'sentry/types/workflowEngine/dataConditions';
@@ -11,6 +13,10 @@ import {
   COMPARISON_INTERVAL_CHOICES,
   INTERVAL_CHOICES,
 } from 'sentry/views/automations/components/actionFilters/constants';
+import {
+  SubfilterDetailsList,
+  SubfiltersList,
+} from 'sentry/views/automations/components/actionFilters/subfiltersList';
 import {useDataConditionNodeContext} from 'sentry/views/automations/components/dataConditionNodes';
 
 export function EventUniqueUserFrequencyCountDetails({
@@ -18,12 +24,25 @@ export function EventUniqueUserFrequencyCountDetails({
 }: {
   condition: DataCondition;
 }) {
-  return tct('Number of users affected by an issue is more than [value] [interval]', {
-    value: condition.comparison.value,
-    interval:
-      INTERVAL_CHOICES.find(choice => choice.value === condition.comparison.interval)
-        ?.label || condition.comparison.interval,
-  });
+  const hasSubfilters = condition.comparison.filters?.length > 0;
+  return (
+    <div>
+      {tct(
+        'Number of users affected by an issue is more than [value] [interval] [where]',
+        {
+          value: condition.comparison.value,
+          interval:
+            INTERVAL_CHOICES.find(
+              choice => choice.value === condition.comparison.interval
+            )?.label || condition.comparison.interval,
+          where: hasSubfilters ? t('where') : null,
+        }
+      )}
+      {hasSubfilters && (
+        <SubfilterDetailsList subfilters={condition.comparison.filters} />
+      )}
+    </div>
+  );
 }
 
 export function EventUniqueUserFrequencyPercentDetails({
@@ -31,25 +50,46 @@ export function EventUniqueUserFrequencyPercentDetails({
 }: {
   condition: DataCondition;
 }) {
-  return tct(
-    'Number of users affected by an issue is [value]% higher [interval] compared to [comparison_interval]',
-    {
-      value: condition.comparison.value,
-      interval:
-        INTERVAL_CHOICES.find(choice => choice.value === condition.comparison.interval)
-          ?.label || condition.comparison.interval,
-      comparison_interval:
-        COMPARISON_INTERVAL_CHOICES.find(
-          choice => choice.value === condition.comparison.comparison_interval
-        )?.label || condition.comparison.comparison_interval,
-    }
+  const hasSubfilters = condition.comparison.filters?.length > 0;
+  return (
+    <div>
+      {tct(
+        'Number of users affected by an issue is [value]% higher [interval] compared to [comparison_interval] [where]',
+        {
+          value: condition.comparison.value,
+          interval:
+            INTERVAL_CHOICES.find(
+              choice => choice.value === condition.comparison.interval
+            )?.label || condition.comparison.interval,
+          comparison_interval:
+            COMPARISON_INTERVAL_CHOICES.find(
+              choice => choice.value === condition.comparison.comparison_interval
+            )?.label || condition.comparison.comparison_interval,
+          where: hasSubfilters ? t('where') : null,
+        }
+      )}
+      {hasSubfilters && (
+        <SubfilterDetailsList subfilters={condition.comparison.filters} />
+      )}
+    </div>
   );
 }
 
 export function EventUniqueUserFrequencyNode() {
-  return tct('Number of users affected by an issue is [select]', {
-    select: <ComparisonTypeField />,
-  });
+  const {condition} = useDataConditionNodeContext();
+  const hasSubfilters = condition.comparison.filters?.length > 0;
+
+  return (
+    <div>
+      <RowLine>
+        {tct('Number of users affected by an issue is [select] [where]', {
+          select: <ComparisonTypeField />,
+          where: hasSubfilters ? <ConditionBadge>{t('Where')}</ConditionBadge> : null,
+        })}
+      </RowLine>
+      <SubfiltersList />
+    </div>
+  );
 }
 
 function ComparisonTypeField() {
diff --git a/static/app/views/automations/components/actionFilters/percentSessions.tsx b/static/app/views/automations/components/actionFilters/percentSessions.tsx
index 8f98b6c152a538..c480044d7940cd 100644
--- a/static/app/views/automations/components/actionFilters/percentSessions.tsx
+++ b/static/app/views/automations/components/actionFilters/percentSessions.tsx
@@ -1,5 +1,7 @@
+import {RowLine} from 'sentry/components/workflowEngine/form/automationBuilderRowLine';
 import {AutomationBuilderSelect} from 'sentry/components/workflowEngine/form/automationBuilderSelect';
-import {tct} from 'sentry/locale';
+import {ConditionBadge} from 'sentry/components/workflowEngine/ui/conditionBadge';
+import {t, tct} from 'sentry/locale';
 import type {SelectValue} from 'sentry/types/core';
 import type {DataCondition} from 'sentry/types/workflowEngine/dataConditions';
 import {DataConditionType} from 'sentry/types/workflowEngine/dataConditions';
@@ -11,40 +13,74 @@ import {
   COMPARISON_INTERVAL_CHOICES,
   INTERVAL_CHOICES,
 } from 'sentry/views/automations/components/actionFilters/constants';
+import {
+  SubfilterDetailsList,
+  SubfiltersList,
+} from 'sentry/views/automations/components/actionFilters/subfiltersList';
 import {useDataConditionNodeContext} from 'sentry/views/automations/components/dataConditionNodes';
 
 export function PercentSessionsCountDetails({condition}: {condition: DataCondition}) {
-  return tct(
-    'Percentage of sessions affected by an issue is more than [value] [interval]',
-    {
-      value: condition.comparison.value,
-      interval:
-        INTERVAL_CHOICES.find(choice => choice.value === condition.comparison.interval)
-          ?.label || condition.comparison.interval,
-    }
+  const hasSubfilters = condition.comparison.filters?.length > 0;
+  return (
+    <div>
+      {tct(
+        'Percentage of sessions affected by an issue is more than [value] [interval] [where]',
+        {
+          value: condition.comparison.value,
+          interval:
+            INTERVAL_CHOICES.find(
+              choice => choice.value === condition.comparison.interval
+            )?.label || condition.comparison.interval,
+          where: hasSubfilters ? t('where') : null,
+        }
+      )}
+      {hasSubfilters && (
+        <SubfilterDetailsList subfilters={condition.comparison.filters} />
+      )}
+    </div>
   );
 }
 
 export function PercentSessionsPercentDetails({condition}: {condition: DataCondition}) {
-  return tct(
-    'Percentage of sessions affected by an issue is [value]% higher [interval] compared to [comparison_interval]',
-    {
-      value: condition.comparison.value,
-      interval:
-        INTERVAL_CHOICES.find(choice => choice.value === condition.comparison.interval)
-          ?.label || condition.comparison.interval,
-      comparison_interval:
-        COMPARISON_INTERVAL_CHOICES.find(
-          choice => choice.value === condition.comparison.comparison_interval
-        )?.label || condition.comparison.comparison_interval,
-    }
+  const hasSubfilters = condition.comparison.filters?.length > 0;
+  return (
+    <div>
+      {tct(
+        'Percentage of sessions affected by an issue is [value]% higher [interval] compared to [comparison_interval] [where]',
+        {
+          value: condition.comparison.value,
+          interval:
+            INTERVAL_CHOICES.find(
+              choice => choice.value === condition.comparison.interval
+            )?.label || condition.comparison.interval,
+          comparison_interval:
+            COMPARISON_INTERVAL_CHOICES.find(
+              choice => choice.value === condition.comparison.comparison_interval
+            )?.label || condition.comparison.comparison_interval,
+          where: hasSubfilters ? t('where') : null,
+        }
+      )}
+      {hasSubfilters && (
+        <SubfilterDetailsList subfilters={condition.comparison.filters} />
+      )}
+    </div>
   );
 }
 
 export function PercentSessionsNode() {
-  return tct('Percentage of sessions affected by an issue is [select]', {
-    select: <ComparisonTypeField />,
-  });
+  const {condition} = useDataConditionNodeContext();
+  const hasSubfilters = condition.comparison.filters?.length > 0;
+  return (
+    <div>
+      <RowLine>
+        {tct('Percentage of sessions affected by an issue is [select] [where]', {
+          select: <ComparisonTypeField />,
+          where: hasSubfilters ? <ConditionBadge>{t('Where')}</ConditionBadge> : null,
+        })}
+      </RowLine>
+      <SubfiltersList />
+    </div>
+  );
 }
 
 function ComparisonTypeField() {