chore: paginate user content (supabase#30675)

* chore: paginate user content

* progress

* loading states

* add load more buttons to private snippets

* working pagination

* fix some types

* always show snippet counts

* support new api parameters

* favorite snippets

* progress

* searching

* paginate root folder

* fix renaming snippets

* fix ts

* removed unused prop

* Shift sharing/unsharing query logic outside of valtio to leverage on RQ only

* Fix invalidation on an unsaved snippet

* Clean up

* Fix

* Clean up

* Update API type

* Update API

* fix duplicate snippets error after moving a snippet

* add currently selected snippet

* Fix unsharing a snippet that has yet to be opened

* i'm dumb

* fix sharing a snippet

* fix sharing and unsharing

* show favorite or shared snippet in list even if it's in another page

* Fix wrong import for debounce

* Fix false positive toast error when creating custom report

* Update API type

* Change create new snippet CTA to link back to /new with skip flag

* Fix saving logs explorer query

* Bump page number

---------

Co-authored-by: Joshen Lim <[email protected]>

Author: alaister

apps/studio/components/interfaces/Integrations/CronJobs/CronJobScheduleSection.tsx

@@ -1,4 +1,3 @@
-import { toString as CronToString } from 'cronstrue'
 import { motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
 import { UseFormReturn } from 'react-hook-form'
@@ -26,7 +25,7 @@ import {
 } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { CreateCronJobForm } from './CreateCronJobSheet'
-import { formatScheduleString, getScheduleMessage, secondsPattern } from './CronJobs.utils'
+import { formatScheduleString, getScheduleMessage } from './CronJobs.utils'
 import CronSyntaxChart from './CronSyntaxChart'
 
 interface CronJobScheduleSectionProps {

apps/studio/components/interfaces/Reports/Reports.CreateReportModal.tsx

@@ -21,7 +21,7 @@ export const CreateReportModal = ({ visible, onCancel, afterSubmit }: CreateRepo
   const { mutate: insertReport, isLoading: isCreating } = useContentInsertMutation({
     onSuccess: (data) => {
       toast.success('Successfully created new report')
-      const newReportId = data[0].id
+      const newReportId = data.id
       router.push(`/project/${ref}/reports/${newReportId}`)
       afterSubmit()
     },

apps/studio/components/interfaces/Reports/Reports.UpdateModal.tsx

@@ -39,6 +39,7 @@ export const UpdateCustomReportModal = ({
       projectRef: ref,
       payload: {
         ...selectedReport,
+        owner_id: selectedReport.owner_id!,
         project_id: selectedReport.project_id,
         id: selectedReport.id,
         name: newVals.name,

apps/studio/components/interfaces/Reports/Reports.tsx

@@ -34,7 +34,10 @@ const Reports = () => {
   const [endDate, setEndDate] = useState<any>(null)
   const [hasEdits, setHasEdits] = useState<any>(false)
 
-  const { data: userContents, isLoading } = useContentQuery(ref)
+  const { data: userContents, isLoading } = useContentQuery({
+    projectRef: ref,
+    type: 'report',
+  })
   const { mutate: saveReport, isLoading: isSaving } = useContentUpdateMutation({
     onSuccess: () => {
       setHasEdits(false)

apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx

@@ -190,7 +190,7 @@ const MonacoEditor = ({
         onMount={handleEditorOnMount}
         onChange={handleEditorChange}
         defaultLanguage="pgsql"
-        defaultValue={snippet?.snippet.content.sql}
+        defaultValue={snippet?.snippet.content?.sql}
         path={id}
         options={{
           tabSize: 2,

apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx

@@ -9,8 +9,12 @@ import { useParams } from 'common'
 import { getContentById } from 'data/content/content-id-query'
 import { useContentUpsertV2Mutation } from 'data/content/content-upsert-v2-mutation'
 import { useSQLSnippetFolderCreateMutation } from 'data/content/sql-folder-create-mutation'
-import { Snippet, SnippetDetail } from 'data/content/sql-folders-query'
-import { useSnippetFolders, useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
+import { Snippet } from 'data/content/sql-folders-query'
+import {
+  SnippetWithContent,
+  useSnippetFolders,
+  useSqlEditorV2StateSnapshot,
+} from 'state/sql-editor-v2'
 import {
   Button,
   CommandEmpty_Shadcn_,
@@ -125,16 +129,18 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
 
       await Promise.all(
         snippets.map(async (snippet) => {
-          let snippetContent = (snippet as SnippetDetail)?.content
+          let snippetContent = (snippet as SnippetWithContent)?.content
           if (snippetContent === undefined) {
             const { content } = await getContentById({ projectRef: ref, id: snippet.id })
-            snippetContent = content
+            if ('sql' in content) {
+              snippetContent = content
+            }
           }
 
           if (snippetContent === undefined) {
             return toast.error('Failed to save snippet: Unable to retrieve snippet contents')
           } else {
-            moveSnippetAsync({
+            await moveSnippetAsync({
               projectRef: ref,
               payload: {
                 id: snippet.id,
@@ -144,7 +150,7 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
                 visibility: snippet.visibility,
                 project_id: snippet.project_id,
                 owner_id: snippet.owner_id,
-                folder_id: selectedId === 'root' ? (null as any) : folderId,
+                folder_id: selectedId === 'root' ? null : folderId,
                 content: snippetContent as any,
               },
             })
@@ -158,7 +164,7 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
       snippets.forEach((snippet) => {
         snapV2.updateSnippet({
           id: snippet.id,
-          snippet: { ...snippet, folder_id: selectedId === 'root' ? (null as any) : selectedId },
+          snippet: { ...snippet, folder_id: selectedId === 'root' ? null : selectedId },
           skipSave: true,
         })
       })

apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx

@@ -4,6 +4,7 @@ import { toast } from 'sonner'
 import { useParams } from 'common'
 import { useSqlTitleGenerateMutation } from 'data/ai/sql-title-mutation'
 import { getContentById } from 'data/content/content-id-query'
+import { useContentUpdateMutation } from 'data/content/content-update-mutation'
 import { Snippet } from 'data/content/sql-folders-query'
 import type { SqlSnippet } from 'data/content/sql-snippets-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
@@ -57,7 +58,9 @@ const RenameQueryModal = ({
     } else {
       try {
         const { content } = await getContentById({ projectRef: ref, id: snippet.id })
-        titleSql({ sql: content.sql })
+        if ('sql' in content) {
+          titleSql({ sql: content.sql })
+        }
       } catch (error) {
         toast.error('Unable to generate title based on query contents')
       }
@@ -70,24 +73,44 @@ const RenameQueryModal = ({
     return errors
   }
 
+  const { mutateAsync: updateContent } = useContentUpdateMutation()
+
   const onSubmit = async (values: any, { setSubmitting }: any) => {
     if (!ref) return console.error('Project ref is required')
     if (!id) return console.error('Snippet ID is required')
 
     setSubmitting(true)
     try {
+      let localSnippet = snippet
+
       // [Joshen] For SQL V2 - content is loaded on demand so we need to fetch the data if its not already loaded in the valtio state
-      if (!('content' in snippet)) {
-        // [Joshen] I feel like there's definitely some optimization we can do here but will involve changes to API
-        const snippet = await getContentById({ projectRef: ref, id })
-        snapV2.addSnippet({ projectRef: ref, snippet })
+      if (!('content' in localSnippet)) {
+        localSnippet = await getContentById({ projectRef: ref, id })
+
+        snapV2.addSnippet({ projectRef: ref, snippet: localSnippet })
       }
-      snapV2.renameSnippet({ id, name: nameInput, description: descriptionInput })
 
+      const updatedSnippet = await updateContent({
+        projectRef: ref,
+        id,
+        type: localSnippet.type,
+        content: (localSnippet as any).content,
+        name: nameInput,
+        description: descriptionInput,
+      })
+
+      snapV2.renameSnippet({
+        id,
+        name: updatedSnippet.name,
+        description: updatedSnippet.description,
+      })
+
+      toast.success('Successfully renamed snippet!')
       if (onComplete) onComplete()
     } catch (error: any) {
+      setSubmitting(false)
       // [Joshen] We probably need some rollback cause all the saving is async
-      toast.error(`Failed to rename query: ${error.message}`)
+      toast.error(`Failed to rename snippet: ${error.message}`)
     }
   }
 

apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx

@@ -227,7 +227,7 @@ export const SQLEditor = () => {
       const selection = editor.getSelection()
       const selectedValue = selection ? editor.getModel()?.getValueInRange(selection) : undefined
       const sql = snippet
-        ? (selectedValue || editorRef.current?.getValue()) ?? snippet.snippet.content.sql
+        ? (selectedValue || editorRef.current?.getValue()) ?? snippet.snippet.content?.sql
         : selectedValue || editorRef.current?.getValue()
       formatQuery(
         {
@@ -267,7 +267,7 @@ export const SQLEditor = () => {
         const selectedValue = selection ? editor.getModel()?.getValueInRange(selection) : undefined
 
         const sql = snippet
-          ? (selectedValue || editorRef.current?.getValue()) ?? snippet.snippet.content.sql
+          ? (selectedValue || editorRef.current?.getValue()) ?? snippet.snippet.content?.sql
           : selectedValue || editorRef.current?.getValue()
 
         let queryHasIssues = false
@@ -373,7 +373,9 @@ export const SQLEditor = () => {
       const result = snapV2.results[id]?.[0]
       appSnap.setAiAssistantPanel({
         open: true,
-        sqlSnippets: [snippet.snippet.content.sql.replace(sqlAiDisclaimerComment, '').trim()],
+        sqlSnippets: [
+          (snippet.snippet.content?.sql ?? '').replace(sqlAiDisclaimerComment, '').trim(),
+        ],
         initialInput: `Help me to debug the attached sql snippet which gives the following error: \n\n${result.error.message}`,
       })
     } catch (error: unknown) {

apps/studio/components/interfaces/SQLEditor/SQLEditor.utils.ts

@@ -1,5 +1,5 @@
-import { SnippetDetail } from 'data/content/sql-folders-query'
 import { removeCommentsFromSql } from 'lib/helpers'
+import type { SnippetWithContent } from 'state/sql-editor-v2'
 import type { SqlSnippets, UserContent } from 'types'
 import {
   NEW_SQL_SNIPPET_SKELETON,
@@ -52,7 +52,7 @@ export const createSqlSnippetSkeletonV2 = ({
   owner_id: number
   project_id: number
   folder_id?: string
-}): SnippetDetail => {
+}): SnippetWithContent => {
   return {
     ...NEW_SQL_SNIPPET_SKELETON,
     id,

apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx

@@ -14,8 +14,6 @@ import { toast } from 'sonner'
 import { RoleImpersonationPopover } from 'components/interfaces/RoleImpersonationSelector'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import DatabaseSelector from 'components/ui/DatabaseSelector'
-import { Content, ContentData } from 'data/content/content-query'
-import { contentKeys } from 'data/content/keys'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { detectOS } from 'lib/helpers'
@@ -74,50 +72,10 @@ const UtilityActions = ({
 
   const addFavorite = async () => {
     snapV2.addFavorite(id)
-
-    client.setQueryData<ContentData>(
-      contentKeys.list(project?.ref),
-      (oldData: ContentData | undefined) => {
-        if (!oldData) return
-
-        return {
-          ...oldData,
-          content: oldData.content.map((content: Content) => {
-            if (content.type === 'sql' && content.id === id) {
-              return {
-                ...content,
-                content: { ...content.content, favorite: true },
-              }
-            }
-            return content
-          }),
-        }
-      }
-    )
   }
 
   const removeFavorite = async () => {
     snapV2.removeFavorite(id)
-
-    client.setQueryData<ContentData>(
-      contentKeys.list(project?.ref),
-      (oldData: ContentData | undefined) => {
-        if (!oldData) return
-
-        return {
-          ...oldData,
-          content: oldData.content.map((content: Content) => {
-            if (content.type === 'sql' && content.id === id) {
-              return {
-                ...content,
-                content: { ...content.content, favorite: false },
-              }
-            }
-            return content
-          }),
-        }
-      }
-    )
   }
 
   return (