Add tooltips for grid column foreign key

Author: joshenlim

studio/components/grid/SupabaseGrid.utils.ts

@@ -215,9 +215,12 @@ export function parseSupaTable(
       isEncrypted: encryptedColumns.includes(column.name),
       enum: column.enums,
       comment: column.comment,
-      targetTableSchema: null,
-      targetTableName: null,
-      targetColumnName: null,
+      foreignKey: {
+        targetTableSchema: null,
+        targetTableName: null,
+        targetColumnName: null,
+        deletionAction: undefined,
+      },
     }
     const primaryKey = primaryKeys.find((pk) => pk.name == column.name)
     temp.isPrimaryKey = !!primaryKey
@@ -230,9 +233,10 @@ export function parseSupaTable(
       )
     })
     if (relationship) {
-      temp.targetTableSchema = relationship.target_table_schema
-      temp.targetTableName = relationship.target_table_name
-      temp.targetColumnName = relationship.target_column_name
+      temp.foreignKey.targetTableSchema = relationship.target_table_schema
+      temp.foreignKey.targetTableName = relationship.target_table_name
+      temp.foreignKey.targetColumnName = relationship.target_column_name
+      temp.foreignKey.deletionAction = relationship.deletion_action
     }
     return temp
   })

studio/components/grid/components/common/ForeignTableModal/index.tsx

@@ -31,7 +31,7 @@ export const ForeignTableModal: React.FC<ForeignTableModalProps> = ({
 
     if (defaultValue && columnDefinition) {
       fetchData({
-        column: columnDefinition.targetColumnName!,
+        column: columnDefinition?.foreignKey?.targetColumnName!,
         operator: '=',
         value: defaultValue,
       })
@@ -43,14 +43,14 @@ export const ForeignTableModal: React.FC<ForeignTableModalProps> = ({
   async function fetchColumns() {
     if (
       !state.metaService ||
-      !columnDefinition?.targetTableName ||
-      !columnDefinition?.targetTableSchema
+      !columnDefinition?.foreignKey?.targetTableName ||
+      !columnDefinition?.foreignKey?.targetTableSchema
     )
       return
 
     const { data } = await state.metaService.fetchColumns(
-      columnDefinition?.targetTableName,
-      columnDefinition?.targetTableSchema
+      columnDefinition?.foreignKey?.targetTableName,
+      columnDefinition?.foreignKey?.targetTableSchema
     )
     if (data && data.length > 0) {
       const columnNames = data.map((x) => x.name)
@@ -59,11 +59,14 @@ export const ForeignTableModal: React.FC<ForeignTableModalProps> = ({
   }
 
   async function fetchData(filter?: Filter) {
-    if (!state.onSqlQuery || !columnDefinition?.targetTableName) return
+    if (!state.onSqlQuery || !columnDefinition?.foreignKey?.targetTableName) return
 
     const query = new Query()
     let queryChains = query
-      .from(columnDefinition?.targetTableName, columnDefinition?.targetTableSchema ?? undefined)
+      .from(
+        columnDefinition?.foreignKey?.targetTableName,
+        columnDefinition?.foreignKey?.targetTableSchema ?? undefined
+      )
       .select()
 
     if (filter && filter.value && filter.value != '') {
@@ -88,8 +91,8 @@ export const ForeignTableModal: React.FC<ForeignTableModalProps> = ({
   }
 
   function onItemSelect(item: Dictionary<any>) {
-    if (item && columnDefinition && columnDefinition.targetColumnName) {
-      const value = item[columnDefinition.targetColumnName]
+    if (item && columnDefinition && columnDefinition.foreignKey?.targetColumnName) {
+      const value = item[columnDefinition.foreignKey?.targetColumnName]
       onChange(value)
     }
 
@@ -140,7 +143,7 @@ export const ForeignTableModal: React.FC<ForeignTableModalProps> = ({
       >
         <Modal.Content>
           <FilterHeader
-            defaultColumnName={columnDefinition?.targetColumnName ?? undefined}
+            defaultColumnName={columnDefinition?.foreignKey?.targetColumnName ?? undefined}
             defaultValue={defaultValue}
             foreignColumnNames={foreignColumnNames}
             onChange={onFilterChange}

studio/components/grid/components/grid/ColumnHeader.tsx

@@ -1,19 +1,22 @@
 import * as React from 'react'
-import { IconKey, IconLink, IconLock } from 'ui'
+import { IconArrowRight, IconKey, IconLink, IconLock } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd'
 import { XYCoord } from 'dnd-core'
 import { useDispatch } from '../../store'
-import { ColumnHeaderProps, ColumnType, DragItem } from '../../types'
+import { ColumnHeaderProps, ColumnType, DragItem, GridForeignKey } from '../../types'
 import { ColumnMenu } from '../menu'
 import { useTrackedState } from '../../store'
+import { FOREIGN_KEY_DELETION_ACTION } from 'data/database/database-query-constants'
+import { getForeignKeyDeletionAction } from 'components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.utils'
 
 export function ColumnHeader<R>({
   column,
   columnType,
   isPrimaryKey,
   isEncrypted,
   format,
+  foreignKey,
 }: ColumnHeaderProps<R>) {
   const ref = React.useRef<HTMLDivElement>(null)
   const dispatch = useDispatch()
@@ -119,7 +122,7 @@ export function ColumnHeader<R>({
     <div ref={ref} data-handler-id={handlerId} style={{ opacity }} className="w-full">
       <div className={`sb-grid-column-header ${cursor}`}>
         <div className="sb-grid-column-header__inner">
-          {renderColumnIcon(columnType)}
+          {renderColumnIcon(columnType, { name: column.name as string, foreignKey })}
           {isPrimaryKey && (
             <Tooltip.Root delayDuration={0}>
               <Tooltip.Trigger>
@@ -169,13 +172,45 @@ export function ColumnHeader<R>({
   )
 }
 
-function renderColumnIcon(type: ColumnType) {
+function renderColumnIcon(
+  type: ColumnType,
+  columnMeta: { name?: string; foreignKey?: GridForeignKey }
+) {
+  const { name, foreignKey } = columnMeta
   switch (type) {
     case 'foreign_key':
       return (
-        <div>
-          <IconLink size="tiny" strokeWidth={2} />
-        </div>
+        <Tooltip.Root delayDuration={0}>
+          <Tooltip.Trigger>
+            <IconLink size="tiny" strokeWidth={2} />
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">
+            <Tooltip.Arrow className="radix-tooltip-arrow" />
+            <div
+              className={[
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                'border border-scale-200',
+              ].join(' ')}
+            >
+              <div>
+                <p className="text-xs text-scale-1100">Foreign key relation:</p>
+                <div className="flex items-center space-x-1">
+                  <p className="text-xs text-scale-1200">{name}</p>
+                  <IconArrowRight size="tiny" strokeWidth={1.5} />
+                  <p className="text-xs text-scale-1200">
+                    {foreignKey?.targetTableSchema}.{foreignKey?.targetTableName}.
+                    {foreignKey?.targetColumnName}
+                  </p>
+                </div>
+                {foreignKey?.deletionAction !== FOREIGN_KEY_DELETION_ACTION.NO_ACTION && (
+                  <p className="text-xs text-scale-1200 mt-1">
+                    On delete: {getForeignKeyDeletionAction(foreignKey?.deletionAction)}
+                  </p>
+                )}
+              </div>
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
       )
     default:
       return null

studio/components/grid/types/base.ts

@@ -55,9 +55,17 @@ export type ColumnType =
   | 'time'
   | 'unknown'
 
+export interface GridForeignKey {
+  targetTableSchema?: string | null
+  targetTableName?: string | null
+  targetColumnName?: string | null
+  deletionAction?: string
+}
+
 export interface ColumnHeaderProps<R> extends HeaderRendererProps<R> {
   columnType: ColumnType
   isPrimaryKey: boolean | undefined
   isEncrypted: boolean | undefined
   format: string
+  foreignKey?: GridForeignKey
 }

studio/components/grid/types/table.ts

@@ -1,4 +1,4 @@
-import { Dictionary } from './base'
+import { Dictionary, GridForeignKey } from './base'
 
 export interface SupaColumn {
   readonly dataType: string
@@ -13,9 +13,7 @@ export interface SupaColumn {
   readonly isNullable?: boolean
   readonly isUpdatable?: boolean
   readonly isEncrypted?: boolean
-  readonly targetTableSchema?: string | null
-  readonly targetTableName?: string | null
-  readonly targetColumnName?: string | null
+  readonly foreignKey?: GridForeignKey
   position: number
 }
 

studio/components/grid/utils/gridColumns.tsx

@@ -47,7 +47,6 @@ export function getGridColumns(
 ): any[] {
   const columns = table.columns.map((x, idx) => {
     const columnType = getColumnType(x)
-
     const columnDefaultWidth = getColumnDefaultWidth(x)
     const columnWidthBasedOnName =
       (x.name.length + x.format.length) * ESTIMATED_CHARACTER_PIXEL_WIDTH
@@ -75,6 +74,7 @@ export function getGridColumns(
           isPrimaryKey={x.isPrimaryKey}
           isEncrypted={x.isEncrypted}
           format={x.format}
+          foreignKey={x.foreignKey}
         />
       ),
       editor: options?.editable

studio/components/grid/utils/types.ts

@@ -65,6 +65,6 @@ export function isEnumColumn(type: string) {
 }
 
 export function isForeignKeyColumn(columnDef: SupaColumn) {
-  const { targetTableSchema, targetTableName, targetColumnName } = columnDef
+  const { targetTableSchema, targetTableName, targetColumnName } = columnDef?.foreignKey ?? {}
   return !!targetTableSchema && !!targetTableName && !!targetColumnName
 }

studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.utils.ts

@@ -222,7 +222,10 @@ export const getColumnForeignKey = (
   if (foreignKey === undefined) return foreignKey
   else {
     const foreignKeyMeta = foreignKeys.find((fk) => fk.id === foreignKey.id)
-    return { ...foreignKey, deletion_action: foreignKeyMeta?.deletion_action ?? 'a' }
+    return {
+      ...foreignKey,
+      deletion_action: foreignKeyMeta?.deletion_action ?? FOREIGN_KEY_DELETION_ACTION.NO_ACTION,
+    }
   }
 }
 

studio/components/interfaces/TableGridEditor/TableGridEditor.tsx

@@ -2,7 +2,7 @@ import { FC, useRef, useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { find, isUndefined } from 'lodash'
-import type { PostgresColumn, PostgresTable } from '@supabase/postgres-meta'
+import type { PostgresColumn, PostgresRelationship, PostgresTable } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { QueryKey, useQueryClient } from '@tanstack/react-query'
 
@@ -30,6 +30,11 @@ import { JsonEditValue } from './SidePanelEditor/RowEditor/RowEditor.types'
 import LangSelector from '../Docs/LangSelector'
 import GeneratingTypes from '../Docs/GeneratingTypes'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import {
+  ForeignKeyConstraint,
+  useForeignKeyConstraintsQuery,
+} from 'data/database/foreign-key-constraints-query'
+import { FOREIGN_KEY_DELETION_ACTION } from 'data/database/database-query-constants'
 
 interface Props {
   /** Theme for the editor */
@@ -198,14 +203,17 @@ const TableGridEditor: FC<Props> = ({
     error: jsonSchemaError,
     refetch,
   } = useProjectJsonSchemaQuery({ projectRef })
-
-  if (jsonSchemaError) console.log('jsonSchemaError', jsonSchemaError)
+  if (jsonSchemaError) console.error('jsonSchemaError', jsonSchemaError)
 
   const resources = getResourcesFromJsonSchema(jsonSchema)
+  const refreshDocs = async () => await refetch()
 
-  const refreshDocs = async () => {
-    await refetch()
-  }
+  const { data } = useForeignKeyConstraintsQuery({
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+    schema: selectedTable?.schema,
+  })
+  const foreignKeyMeta = data?.result ?? []
 
   useEffect(() => {
     if (selectedTable !== undefined && selectedTable.id !== undefined && isVaultEnabled) {
@@ -228,14 +236,28 @@ const TableGridEditor: FC<Props> = ({
   const canUpdateTables = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables')
   const canEditViaTableEditor = !isViewSelected && !isForeignTableSelected && !isLocked
 
+  // [Joshen] We can tweak below to eventually support composite keys as the data
+  // returned from foreignKeyMeta should be easy to deal with, rather than pg-meta
+  const formattedRelationships = (selectedTable?.relationships ?? []).map(
+    (relationship: PostgresRelationship) => {
+      const relationshipMeta = foreignKeyMeta.find(
+        (fk: ForeignKeyConstraint) => fk.id === relationship.id
+      )
+      return {
+        ...relationship,
+        deletion_action: relationshipMeta?.deletion_action ?? FOREIGN_KEY_DELETION_ACTION.NO_ACTION,
+      }
+    }
+  )
+
   const gridTable =
     !isViewSelected && !isForeignTableSelected
       ? parseSupaTable(
           {
             table: selectedTable as PostgresTable,
             columns: (selectedTable as PostgresTable).columns ?? [],
             primaryKeys: (selectedTable as PostgresTable).primary_keys,
-            relationships: (selectedTable as PostgresTable).relationships,
+            relationships: formattedRelationships,
           },
           encryptedColumns
         )