Description() — supabase Function Reference

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

Function tsx ContentManagement AccessControl calls 1

Entity Profile

ContentManagement→ AccessControl→ Description() — supabase Function Reference

Dependency Diagram

graph TD
  bfc3d2c2_aa52_25e9_ca07_b80603e71d4d["Description()"]
  a499bd2a_beff_8a47_0019_b9b891e3cf7c["temp_removePostgrestText()"]
  bfc3d2c2_aa52_25e9_ca07_b80603e71d4d -->|calls| a499bd2a_beff_8a47_0019_b9b891e3cf7c
  style bfc3d2c2_aa52_25e9_ca07_b80603e71d4d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Docs/Description.tsx lines 34–121

const Description = ({ content, metadata, onChange = noop }: DescrptionProps) => {
  const contentText = temp_removePostgrestText(content || '').trim()
  const [value, setValue] = useState(contentText)
  const [isUpdating, setIsUpdating] = useState(false)
  const { data: project } = useSelectedProjectQuery()

  const { table, column, rpc } = metadata

  const hasChanged = value != contentText
  const animateCss = `transition duration-150`

  const { can: canUpdateDescription } = useAsyncCheckPermissions(
    PermissionAction.TENANT_SQL_QUERY,
    '*'
  )

  const updateDescription = async () => {
    if (isUpdating || !canUpdateDescription) return false

    setIsUpdating(true)
    let query = ''
    let description = value.replaceAll("'", "''")
    if (table && column)
      query = `comment on column public."${table}"."${column}" is '${description}';`
    if (table && !column) query = `comment on table public."${table}" is '${description}';`
    if (rpc) query = `comment on function "${rpc}" is '${description}';`

    if (query) {
      try {
        await executeSql({
          projectRef: project?.ref,
          connectionString: project?.connectionString,
          sql: query,
        })
        // [Joshen] Temp fix, immediately refreshing the docs fetches stale state
        await timeout(500)
        toast.success(`Successfully updated description`)
      } catch (error: any) {
        toast.error(`Failed to update description: ${error.message}`)
      }
    }

    onChange(value)
    setIsUpdating(false)
  }

  if (!canUpdateDescription) {
    return (
      <span className={`block text-sm ${value ? 'text-foreground' : ''}`}>
        {value || 'No description'}
      </span>
    )
  }

  return (
    <div className="space-y-2">
      <AutoTextArea
        className="w-full"
        placeholder="Click to edit."
        value={value}
        onChange={(e: any) => setValue(e.target.value)}
      />
      <div
        className={`flex items-center gap-2 ${
          hasChanged ? 'opacity-100' : 'h-0 cursor-default opacity-0'
        } ${animateCss}`}
      >
        <Button
          type="default"
          disabled={!hasChanged}
          onClick={() => {
            setValue(contentText)
            setIsUpdating(false)
          }}
        >
          Cancel
        </Button>
        <Button disabled={!hasChanged} onClick={updateDescription}>
          {isUpdating ? (
            <Loader className="mx-auto animate-spin" size={14} strokeWidth={2} />
          ) : (
            <span>Save</span>
          )}
        </Button>
      </div>
    </div>
  )
}