Improve database functions list (supabase#39835)

Author: SaxonF

apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx

@@ -1,6 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { includes, noop, sortBy } from 'lodash'
 import { Copy, Edit, Edit2, FileText, MoreVertical, Trash } from 'lucide-react'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
@@ -23,6 +24,8 @@ interface FunctionListProps {
   schema: string
   filterString: string
   isLocked: boolean
+  returnTypeFilter: string[]
+  securityFilter: string[]
   duplicateFunction: (fn: any) => void
   editFunction: (fn: any) => void
   deleteFunction: (fn: any) => void
@@ -32,6 +35,8 @@ const FunctionList = ({
   schema,
   filterString,
   isLocked,
+  returnTypeFilter,
+  securityFilter,
   duplicateFunction = noop,
   editFunction = noop,
   deleteFunction = noop,
@@ -45,9 +50,16 @@ const FunctionList = ({
     connectionString: selectedProject?.connectionString,
   })
 
-  const filteredFunctions = (functions ?? []).filter((x) =>
-    includes(x.name.toLowerCase(), filterString.toLowerCase())
-  )
+  const filteredFunctions = (functions ?? []).filter((x) => {
+    const matchesName = includes(x.name.toLowerCase(), filterString.toLowerCase())
+    const matchesReturnType =
+      returnTypeFilter.length === 0 || returnTypeFilter.includes(x.return_type)
+    const matchesSecurity =
+      securityFilter.length === 0 ||
+      (securityFilter.includes('definer') && x.security_definer) ||
+      (securityFilter.includes('invoker') && !x.security_definer)
+    return matchesName && matchesReturnType && matchesSecurity
+  })
   const _functions = sortBy(
     filteredFunctions.filter((x) => x.schema == schema),
     (func) => func.name.toLocaleLowerCase()
@@ -100,16 +112,30 @@ const FunctionList = ({
                 {x.name}
               </Button>
             </TableCell>
-            <TableCell className="table-cell overflow-auto">
-              <p title={x.argument_types} className="truncate">
+            <TableCell className="table-cell">
+              <p title={x.argument_types} className="truncate text-foreground-light">
                 {x.argument_types || '-'}
               </p>
             </TableCell>
             <TableCell className="table-cell">
-              <p title={x.return_type}>{x.return_type}</p>
+              {x.return_type === 'trigger' ? (
+                <Link
+                  href={`/project/${projectRef}/database/triggers?search=${x.name}`}
+                  className="truncate text-link"
+                  title={x.return_type}
+                >
+                  {x.return_type}
+                </Link>
+              ) : (
+                <p title={x.return_type} className="truncate text-foreground-light">
+                  {x.return_type}
+                </p>
+              )}
             </TableCell>
             <TableCell className="table-cell">
-              {x.security_definer ? 'Definer' : 'Invoker'}
+              <p className="truncate text-foreground-light">
+                {x.security_definer ? 'Definer' : 'Invoker'}
+              </p>
             </TableCell>
             <TableCell className="text-right">
               {!isLocked && (

apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx

@@ -3,6 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { noop } from 'lodash'
 import { Search } from 'lucide-react'
 import { useRouter } from 'next/router'
+import { parseAsJson, useQueryState } from 'nuqs'
 
 import { useParams } from 'common'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
@@ -27,6 +28,10 @@ import {
   TableHeader,
   TableRow,
 } from 'ui'
+import {
+  ReportsSelectFilter,
+  selectFilterSchema,
+} from 'components/interfaces/Reports/v2/ReportsSelectFilter'
 import { ProtectedSchemaWarning } from '../../ProtectedSchemaWarning'
 import FunctionList from './FunctionList'
 
@@ -51,6 +56,16 @@ const FunctionsList = ({
 
   const filterString = search ?? ''
 
+  // Filters
+  const [returnTypeFilter, setReturnTypeFilter] = useQueryState(
+    'return_type',
+    parseAsJson(selectFilterSchema.parse)
+  )
+  const [securityFilter, setSecurityFilter] = useQueryState(
+    'security',
+    parseAsJson(selectFilterSchema.parse)
+  )
+
   const setFilterString = (str: string) => {
     const url = new URL(document.URL)
     if (str === '') {
@@ -84,6 +99,18 @@ const FunctionsList = ({
     connectionString: project?.connectionString,
   })
 
+  // Get unique return types from functions in the selected schema
+  const schemaFunctions = (functions ?? []).filter((fn) => fn.schema === selectedSchema)
+  const uniqueReturnTypes = Array.from(new Set(schemaFunctions.map((fn) => fn.return_type))).sort()
+
+  // Get security options based on what exists in the selected schema
+  const hasDefiner = schemaFunctions.some((fn) => fn.security_definer)
+  const hasInvoker = schemaFunctions.some((fn) => !fn.security_definer)
+  const securityOptions = [
+    ...(hasDefiner ? [{ label: 'Definer', value: 'definer' }] : []),
+    ...(hasInvoker ? [{ label: 'Invoker', value: 'invoker' }] : []),
+  ]
+
   if (isLoading) return <GenericSkeletonLoader />
   if (isError) return <AlertError error={error} subject="Failed to retrieve database functions" />
 
@@ -132,6 +159,22 @@ const FunctionsList = ({
                 className="w-full lg:w-52"
                 onChange={(e) => setFilterString(e.target.value)}
               />
+              <ReportsSelectFilter
+                label="Return Type"
+                options={uniqueReturnTypes.map((type) => ({
+                  label: type,
+                  value: type,
+                }))}
+                value={returnTypeFilter ?? []}
+                onChange={setReturnTypeFilter}
+                showSearch
+              />
+              <ReportsSelectFilter
+                label="Security"
+                options={securityOptions}
+                value={securityFilter ?? []}
+                onChange={setSecurityFilter}
+              />
             </div>
 
             <div className="flex items-center gap-x-2">
@@ -201,6 +244,8 @@ const FunctionsList = ({
                   schema={selectedSchema}
                   filterString={filterString}
                   isLocked={isSchemaLocked}
+                  returnTypeFilter={returnTypeFilter ?? []}
+                  securityFilter={securityFilter ?? []}
                   duplicateFunction={duplicateFunction}
                   editFunction={editFunction}
                   deleteFunction={deleteFunction}

apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx

@@ -44,8 +44,10 @@ const TriggerList = ({
     projectRef: project?.ref,
     connectionString: project?.connectionString,
   })
-  const filteredTriggers = (triggers ?? []).filter((x) =>
-    includes(x.name.toLowerCase(), filterString.toLowerCase())
+  const filteredTriggers = (triggers ?? []).filter(
+    (x) =>
+      includes(x.name.toLowerCase(), filterString.toLowerCase()) ||
+      (x.function_name && includes(x.function_name.toLowerCase(), filterString.toLowerCase()))
   )
 
   const _triggers = sortBy(

apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx

@@ -2,7 +2,7 @@ import { PostgresTrigger } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { noop } from 'lodash'
 import { DatabaseZap, FunctionSquare, Plus, Search, Shield } from 'lucide-react'
-import { useState } from 'react'
+import { parseAsString, useQueryState } from 'nuqs'
 
 import AlphaPreview from 'components/to-be-cleaned/AlphaPreview'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
@@ -48,7 +48,11 @@ const TriggersList = ({
   const { data: project } = useSelectedProjectQuery()
   const aiSnap = useAiAssistantStateSnapshot()
   const { selectedSchema, setSelectedSchema } = useQuerySchemaState()
-  const [filterString, setFilterString] = useState<string>('')
+
+  const [filterString, setFilterString] = useQueryState(
+    'search',
+    parseAsString.withDefault('').withOptions({ history: 'replace', clearOnDefault: true })
+  )
 
   const { data: protectedSchemas } = useProtectedSchemas()
   const { isSchemaLocked } = useIsProtectedSchema({ schema: selectedSchema })