CellDetailPanel() — supabase Function Reference

Source Code

apps/studio/components/interfaces/SQLEditor/UtilityPanel/CellDetailPanel.tsx lines 16–72

export const CellDetailPanel = ({ column, value, visible, onClose }: CellDetailPanelProps) => {
  const [view, setView] = useState<'view' | 'md'>('view')

  const formattedValue =
    value === null
      ? ''
      : typeof value === 'object'
        ? JSON.stringify(value, null, '\t')
        : String(value)
  const showMarkdownToggle = typeof value === 'string'

  useEffect(() => {
    if (visible) setView('view')
  }, [visible])

  return (
    <Sheet open={visible} onOpenChange={() => onClose()}>
      <SheetContent size="lg" className="flex flex-col gap-0">
        <SheetHeader className="py-2.5">
          <SheetTitle className="flex items-center justify-between pr-7">
            <p className="truncate">
              Viewing cell details on column: <code className="text-sm">{column}</code>
            </p>
            {showMarkdownToggle && (
              <TwoOptionToggle
                options={['MD', 'view']}
                activeOption={view}
                borderOverride="border-muted"
                onClickOption={setView}
              />
            )}
          </SheetTitle>
        </SheetHeader>
        {view === 'view' ? (
          <div className="relative h-full">
            <CodeEditor
              isReadOnly
              id="sql-editor-expand-cell"
              language="json"
              value={formattedValue}
              placeholder={value === null ? 'NULL' : undefined}
              options={{ wordWrap: 'off', contextmenu: false }}
            />
          </div>
        ) : (
          <div className="flex-grow py-4 px-4 bg-default overflow-y-auto">
            <Markdown
              remarkPlugins={[remarkGfm]}
              className="!max-w-full markdown-body"
              content={formattedValue}
            />
          </div>
        )}
      </SheetContent>
    </Sheet>
  )
}