Files
Gildas GarciaandIvan Vasilov 96d43099bb chore: refactor Button API so that it can be used a standard button (#46880)
## Problem

Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.

## Solution

- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code

## How to test

As this is just prop renaming, if it builds it's ok

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-06-16 23:59:58 +02:00

129 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
variant="default"
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>
)
}