chore: Disable transactions dataset in widget builder (#95440)

Disable transaction dataset in widget builder. This is feature flagged.
Disabling edits on existing transaction widgets in a follow up.

Author: shruthilayaj

static/app/components/forms/controls/radioGroup.tsx

@@ -31,6 +31,7 @@ interface BaseRadioGroupProps<C extends string> {
    * Switch the radio items to flow left to right, instead of vertically.
    */
   orientInline?: boolean;
+  tooltipIsHoverable?: boolean;
   tooltipPosition?: PopperProps<any>['placement'];
 }
 
@@ -59,6 +60,7 @@ function RadioGroup<C extends string>({
   onChange,
   orientInline,
   tooltipPosition,
+  tooltipIsHoverable,
   ...props
 }: RadioGroupProps<C>) {
   return (
@@ -84,6 +86,7 @@ function RadioGroup<C extends string>({
             disabled={!disabledChoiceReason}
             title={disabledChoiceReason}
             position={tooltipPosition}
+            isHoverable={tooltipIsHoverable}
           >
             <RadioLineItem index={index} aria-checked={value === id} disabled={disabled}>
               <Radio

static/app/views/dashboards/widgetBuilder/buildSteps/dataSetStep.tsx

@@ -87,6 +87,12 @@ export function DataSetStep({
   if (hasDatasetSelectorFeature) {
     // TODO: Finalize description copy
     datasetChoices.set(DataSet.ERRORS, t('Errors (TypeError, InvalidSearchQuery, etc)'));
+    if (organization.features.includes('discover-saved-queries-deprecation')) {
+      disabledChoices.push([
+        DataSet.TRANSACTIONS,
+        t('This dataset is is no longer supported. Please use the Spans dataset.'),
+      ]);
+    }
     datasetChoices.set(DataSet.TRANSACTIONS, t('Transactions'));
   }
 

static/app/views/dashboards/widgetBuilder/components/datasetSelector.spec.tsx

@@ -46,4 +46,81 @@ describe('DatasetSelector', function () {
       expect.anything()
     );
   });
+
+  it('disables transactions dataset when discover-saved-queries-deprecation feature is enabled', async function () {
+    const mockNavigate = jest.fn();
+    mockUseNavigate.mockReturnValue(mockNavigate);
+
+    const organizationWithDeprecation = OrganizationFixture({
+      features: ['discover-saved-queries-deprecation'],
+    });
+
+    render(
+      <WidgetBuilderProvider>
+        <DatasetSelector />
+      </WidgetBuilderProvider>,
+      {
+        router,
+        organization: organizationWithDeprecation,
+        deprecatedRouterMocks: true,
+      }
+    );
+
+    const transactionsRadio = screen.getByRole('radio', {name: /transactions/i});
+    expect(transactionsRadio).toBeDisabled();
+
+    // Hover on the disabled transactions dataset to show tooltip
+    await userEvent.hover(transactionsRadio);
+
+    expect(
+      await screen.findByText(/This dataset is is no longer supported./i)
+    ).toBeInTheDocument();
+
+    // Click on the "Spans" link in the tooltip
+    const spansLink = screen.getByRole('link', {name: 'Spans'});
+    await userEvent.click(spansLink);
+
+    // Verify navigation to spans dataset
+    expect(mockNavigate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...router.location,
+        query: expect.objectContaining({dataset: 'spans'}),
+      }),
+      expect.anything()
+    );
+  });
+
+  it('enables transactions dataset when discover-saved-queries-deprecation feature is disabled', async function () {
+    const mockNavigate = jest.fn();
+    mockUseNavigate.mockReturnValue(mockNavigate);
+
+    const organizationWithoutDeprecation = OrganizationFixture({
+      features: [], // No discover-saved-queries-deprecation feature
+    });
+
+    render(
+      <WidgetBuilderProvider>
+        <DatasetSelector />
+      </WidgetBuilderProvider>,
+      {
+        router,
+        organization: organizationWithoutDeprecation,
+        deprecatedRouterMocks: true,
+      }
+    );
+
+    const transactionsRadio = screen.getByRole('radio', {name: /transactions/i});
+    expect(transactionsRadio).toBeEnabled();
+
+    // Verify transactions dataset can be selected
+    await userEvent.click(transactionsRadio);
+
+    expect(mockNavigate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...router.location,
+        query: expect.objectContaining({dataset: 'transaction-like'}),
+      }),
+      expect.anything()
+    );
+  });
 });

static/app/views/dashboards/widgetBuilder/components/datasetSelector.tsx

@@ -2,7 +2,12 @@ import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
-import RadioGroup, {type RadioOption} from 'sentry/components/forms/controls/radioGroup';
+import {Link} from 'sentry/components/core/link';
+import type {
+  RadioGroupProps,
+  RadioOption,
+} from 'sentry/components/forms/controls/radioGroup';
+import RadioGroup from 'sentry/components/forms/controls/radioGroup';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -15,16 +20,37 @@ import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/con
 import {useCacheBuilderState} from 'sentry/views/dashboards/widgetBuilder/hooks/useCacheBuilderState';
 import useDashboardWidgetSource from 'sentry/views/dashboards/widgetBuilder/hooks/useDashboardWidgetSource';
 import useIsEditingWidget from 'sentry/views/dashboards/widgetBuilder/hooks/useIsEditingWidget';
+import {useSegmentSpanWidgetState} from 'sentry/views/dashboards/widgetBuilder/hooks/useSegmentSpanWidgetState';
 
 function WidgetBuilderDatasetSelector() {
   const organization = useOrganization();
   const {state} = useWidgetBuilderContext();
   const source = useDashboardWidgetSource();
   const isEditing = useIsEditingWidget();
   const {cacheBuilderState, restoreOrSetBuilderState} = useCacheBuilderState();
+  const {setSegmentSpanBuilderState} = useSegmentSpanWidgetState();
+  const disabledChoices: RadioGroupProps<WidgetType>['disabledChoices'] = [];
 
   const datasetChoices: Array<RadioOption<WidgetType>> = [];
   datasetChoices.push([WidgetType.ERRORS, t('Errors')]);
+  if (organization.features.includes('discover-saved-queries-deprecation')) {
+    disabledChoices.push([
+      WidgetType.TRANSACTIONS,
+      tct('This dataset is is no longer supported. Please use the [spans] dataset.', {
+        spans: (
+          <Link
+            to=""
+            onClick={() => {
+              cacheBuilderState(state.dataset ?? WidgetType.ERRORS);
+              setSegmentSpanBuilderState();
+            }}
+          >
+            {t('Spans')}
+          </Link>
+        ),
+      }),
+    ]);
+  }
   datasetChoices.push([WidgetType.TRANSACTIONS, t('Transactions')]);
 
   if (organization.features.includes('visibility-explore-view')) {
@@ -66,6 +92,8 @@ function WidgetBuilderDatasetSelector() {
         label={t('Dataset')}
         value={state.dataset ?? WidgetType.ERRORS}
         choices={datasetChoices}
+        disabledChoices={disabledChoices}
+        tooltipIsHoverable
         onChange={(newDataset: WidgetType) => {
           // Set the current dataset state in local storage for recovery
           // when the user navigates back to this dataset

static/app/views/dashboards/widgetBuilder/hooks/useSegmentSpanWidgetState.tsx

@@ -0,0 +1,21 @@
+import {useCallback} from 'react';
+
+import {WidgetType} from 'sentry/views/dashboards/types';
+import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
+import {BuilderStateAction} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState';
+
+export function useSegmentSpanWidgetState() {
+  const {dispatch} = useWidgetBuilderContext();
+
+  const setSegmentSpanBuilderState = useCallback(() => {
+    const nextDataset = WidgetType.SPANS;
+    dispatch({
+      type: BuilderStateAction.SET_STATE,
+      payload: {dataset: nextDataset, query: ['is_transaction:true']},
+    });
+  }, [dispatch]);
+
+  return {
+    setSegmentSpanBuilderState,
+  };
+}