fix: notebook table sorting (#27524)

PostHog · Jan 15, 2025 · ea6bfb2 · ea6bfb2
1 parent 26ca405
commit ea6bfb2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx b/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx
@@ -39,9 +39,9 @@ function titleColumn(): LemonTableColumn<NotebookListItemType, 'title'> {
 }
 
 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}
             />
         </div>
     )

diff --git 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<notebooksTableLogicType>([
     path(['scenes', 'notebooks', 'NotebooksTable', 'notebooksTableLogic']),
     actions({
         loadNotebooks: true,
         setFilters: (filters: Partial<NotebooksListFilters>) => ({ filters }),
-        setSortValue: (sortValue: string | null) => ({ sortValue }),
+        tableSortingChanged: (sorting: Sorting | null) => ({
+            sorting,
+        }),
         setPage: (page: number) => ({ page }),
     }),
     connect({
@@ -61,6 +64,13 @@ export const notebooksTableLogic = kea<notebooksTableLogicType>([
                 setSortValue: () => 1,
             },
         ],
+        tableSorting: [
+            DEFAULT_SORTING,
+            { persist: true },
+            {
+                tableSortingChanged: (_, { sorting }) => sorting || DEFAULT_SORTING,
+            },
+        ],
     }),
     loaders(({ values }) => ({
         notebooksResponse: [