ref(dashboards): remove name field from TabularColumn (#95277)

### Changes

Remove `name` field from `TabularColumn` for `TableWidgetVisualization`.
This field is not used anymore for rendering. No UI change.

Author: lzhao-sentry

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

@@ -186,7 +186,6 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
         tableResults[i]?.meta
       ).map((column, index) => ({
         key: column.key,
-        name: column.name,
         width: widget.tableWidths?.[index] ?? minTableColumnWidth ?? column.width,
         type: column.type === 'never' ? null : column.type,
         sortable:

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

@@ -71,7 +71,6 @@ export function IssueWidgetCard({
   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,
     })

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

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

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

@@ -26,11 +26,9 @@ describe('TableWidgetVisualization', function () {
   const columns: Array<Partial<TabularColumn>> = [
     {
       key: 'count(span.duration)',
-      name: 'Count of Span Duration',
     },
     {
       key: 'http.request_method',
-      name: 'HTTP Request Method',
     },
   ];
   const sortableColumns = columns.map(column => ({...column, sortable: true}));
@@ -54,8 +52,8 @@ describe('TableWidgetVisualization', function () {
       );
 
       const $headers = screen.getAllByRole('columnheader');
-      expect($headers[0]).toHaveTextContent(columns[0]!.name!);
-      expect($headers[1]).toHaveTextContent(columns[1]!.name!);
+      expect($headers[0]).toHaveTextContent(columns[0]!.key!);
+      expect($headers[1]).toHaveTextContent(columns[1]!.key!);
     });
 
     it('Renders unique number fields correctly', async function () {
@@ -250,13 +248,11 @@ describe('TableWidgetVisualization', function () {
         expect(onResizeColumnMock).toHaveBeenCalledWith([
           {
             key: 'http.request_method',
-            name: 'http.request_method',
             type: 'string',
             width: 100,
           },
           {
             key: 'count(span.duration)',
-            name: 'count(span.duration)',
             type: 'integer',
             width: -1,
           },

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

@@ -21,12 +21,10 @@ export default Storybook.story('TableWidgetVisualization', story => {
   const customColumns: TabularColumn[] = [
     {
       key: 'count(span.duration)',
-      name: 'count(span.duration)',
       type: 'number',
     },
     {
       key: 'http.request_method',
-      name: 'http.request_method',
       type: 'string',
     },
   ];

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

@@ -177,24 +177,27 @@ export function TableWidgetVisualization(props: TableWidgetVisualizationProps) {
 
   // Fallback to extracting fields from the tableData if no columns are provided
   const columnOrder: TabularColumn[] =
-    columns?.map((column, index) => ({...column, width: widths[index]})) ??
+    columns?.map((column, index) => ({
+      ...column,
+      width: widths[index],
+    })) ??
     Object.keys(meta.fields).map((key, index) => ({
       key,
-      name: key,
       width: widths[index],
       type: meta.fields[key],
     }));
 
   return (
     <GridEditable
       data={data}
-      columnOrder={columnOrder}
+      // GridEditable needs name, but this functionality is replaced by aliases
+      columnOrder={columnOrder.map(column => ({...column, name: column.key}))}
       columnSortBy={[]}
       grid={{
         renderHeadCell: (_tableColumn, columnIndex) => {
           const column = columnOrder[columnIndex]!;
-          const align = fieldAlignment(column.name, column.type as ColumnValueType);
-          const name = aliases?.[column.key] || column.name;
+          const align = fieldAlignment(column.key, column.type as ColumnValueType);
+          const name = aliases?.[column.key] || column.key;
           const sortColumn = getSortField(column.key) ?? column.key;
 
           let direction = undefined;
@@ -246,10 +249,8 @@ export function TableWidgetVisualization(props: TableWidgetVisualizationProps) {
           widths[columnIndex] = defined(nextColumn.width)
             ? nextColumn.width
             : COL_WIDTH_UNDEFINED;
-          columnOrder[columnIndex] = {
-            ...nextColumn,
-            width: widths[columnIndex],
-          };
+
+          columnOrder[columnIndex]!.width = widths[columnIndex];
 
           if (onResizeColumn) {
             onResizeColumn(columnOrder);

static/app/views/dashboards/widgets/tableWidget/utils.spec.ts

@@ -7,11 +7,9 @@ describe('Table Widget Visualization Utils', function () {
     const columns = TabularColumnsFixture([
       {
         key: 'columnOne',
-        name: 'columnOne',
       },
       {
         key: 'columnTwo',
-        name: 'columnTwo',
       },
     ]);
     const fieldAliases = ['Column One', ''];

tests/js/fixtures/tabularColumn.ts

@@ -3,7 +3,6 @@ import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
 export function TabularColumnFixture(params: Partial<TabularColumn>): TabularColumn {
   return {
     key: 'column_key',
-    name: 'column_name',
     type: 'string',
     width: -1,
     ...params,