Add link to function and table editor (supabase#40068)

* add link to function and table editor

* Tiny refactor

---------

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

Author: SaxonF

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

@@ -1,9 +1,12 @@
+import { PostgresTrigger } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { includes, sortBy } from 'lodash'
 import { Check, Copy, Edit, Edit2, MoreVertical, Trash, X } from 'lucide-react'
 
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { useParams } from 'common'
 import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { InlineLink } from 'components/ui/InlineLink'
 import { useDatabaseTriggersQuery } from 'data/database-triggers/database-triggers-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
@@ -24,7 +27,6 @@ import {
   TooltipTrigger,
 } from 'ui'
 import { generateTriggerCreateSQL } from './TriggerList.utils'
-import { PostgresTrigger } from '@supabase/postgres-meta'
 
 interface TriggerListProps {
   schema: string
@@ -35,18 +37,24 @@ interface TriggerListProps {
   deleteTrigger: (trigger: PostgresTrigger) => void
 }
 
-const TriggerList = ({
+export const TriggerList = ({
   schema,
   filterString,
   isLocked,
   editTrigger,
   duplicateTrigger,
   deleteTrigger,
 }: TriggerListProps) => {
+  const { ref: projectRef } = useParams()
   const { data: project } = useSelectedProjectQuery()
   const aiSnap = useAiAssistantStateSnapshot()
   const { openSidebar } = useSidebarManagerSnapshot()
 
+  const { can: canUpdateTriggers } = useAsyncCheckPermissions(
+    PermissionAction.TENANT_SQL_ADMIN_WRITE,
+    'triggers'
+  )
+
   const { data: triggers } = useDatabaseTriggersQuery({
     projectRef: project?.ref,
     connectionString: project?.connectionString,
@@ -56,15 +64,10 @@ const TriggerList = ({
       includes(x.name.toLowerCase(), filterString.toLowerCase()) ||
       (x.function_name && includes(x.function_name.toLowerCase(), filterString.toLowerCase()))
   )
-
   const _triggers = sortBy(
     filteredTriggers.filter((x) => x.schema == schema),
     (trigger) => trigger.name.toLocaleLowerCase()
   )
-  const { can: canUpdateTriggers } = useAsyncCheckPermissions(
-    PermissionAction.TENANT_SQL_ADMIN_WRITE,
-    'triggers'
-  )
 
   if (_triggers.length === 0 && filterString.length === 0) {
     return (
@@ -94,7 +97,7 @@ const TriggerList = ({
 
   return (
     <>
-      {_triggers.map((x: any) => (
+      {_triggers.map((x) => (
         <TableRow key={x.id}>
           <TableCell className="space-x-2">
             <Tooltip>
@@ -111,15 +114,33 @@ const TriggerList = ({
           </TableCell>
 
           <TableCell className="break-all">
-            <p title={x.table} className="truncate">
-              {x.table}
-            </p>
+            {x.table_id ? (
+              <InlineLink
+                title={x.table}
+                href={`/project/${projectRef}/editor/${x.table_id}`}
+                className="truncate block max-w-40"
+              >
+                {x.table}
+              </InlineLink>
+            ) : (
+              <p title={x.table} className="truncate">
+                {x.table}
+              </p>
+            )}
           </TableCell>
 
           <TableCell className="space-x-2">
-            <p title={x.function_name} className="truncate">
-              {x.function_name}
-            </p>
+            {x.function_name ? (
+              <InlineLink
+                title={x.function_name}
+                href={`/project/${projectRef}/database/functions?search=${x.function_name}&schema=${x.function_schema}`}
+                className="truncate block max-w-40"
+              >
+                {x.function_name}
+              </InlineLink>
+            ) : (
+              <p className="truncate text-foreground-light">-</p>
+            )}
           </TableCell>
 
           <TableCell>
@@ -176,7 +197,7 @@ const TriggerList = ({
                           const sql = generateTriggerCreateSQL(x)
                           openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
                           aiSnap.newChat({
-                            name: `Update trigger ${X.name}`,
+                            name: `Update trigger ${x.name}`,
                             initialInput: `Update this trigger which exists on the ${x.schema}.${x.table} table to...`,
                             suggestions: {
                               title:
@@ -237,5 +258,3 @@ const TriggerList = ({
     </>
   )
 }
-
-export default TriggerList

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

@@ -4,13 +4,11 @@ import { noop } from 'lodash'
 import { DatabaseZap, FunctionSquare, Plus, Search, Shield } from 'lucide-react'
 import { parseAsString, useQueryState } from 'nuqs'
 
-import AlphaPreview from 'components/to-be-cleaned/AlphaPreview'
-import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import SchemaSelector from 'components/ui/SchemaSelector'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
-import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { useDatabaseTriggersQuery } from 'data/database-triggers/database-triggers-query'
 import { useTablesQuery } from 'data/tables/tables-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
@@ -21,10 +19,7 @@ import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
 import {
   AiIconAnimation,
-  Button,
   Card,
-  CardContent,
-  cn,
   Input,
   Table,
   TableBody,
@@ -33,8 +28,7 @@ import {
   TableRow,
 } from 'ui'
 import { ProtectedSchemaWarning } from '../../ProtectedSchemaWarning'
-import TriggerList from './TriggerList'
-import Link from 'next/link'
+import { TriggerList } from './TriggerList'
 
 interface TriggersListProps {
   createTrigger: () => void
@@ -43,7 +37,7 @@ interface TriggersListProps {
   deleteTrigger: (trigger: PostgresTrigger) => void
 }
 
-const TriggersList = ({
+export const TriggersList = ({
   createTrigger = noop,
   editTrigger = noop,
   duplicateTrigger = noop,
@@ -248,5 +242,3 @@ const TriggersList = ({
     </div>
   )
 }
-
-export default TriggersList

apps/studio/components/ui/InlineLink.tsx

@@ -7,6 +7,7 @@ interface InlineLinkProps {
   className?: string
   target?: string
   rel?: string
+  title?: string
   onClick?: () => void
 }
 
@@ -17,18 +18,26 @@ export const InlineLink = ({
   href,
   className: _className,
   children,
+  title,
   ...props
 }: PropsWithChildren<InlineLinkProps>) => {
   const className = cn(InlineLinkClassName, _className)
   if (href.startsWith('http')) {
     return (
-      <a className={className} href={href} target="_blank" rel="noreferrer noopener" {...props}>
+      <a
+        title={title}
+        className={className}
+        href={href}
+        target="_blank"
+        rel="noreferrer noopener"
+        {...props}
+      >
         {children}
       </a>
     )
   }
   return (
-    <Link className={className} href={href} {...props}>
+    <Link className={className} href={href} title={title} {...props}>
       {children}
     </Link>
   )

apps/studio/pages/project/[ref]/database/triggers.tsx

@@ -6,7 +6,7 @@ import { useIsInlineEditorEnabled } from 'components/interfaces/App/FeaturePrevi
 import { DeleteTrigger } from 'components/interfaces/Database/Triggers/DeleteTrigger'
 import { TriggerSheet } from 'components/interfaces/Database/Triggers/TriggerSheet'
 import { generateTriggerCreateSQL } from 'components/interfaces/Database/Triggers/TriggersList/TriggerList.utils'
-import TriggersList from 'components/interfaces/Database/Triggers/TriggersList/TriggersList'
+import { TriggersList } from 'components/interfaces/Database/Triggers/TriggersList/TriggersList'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'