ref(dashboards): use table widget visualization in widget viewer modal (#95437)

### Changes

Consolidates all the different tables for datasets in viewer widget
modal under `TableWidgetVisualization`. Currently hidden behind a
feature flag.

Also includes some updates to `TableWidgetVisualization` to accommodate
this refactor. There should be no UI change except column aliases are
used in the viewer modal now

Author: lzhao-sentry

static/app/components/modals/widgetViewerModal.tsx

@@ -37,7 +37,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {getUtcDateString} from 'sentry/utils/dates';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
 import type EventView from 'sentry/utils/discover/eventView';
-import type {AggregationOutputType} from 'sentry/utils/discover/fields';
+import type {AggregationOutputType, Sort} from 'sentry/utils/discover/fields';
 import {
   getAggregateAlias,
   isAggregateField,
@@ -51,14 +51,21 @@ import {
 import parseLinkHeader from 'sentry/utils/parseLinkHeader';
 import {MetricsCardinalityProvider} from 'sentry/utils/performance/contexts/metricsCardinality';
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
-import {decodeInteger, decodeList, decodeScalar} from 'sentry/utils/queryString';
+import {
+  decodeInteger,
+  decodeList,
+  decodeScalar,
+  decodeSorts,
+} from 'sentry/utils/queryString';
 import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
+import type {ReactRouter3Navigate} from 'sentry/utils/useNavigate';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useProjects from 'sentry/utils/useProjects';
 import {useUser} from 'sentry/utils/useUser';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
 import withPageFilters from 'sentry/utils/withPageFilters';
+import {getDatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';
 import {checkUserHasEditAccess} from 'sentry/views/dashboards/detail';
 import {DiscoverSplitAlert} from 'sentry/views/dashboards/discoverSplitAlert';
 import type {
@@ -96,6 +103,12 @@ import ReleaseWidgetQueries from 'sentry/views/dashboards/widgetCard/releaseWidg
 import {WidgetCardChartContainer} from 'sentry/views/dashboards/widgetCard/widgetCardChartContainer';
 import WidgetQueries from 'sentry/views/dashboards/widgetCard/widgetQueries';
 import type WidgetLegendSelectionState from 'sentry/views/dashboards/widgetLegendSelectionState';
+import {TableWidgetVisualization} from 'sentry/views/dashboards/widgets/tableWidget/tableWidgetVisualization';
+import {
+  convertTableDataToTabularData,
+  decodeColumnAliases,
+} from 'sentry/views/dashboards/widgets/tableWidget/utils';
+import type {TableColumn} from 'sentry/views/discover/table/types';
 import {decodeColumnOrder} from 'sentry/views/discover/utils';
 import {MetricsDataSwitcher} from 'sentry/views/performance/landing/metricsDataSwitcher';
 
@@ -482,6 +495,23 @@ function WidgetViewerModal(props: Props) {
     const {isMetricsData} = useDashboardsMEPContext();
     const links = parseLinkHeader(pageLinks ?? null);
     const isFirstPage = links.previous?.results === false;
+
+    if (organization.features.includes('dashboards-use-widget-table-visualization')) {
+      return ViewerTableV2({
+        tableResults,
+        loading,
+        pageLinks,
+        columnOrder,
+        widget,
+        tableWidget,
+        setChartUnmodified,
+        widths,
+        location,
+        organization,
+        navigate,
+      });
+    }
+
     return (
       <Fragment>
         <GridEditable
@@ -558,6 +588,21 @@ function WidgetViewerModal(props: Props) {
     if (totalResults === undefined && totalCount) {
       setTotalResults(totalCount);
     }
+    if (organization.features.includes('dashboards-use-widget-table-visualization')) {
+      return ViewerTableV2({
+        tableResults,
+        loading,
+        pageLinks,
+        columnOrder,
+        widget,
+        tableWidget,
+        setChartUnmodified,
+        widths,
+        location,
+        organization,
+        navigate,
+      });
+    }
     const links = parseLinkHeader(pageLinks ?? null);
     return (
       <Fragment>
@@ -634,6 +679,21 @@ function WidgetViewerModal(props: Props) {
     loading,
     pageLinks,
   }) => {
+    if (organization.features.includes('dashboards-use-widget-table-visualization')) {
+      return ViewerTableV2({
+        tableResults,
+        loading,
+        pageLinks,
+        columnOrder,
+        widget,
+        tableWidget,
+        setChartUnmodified,
+        widths,
+        location,
+        organization,
+        navigate,
+      });
+    }
     const links = parseLinkHeader(pageLinks ?? null);
     const isFirstPage = links.previous?.results === false;
     return (
@@ -1189,6 +1249,155 @@ function renderTotalResults(totalResults?: string, widgetType?: WidgetType) {
   }
 }
 
+interface ViewerTableV2Props {
+  columnOrder: Array<TableColumn<string>>;
+  loading: boolean;
+  location: Location;
+  navigate: ReactRouter3Navigate;
+  organization: Organization;
+  setChartUnmodified: React.Dispatch<React.SetStateAction<boolean>>;
+  tableWidget: Widget;
+  widget: Widget;
+  widths: string[];
+  pageLinks?: string;
+  tableResults?: TableDataWithTitle[];
+}
+
+function ViewerTableV2({
+  widget,
+  tableResults,
+  loading,
+  pageLinks,
+  columnOrder,
+  widths,
+  setChartUnmodified,
+  tableWidget,
+  location,
+  organization,
+  navigate,
+}: ViewerTableV2Props) {
+  const page = decodeInteger(location.query[WidgetViewerQueryField.PAGE]) ?? 0;
+  const links = parseLinkHeader(pageLinks ?? null);
+
+  function sortable(key: string) {
+    if (tableWidget.widgetType === WidgetType.ISSUE) {
+      return false;
+    }
+    if (tableWidget.widgetType === WidgetType.RELEASE) {
+      return isAggregateField(key);
+    }
+    return true;
+  }
+
+  const tableColumns = columnOrder.map((column, index) => ({
+    key: column.key,
+    type: column.type === 'never' ? null : column.type,
+    sortable: sortable(column.key),
+    width: widths[index] ? parseInt(widths[index], 10) || -1 : -1,
+  }));
+  const aliases = decodeColumnAliases(
+    tableColumns,
+    tableWidget.queries[0]?.fieldAliases ?? [],
+    tableWidget.widgetType === WidgetType.ISSUE
+      ? getDatasetConfig(tableWidget.widgetType).getFieldHeaderMap?.()
+      : {}
+  );
+
+  if (loading) {
+    return (
+      <TableWidgetVisualization.LoadingPlaceholder
+        columns={tableColumns}
+        aliases={aliases}
+      />
+    );
+  }
+
+  const tableSort = decodeSorts(tableWidget.queries[0]?.orderby)[0];
+  const data = convertTableDataToTabularData(tableResults?.[0]);
+
+  function onChangeSort(newSort: Sort) {
+    if (
+      [DisplayType.TOP_N, DisplayType.TABLE].includes(widget.displayType) ||
+      defined(widget.limit) ||
+      tableWidget.widgetType === WidgetType.ISSUE
+    ) {
+      setChartUnmodified(false);
+    }
+
+    trackAnalytics('dashboards_views.widget_viewer.sort', {
+      organization,
+      widget_type: widget.widgetType ?? WidgetType.DISCOVER,
+      display_type: widget.displayType,
+      column: newSort.field,
+      order: newSort.kind,
+    });
+
+    navigate(
+      {
+        ...location,
+        query: {
+          ...location.query,
+          sort: `${newSort.kind === 'desc' ? '-' : ''}${newSort.field}`,
+        },
+      },
+      {replace: true, preventScrollReset: true}
+    );
+  }
+
+  return (
+    <Fragment>
+      <TableWidgetVisualization
+        tableData={data}
+        columns={tableColumns}
+        aliases={aliases}
+        sort={tableSort}
+        onChangeSort={onChangeSort}
+      />
+      {!(
+        tableWidget.queries[0]!.orderby.match(/^-?release$/) &&
+        tableWidget.widgetType === WidgetType.RELEASE
+      ) &&
+        (links?.previous?.results || links?.next?.results) && (
+          <Pagination
+            pageLinks={pageLinks}
+            onCursor={(nextCursor, _path, _query, delta) => {
+              let nextPage = isNaN(page) ? delta : page + delta;
+              let newCursor = nextCursor;
+              // unset cursor and page when we navigate back to the first page
+              // also reset cursor if somehow the previous button is enabled on
+              // first page and user attempts to go backwards
+              if (nextPage <= 0) {
+                newCursor = undefined;
+                nextPage = 0;
+              }
+              navigate(
+                {
+                  pathname: location.pathname,
+                  query: {
+                    ...location.query,
+                    [WidgetViewerQueryField.CURSOR]: newCursor,
+                    [WidgetViewerQueryField.PAGE]: nextPage,
+                  },
+                },
+                {replace: true, preventScrollReset: true}
+              );
+
+              if (widget.displayType === DisplayType.TABLE) {
+                setChartUnmodified(false);
+              }
+
+              trackAnalytics('dashboards_views.widget_viewer.paginate', {
+                organization,
+                widget_type: widget.widgetType ?? WidgetType.DISCOVER,
+                display_type: widget.displayType,
+              });
+            }}
+          />
+        )}
+    </Fragment>
+  );
+}
+
 export const modalCss = css`
   width: 100%;
   max-width: 1200px;

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

@@ -211,26 +211,25 @@ export function TableWidgetVisualization(props: TableWidgetVisualizationProps) {
             <SortLink
               align={align}
               canSort={column.sortable ?? false}
-              onClick={() => {
+              title={<StyledTooltip title={name}>{name}</StyledTooltip>}
+              onClick={e => {
+                if (!onChangeSort) return;
+                e.preventDefault();
                 const nextDirection = direction === 'desc' ? 'asc' : 'desc';
-
-                onChangeSort?.({
+                onChangeSort({
                   field: sortColumn,
                   kind: nextDirection,
                 });
               }}
-              title={<StyledTooltip title={name}>{name}</StyledTooltip>}
               direction={direction}
               generateSortLink={() => {
-                return onChangeSort
-                  ? location
-                  : {
-                      ...location,
-                      query: {
-                        ...location.query,
-                        sort: `${direction === 'desc' ? '' : '-'}${sortColumn}`,
-                      },
-                    };
+                return {
+                  ...location,
+                  query: {
+                    ...location.query,
+                    sort: `${direction === 'desc' ? '' : '-'}${sortColumn}`,
+                  },
+                };
               }}
             />
           );