feat(dashboards): add column resizing to dashboard tables (#94997)

### Changes

Add column resizing to dashboard widgets and widget preview. The columns
do not persist between page reload right now. Only visible to perf team
(feature flag).

### Video


https://github.com/user-attachments/assets/eb452926-8b0d-47cb-a896-d896da7c0362

Author: lzhao-sentry

static/app/views/dashboards/dashboard.tsx

@@ -30,6 +30,7 @@ import {DatasetSource} from 'sentry/utils/discover/types';
 import withApi from 'sentry/utils/withApi';
 import withPageFilters from 'sentry/utils/withPageFilters';
 import type {DataSet} from 'sentry/views/dashboards/widgetBuilder/utils';
+import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
 
 import AddWidget, {ADD_WIDGET_BUTTON_DRAG_ID} from './addWidget';
 import type {Position} from './layoutUtils';
@@ -369,6 +370,21 @@ class Dashboard extends Component<Props, State> {
     };
   }
 
+  handleWidgetColumnTableResize(index: number) {
+    const {dashboard, onUpdate} = this.props;
+    return function (columns: TabularColumn[]) {
+      const widths = columns.map(column => column.width as number);
+      const widget = dashboard.widgets[index]!;
+      const widgetCopy = cloneDeep(widget);
+      widgetCopy.tableWidths = widths;
+
+      const nextList = [...dashboard.widgets];
+      nextList[index] = widgetCopy;
+
+      onUpdate(nextList);
+    };
+  }
+
   renderWidget(widget: Widget, index: number) {
     const {isMobile, windowWidth} = this.state;
     const {
@@ -410,6 +426,7 @@ class Dashboard extends Component<Props, State> {
           newlyAddedWidget={newlyAddedWidget}
           onNewWidgetScrollComplete={onNewWidgetScrollComplete}
           onWidgetTableSort={this.handleWidgetTableSort(index)}
+          onWidgetTableResizeColumn={this.handleWidgetColumnTableResize(index)}
         />
       </div>
     );

static/app/views/dashboards/sortableWidget.tsx

@@ -10,6 +10,7 @@ import {useUser} from 'sentry/utils/useUser';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
 import {checkUserHasEditAccess} from 'sentry/views/dashboards/detail';
 import WidgetCard from 'sentry/views/dashboards/widgetCard';
+import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
 
 import {DashboardsMEPProvider} from './widgetCard/dashboardsMEPContext';
 import {Toolbar} from './widgetCard/toolbar';
@@ -35,6 +36,7 @@ type Props = {
   isPreview?: boolean;
   newlyAddedWidget?: Widget;
   onNewWidgetScrollComplete?: () => void;
+  onWidgetTableResizeColumn?: (columns: TabularColumn[]) => void;
   onWidgetTableSort?: (sort: Sort) => void;
   windowWidth?: number;
 };
@@ -60,6 +62,7 @@ function SortableWidget(props: Props) {
     newlyAddedWidget,
     onNewWidgetScrollComplete,
     onWidgetTableSort,
+    onWidgetTableResizeColumn,
   } = props;
 
   const organization = useOrganization();
@@ -108,6 +111,7 @@ function SortableWidget(props: Props) {
     windowWidth,
     tableItemLimit: TABLE_ITEM_LIMIT,
     onWidgetTableSort,
+    onWidgetTableResizeColumn,
   };
 
   return (

static/app/views/dashboards/types.tsx

@@ -105,6 +105,8 @@ export type Widget = {
   layout?: WidgetLayout | null;
   // Used to define 'topEvents' when fetching time-series data for a widget
   limit?: number;
+  // Used for table widget column widths, currently is not saved
+  tableWidths?: number[];
   tempId?: string;
   thresholds?: ThresholdsConfig | null;
   widgetType?: WidgetType;

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

@@ -1,3 +1,5 @@
+import {useState} from 'react';
+
 import PanelAlert from 'sentry/components/panels/panelAlert';
 import {dedupeArray} from 'sentry/utils/dedupeArray';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
@@ -18,6 +20,7 @@ import {convertBuilderStateToWidget} from 'sentry/views/dashboards/widgetBuilder
 import WidgetCard from 'sentry/views/dashboards/widgetCard';
 import WidgetLegendNameEncoderDecoder from 'sentry/views/dashboards/widgetLegendNameEncoderDecoder';
 import WidgetLegendSelectionState from 'sentry/views/dashboards/widgetLegendSelectionState';
+import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
 
 interface WidgetPreviewProps {
   dashboard: DashboardDetails;
@@ -42,8 +45,9 @@ function WidgetPreview({
   const pageFilters = usePageFilters();
 
   const {state, dispatch} = useWidgetBuilderContext();
+  const [tableWidths, setTableWidths] = useState<number[]>();
 
-  const widget = convertBuilderStateToWidget(state);
+  const widget = {...convertBuilderStateToWidget(state), tableWidths};
 
   const widgetLegendState = new WidgetLegendSelectionState({
     location,
@@ -84,6 +88,11 @@ function WidgetPreview({
     });
   }
 
+  function handleWidgetTableResizeColumn(columns: TabularColumn[]) {
+    const widths = columns.map(column => column.width as number);
+    setTableWidths(widths);
+  }
+
   return (
     <WidgetCard
       disableFullscreen
@@ -127,6 +136,7 @@ function WidgetPreview({
       disableZoom
       showLoadingText
       onWidgetTableSort={handleWidgetTableSort}
+      onWidgetTableResizeColumn={handleWidgetTableResizeColumn}
     />
   );
 }

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

@@ -63,6 +63,7 @@ import {getBucketSize} from 'sentry/views/dashboards/utils/getBucketSize';
 import WidgetLegendNameEncoderDecoder from 'sentry/views/dashboards/widgetLegendNameEncoderDecoder';
 import type WidgetLegendSelectionState from 'sentry/views/dashboards/widgetLegendSelectionState';
 import {BigNumberWidgetVisualization} from 'sentry/views/dashboards/widgets/bigNumberWidget/bigNumberWidgetVisualization';
+import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
 import {TableWidgetVisualization} from 'sentry/views/dashboards/widgets/tableWidget/tableWidgetVisualization';
 import {
   convertTableDataToTabularData,
@@ -105,6 +106,7 @@ type WidgetCardChartProps = Pick<
     selected: Record<string, boolean>;
     type: 'legendselectchanged';
   }>;
+  onWidgetTableResizeColumn?: (columns: TabularColumn[]) => void;
   onWidgetTableSort?: (sort: Sort) => void;
   onZoom?: EChartDataZoomHandler;
   sampleCount?: number;
@@ -155,6 +157,7 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
       organization,
       theme,
       onWidgetTableSort,
+      onWidgetTableResizeColumn,
     } = this.props;
     if (loading || !tableResults?.[0]) {
       // Align height to other charts.
@@ -181,10 +184,10 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
           field,
         })),
         tableResults[i]?.meta
-      ).map(column => ({
+      ).map((column, index) => ({
         key: column.key,
         name: column.name,
-        width: minTableColumnWidth ?? column.width,
+        width: widget.tableWidths?.[index] ?? minTableColumnWidth ?? column.width,
         type: column.type === 'never' ? null : column.type,
         sortable:
           widget.widgetType === WidgetType.RELEASE ? isAggregateField(column.key) : true,
@@ -226,6 +229,7 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
                   eventView,
                 } satisfies RenderFunctionBaggage;
               }}
+              onResizeColumn={onWidgetTableResizeColumn}
             />
           ) : (
             <StyledSimpleTableChart

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

@@ -40,6 +40,7 @@ import {
 import {DEFAULT_RESULTS_LIMIT} from 'sentry/views/dashboards/widgetBuilder/utils';
 import {WidgetCardChartContainer} from 'sentry/views/dashboards/widgetCard/widgetCardChartContainer';
 import type WidgetLegendSelectionState from 'sentry/views/dashboards/widgetLegendSelectionState';
+import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
 import {WidgetViewerContext} from 'sentry/views/dashboards/widgetViewer/widgetViewerContext';
 
 import {useDashboardsMEPContext} from './dashboardsMEPContext';
@@ -89,6 +90,7 @@ type Props = WithRouterProps & {
   onSetTransactionsDataset?: () => void;
   onUpdate?: (widget: Widget | null) => void;
   onWidgetSplitDecision?: (splitDecision: WidgetType) => void;
+  onWidgetTableResizeColumn?: (columns: TabularColumn[]) => void;
   onWidgetTableSort?: (sort: Sort) => void;
   renderErrorMessage?: (errorMessage?: string) => React.ReactNode;
   shouldResize?: boolean;
@@ -158,6 +160,7 @@ function WidgetCard(props: Props) {
     showLoadingText,
     router,
     onWidgetTableSort,
+    onWidgetTableResizeColumn,
   } = props;
 
   if (widget.displayType === DisplayType.TOP_N) {
@@ -325,6 +328,7 @@ function WidgetCard(props: Props) {
             onDataFetchStart={onDataFetchStart}
             showLoadingText={showLoadingText && isLoadingTextVisible}
             onWidgetTableSort={onWidgetTableSort}
+            onWidgetTableResizeColumn={onWidgetTableResizeColumn}
           />
         </WidgetFrame>
       </VisuallyCompleteWithData>

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

@@ -16,6 +16,7 @@ import type {RenderFunctionBaggage} from 'sentry/utils/discover/fieldRenderers';
 import {getDatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';
 import {type Widget, WidgetType} from 'sentry/views/dashboards/types';
 import {eventViewFromWidget} from 'sentry/views/dashboards/utils';
+import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
 import {TableWidgetVisualization} from 'sentry/views/dashboards/widgets/tableWidget/tableWidgetVisualization';
 import {
   convertTableDataToTabularData,
@@ -31,6 +32,7 @@ type Props = {
   theme: Theme;
   widget: Widget;
   errorMessage?: string;
+  onWidgetTableResizeColumn?: (columns: TabularColumn[]) => void;
   tableResults?: TableData[];
 };
 
@@ -43,6 +45,7 @@ export function IssueWidgetCard({
   organization,
   location,
   theme,
+  onWidgetTableResizeColumn,
 }: Props) {
   const datasetConfig = getDatasetConfig(WidgetType.ISSUE);
 
@@ -65,12 +68,14 @@ export function IssueWidgetCard({
     : [...query.columns, ...query.aggregates];
   const fieldAliases = query.fieldAliases ?? [];
   const fieldHeaderMap = datasetConfig.getFieldHeaderMap?.();
-  const columns = decodeColumnOrder(queryFields.map(field => ({field}))).map(column => ({
-    key: column.key,
-    name: column.name,
-    width: column.width,
-    type: column.type === 'never' ? null : column.type,
-  }));
+  const columns = decodeColumnOrder(queryFields.map(field => ({field}))).map(
+    (column, index) => ({
+      key: column.key,
+      name: column.name,
+      width: widget.tableWidths?.[index] ?? column.width,
+      type: column.type === 'never' ? null : column.type,
+    })
+  );
   const aliases = decodeColumnAliases(columns, fieldAliases, fieldHeaderMap);
   const tableData = convertTableDataToTabularData(tableResults?.[0]);
   const eventView = eventViewFromWidget(widget.title, widget.queries[0]!, selection);
@@ -108,6 +113,7 @@ export function IssueWidgetCard({
             unit,
           } satisfies RenderFunctionBaggage;
         }}
+        onResizeColumn={onWidgetTableResizeColumn}
       />
     </TableContainer>
   ) : (

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

@@ -246,6 +246,7 @@ class ReleaseWidgetQueries extends Component<ReleaseWidgetQueriesProps, State> {
       'layout',
       'tempId',
       'widgetType',
+      'tableWidths',
     ];
     const ignoredQueryProps = ['name', 'fields', 'aggregates', 'columns'];
     return (

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

@@ -23,6 +23,7 @@ import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
 import WidgetLegendNameEncoderDecoder from 'sentry/views/dashboards/widgetLegendNameEncoderDecoder';
 import type WidgetLegendSelectionState from 'sentry/views/dashboards/widgetLegendSelectionState';
+import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
 
 import WidgetCardChart from './chart';
 import {IssueWidgetCard} from './issueWidgetCard';
@@ -57,6 +58,7 @@ type Props = {
     type: 'legendselectchanged';
   }>;
   onWidgetSplitDecision?: (splitDecision: WidgetType) => void;
+  onWidgetTableResizeColumn?: (columns: TabularColumn[]) => void;
   onWidgetTableSort?: (sort: Sort) => void;
   onZoom?: EChartDataZoomHandler;
   renderErrorMessage?: (errorMessage?: string) => React.ReactNode;
@@ -92,6 +94,7 @@ export function WidgetCardChartContainer({
   disableZoom,
   showLoadingText,
   onWidgetTableSort,
+  onWidgetTableResizeColumn,
 }: Props) {
   const location = useLocation();
   const theme = useTheme();
@@ -173,6 +176,7 @@ export function WidgetCardChartContainer({
                 selection={selection}
                 theme={theme}
                 organization={organization}
+                onWidgetTableResizeColumn={onWidgetTableResizeColumn}
               />
             </Fragment>
           );
@@ -218,6 +222,7 @@ export function WidgetCardChartContainer({
               showLoadingText={showLoadingText}
               theme={theme}
               onWidgetTableSort={onWidgetTableSort}
+              onWidgetTableResizeColumn={onWidgetTableResizeColumn}
             />
           </Fragment>
         );

static/app/views/dashboards/widgets/tableWidget/tableWidgetVisualization.tsx

@@ -84,7 +84,7 @@ interface TableWidgetVisualizationProps {
   onChangeSort?: (sort: Sort) => void;
 
   /**
-   * A callback function that is invoked after a user resizes a column. If omitted, resizing will update the width parameters in the URL
+   * A callback function that is invoked after a user resizes a column. If omitted, resizing will update the width parameters in the URL. This function always guarantees width field is supplied, meaning it will fallback to -1
    * @param columns an array of columns with the updated widths
    */
   onResizeColumn?: (columns: TabularColumn[]) => void;