feat(dashboards): sorting for table widget visualization

static/app/views/dashboards/dashboard.tsx

@@ -25,6 +25,7 @@ import type {PageFilters} from 'sentry/types/core';
 import type {InjectedRouter} from 'sentry/types/legacyReactRouter';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import type {Sort} from 'sentry/utils/discover/fields';
 import {DatasetSource} from 'sentry/utils/discover/types';
 import withApi from 'sentry/utils/withApi';
 import withPageFilters from 'sentry/utils/withPageFilters';
@@ -351,6 +352,24 @@ class Dashboard extends Component<Props, State> {
     ];
   }
 
+  handleWidgetColumnTableSort(index: number) {
+    const {dashboard, onUpdate} = this.props;
+    return function (sort: Sort) {
+      const widget = dashboard.widgets[index]!;
+      const widgetCopy = cloneDeep(widget);
+      if (widgetCopy.queries[0]) {
+        const direction =
+          sort.kind === 'desc' && widget.widgetType !== WidgetType.ISSUE ? '-' : '';
+        widgetCopy.queries[0].orderby = `${direction}${sort.field}`;
+      }
+
+      const nextList = [...dashboard.widgets];
+      nextList[index] = widgetCopy;
+
+      onUpdate(nextList);
+    };
+  }
+
   renderWidget(widget: Widget, index: number) {
     const {isMobile, windowWidth} = this.state;
     const {
@@ -391,6 +410,7 @@ class Dashboard extends Component<Props, State> {
           index={String(index)}
           newlyAddedWidget={newlyAddedWidget}
           onNewWidgetScrollComplete={onNewWidgetScrollComplete}
+          onTableColumnSort={this.handleWidgetColumnTableSort(index)}
         />
       </div>
     );

static/app/views/dashboards/sortableWidget.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {LazyRender} from 'sentry/components/lazyRender';
 import PanelAlert from 'sentry/components/panels/panelAlert';
 import type {User} from 'sentry/types/user';
+import type {Sort} from 'sentry/utils/discover/fields';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useUser} from 'sentry/utils/useUser';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
@@ -34,6 +35,7 @@ type Props = {
   isPreview?: boolean;
   newlyAddedWidget?: Widget;
   onNewWidgetScrollComplete?: () => void;
+  onTableColumnSort?: (sort: Sort) => void;
   windowWidth?: number;
 };
 
@@ -57,6 +59,7 @@ function SortableWidget(props: Props) {
     dashboardCreator,
     newlyAddedWidget,
     onNewWidgetScrollComplete,
+    onTableColumnSort,
   } = props;
 
   const organization = useOrganization();
@@ -104,6 +107,7 @@ function SortableWidget(props: Props) {
     isMobile,
     windowWidth,
     tableItemLimit: TABLE_ITEM_LIMIT,
+    onTableColumnSort,
   };
 
   return (

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

@@ -1,6 +1,7 @@
 import PanelAlert from 'sentry/components/panels/panelAlert';
 import {dedupeArray} from 'sentry/utils/dedupeArray';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
+import type {Sort} from 'sentry/utils/discover/fields';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -12,6 +13,7 @@ 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';
 import {convertBuilderStateToWidget} from 'sentry/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget';
 import WidgetCard from 'sentry/views/dashboards/widgetCard';
 import WidgetLegendNameEncoderDecoder from 'sentry/views/dashboards/widgetLegendNameEncoderDecoder';
@@ -39,7 +41,7 @@ function WidgetPreview({
   const navigate = useNavigate();
   const pageFilters = usePageFilters();
 
-  const {state} = useWidgetBuilderContext();
+  const {state, dispatch} = useWidgetBuilderContext();
 
   const widget = convertBuilderStateToWidget(state);
 
@@ -75,6 +77,13 @@ function WidgetPreview({
     }),
   };
 
+  function onTableColumnSort(sort: Sort) {
+    dispatch({
+      payload: [sort],
+      type: BuilderStateAction.SET_SORT,
+    });
+  }
+
   return (
     <WidgetCard
       disableFullscreen
@@ -117,6 +126,7 @@ function WidgetPreview({
       minTableColumnWidth={MIN_TABLE_COLUMN_WIDTH_PX}
       disableZoom
       showLoadingText
+      onTableColumnSort={onTableColumnSort}
     />
   );
 }

static/app/views/dashboards/widgetCard/chart.tsx

@@ -41,18 +41,20 @@ import {
 } from 'sentry/utils/discover/charts';
 import type {EventsMetaType, MetaType} from 'sentry/utils/discover/eventView';
 import type {RenderFunctionBaggage} from 'sentry/utils/discover/fieldRenderers';
-import type {AggregationOutputType, DataUnit} from 'sentry/utils/discover/fields';
+import type {AggregationOutputType, DataUnit, Sort} from 'sentry/utils/discover/fields';
 import {
   aggregateOutputType,
   getAggregateArg,
   getEquation,
   getMeasurementSlug,
+  isAggregateField,
   isEquation,
   maybeEquationAlias,
   stripDerivedMetricsPrefix,
   stripEquationPrefix,
 } from 'sentry/utils/discover/fields';
 import getDynamicText from 'sentry/utils/getDynamicText';
+import {decodeSorts} from 'sentry/utils/queryString';
 import {getDatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';
 import type {Widget} from 'sentry/views/dashboards/types';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
@@ -103,6 +105,7 @@ type WidgetCardChartProps = Pick<
     selected: Record<string, boolean>;
     type: 'legendselectchanged';
   }>;
+  onTableColumnSort?: (sort: Sort) => void;
   onZoom?: EChartDataZoomHandler;
   sampleCount?: number;
   shouldResize?: boolean;
@@ -144,8 +147,15 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
   }
 
   tableResultComponent({loading, tableResults}: TableResultProps): React.ReactNode {
-    const {widget, selection, minTableColumnWidth, location, organization, theme} =
-      this.props;
+    const {
+      widget,
+      selection,
+      minTableColumnWidth,
+      location,
+      organization,
+      theme,
+      onTableColumnSort,
+    } = this.props;
     if (loading || !tableResults?.[0]) {
       // Align height to other charts.
       return <LoadingPlaceholder />;
@@ -175,9 +185,12 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
         name: column.name,
         width: minTableColumnWidth ?? column.width,
         type: column.type === 'never' ? null : column.type,
+        sortable:
+          widget.widgetType === WidgetType.RELEASE ? isAggregateField(column.key) : true,
       }));
       const aliases = decodeColumnAliases(columns, fieldAliases, fieldHeaderMap);
       const tableData = convertTableDataToTabularData(tableResults?.[0]);
+      const sort = decodeSorts(widget.queries[0]?.orderby)[0];
 
       return (
         <TableWrapper key={`table:${result.title}`}>
@@ -189,6 +202,8 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
               scrollable
               fit="max-content"
               aliases={aliases}
+              onSortChange={onTableColumnSort}
+              sort={sort}
               getRenderer={(field, _dataRow, meta) => {
                 const customRenderer = datasetConfig.getCustomFieldRenderer?.(
                   field,

static/app/views/dashboards/widgetCard/index.tsx

@@ -16,7 +16,7 @@ import type {Series} from 'sentry/types/echarts';
 import type {WithRouterProps} from 'sentry/types/legacyReactRouter';
 import type {Confidence, Organization} from 'sentry/types/organization';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
-import type {AggregationOutputType} from 'sentry/utils/discover/fields';
+import type {AggregationOutputType, Sort} from 'sentry/utils/discover/fields';
 import {statsPeriodToDays} from 'sentry/utils/duration/statsPeriodToDays';
 import {hasOnDemandMetricWidgetFeature} from 'sentry/utils/onDemandMetrics/features';
 import {useExtractionStatus} from 'sentry/utils/performance/contexts/metricsEnhancedPerformanceDataContext';
@@ -87,6 +87,7 @@ type Props = WithRouterProps & {
   onEdit?: () => void;
   onLegendSelectChanged?: () => void;
   onSetTransactionsDataset?: () => void;
+  onTableColumnSort?: (sort: Sort) => void;
   onUpdate?: (widget: Widget | null) => void;
   onWidgetSplitDecision?: (splitDecision: WidgetType) => void;
   renderErrorMessage?: (errorMessage?: string) => React.ReactNode;
@@ -156,6 +157,7 @@ function WidgetCard(props: Props) {
     disableZoom,
     showLoadingText,
     router,
+    onTableColumnSort,
   } = props;
 
   if (widget.displayType === DisplayType.TOP_N) {
@@ -322,6 +324,7 @@ function WidgetCard(props: Props) {
             disableZoom={disableZoom}
             onDataFetchStart={onDataFetchStart}
             showLoadingText={showLoadingText && isLoadingTextVisible}
+            onTableColumnSort={onTableColumnSort}
           />
         </WidgetFrame>
       </VisuallyCompleteWithData>

static/app/views/dashboards/widgetCard/issueWidgetCard.tsx

@@ -10,9 +10,12 @@ import {space} from 'sentry/styles/space';
 import type {PageFilters} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
+import {getSortField} from 'sentry/utils/dashboards/issueFieldRenderers';
 import type {TableData} from 'sentry/utils/discover/discoverQuery';
 import type {MetaType} from 'sentry/utils/discover/eventView';
-import type {RenderFunctionBaggage} from 'sentry/utils/discover/fieldRenderers';
+import {type RenderFunctionBaggage} from 'sentry/utils/discover/fieldRenderers';
+import type {Sort} from 'sentry/utils/discover/fields';
+import {decodeSorts} from 'sentry/utils/queryString';
 import {getDatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';
 import {type Widget, WidgetType} from 'sentry/views/dashboards/types';
 import {eventViewFromWidget} from 'sentry/views/dashboards/utils';
@@ -31,6 +34,7 @@ type Props = {
   theme: Theme;
   widget: Widget;
   errorMessage?: string;
+  onTableColumnSort?: (sort: Sort) => void;
   tableResults?: TableData[];
 };
 
@@ -43,6 +47,7 @@ export function IssueWidgetCard({
   organization,
   location,
   theme,
+  onTableColumnSort,
 }: Props) {
   const datasetConfig = getDatasetConfig(WidgetType.ISSUE);
 
@@ -70,6 +75,7 @@ export function IssueWidgetCard({
     name: column.name,
     width: column.width,
     type: column.type === 'never' ? null : column.type,
+    sortable: !!getSortField(column.key),
   }));
   const aliases = decodeColumnAliases(columns, fieldAliases, fieldHeaderMap);
   const tableData = convertTableDataToTabularData(tableResults?.[0]);
@@ -78,6 +84,11 @@ export function IssueWidgetCard({
   const getCustomFieldRenderer = (field: string, meta: MetaType, org?: Organization) => {
     return datasetConfig.getCustomFieldRenderer?.(field, meta, widget, org) || null;
   };
+  // This is to match the widget viewer modal, which always displays the arrow pointing down
+  const sort: Sort = {
+    field: decodeSorts(widget.queries[0]?.orderby)[0]?.field || '',
+    kind: 'desc',
+  };
 
   return organization.features.includes('dashboards-use-widget-table-visualization') ? (
     <TableContainer>
@@ -88,6 +99,8 @@ export function IssueWidgetCard({
         scrollable
         fit="max-content"
         aliases={aliases}
+        onSortChange={onTableColumnSort}
+        sort={sort}
         getRenderer={(field, _dataRow, meta) => {
           const customRenderer = datasetConfig.getCustomFieldRenderer?.(
             field,

static/app/views/dashboards/widgetCard/widgetCardChartContainer.tsx

@@ -17,7 +17,7 @@ import type {
 } from 'sentry/types/echarts';
 import type {Organization} from 'sentry/types/organization';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
-import type {AggregationOutputType} from 'sentry/utils/discover/fields';
+import type {AggregationOutputType, Sort} from 'sentry/utils/discover/fields';
 import {useLocation} from 'sentry/utils/useLocation';
 import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
@@ -56,6 +56,7 @@ type Props = {
     selected: Record<string, boolean>;
     type: 'legendselectchanged';
   }>;
+  onTableColumnSort?: (sort: Sort) => void;
   onWidgetSplitDecision?: (splitDecision: WidgetType) => void;
   onZoom?: EChartDataZoomHandler;
   renderErrorMessage?: (errorMessage?: string) => React.ReactNode;
@@ -90,6 +91,7 @@ export function WidgetCardChartContainer({
   onDataFetchStart,
   disableZoom,
   showLoadingText,
+  onTableColumnSort,
 }: Props) {
   const location = useLocation();
   const theme = useTheme();
@@ -171,6 +173,7 @@ export function WidgetCardChartContainer({
                 selection={selection}
                 theme={theme}
                 organization={organization}
+                onTableColumnSort={onTableColumnSort}
               />
             </Fragment>
           );
@@ -215,6 +218,7 @@ export function WidgetCardChartContainer({
               isSampled={isSampled}
               showLoadingText={showLoadingText}
               theme={theme}
+              onTableColumnSort={onTableColumnSort}
             />
           </Fragment>
         );

static/app/views/dashboards/widgets/common/types.tsx

@@ -76,6 +76,7 @@ export type TabularData<TFields extends string = string> = {
 export type TabularColumn<TFields extends string = string> = {
   key: TFields;
   name: TFields;
+  sortable?: boolean;
   type?: AttributeValueType;
   width?: number;
 };