Files
supabase/apps/studio/components/interfaces/TableGridEditor/IndexAdvisorPopover.tsx
Joshen Lim 7f8ae81d64 Clean up table editor header (#45452)
## Context

Resolves FE-3126

Just cleaning up the table editor header with a bit of refactors
(pre-req to investigating collapsing filter bar and table editor header
actions into a single row)

## Non-visual changes involved
- Break down components within `GridHeaderActions` into smaller ones
  - `IndexAdvisorPopover`
  - `SecurityDefinerViewPopover`
  - `RealtimeToggle`
- Deprecate use of `useUrlState` in `GridHeaderActions` to use
`useQueryState` instead
- Improve types for `TwoOptionToggle`

## Visual changes involved
- Collapse realtime button toggle into a button icon, with no text (just
tooltip)
- Adjust layout of buttons a little

### Before
<img width="796" height="118" alt="image"
src="https://github.com/user-attachments/assets/436bca94-4d91-471a-a184-487c6f78dc04"
/>

### After
<img width="731" height="132" alt="image"
src="https://github.com/user-attachments/assets/5fd30982-a1fc-4f92-a590-146d1e69d52a"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Index Advisor popover with recommendations.
  * Realtime toggle to manage realtime table publication.
  * Security Definer view popover with optional autofix.
  * Insert menu for adding rows/columns and CSV import.

* **Bug Fixes**
  * Adjusted filter bar input sizing for improved readability.

* **Refactor**
* Header layout updated and insert/import actions moved into dedicated
components.

* **Tests**
  * Updated end-to-end selectors for the Insert row menu item.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-01 18:45:21 +08:00

29 lines
1.1 KiB
TypeScript

import { Lightbulb } from 'lucide-react'
import { Button, Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
import { EnableIndexAdvisorButton } from '../QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton'
export const IndexAdvisorPopover = () => {
return (
<Popover_Shadcn_ modal={false}>
<PopoverTrigger_Shadcn_ asChild>
<Button type="default" icon={<Lightbulb strokeWidth={1.5} />}>
Index Advisor
</Button>
</PopoverTrigger_Shadcn_>
<PopoverContent_Shadcn_ className="w-80 text-sm" align="end">
<h4 className="flex items-center gap-2">
<Lightbulb size={16} /> Index Advisor
</h4>
<div className="grid gap-2 mt-4 text-foreground-light text-xs">
<p>Index Advisor recommends indexes to improve query performance on this table.</p>
<p>Enable Index Advisor to get recommendations based on your actual query patterns.</p>
<div className="mt-2">
<EnableIndexAdvisorButton />
</div>
</div>
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
)
}