LintDetail() — supabase Function Reference

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

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ LintDetail() — supabase Function Reference

Dependency Diagram

graph TD
  8b8529fc_0b3c_e7bb_2e51_afd3b341b35f["LintDetail()"]
  a3fe7559_687a_ec25_9f22_e4770d80ac7e["createLintSummaryPrompt()"]
  8b8529fc_0b3c_e7bb_2e51_afd3b341b35f -->|calls| a3fe7559_687a_ec25_9f22_e4770d80ac7e
  style 8b8529fc_0b3c_e7bb_2e51_afd3b341b35f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Linter/LintDetail.tsx lines 22–91

const LintDetail = ({ lint, projectRef, onAskAssistant }: LintDetailProps) => {
  const track = useTrack()
  const snap = useAiAssistantStateSnapshot()
  const { openSidebar } = useSidebarManagerSnapshot()

  const handleAskAssistant = () => {
    track('advisor_assistant_button_clicked', {
      origin: 'lint_detail',
      advisorCategory: lint.categories[0],
      advisorType: lint.name,
      advisorLevel: lint.level,
    })

    onAskAssistant?.()
    openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
    snap.newChat({
      name: 'Summarize lint',
      initialMessage: createLintSummaryPrompt(lint),
    })
  }

  const buildPromptForCopy = () => {
    return createLintSummaryPrompt(lint)
  }

  return (
    <div>
      <h3 className="text-sm mb-2">Entity</h3>
      <div className="flex items-center gap-1 px-2 py-0.5 bg-surface-200 border rounded-lg text-sm mb-6 w-fit">
        <EntityTypeIcon type={lint.metadata?.type} />
        <LintEntity metadata={lint.metadata} />
      </div>

      <h3 className="text-sm mb-2">Issue</h3>
      <Markdown className="leading-6 text-sm text-foreground-light mb-6">
        {lint.detail.replace(/\\`/g, '`')}
      </Markdown>
      <h3 className="text-sm mb-2">Description</h3>
      <Markdown className="text-sm text-foreground-light mb-6">
        {lint.description.replace(/\\`/g, '`')}
      </Markdown>

      <h3 className="text-sm mb-2">Resolve</h3>
      <div className="flex items-center gap-2">
        <AiAssistantDropdown
          label="Ask Assistant"
          buildPrompt={buildPromptForCopy}
          onOpenAssistant={handleAskAssistant}
          telemetrySource="lint_detail"
        />
        <LintCTA title={lint.name} projectRef={projectRef} metadata={lint.metadata} />
        <Button asChild type="text">
          <Link
            href={
              lintInfoMap.find((item) => item.name === lint.name)?.docsLink ||
              `${DOCS_URL}/guides/database/database-linter`
            }
            target="_blank"
            rel="noreferrer"
            className="no-underline"
          >
            <span className="flex items-center gap-2">
              Learn more <ExternalLink size={14} />
            </span>
          </Link>
        </Button>
      </div>
    </div>
  )
}