feat: Notebook list sorting and filtering

frontend/src/lib/api.ts

@@ -1536,13 +1536,19 @@ const api = {
             return await new ApiRequest().notebook(notebookId).update({ data })
         },
         async list(
-            contains?: NotebookNodeResource[],
-            createdBy?: UserBasicType['uuid'],
-            search?: string
-        ): Promise<PaginatedResponse<NotebookType>> {
+            params: {
+                contains?: NotebookNodeResource[]
+                created_by?: UserBasicType['uuid']
+                search?: string
+                order?: string
+                offset?: number
+                limit?: number
+            } = {}
+        ): Promise<CountedPaginatedResponse<NotebookType>> {
             // TODO attrs could be a union of types like NotebookNodeRecordingAttributes
             const apiRequest = new ApiRequest().notebooks()
-            let q = {}
+            const { contains, ...queryParams } = objectClean(params)
+
             if (contains?.length) {
                 const containsString =
                     contains
@@ -1552,15 +1558,11 @@ const api = {
                             return `${target}${match}`
                         })
                         .join(',') || undefined
-                q = { ...q, contains: containsString, created_by: createdBy }
-            }
-            if (createdBy) {
-                q = { ...q, created_by: createdBy }
-            }
-            if (search) {
-                q = { ...q, search: search }
+
+                queryParams['contains'] = containsString
             }
-            return await apiRequest.withQueryString(q).get()
+
+            return await apiRequest.withQueryString(queryParams).get()
         },
         async create(data?: Pick<NotebookType, 'content' | 'text_content' | 'title'>): Promise<NotebookType> {
             return await new ApiRequest().notebooks().create({ data })

frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx

@@ -6,11 +6,11 @@ import { UserBasicType } from '~/types'
 import { ProfilePicture } from '../ProfilePicture'
 import { LemonTableColumn } from './types'
 
-export function createdAtColumn<T extends { created_at?: string | Dayjs | null }>(): LemonTableColumn<T, 'created_at'> {
+export function atColumn<T extends Record<string, any>>(key: keyof T, title: string): LemonTableColumn<T, typeof key> {
     return {
-        title: 'Created',
-        dataIndex: 'created_at',
-        render: function RenderCreatedAt(created_at) {
+        title: title,
+        dataIndex: key,
+        render: function RenderAt(created_at) {
             return created_at ? (
                 <div className="whitespace-nowrap text-right">
                     <TZLabel time={created_at} />
@@ -20,9 +20,16 @@ export function createdAtColumn<T extends { created_at?: string | Dayjs | null }
             )
         },
         align: 'right',
-        sorter: (a, b) => dayjs(a.created_at || 0).diff(b.created_at || 0),
+        sorter: (a, b) => dayjs(a[key] || 0).diff(b[key] || 0),
     }
 }
+export function createdAtColumn<T extends { created_at?: string | Dayjs | null }>(): LemonTableColumn<T, 'created_at'> {
+    return atColumn('created_at', 'Created') as LemonTableColumn<T, 'created_at'>
+}
+
+export function updatedAtColumn<T extends { updated_at?: string | Dayjs | null }>(): LemonTableColumn<T, 'updated_at'> {
+    return atColumn('updated_at', 'Updated') as LemonTableColumn<T, 'updated_at'>
+}
 
 export function createdByColumn<T extends { created_by?: UserBasicType | null }>(): LemonTableColumn<T, 'created_by'> {
     return {
@@ -44,21 +51,3 @@ export function createdByColumn<T extends { created_by?: UserBasicType | null }>
             ),
     }
 }
-
-export function updatedAtColumn<T extends { updated_at?: string | Dayjs | null }>(): LemonTableColumn<T, 'updated_at'> {
-    return {
-        title: 'Updated',
-        dataIndex: 'updated_at',
-        render: function RenderCreatedAt(updated_at) {
-            return updated_at ? (
-                <div className="whitespace-nowrap text-right">
-                    <TZLabel time={updated_at} />
-                </div>
-            ) : (
-                <span className="text-muted">—</span>
-            )
-        },
-        align: 'right',
-        sorter: (a, b) => dayjs(a.updated_at || 0).diff(b.updated_at || 0),
-    }
-}

frontend/src/scenes/notebooks/NotebookSelectButton/notebookSelectButtonLogic.ts

@@ -53,7 +53,7 @@ export const notebookSelectButtonLogic = kea<notebookSelectButtonLogicType>([
             {
                 loadAllNotebooks: async (_, breakpoint) => {
                     await breakpoint(100)
-                    const response = await api.notebooks.list(undefined, undefined, values.searchQuery ?? undefined)
+                    const response = await api.notebooks.list({ search: values.searchQuery ?? undefined })
                     // TODO for simplicity we'll assume the results will fit into one page
                     return response.results
                 },
@@ -67,23 +67,23 @@ export const notebookSelectButtonLogic = kea<notebookSelectButtonLogicType>([
                     if (!props.resource) {
                         return []
                     }
-                    const response = await api.notebooks.list(
-                        props.resource && typeof props.resource !== 'boolean'
-                            ? [
-                                  {
-                                      type: props.resource.type,
-                                      attrs: {
-                                          id:
-                                              props.resource.type === NotebookNodeType.Query
-                                                  ? props.resource.attrs.query.shortId
-                                                  : props.resource.attrs.id,
+                    const response = await api.notebooks.list({
+                        contains:
+                            props.resource && typeof props.resource !== 'boolean'
+                                ? [
+                                      {
+                                          type: props.resource.type,
+                                          attrs: {
+                                              id:
+                                                  props.resource.type === NotebookNodeType.Query
+                                                      ? props.resource.attrs.query.shortId
+                                                      : props.resource.attrs.id,
+                                          },
                                       },
-                                  },
-                              ]
-                            : undefined,
-                        undefined,
-                        values.searchQuery ?? undefined
-                    )
+                                  ]
+                                : undefined,
+                        search: values.searchQuery ?? undefined,
+                    })
                     // TODO for simplicity we'll assume the results will fit into one page
                     return response.results
                 },

frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx

@@ -4,7 +4,7 @@ import { IconDelete, IconEllipsis } from 'lib/lemon-ui/icons'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonMenu } from 'lib/lemon-ui/LemonMenu'
 import { LemonTable, LemonTableColumn, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
-import { createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
+import { atColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { Link } from 'lib/lemon-ui/Link'
 import { useEffect } from 'react'
 import { ContainsTypeFilters } from 'scenes/notebooks/NotebooksTable/ContainsTypeFilter'
@@ -39,8 +39,9 @@ function titleColumn(): LemonTableColumn<NotebookListItemType, 'title'> {
 }
 
 export function NotebooksTable(): JSX.Element {
-    const { notebooksAndTemplates, filters, notebooksLoading, notebookTemplates } = useValues(notebooksTableLogic)
-    const { loadNotebooks, setFilters } = useActions(notebooksTableLogic)
+    const { notebooksAndTemplates, filters, notebooksResponseLoading, notebookTemplates, sortValue, pagination } =
+        useValues(notebooksTableLogic)
+    const { loadNotebooks, setFilters, setSortValue } = useActions(notebooksTableLogic)
     const { meFirstMembers } = useValues(membersLogic)
     const { selectNotebook } = useActions(notebookPanelLogic)
 
@@ -50,11 +51,16 @@ export function NotebooksTable(): JSX.Element {
 
     const columns: LemonTableColumns<NotebookListItemType> = [
         titleColumn() as LemonTableColumn<NotebookListItemType, keyof NotebookListItemType | undefined>,
+
         createdByColumn<NotebookListItemType>() as LemonTableColumn<
             NotebookListItemType,
             keyof NotebookListItemType | undefined
         >,
-        createdAtColumn<NotebookListItemType>() as LemonTableColumn<
+        atColumn<NotebookListItemType>('created_at', 'Created') as LemonTableColumn<
+            NotebookListItemType,
+            keyof NotebookListItemType | undefined
+        >,
+        atColumn<NotebookListItemType>('last_modified_at', 'Last modified') as LemonTableColumn<
             NotebookListItemType,
             keyof NotebookListItemType | undefined
         >,
@@ -135,14 +141,16 @@ export function NotebooksTable(): JSX.Element {
             </div>
             <LemonTable
                 data-attr="notebooks-table"
-                pagination={{ pageSize: 100 }}
+                pagination={pagination}
                 dataSource={notebooksAndTemplates}
                 rowKey="short_id"
                 columns={columns}
-                loading={notebooksLoading}
+                loading={notebooksResponseLoading}
                 defaultSorting={{ columnKey: '-created_at', order: 1 }}
                 emptyState={`No notebooks matching your filters!`}
                 nouns={['notebook', 'notebooks']}
+                sorting={sortValue}
+                onSort={(newSorting) => setSortValue(newSorting)}
             />
         </div>
     )

frontend/src/scenes/notebooks/NotebooksTable/notebooksTableLogic.ts

@@ -1,6 +1,8 @@
+import { PaginationManual } from '@posthog/lemon-ui'
 import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
-import api from 'lib/api'
+import api, { CountedPaginatedResponse } from 'lib/api'
+import { Sorting } from 'lib/lemon-ui/LemonTable'
 import { objectClean, objectsEqual } from 'lib/utils'
 
 import { notebooksModel } from '~/models/notebooksModel'
@@ -21,11 +23,15 @@ export const DEFAULT_FILTERS: NotebooksListFilters = {
     contains: [],
 }
 
+const RESULTS_PER_PAGE = 50
+
 export const notebooksTableLogic = kea<notebooksTableLogicType>([
     path(['scenes', 'notebooks', 'NotebooksTable', 'notebooksTableLogic']),
     actions({
         loadNotebooks: true,
         setFilters: (filters: Partial<NotebooksListFilters>) => ({ filters }),
+        setSortValue: (sortValue: Sorting | null) => ({ sortValue }),
+        setPage: (page: number) => ({ page }),
     }),
     connect({
         values: [notebooksModel, ['notebookTemplates']],
@@ -42,10 +48,24 @@ export const notebooksTableLogic = kea<notebooksTableLogicType>([
                     }),
             },
         ],
+        sortValue: [
+            null as Sorting | null,
+            {
+                setSortValue: (_, { sortValue }) => sortValue,
+            },
+        ],
+        page: [
+            1,
+            {
+                setPage: (_, { page }) => page,
+                setFilters: () => 1,
+                setSortValue: () => 1,
+            },
+        ],
     }),
     loaders(({ values }) => ({
-        notebooks: [
-            [] as NotebookListItemType[],
+        notebooksResponse: [
+            null as CountedPaginatedResponse<NotebookListItemType> | null,
             {
                 loadNotebooks: async (_, breakpoint) => {
                     // TODO: Support pagination
@@ -56,30 +76,57 @@ export const notebooksTableLogic = kea<notebooksTableLogicType>([
                     const createdByForQuery =
                         values.filters?.createdBy === DEFAULT_FILTERS.createdBy ? undefined : values.filters?.createdBy
 
-                    const res = await api.notebooks.list(contains, createdByForQuery, values.filters?.search)
+                    const res = await api.notebooks.list({
+                        contains,
+                        created_by: createdByForQuery,
+                        search: values.filters?.search || undefined,
+                        order: values.sortValue
+                            ? `${values.sortValue.order === -1 ? '-' : ''}${values.sortValue.columnKey}`
+                            : '-last_modified_at',
+                        limit: RESULTS_PER_PAGE,
+                        offset: (values.page - 1) * RESULTS_PER_PAGE,
+                    })
 
                     breakpoint()
-                    return res.results
+                    return res
                 },
             },
         ],
     })),
     listeners(({ actions }) => ({
-        setFilters: () => {
-            actions.loadNotebooks()
-        },
-        deleteNotebookSuccess: () => {
-            // TODO at some point this will be slow enough it makes sense to patch the in-memory list but for simplicity...
-            actions.loadNotebooks()
-        },
+        setFilters: () => actions.loadNotebooks(),
+        setSortValue: () => actions.loadNotebooks(),
+        setPage: () => actions.loadNotebooks(),
+        deleteNotebookSuccess: () => actions.loadNotebooks(),
     })),
-    selectors({
+    selectors(({ actions }) => ({
         notebooksAndTemplates: [
             (s) => [s.notebooks, s.notebookTemplates, s.filters],
             (notebooks, notebookTemplates, filters): NotebookListItemType[] => {
                 const includeTemplates = objectsEqual(filters, DEFAULT_FILTERS)
                 return [...(includeTemplates ? (notebookTemplates as NotebookListItemType[]) : []), ...notebooks]
             },
         ],
-    }),
+
+        notebooks: [
+            (s) => [s.notebooksResponse],
+            (notebooksResponse): NotebookListItemType[] => {
+                return notebooksResponse?.results || []
+            },
+        ],
+
+        pagination: [
+            (s) => [s.page, s.notebooksResponse],
+            (page, notebooksResponse): PaginationManual => {
+                return {
+                    controlled: true,
+                    pageSize: RESULTS_PER_PAGE,
+                    currentPage: page,
+                    entryCount: notebooksResponse?.count ?? 0,
+                    onBackward: () => actions.setPage(page - 1),
+                    onForward: () => actions.setPage(page + 1),
+                }
+            },
+        ],
+    })),
 ])

posthog/api/notebook.py

@@ -258,27 +258,26 @@ def get_queryset(self) -> QuerySet:
     def _filter_request(self, request: Request, queryset: QuerySet) -> QuerySet:
         filters = request.GET.dict()
 
-        for key in filters:
+        for key, value in filters.items():
             if key == "user":
                 queryset = queryset.filter(created_by=request.user)
             elif key == "created_by":
-                queryset = queryset.filter(created_by__uuid=request.GET["created_by"])
+                queryset = queryset.filter(created_by__uuid=value)
+            elif key == "last_modified_by":
+                queryset = queryset.filter(last_modified_by__uuid=value)
             elif key == "date_from":
-                queryset = queryset.filter(
-                    last_modified_at__gt=relative_date_parse(request.GET["date_from"], self.team.timezone_info)
-                )
+                queryset = queryset.filter(last_modified_at__gt=relative_date_parse(value, self.team.timezone_info))
             elif key == "date_to":
-                queryset = queryset.filter(
-                    last_modified_at__lt=relative_date_parse(request.GET["date_to"], self.team.timezone_info)
-                )
+                queryset = queryset.filter(last_modified_at__lt=relative_date_parse(value, self.team.timezone_info))
             elif key == "search":
                 queryset = queryset.filter(
                     # some notebooks have no text_content until next saved, so we need to check the title too
                     # TODO this can be removed once all/most notebooks have text_content
-                    Q(title__search=request.GET["search"]) | Q(text_content__search=request.GET["search"])
+                    Q(title__search=value)
+                    | Q(text_content__search=value)
                 )
             elif key == "contains":
-                contains = request.GET["contains"]
+                contains = value
                 match_pairs = contains.replace(",", " ").split(" ")
                 # content is a JSONB field that has an array of objects under the key "content"
                 # each of those (should) have a "type" field