diff --git a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.spec.tsx b/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.spec.tsx index 91858f169be120..522596e65243bb 100644 --- a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.spec.tsx +++ b/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', () => { diff --git a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx b/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx index a50a32563a48ca..400ab8c71e7e2e 100644 --- a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx +++ b/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, ] );