renderColumnIcon() — supabase Function Reference

Architecture documentation for the renderColumnIcon() function in ColumnHeader.tsx from the supabase codebase.

Function tsx ContentManagement MediaManagement called by 1

Entity Profile

ContentManagement→ MediaManagement→ renderColumnIcon() — supabase Function Reference

Dependency Diagram

graph TD
  91aa6416_9033_4300_865c_58f97060580f["renderColumnIcon()"]
  829fc631_c9b5_db3a_ad2d_70f659658090["ColumnHeader()"]
  829fc631_c9b5_db3a_ad2d_70f659658090 -->|calls| 91aa6416_9033_4300_865c_58f97060580f
  style 91aa6416_9033_4300_865c_58f97060580f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/grid/components/grid/ColumnHeader.tsx lines 185–226

function renderColumnIcon(
  type: ColumnType,
  columnMeta: { name?: string; foreignKey?: GridForeignKey }
) {
  const { name, foreignKey } = columnMeta
  switch (type) {
    case 'foreign_key':
      // [Joshen] Look into this separately but this should be a hover card instead
      return (
        <Tooltip>
          <TooltipTrigger>
            <Link size={14} strokeWidth={2} />
          </TooltipTrigger>
          <TooltipContent side="bottom">
            <div className="font-normal">
              <p className="text-xs text-foreground-light">Foreign key relation:</p>
              <div className="flex items-center space-x-1">
                <p className="text-xs !text-foreground">{name}</p>
                <ArrowRight size={14} strokeWidth={1.5} className="!text-foreground-light" />
                <p className="text-xs !text-foreground">
                  {foreignKey?.targetTableSchema}.{foreignKey?.targetTableName}.
                  {foreignKey?.targetColumnName}
                </p>
              </div>
              {foreignKey?.updateAction !== FOREIGN_KEY_CASCADE_ACTION.NO_ACTION && (
                <p className="text-xs !text-foreground mt-1">
                  On update: {getForeignKeyCascadeAction(foreignKey?.updateAction)}
                </p>
              )}
              {foreignKey?.deletionAction !== FOREIGN_KEY_CASCADE_ACTION.NO_ACTION && (
                <p className="text-xs !text-foreground mt-1">
                  On delete: {getForeignKeyCascadeAction(foreignKey?.deletionAction)}
                </p>
              )}
            </div>
          </TooltipContent>
        </Tooltip>
      )
    default:
      return null
  }
}