fix(widget-builder): Reset sort when changing display type to table (#…

…82889)

Noticed that tables weren't resetting the sort to a valid value (i.e. we
have to sort by a field that's selected), so when going from a
timeseries chart to a table, we should reset the sort to the first
column if the current sort is not in the table, otherwise it can stay
the same.

Note: I found another bug that's similar that I will fix in a following
PR. The sort doesn't reset when you remove a field that is being sorted
on in a table

static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.spec.tsx

@@ -703,6 +703,70 @@ describe('useWidgetBuilderState', () => {
 
       expect(result.current.state.yAxis).toEqual([]);
     });
+
+    it('resets the sort when the display type is switched and the sort is not in the new fields', () => {
+      mockedUsedLocation.mockReturnValue(
+        LocationFixture({
+          query: {
+            displayType: DisplayType.LINE,
+            field: ['testField', 'testField2'],
+            sort: ['-project.name'],
+          },
+        })
+      );
+
+      const {result} = renderHook(() => useWidgetBuilderState(), {
+        wrapper: WidgetBuilderProvider,
+      });
+
+      expect(result.current.state.sort).toEqual([{field: 'project.name', kind: 'desc'}]);
+
+      act(() => {
+        result.current.dispatch({
+          type: BuilderStateAction.SET_DISPLAY_TYPE,
+          payload: DisplayType.TABLE,
+        });
+      });
+
+      expect(result.current.state.sort).toEqual([
+        {
+          field: 'testField',
+          kind: 'desc',
+        },
+      ]);
+    });
+
+    it('keeps sort when the sort is in the new fields', () => {
+      mockedUsedLocation.mockReturnValue(
+        LocationFixture({
+          query: {
+            displayType: DisplayType.LINE,
+            field: ['testField', 'testField2'],
+            sort: ['-testField'],
+          },
+        })
+      );
+
+      const {result} = renderHook(() => useWidgetBuilderState(), {
+        wrapper: WidgetBuilderProvider,
+      });
+
+      expect(result.current.state.sort).toEqual([{field: 'testField', kind: 'desc'}]);
+
+      act(() => {
+        result.current.dispatch({
+          type: BuilderStateAction.SET_DISPLAY_TYPE,
+          payload: DisplayType.TABLE,
+        });
+      });
+
+      expect(result.current.state.sort).toEqual([
+        {
+          field: 'testField',
+          kind: 'desc',
+        },
+      ]);
+    });
   });
 
   describe('fields', () => {

static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx

@@ -6,6 +6,7 @@ import {
   explodeField,
   generateFieldAsString,
   isAggregateFieldOrEquation,
+  type QueryFieldValue,
   type Sort,
 } from 'sentry/utils/discover/fields';
 import {
@@ -163,8 +164,24 @@ function useWidgetBuilderState(): {
           });
           if (action.payload === DisplayType.TABLE) {
             setYAxis([]);
-            setFields([...columns, ...aggregates, ...(yAxis ?? [])]);
             setLegendAlias([]);
+
+            const newFields = [...columns, ...aggregates, ...(yAxis ?? [])];
+            setFields(newFields);
+
+            // Keep the sort if it's already contained in the new fields
+            // Otherwise, reset sorting to the first field
+            if (
+              newFields.length > 0 &&
+              !newFields.find(field => generateFieldAsString(field) === sort?.[0]?.field)
+            ) {
+              setSort([
+                {
+                  kind: 'desc',
+                  field: generateFieldAsString(newFields[0] as QueryFieldValue),
+                },
+              ]);
+            }
           } else if (action.payload === DisplayType.BIG_NUMBER) {
             // TODO: Reset the selected aggregate here for widgets with equations
             setSort([]);
@@ -251,6 +268,7 @@ function useWidgetBuilderState(): {
       yAxis,
       displayType,
       query,
+      sort,
     ]
   );