fix(spans-migration): Lock down discover transactions tab completely (#95880)

nikkikapadia · web-flow · commit 10c9909e8543 · 2025-07-22T09:41:23.000-04:00
As part of the spans migration, we're locking down the transactions dataset in discover completely. This will not allow users to select the transactions dataset and save changes to existing transaction queries. I had to make changes to the `TabList.Item` component to allow passing in tooltip props so i can display the deprecation message. Closes [ENG-4633](https://linear.app/getsentry/issue/ENG-4633/lock-existing-discover-query-edit-and-transaction-tab)
diff --git a/static/app/components/core/tabs/item.tsx b/static/app/components/core/tabs/item.tsx
@@ -2,11 +2,14 @@ import {Item as _Item} from '@react-stately/collections';
 import type {ItemProps} from '@react-types/shared';
 import type {LocationDescriptor} from 'history';
 
+import type {TooltipProps} from 'sentry/components/core/tooltip';
+
 export interface TabListItemProps extends ItemProps<any> {
   key: string | number;
   disabled?: boolean;
   hidden?: boolean;
   to?: LocationDescriptor;
+  tooltip?: TooltipProps;
 }
 
 export const TabListItem = _Item as (props: TabListItemProps) => React.JSX.Element;
diff --git a/static/app/components/core/tabs/tab.tsx b/static/app/components/core/tabs/tab.tsx
@@ -9,6 +9,7 @@ import type {Node, Orientation} from '@react-types/shared';
 
 import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
 import {Link} from 'sentry/components/core/link';
+import {Tooltip, type TooltipProps} from 'sentry/components/core/tooltip';
 import {space} from 'sentry/styles/space';
 import {isChonkTheme, withChonk} from 'sentry/utils/theme/withChonk';
 
@@ -33,6 +34,7 @@ interface TabProps extends AriaTabProps {
   state: TabListState<any>;
   as?: React.ElementType;
   ref?: React.Ref<HTMLLIElement>;
+  tooltipProps?: TooltipProps;
   variant?: BaseTabProps['variant'];
 }
 
@@ -156,6 +158,7 @@ export function Tab({
   variant,
   size,
   as = 'li',
+  tooltipProps,
 }: TabProps) {
   const objectRef = useObjectRef(ref);
 
@@ -167,6 +170,28 @@ export function Tab({
 
   const {tabProps, isSelected} = useTab({key, isDisabled: hidden}, state, objectRef);
 
+  if (tooltipProps) {
+    return (
+      <Tooltip {...tooltipProps}>
+        <BaseTab
+          tabProps={tabProps}
+          isSelected={isSelected}
+          to={to}
+          hidden={hidden}
+          disabled={disabled}
+          orientation={orientation}
+          overflowing={overflowing}
+          ref={objectRef}
+          variant={variant}
+          as={as}
+          size={size}
+        >
+          {rendered}
+        </BaseTab>
+      </Tooltip>
+    );
+  }
+
   return (
     <BaseTab
       tabProps={tabProps}
diff --git a/static/app/components/core/tabs/tabList.tsx b/static/app/components/core/tabs/tabList.tsx
@@ -221,6 +221,7 @@ function BaseTabList({
         value: key,
         label: item.props.children,
         disabled: item.props.disabled,
+        tooltip: item.props.tooltip,
         textValue: item.textValue,
       };
     });
@@ -243,6 +244,7 @@ function BaseTabList({
             orientation={orientation}
             size={size}
             overflowing={orientation === 'horizontal' && overflowTabs.includes(item.key)}
+            tooltipProps={item.props.tooltip}
             ref={element => {
               tabItemsRef.current[item.key] = element;
             }}
diff --git a/static/app/views/discover/savedQuery/datasetSelectorTabs.spec.tsx b/static/app/views/discover/savedQuery/datasetSelectorTabs.spec.tsx
@@ -23,7 +23,7 @@ const EVENT_VIEW_CONSTRUCTOR_PROPS: EventViewOptions = {
 };
 
 describe('Discover DatasetSelector', function () {
-  const {router} = initializeOrg({
+  const {router, organization} = initializeOrg({
     organization: {features: ['performance-view']},
   });
 
@@ -121,4 +121,35 @@ describe('Discover DatasetSelector', function () {
       })
     );
   });
+
+  it('disables transactions dataset if org has deprecation feature', function () {
+    const eventView = new EventView({
+      ...EVENT_VIEW_CONSTRUCTOR_PROPS,
+      dataset: DiscoverDatasets.ERRORS,
+      id: '1',
+    });
+
+    const org = {
+      ...organization,
+      features: [...organization.features, 'discover-saved-queries-deprecation'],
+    };
+
+    render(
+      <DatasetSelectorTabs
+        isHomepage={false}
+        savedQuery={undefined}
+        eventView={eventView}
+      />,
+      {
+        router,
+        organization: org,
+        deprecatedRouterMocks: true,
+      }
+    );
+
+    expect(screen.getByRole('tab', {name: 'Transactions'})).toHaveAttribute(
+      'aria-disabled',
+      'true'
+    );
+  });
 });
diff --git a/static/app/views/discover/savedQuery/datasetSelectorTabs.tsx b/static/app/views/discover/savedQuery/datasetSelectorTabs.tsx
@@ -19,7 +19,9 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {
   getDatasetFromLocationOrSavedQueryDataset,
   getSavedQueryDataset,
+  getTransactionDeprecationMessage,
 } from 'sentry/views/discover/savedQuery/utils';
+import {getExploreUrl} from 'sentry/views/explore/utils';
 
 export const DATASET_PARAM = 'queryDataset';
 
@@ -107,6 +109,15 @@ export function DatasetSelectorTabs(props: Props) {
 
   const value = getSavedQueryDataset(organization, location, savedQuery, splitDecision);
 
+  const deprecatingTransactionsDataset = organization.features.includes(
+    'discover-saved-queries-deprecation'
+  );
+
+  const tracesUrl = getExploreUrl({
+    organization,
+    query: 'is_transaction:true',
+  });
+
   const options = [
     {
       value: SavedQueryDatasets.ERRORS,
@@ -115,6 +126,13 @@ export function DatasetSelectorTabs(props: Props) {
     {
       value: SavedQueryDatasets.TRANSACTIONS,
       label: DATASET_LABEL_MAP[SavedQueryDatasets.TRANSACTIONS],
+      disabled: deprecatingTransactionsDataset,
+      tooltip: deprecatingTransactionsDataset
+        ? {
+            title: getTransactionDeprecationMessage(tracesUrl),
+            isHoverable: true,
+          }
+        : undefined,
     },
   ];
 
@@ -153,7 +171,13 @@ export function DatasetSelectorTabs(props: Props) {
     >
       <TabList hideBorder>
         {options.map(option => (
-          <TabList.Item key={option.value}>{option.label}</TabList.Item>
+          <TabList.Item
+            key={option.value}
+            disabled={option.disabled}
+            tooltip={option.tooltip}
+          >
+            {option.label}
+          </TabList.Item>
         ))}
       </TabList>
     </Layout.HeaderTabs>
diff --git a/static/app/views/discover/savedQuery/index.tsx b/static/app/views/discover/savedQuery/index.tsx
@@ -16,15 +16,14 @@ import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Input} from 'sentry/components/core/input';
 import {Flex} from 'sentry/components/core/layout';
-import {Link} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {CreateAlertFromViewButton} from 'sentry/components/createAlertButton';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {Hovercard} from 'sentry/components/hovercard';
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
 import {IconBookmark, IconDelete, IconEllipsis, IconStar} from 'sentry/icons';
-import {t, tct} from 'sentry/locale';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {InjectedRouter} from 'sentry/types/legacyReactRouter';
 import type {Organization, SavedQuery} from 'sentry/types/organization';
@@ -52,6 +51,7 @@ import {deprecateTransactionAlerts} from 'sentry/views/insights/common/utils/has
 import {
   getDatasetFromLocationOrSavedQueryDataset,
   getSavedQueryDataset,
+  getTransactionDeprecationMessage,
   handleCreateQuery,
   handleDeleteQuery,
   handleResetHomepageQuery,
@@ -374,12 +374,7 @@ class SavedQueryButtonGroup extends PureComponent<Props, State> {
           !organization.features.includes('discover-saved-queries-deprecation')
         }
         isHoverable
-        title={tct(
-          'Discover\u2192Transactions is going to be merged into Explore\u2192Traces soon. Please save any transaction related queries from [traces:Explore\u2192Traces]',
-          {
-            traces: <Link to={tracesUrl} />,
-          }
-        )}
+        title={getTransactionDeprecationMessage(tracesUrl)}
       >
         <SaveAsDropdown
           queryName={queryName}
@@ -393,23 +388,46 @@ class SavedQueryButtonGroup extends PureComponent<Props, State> {
 
   renderButtonSave(disabled: boolean) {
     const {isNewQuery, isEditingQuery} = this.state;
+    const {organization, savedQuery, location} = this.props;
+
+    const currentDataset = getDatasetFromLocationOrSavedQueryDataset(
+      location,
+      savedQuery?.queryDataset
+    );
+
+    const deprecatingTransactionsDataset =
+      currentDataset === DiscoverDatasets.TRANSACTIONS &&
+      organization.features.includes('discover-saved-queries-deprecation');
 
     if (!isNewQuery && !isEditingQuery) {
       return null;
     }
     // Existing query with edits, show save and save as.
     if (!isNewQuery && isEditingQuery) {
+      const tracesUrl = getExploreUrl({
+        organization,
+        query: 'is_transaction:true',
+      });
+
       return (
         <Fragment>
-          <Button
-            onClick={this.handleUpdateQuery}
-            data-test-id="discover2-savedquery-button-update"
-            disabled={disabled}
-            size="sm"
+          <Tooltip
+            title={
+              deprecatingTransactionsDataset &&
+              getTransactionDeprecationMessage(tracesUrl)
+            }
+            isHoverable
           >
-            <IconUpdate />
-            {t('Save Changes')}
-          </Button>
+            <Button
+              onClick={this.handleUpdateQuery}
+              data-test-id="discover2-savedquery-button-update"
+              disabled={disabled || deprecatingTransactionsDataset}
+              size="sm"
+            >
+              <IconUpdate />
+              {t('Save Changes')}
+            </Button>
+          </Tooltip>
           {this.renderButtonSaveAs(disabled)}
         </Fragment>
       );
@@ -622,7 +640,7 @@ class SavedQueryButtonGroup extends PureComponent<Props, State> {
       savedQuery?.queryDataset
     );
 
-    const deprecatingAddToDashboard =
+    const deprecatingTransactionsDataset =
       currentDataset === DiscoverDatasets.TRANSACTIONS &&
       organization.features.includes('discover-saved-queries-deprecation');
 
@@ -637,15 +655,10 @@ class SavedQueryButtonGroup extends PureComponent<Props, State> {
       contextMenuItems.push({
         key: 'add-to-dashboard',
         label: t('Add to Dashboard'),
-        disabled: deprecatingAddToDashboard,
+        disabled: deprecatingTransactionsDataset,
+        tooltipOptions: {isHoverable: true},
         tooltip:
-          deprecatingAddToDashboard &&
-          tct(
-            'Discover\u2192Transactions is going to be merged into Explore\u2192Traces soon. Please save any transaction related queries from [traces:Explore\u2192Traces]',
-            {
-              traces: <Link to={tracesUrl} />,
-            }
-          ),
+          deprecatingTransactionsDataset && getTransactionDeprecationMessage(tracesUrl),
         onAction: () => {
           handleAddQueryToDashboard({
             organization,
diff --git a/static/app/views/discover/savedQuery/utils.tsx b/static/app/views/discover/savedQuery/utils.tsx
@@ -11,7 +11,8 @@ import {
 } from 'sentry/actionCreators/discoverSavedQueries';
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import type {Client} from 'sentry/api';
-import {t} from 'sentry/locale';
+import {Link} from 'sentry/components/core/link';
+import {t, tct} from 'sentry/locale';
 import type {NewQuery, Organization, SavedQuery} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import type {SaveQueryEventParameters} from 'sentry/utils/analytics/discoverAnalyticsEvents';
@@ -347,3 +348,12 @@ export function getSavedQueryDatasetFromLocationOrDataset(
       return undefined;
   }
 }
+
+export function getTransactionDeprecationMessage(tracesUrl: string) {
+  return tct(
+    'Discover\u2192Transactions is going to be merged into Explore\u2192Traces soon. Please save any transaction related queries from [traces:Explore\u2192Traces]',
+    {
+      traces: <Link to={tracesUrl} />,
+    }
+  );
+}
