From 327f97562f4aa3f3cf7ad60910578ad6515e8ac4 Mon Sep 17 00:00:00 2001
From: edwardgou-sentry <83961295+edwardgou-sentry@users.noreply.github.com>
Date: Fri, 22 Nov 2024 15:40:57 -0500
Subject: [PATCH] feat(eap): Adds enabled prop to SpanTagsProvider (#81188)

Adds an `enabled` prop to `SpanTagsProvider` to control fetching tags
---
 .../alerts/rules/metric/eapField.spec.tsx     |  14 +-
 .../views/alerts/rules/metric/eapField.tsx    |  12 +-
 .../rules/metric/ruleConditionsForm.tsx       | 306 +++++++++---------
 .../filterResultsStep/spansSearchBar.spec.tsx |   2 +-
 .../views/dashboards/widgetBuilder/index.tsx  |   5 +-
 .../widgetBuilder/widgetBuilder.spec.tsx      |   2 +-
 static/app/views/explore/content.tsx          |   2 +-
 .../explore/contexts/spanTagsContext.tsx      |   9 +-
 .../views/explore/hooks/useGroupBys.spec.tsx  |   2 +-
 .../explore/hooks/useResultsMode.spec.tsx     |   2 +-
 .../app/views/explore/toolbar/index.spec.tsx  |   8 +-
 11 files changed, 188 insertions(+), 176 deletions(-)

diff --git a/static/app/views/alerts/rules/metric/eapField.spec.tsx b/static/app/views/alerts/rules/metric/eapField.spec.tsx
index 7960443457f89d..55ed3e3ea220ec 100644
--- a/static/app/views/alerts/rules/metric/eapField.spec.tsx
+++ b/static/app/views/alerts/rules/metric/eapField.spec.tsx
@@ -2,7 +2,9 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
+import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import EAPField from 'sentry/views/alerts/rules/metric/eapField';
+import {SpanTagsProvider} from 'sentry/views/explore/contexts/spanTagsContext';
 
 describe('EAPField', () => {
   const organization = OrganizationFixture();
@@ -16,7 +18,11 @@ describe('EAPField', () => {
   });
 
   it('renders', () => {
-    render(<EAPField aggregate={'count(span.duration)'} onChange={() => {}} />);
+    render(
+      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
+        <EAPField aggregate={'count(span.duration)'} onChange={() => {}} />
+      </SpanTagsProvider>
+    );
     expect(fieldsMock).toHaveBeenCalledWith(
       `/organizations/${organization.slug}/spans/fields/`,
       expect.objectContaining({
@@ -35,7 +41,11 @@ describe('EAPField', () => {
 
   it('should call onChange with the new aggregate string when switching aggregates', async () => {
     const onChange = jest.fn();
-    render(<EAPField aggregate={'count(span.duration)'} onChange={onChange} />);
+    render(
+      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
+        <EAPField aggregate={'count(span.duration)'} onChange={onChange} />
+      </SpanTagsProvider>
+    );
     expect(fieldsMock).toHaveBeenCalledWith(
       `/organizations/${organization.slug}/spans/fields/`,
       expect.objectContaining({
diff --git a/static/app/views/alerts/rules/metric/eapField.tsx b/static/app/views/alerts/rules/metric/eapField.tsx
index 908a4983a39ae0..1a858c6543dc73 100644
--- a/static/app/views/alerts/rules/metric/eapField.tsx
+++ b/static/app/views/alerts/rules/metric/eapField.tsx
@@ -5,16 +5,12 @@ import SelectControl from 'sentry/components/forms/controls/selectControl';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {parseFunction} from 'sentry/utils/discover/fields';
-import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {ALLOWED_EXPLORE_VISUALIZE_AGGREGATES} from 'sentry/utils/fields';
 import {
   DEFAULT_EAP_FIELD,
   DEFAULT_EAP_METRICS_ALERT_FIELD,
 } from 'sentry/utils/metrics/mri';
-import {
-  SpanTagsProvider,
-  useSpanTags,
-} from 'sentry/views/explore/contexts/spanTagsContext';
+import {useSpanTags} from 'sentry/views/explore/contexts/spanTagsContext';
 
 interface Props {
   aggregate: string;
@@ -30,11 +26,7 @@ const OPERATIONS = [
 ];
 
 function EAPFieldWrapper({aggregate, onChange}: Props) {
-  return (
-    <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP}>
-      <EAPField aggregate={aggregate} onChange={onChange} />
-    </SpanTagsProvider>
-  );
+  return <EAPField aggregate={aggregate} onChange={onChange} />;
 }
 
 function EAPField({aggregate, onChange}: Props) {
diff --git a/static/app/views/alerts/rules/metric/ruleConditionsForm.tsx b/static/app/views/alerts/rules/metric/ruleConditionsForm.tsx
index e75b3cc13dd201..84cc270d232cc0 100644
--- a/static/app/views/alerts/rules/metric/ruleConditionsForm.tsx
+++ b/static/app/views/alerts/rules/metric/ruleConditionsForm.tsx
@@ -678,73 +678,79 @@ class RuleConditionsForm extends PureComponent<Props, State> {
           </Fragment>
         ) : (
           <Fragment>
-            {isExtrapolatedChartData && (
-              <OnDemandMetricAlert
-                message={t(
-                  'The chart data above is an estimate based on the stored transactions that match the filters specified.'
-                )}
-              />
-            )}
-            {hasActivatedAlerts && this.renderMonitorTypeSelect()}
-            {!isErrorMigration && this.renderInterval()}
-            <StyledListItem>{t('Filter events')}</StyledListItem>
-            <FormRow noMargin columns={1 + (allowChangeEventTypes ? 1 : 0) + 1}>
-              {this.renderProjectSelector()}
-              <SelectField
-                name="environment"
-                placeholder={t('All Environments')}
-                style={{
-                  ...this.formElemBaseStyle,
-                  minWidth: 230,
-                  flex: 1,
-                }}
-                styles={{
-                  singleValue: (base: any) => ({
-                    ...base,
-                  }),
-                  option: (base: any) => ({
-                    ...base,
-                  }),
-                }}
-                options={environmentOptions}
-                isDisabled={
-                  disabled || this.state.environments === null || isErrorMigration
-                }
-                isClearable
-                inline={false}
-                flexibleControlStateSize
-              />
-              {allowChangeEventTypes && this.renderEventTypeFilter()}
-            </FormRow>
-            <FormRow noMargin>
-              <FormField
-                name="query"
-                inline={false}
-                style={{
-                  ...this.formElemBaseStyle,
-                  flex: '6 0 500px',
-                }}
-                flexibleControlStateSize
-              >
-                {({onChange, onBlur, initialData, value}) => {
-                  return (hasCustomMetrics(organization) &&
-                    alertType === 'custom_metrics') ||
-                    alertType === 'insights_metrics' ? (
-                    <MetricSearchBar
-                      mri={getMRI(aggregate)}
-                      projectIds={[project.id]}
-                      placeholder={this.searchPlaceholder}
-                      query={initialData.query}
-                      defaultQuery={initialData?.query ?? ''}
-                      useFormWrapper={false}
-                      searchSource="alert_builder"
-                      onChange={query => {
-                        onFilterSearch(query, true);
-                        onChange(query, {});
-                      }}
-                    />
-                  ) : alertType === 'eap_metrics' ? (
-                    <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP}>
+            <SpanTagsProvider
+              dataset={DiscoverDatasets.SPANS_EAP}
+              enabled={
+                organization.features.includes('alerts-eap') &&
+                alertType === 'eap_metrics'
+              }
+            >
+              {isExtrapolatedChartData && (
+                <OnDemandMetricAlert
+                  message={t(
+                    'The chart data above is an estimate based on the stored transactions that match the filters specified.'
+                  )}
+                />
+              )}
+              {hasActivatedAlerts && this.renderMonitorTypeSelect()}
+              {!isErrorMigration && this.renderInterval()}
+              <StyledListItem>{t('Filter events')}</StyledListItem>
+              <FormRow noMargin columns={1 + (allowChangeEventTypes ? 1 : 0) + 1}>
+                {this.renderProjectSelector()}
+                <SelectField
+                  name="environment"
+                  placeholder={t('All Environments')}
+                  style={{
+                    ...this.formElemBaseStyle,
+                    minWidth: 230,
+                    flex: 1,
+                  }}
+                  styles={{
+                    singleValue: (base: any) => ({
+                      ...base,
+                    }),
+                    option: (base: any) => ({
+                      ...base,
+                    }),
+                  }}
+                  options={environmentOptions}
+                  isDisabled={
+                    disabled || this.state.environments === null || isErrorMigration
+                  }
+                  isClearable
+                  inline={false}
+                  flexibleControlStateSize
+                />
+                {allowChangeEventTypes && this.renderEventTypeFilter()}
+              </FormRow>
+              <FormRow noMargin>
+                <FormField
+                  name="query"
+                  inline={false}
+                  style={{
+                    ...this.formElemBaseStyle,
+                    flex: '6 0 500px',
+                  }}
+                  flexibleControlStateSize
+                >
+                  {({onChange, onBlur, initialData, value}) => {
+                    return (hasCustomMetrics(organization) &&
+                      alertType === 'custom_metrics') ||
+                      alertType === 'insights_metrics' ? (
+                      <MetricSearchBar
+                        mri={getMRI(aggregate)}
+                        projectIds={[project.id]}
+                        placeholder={this.searchPlaceholder}
+                        query={initialData.query}
+                        defaultQuery={initialData?.query ?? ''}
+                        useFormWrapper={false}
+                        searchSource="alert_builder"
+                        onChange={query => {
+                          onFilterSearch(query, true);
+                          onChange(query, {});
+                        }}
+                      />
+                    ) : alertType === 'eap_metrics' ? (
                       <SpanTagsContext.Consumer>
                         {tags => (
                           <EAPSpanSearchQueryBuilder
@@ -765,92 +771,92 @@ class RuleConditionsForm extends PureComponent<Props, State> {
                           />
                         )}
                       </SpanTagsContext.Consumer>
-                    </SpanTagsProvider>
-                  ) : (
-                    <SearchContainer>
-                      <SearchQueryBuilder
-                        initialQuery={initialData?.query ?? ''}
-                        getTagValues={this.getEventFieldValues}
-                        placeholder={this.searchPlaceholder}
-                        searchSource="alert_builder"
-                        filterKeys={filterKeys}
-                        disabled={disabled || isErrorMigration}
-                        onChange={onChange}
-                        invalidMessages={{
-                          [InvalidReason.WILDCARD_NOT_ALLOWED]: t(
-                            'The wildcard operator is not supported here.'
-                          ),
-                          [InvalidReason.FREE_TEXT_NOT_ALLOWED]: t(
-                            'Free text search is not allowed. If you want to partially match transaction names, use glob patterns like "transaction:*transaction-name*"'
-                          ),
-                        }}
-                        onSearch={query => {
-                          onFilterSearch(query, true);
-                          onChange(query, {});
-                        }}
-                        onBlur={(query, {parsedQuery}) => {
-                          onFilterSearch(query, parsedQuery);
-                          onBlur(query);
-                        }}
-                        // We only need strict validation for Transaction queries, everything else is fine
-                        disallowUnsupportedFilters={
-                          organization.features.includes('alert-allow-indexed') ||
-                          (hasOnDemandMetricAlertFeature(organization) &&
-                            isOnDemandQueryString(value))
-                            ? false
-                            : dataset === Dataset.GENERIC_METRICS
-                        }
-                      />
-                      {isExtrapolatedChartData && isOnDemandQueryString(value) && (
-                        <OnDemandWarningIcon
-                          color="gray500"
-                          msg={tct(
-                            `We don’t routinely collect metrics from [fields]. However, we’ll do so [strong:once this alert has been saved.]`,
-                            {
-                              fields: (
-                                <strong>
-                                  {getOnDemandKeys(value)
-                                    .map(key => `"${key}"`)
-                                    .join(', ')}
-                                </strong>
-                              ),
-                              strong: <strong />,
-                            }
-                          )}
+                    ) : (
+                      <SearchContainer>
+                        <SearchQueryBuilder
+                          initialQuery={initialData?.query ?? ''}
+                          getTagValues={this.getEventFieldValues}
+                          placeholder={this.searchPlaceholder}
+                          searchSource="alert_builder"
+                          filterKeys={filterKeys}
+                          disabled={disabled || isErrorMigration}
+                          onChange={onChange}
+                          invalidMessages={{
+                            [InvalidReason.WILDCARD_NOT_ALLOWED]: t(
+                              'The wildcard operator is not supported here.'
+                            ),
+                            [InvalidReason.FREE_TEXT_NOT_ALLOWED]: t(
+                              'Free text search is not allowed. If you want to partially match transaction names, use glob patterns like "transaction:*transaction-name*"'
+                            ),
+                          }}
+                          onSearch={query => {
+                            onFilterSearch(query, true);
+                            onChange(query, {});
+                          }}
+                          onBlur={(query, {parsedQuery}) => {
+                            onFilterSearch(query, parsedQuery);
+                            onBlur(query);
+                          }}
+                          // We only need strict validation for Transaction queries, everything else is fine
+                          disallowUnsupportedFilters={
+                            organization.features.includes('alert-allow-indexed') ||
+                            (hasOnDemandMetricAlertFeature(organization) &&
+                              isOnDemandQueryString(value))
+                              ? false
+                              : dataset === Dataset.GENERIC_METRICS
+                          }
                         />
-                      )}
-                    </SearchContainer>
-                  );
-                }}
-              </FormField>
-            </FormRow>
-            <FormRow noMargin>
-              <FormField
-                name="query"
-                inline={false}
-                style={{
-                  ...this.formElemBaseStyle,
-                  flex: '6 0 500px',
-                }}
-                flexibleControlStateSize
-              >
-                {args => {
-                  if (
-                    args.value?.includes('is:unresolved') &&
-                    comparisonType === AlertRuleComparisonType.DYNAMIC
-                  ) {
-                    return (
-                      <OnDemandMetricAlert
-                        message={t(
-                          "'is:unresolved' queries are not supported by Anomaly Detection alerts."
+                        {isExtrapolatedChartData && isOnDemandQueryString(value) && (
+                          <OnDemandWarningIcon
+                            color="gray500"
+                            msg={tct(
+                              `We don’t routinely collect metrics from [fields]. However, we’ll do so [strong:once this alert has been saved.]`,
+                              {
+                                fields: (
+                                  <strong>
+                                    {getOnDemandKeys(value)
+                                      .map(key => `"${key}"`)
+                                      .join(', ')}
+                                  </strong>
+                                ),
+                                strong: <strong />,
+                              }
+                            )}
+                          />
                         )}
-                      />
+                      </SearchContainer>
                     );
-                  }
-                  return null;
-                }}
-              </FormField>
-            </FormRow>
+                  }}
+                </FormField>
+              </FormRow>
+              <FormRow noMargin>
+                <FormField
+                  name="query"
+                  inline={false}
+                  style={{
+                    ...this.formElemBaseStyle,
+                    flex: '6 0 500px',
+                  }}
+                  flexibleControlStateSize
+                >
+                  {args => {
+                    if (
+                      args.value?.includes('is:unresolved') &&
+                      comparisonType === AlertRuleComparisonType.DYNAMIC
+                    ) {
+                      return (
+                        <OnDemandMetricAlert
+                          message={t(
+                            "'is:unresolved' queries are not supported by Anomaly Detection alerts."
+                          )}
+                        />
+                      );
+                    }
+                    return null;
+                  }}
+                </FormField>
+              </FormRow>
+            </SpanTagsProvider>
           </Fragment>
         )}
       </Fragment>
diff --git a/static/app/views/dashboards/widgetBuilder/buildSteps/filterResultsStep/spansSearchBar.spec.tsx b/static/app/views/dashboards/widgetBuilder/buildSteps/filterResultsStep/spansSearchBar.spec.tsx
index dda9e3a60a1024..0523c8e28182cf 100644
--- a/static/app/views/dashboards/widgetBuilder/buildSteps/filterResultsStep/spansSearchBar.spec.tsx
+++ b/static/app/views/dashboards/widgetBuilder/buildSteps/filterResultsStep/spansSearchBar.spec.tsx
@@ -18,7 +18,7 @@ function renderWithProvider({
   onSearch,
 }: ComponentProps<typeof SpansSearchBar>) {
   return render(
-    <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP}>
+    <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
       <SpansSearchBar widgetQuery={widgetQuery} onSearch={onSearch} />
     </SpanTagsProvider>
   );
diff --git a/static/app/views/dashboards/widgetBuilder/index.tsx b/static/app/views/dashboards/widgetBuilder/index.tsx
index 92db19f009051c..d6abe202ad7cf7 100644
--- a/static/app/views/dashboards/widgetBuilder/index.tsx
+++ b/static/app/views/dashboards/widgetBuilder/index.tsx
@@ -26,7 +26,10 @@ function WidgetBuilderContainer(props: WidgetBuilderProps) {
         </Layout.Page>
       )}
     >
-      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP}>
+      <SpanTagsProvider
+        dataset={DiscoverDatasets.SPANS_EAP}
+        enabled={organization.features.includes('dashboards-eap')}
+      >
         <WidgetBuilder
           {...props}
           organization={organization}
diff --git a/static/app/views/dashboards/widgetBuilder/widgetBuilder.spec.tsx b/static/app/views/dashboards/widgetBuilder/widgetBuilder.spec.tsx
index d953f67320ad63..795a6c563b3333 100644
--- a/static/app/views/dashboards/widgetBuilder/widgetBuilder.spec.tsx
+++ b/static/app/views/dashboards/widgetBuilder/widgetBuilder.spec.tsx
@@ -2656,7 +2656,7 @@ describe('WidgetBuilder', function () {
       });
       renderTestComponent({
         dashboard,
-        orgFeatures: [...defaultOrgFeatures],
+        orgFeatures: [...defaultOrgFeatures, 'dashboards-eap'],
         params: {
           widgetIndex: '0',
         },
diff --git a/static/app/views/explore/content.tsx b/static/app/views/explore/content.tsx
index 6a3969de0fb0ce..638cc7fbb0d5a7 100644
--- a/static/app/views/explore/content.tsx
+++ b/static/app/views/explore/content.tsx
@@ -149,7 +149,7 @@ export function ExploreContent(props: ExploreContentProps) {
   const [dataset] = useDataset();
 
   return (
-    <SpanTagsProvider dataset={dataset}>
+    <SpanTagsProvider dataset={dataset} enabled>
       <ExploreContentImpl {...props} />
     </SpanTagsProvider>
   );
diff --git a/static/app/views/explore/contexts/spanTagsContext.tsx b/static/app/views/explore/contexts/spanTagsContext.tsx
index 130916c037d46d..60396ff0fb5836 100644
--- a/static/app/views/explore/contexts/spanTagsContext.tsx
+++ b/static/app/views/explore/contexts/spanTagsContext.tsx
@@ -21,20 +21,21 @@ export const SpanTagsContext = createContext<TypedSpanTags | undefined>(undefine
 interface SpanTagsProviderProps {
   children: React.ReactNode;
   dataset: DiscoverDatasets;
+  enabled: boolean;
 }
 
-export function SpanTagsProvider({children, dataset}: SpanTagsProviderProps) {
+export function SpanTagsProvider({children, dataset, enabled}: SpanTagsProviderProps) {
   const {data: indexedTags} = useSpanFieldCustomTags({
-    enabled: dataset === DiscoverDatasets.SPANS_INDEXED,
+    enabled: dataset === DiscoverDatasets.SPANS_INDEXED && enabled,
   });
 
   const numberTags: TagCollection = useTypedSpanTags({
-    enabled: dataset === DiscoverDatasets.SPANS_EAP,
+    enabled: dataset === DiscoverDatasets.SPANS_EAP && enabled,
     type: 'number',
   });
 
   const stringTags: TagCollection = useTypedSpanTags({
-    enabled: dataset === DiscoverDatasets.SPANS_EAP,
+    enabled: dataset === DiscoverDatasets.SPANS_EAP && enabled,
     type: 'string',
   });
 
diff --git a/static/app/views/explore/hooks/useGroupBys.spec.tsx b/static/app/views/explore/hooks/useGroupBys.spec.tsx
index 93f21496f99efd..2bdbafaad4ea95 100644
--- a/static/app/views/explore/hooks/useGroupBys.spec.tsx
+++ b/static/app/views/explore/hooks/useGroupBys.spec.tsx
@@ -34,7 +34,7 @@ describe('useGroupBys', function () {
     }
 
     render(
-      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP}>
+      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
         <TestPage />
       </SpanTagsProvider>,
       {disableRouterMocks: true}
diff --git a/static/app/views/explore/hooks/useResultsMode.spec.tsx b/static/app/views/explore/hooks/useResultsMode.spec.tsx
index 92b8a7594c98ec..7b62332b3bd6b0 100644
--- a/static/app/views/explore/hooks/useResultsMode.spec.tsx
+++ b/static/app/views/explore/hooks/useResultsMode.spec.tsx
@@ -31,7 +31,7 @@ describe('useResultMode', function () {
     }
 
     render(
-      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP}>
+      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
         <TestPage />
       </SpanTagsProvider>,
       {disableRouterMocks: true}
diff --git a/static/app/views/explore/toolbar/index.spec.tsx b/static/app/views/explore/toolbar/index.spec.tsx
index 2239519d172c7b..920ef919b7c2b1 100644
--- a/static/app/views/explore/toolbar/index.spec.tsx
+++ b/static/app/views/explore/toolbar/index.spec.tsx
@@ -38,7 +38,7 @@ describe('ExploreToolbar', function () {
     }
 
     render(
-      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP}>
+      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
         <Component />
       </SpanTagsProvider>,
       {disableRouterMocks: true}
@@ -98,7 +98,7 @@ describe('ExploreToolbar', function () {
       return <ExploreToolbar />;
     }
     render(
-      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP}>
+      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
         <Component />
       </SpanTagsProvider>,
       {disableRouterMocks: true}
@@ -202,7 +202,7 @@ describe('ExploreToolbar', function () {
       return <ExploreToolbar />;
     }
     render(
-      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP}>
+      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
         <Component />
       </SpanTagsProvider>,
       {disableRouterMocks: true}
@@ -259,7 +259,7 @@ describe('ExploreToolbar', function () {
       return <ExploreToolbar />;
     }
     render(
-      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP}>
+      <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
         <Component />
       </SpanTagsProvider>,
       {disableRouterMocks: true}