supabase/apps/studio/components/interfaces/Linter/LintDetail.tsx

import Link from 'next/link'
import ReactMarkdown from 'react-markdown'

import { lintInfoMap } from 'components/interfaces/Linter/Linter.utils'
import { EntityTypeIcon, LintCTA, LintCategoryBadge, LintEntity } from './Linter.utils'
import { Lint } from 'data/lint/lint-query'
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
import { AiIconAnimation, Button } from 'ui'
import { ExternalLink } from 'lucide-react'

interface LintDetailProps {
  lint: Lint
  projectRef: string
}

const LintDetail = ({ lint, projectRef }: LintDetailProps) => {
  const snap = useAiAssistantStateSnapshot()

  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>
      <ReactMarkdown className="leading-6 text-sm text-foreground-light mb-6">
        {lint.detail.replace(/\`/g, '`')}
      </ReactMarkdown>
      <h3 className="text-sm mb-2">Description</h3>
      <ReactMarkdown className="text-sm text-foreground-light mb-6">
        {lint.description.replace(/\\`/g, '`')}
      </ReactMarkdown>

      <h3 className="text-sm mb-2">Resolve</h3>
      <div className="flex items-center gap-2">
        <Button
          icon={<AiIconAnimation className="scale-75 w-3 h-3" />}
          onClick={() => {
            snap.newChat({
              name: 'Summarize lint',
              open: true,
              initialInput: `Summarize the issue and suggest fixes: ${
                lintInfoMap.find((item) => item.name === lint.name)?.title
              }
                                \nEntity: ${
                                  (lint.metadata &&
                                    (lint.metadata.entity ||
                                      (lint.metadata.schema &&
                                        lint.metadata.name &&
                                        `${lint.metadata.schema}.${lint.metadata.name}`))) ??
                                  ''
                                }
                                \nSchema: ${lint.metadata?.schema ?? ''}
                                \nIssue: ${lint.detail.replace(/\\`/g, '`')}
                                \nDescription: ${lint.description.replace(/\\`/g, '`')}\n`,
            })
          }}
        >
          Ask Assistant
        </Button>
        <LintCTA title={lint.name} projectRef={projectRef} metadata={lint.metadata} />
        <Button asChild type="text">
          <Link
            href={
              lintInfoMap.find((item) => item.name === lint.name)?.docsLink ||
              'https://supabase.com/docs/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>
  )
}

export default LintDetail