diff --git a/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx b/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx index e43b579682566..365900880463a 100644 --- a/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx +++ b/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx @@ -39,9 +39,9 @@ function titleColumn(): LemonTableColumn { } export function NotebooksTable(): JSX.Element { - const { notebooksAndTemplates, filters, notebooksResponseLoading, notebookTemplates, sortValue, pagination } = + const { notebooksAndTemplates, filters, notebooksResponseLoading, notebookTemplates, tableSorting, pagination } = useValues(notebooksTableLogic) - const { loadNotebooks, setFilters, setSortValue } = useActions(notebooksTableLogic) + const { loadNotebooks, setFilters, tableSortingChanged } = useActions(notebooksTableLogic) const { selectNotebook } = useActions(notebookPanelLogic) useEffect(() => { @@ -132,13 +132,10 @@ export function NotebooksTable(): JSX.Element { rowKey="short_id" columns={columns} loading={notebooksResponseLoading} - defaultSorting={{ columnKey: '-created_at', order: 1 }} + defaultSorting={tableSorting} emptyState="No notebooks matching your filters!" nouns={['notebook', 'notebooks']} - sorting={sortValue ? { columnKey: sortValue, order: sortValue.startsWith('-') ? -1 : 1 } : undefined} - onSort={(newSorting) => - setSortValue(newSorting ? `${newSorting.order === -1 ? '-' : ''}${newSorting.columnKey}` : null) - } + onSort={tableSortingChanged} /> ) diff --git a/frontend/src/scenes/notebooks/NotebooksTable/notebooksTableLogic.ts b/frontend/src/scenes/notebooks/NotebooksTable/notebooksTableLogic.ts index 5a3f4bbd350f1..b8dc0e913423d 100644 --- a/frontend/src/scenes/notebooks/NotebooksTable/notebooksTableLogic.ts +++ b/frontend/src/scenes/notebooks/NotebooksTable/notebooksTableLogic.ts @@ -1,4 +1,4 @@ -import { PaginationManual } from '@posthog/lemon-ui' +import { PaginationManual, Sorting } from '@posthog/lemon-ui' import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea' import { loaders } from 'kea-loaders' import api, { CountedPaginatedResponse } from 'lib/api' @@ -23,13 +23,16 @@ export const DEFAULT_FILTERS: NotebooksListFilters = { } const RESULTS_PER_PAGE = 50 +const DEFAULT_SORTING: Sorting = { columnKey: '-created_at', order: 1 } export const notebooksTableLogic = kea([ path(['scenes', 'notebooks', 'NotebooksTable', 'notebooksTableLogic']), actions({ loadNotebooks: true, setFilters: (filters: Partial) => ({ filters }), - setSortValue: (sortValue: string | null) => ({ sortValue }), + tableSortingChanged: (sorting: Sorting | null) => ({ + sorting, + }), setPage: (page: number) => ({ page }), }), connect({ @@ -61,6 +64,13 @@ export const notebooksTableLogic = kea([ setSortValue: () => 1, }, ], + tableSorting: [ + DEFAULT_SORTING, + { persist: true }, + { + tableSortingChanged: (_, { sorting }) => sorting || DEFAULT_SORTING, + }, + ], }), loaders(({ values }) => ({ notebooksResponse: [