feat(new-widget-builder-experience): Add support to the release data set in SortBy - Part 2 - [DD-537]

static/app/components/dashboards/widgetQueriesForm.tsx

@@ -54,7 +54,7 @@ export const generateOrderOptions = ({
       }
 
       if (widgetBuilderNewDesign) {
-        options.push({label, value: alias});
+        options.push({label, value: isMetrics ? field : alias});
         return;
       }
 

static/app/views/dashboardsV2/widgetBuilder/buildSteps/columnsStep/index.tsx

@@ -47,21 +47,21 @@ export function ColumnsStep({
     <BuildStep
       title={t('Choose your columns')}
       description={
-        dataSet !== DataSet.ISSUES
+        dataSet === DataSet.ISSUES
           ? tct(
-              'To group events, add [functionLink: functions] f(x) that may take in additional parameters. [tagFieldLink: Tag and field] columns will help you view more details about the events (i.e. title).',
+              '[tagFieldLink: Tag and field] columns will help you view more details about the issues (i.e. title).',
               {
-                functionLink: (
-                  <ExternalLink href="https://docs.sentry.io/product/discover-queries/query-builder/#filter-by-table-columns" />
-                ),
                 tagFieldLink: (
                   <ExternalLink href="https://docs.sentry.io/product/sentry-basics/search/searchable-properties/#event-properties" />
                 ),
               }
             )
           : tct(
-              '[tagFieldLink: Tag and field] columns will help you view more details about the issues (i.e. title).',
+              'To group events, add [functionLink: functions] f(x) that may take in additional parameters. [tagFieldLink: Tag and field] columns will help you view more details about the events (i.e. title).',
               {
+                functionLink: (
+                  <ExternalLink href="https://docs.sentry.io/product/discover-queries/query-builder/#filter-by-table-columns" />
+                ),
                 tagFieldLink: (
                   <ExternalLink href="https://docs.sentry.io/product/sentry-basics/search/searchable-properties/#event-properties" />
                 ),

static/app/views/dashboardsV2/widgetBuilder/buildSteps/filterResultsStep/index.tsx

@@ -115,12 +115,12 @@ export function FilterResultsStep({
               <SearchConditionsWrapper>
                 {widgetType === WidgetType.ISSUE ? (
                   <IssuesSearchBar
+                    searchSource="widget_builder"
                     organization={organization}
                     query={query}
                     onBlur={handleBlur(queryIndex)}
                     onSearch={handleSearch(queryIndex)}
                     selection={selection}
-                    searchSource="widget_builder"
                   />
                 ) : widgetType === WidgetType.DISCOVER ? (
                   <EventsSearchBar

static/app/views/dashboardsV2/widgetBuilder/buildSteps/sortByStep/index.tsx

@@ -78,16 +78,16 @@ export function SortByStep({
           <SortBySelectors
             widgetType={widgetType}
             sortByOptions={
-              dataSet === DataSet.EVENTS
-                ? generateOrderOptions({
+              dataSet === DataSet.ISSUES
+                ? generateIssueWidgetOrderOptions(
+                    organization.features.includes('issue-list-trend-sort')
+                  )
+                : generateOrderOptions({
                     widgetType,
                     widgetBuilderNewDesign: true,
                     columns: queries[0].columns,
                     aggregates: queries[0].aggregates,
                   })
-                : generateIssueWidgetOrderOptions(
-                    organization.features.includes('issue-list-trend-sort')
-                  )
             }
             values={{
               sortDirection:

static/app/views/dashboardsV2/widgetBuilder/utils.tsx

@@ -134,14 +134,14 @@ export function normalizeQueries({
 
       const orderBy =
         getAggregateAlias(queries[0].orderby) ||
-        (widgetType === WidgetType.DISCOVER
-          ? generateOrderOptions({
-              widgetType,
+        (widgetType === WidgetType.ISSUE
+          ? IssueSortOptions.DATE
+          : generateOrderOptions({
+              widgetType: widgetType ?? WidgetType.DISCOVER,
               widgetBuilderNewDesign,
               columns: queries[0].columns,
               aggregates: queries[0].aggregates,
-            })[0].value
-          : IssueSortOptions.DATE);
+            })[0].value);
 
       // Issues data set doesn't support order by descending
       query.orderby =

static/app/views/dashboardsV2/widgetBuilder/widgetBuilder.tsx

@@ -109,7 +109,7 @@ function getDataSetQuery(widgetBuilderNewDesign: boolean): Record<DataSet, Widge
       fieldAliases: [],
       aggregates: [`sum(${SessionMetric.SESSION})`],
       conditions: '',
-      orderby: '',
+      orderby: widgetBuilderNewDesign ? `-sum(${SessionMetric.SESSION})` : '',
     },
   };
 }
@@ -120,6 +120,12 @@ const WIDGET_TYPE_TO_DATA_SET = {
   [WidgetType.METRICS]: DataSet.RELEASE,
 };
 
+const DATA_SET_TO_WIDGET_TYPE = {
+  [DataSet.EVENTS]: WidgetType.DISCOVER,
+  [DataSet.ISSUES]: WidgetType.ISSUE,
+  [DataSet.RELEASE]: WidgetType.METRICS,
+};
+
 interface RouteParams {
   dashboardId: string;
   orgId: string;
@@ -335,8 +341,7 @@ function WidgetBuilder({
       const normalized = normalizeQueries({
         displayType: newDisplayType,
         queries: prevState.queries,
-        widgetType:
-          prevState.dataSet === DataSet.EVENTS ? WidgetType.DISCOVER : WidgetType.ISSUE,
+        widgetType: DATA_SET_TO_WIDGET_TYPE[prevState.dataSet],
         widgetBuilderNewDesign,
       });
 
@@ -469,7 +474,7 @@ function WidgetBuilder({
   function handleAddSearchConditions() {
     setState(prevState => {
       const newState = cloneDeep(prevState);
-      const query = cloneDeep(getDataSetQuery(widgetBuilderNewDesign)[DataSet.EVENTS]);
+      const query = cloneDeep(getDataSetQuery(widgetBuilderNewDesign)[prevState.dataSet]);
       query.fields = prevState.queries[0].fields;
       query.aggregates = prevState.queries[0].aggregates;
       query.columns = prevState.queries[0].columns;

tests/js/spec/views/dashboardsV2/widgetBuilder/widgetBuilder.spec.tsx

@@ -26,6 +26,9 @@ const defaultOrgFeatures = [
   'global-views',
 ];
 
+// Mocking worldMapChart to avoid act warnings
+jest.mock('sentry/components/charts/worldMapChart');
+
 function renderTestComponent({
   dashboard,
   query,
@@ -179,6 +182,16 @@ describe('WidgetBuilder', function () {
       body: [{key: 'environment'}, {key: 'release'}, {key: 'session.status'}],
     });
 
+    MockApiClient.addMockResponse({
+      url: `/organizations/org-slug/metrics/tags/session.status/`,
+      body: [
+        {
+          key: 'session.status',
+          value: 'crashed',
+        },
+      ],
+    });
+
     MockApiClient.addMockResponse({
       url: `/organizations/org-slug/metrics/meta/`,
       body: [
@@ -201,12 +214,6 @@ describe('WidgetBuilder', function () {
       body: TestStubs.MetricsField({
         field: `sum(${SessionMetric.SESSION})`,
       }),
-      match: [
-        MockApiClient.matchQuery({
-          groupBy: [],
-          orderBy: `sum(${SessionMetric.SESSION})`,
-        }),
-      ],
     });
   });
 
@@ -1684,6 +1691,7 @@ describe('WidgetBuilder', function () {
               expect.objectContaining({
                 aggregates: ['sum(sentry.sessions.session)'],
                 fields: ['sum(sentry.sessions.session)'],
+                orderby: '-sum(sentry.sessions.session)',
               }),
             ],
           }),
@@ -1692,6 +1700,54 @@ describe('WidgetBuilder', function () {
 
       expect(handleSave).toHaveBeenCalledTimes(1);
     });
+
+    it('render release data set disabled when the display type is world map', async function () {
+      renderTestComponent({
+        query: {
+          source: DashboardWidgetSource.DISCOVERV2,
+        },
+        orgFeatures: [...defaultOrgFeatures, 'new-widget-builder-experience-design'],
+      });
+
+      userEvent.click(await screen.findByText('Table'));
+      userEvent.click(screen.getByText('World Map'));
+      expect(
+        screen.getByRole('radio', {
+          name: 'Select Events (Errors, transactions)',
+        })
+      ).toBeEnabled();
+      expect(
+        screen.getByRole('radio', {
+          name: 'Select Issues (Status, assignee, etc.)',
+        })
+      ).toBeDisabled();
+      expect(
+        screen.getByRole('radio', {
+          name: 'Select Releases (sessions, crash rates)',
+        })
+      ).toBeDisabled();
+    });
+
+    // Disabling for CI, but should run locally when making changes
+    // eslint-disable-next-line jest/no-disabled-tests
+    it.skip('renders with an release search bar', async function () {
+      renderTestComponent({
+        orgFeatures: [...defaultOrgFeatures, 'new-widget-builder-experience-design'],
+      });
+
+      userEvent.type(
+        await screen.findByPlaceholderText('Search for events, users, tags, and more'),
+        'session.status:'
+      );
+      expect(await screen.findByText('No items found')).toBeInTheDocument();
+
+      userEvent.click(screen.getByText('Releases (sessions, crash rates)'));
+      userEvent.type(
+        screen.getByPlaceholderText('Search for events, users, tags, and more'),
+        'session.status:'
+      );
+      expect(await screen.findByText('crashed')).toBeInTheDocument();
+    });
   });
 
   describe('Widget Library', function () {