Files
supabase/apps/studio/components/interfaces/BranchManagement/ReviewWithAI.tsx
Danny White 476d4a5851 refactor(ui): drop redundant Button variant="default" props (#50161)
## What kind of change does this PR introduce?

Mechanical cleanup on top of the Button default-variant change (#50160).

## What is the current behavior?

Many callsites still pass `variant="default"` even though that is now
the component default.

## What is the new behavior?

Removes redundant static `variant="default"` from legacy `Button` and
`ButtonTooltip` callsites. Keeps explicit defaults where they document
the API:

- `button-default.tsx` and `button-sizes.tsx` demos
- `DocsButton`, which pins neutral styling at the wrapper boundary

## To test

Studio:

- [Auth → Rate
Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits):
dirty the form so Cancel appears; Cancel stays neutral, Save stays green
- [Project Settings → API
Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys):
`DocsButton` in the header actions stays neutral

Design system:

- [Design system →
Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button):
`button-default` / `button-sizes` still show explicit default styling;
Primary (green) is restricted to the Primary section (and `asChild`)

WWW:

- [www → Brand
assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets):
Download logo kit / Download button kit stay neutral
2026-09-11 17:05:26 +10:00

128 lines
4.3 KiB
TypeScript

import { AiIconAnimation } from 'ui'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { Branch } from '@/data/branches/branches-query'
import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
import { useTablesQuery } from '@/data/tables/tables-query'
import { tablesToSQL } from '@/lib/helpers'
import { useTrack } from '@/lib/telemetry/track'
import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
interface ReviewWithAIProps {
currentBranch?: Branch
mainBranch?: Branch
parentProjectRef?: string
diffContent?: string
disabled?: boolean
}
export const ReviewWithAI = ({
currentBranch,
mainBranch,
parentProjectRef,
diffContent,
disabled = false,
}: ReviewWithAIProps) => {
const aiSnap = useAiAssistantStateSnapshot()
const { openSidebar } = useSidebarManagerSnapshot()
const track = useTrack()
// Get parent project for production schema
const { data: parentProject } = useProjectDetailQuery({
ref: parentProjectRef,
})
// Fetch production schema tables
const { data: productionTables } = useTablesQuery(
{
projectRef: parentProjectRef,
connectionString: (parentProject as any)?.connectionString,
schema: 'public',
includeColumns: true,
},
{ enabled: !!parentProjectRef && !!parentProject }
)
const handleReviewWithAssistant = () => {
if (!currentBranch || !mainBranch) return
track('branch_review_with_assistant_clicked', undefined, {
project: parentProjectRef,
})
// Prepare diff content for the assistant
const sqlSnippets = []
// Add production schema SQL if available
if (productionTables && productionTables.length > 0) {
const productionSQL = tablesToSQL(productionTables)
if (productionSQL.trim()) {
sqlSnippets.push({
label: 'Production Schema',
content: 'CURRENT PRODUCTION SCHEMA:\n' + productionSQL,
})
}
}
// Add database diff content if available
if (diffContent && diffContent.trim()) {
sqlSnippets.push({
label: 'Database Changes',
content: '-- DATABASE CHANGES TO BE MERGED IN:\n' + diffContent,
})
}
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
aiSnap.newChat({
name: `Review merge: ${currentBranch.name} → ${mainBranch.name}`,
sqlSnippets: sqlSnippets.length > 0 ? sqlSnippets : undefined,
initialInput: `I want to run the attached database changes on my production database branch as part of a branch merge from "${
currentBranch.name
}" into "${
mainBranch.name || 'main'
}". I've included the current production database schema as extra context. Please analyze the proposed schema changes and provide concise feedback on their impact on the production schema including any migration concerns and potential conflicts.`,
suggestions: {
title: `I can help you review the database schema changes from "${currentBranch.name}" to "${mainBranch.name}", here are some specific areas I can focus on:`,
prompts: [
{
label: 'Schema Impact',
description:
'Analyze the database schema changes and their potential impact on production...',
},
{
label: 'Migration Safety',
description: 'Review the migration safety and rollback strategies...',
},
{
label: 'Performance',
description: 'Analyze potential performance implications of these changes...',
},
{
label: 'Data Integrity',
description: 'Review constraints, indexes, and data integrity implications...',
},
],
},
})
}
return (
<ButtonTooltip
disabled={disabled || !currentBranch || !mainBranch}
className="px-1"
onClick={handleReviewWithAssistant}
tooltip={{
content: {
side: 'bottom',
text: 'Ask Supabase Assistant to review the merge request',
},
}}
>
<AiIconAnimation size={16} />
<span className="sr-only">Review with Assistant</span>
</ButtonTooltip>
)
}