mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 01:40:13 -04:00
Joshen Lim
7f8ae81d64
## 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 -->
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { cn } from 'ui'
|
|
|
|
interface TwoOptionToggleProps {
|
|
options: string[]
|
|
width?: number
|
|
activeOption: string
|
|
onClickOption: (value: string) => void
|
|
borderOverride: string
|
|
}
|
|
|
|
export const TwoOptionToggle = ({
|
|
options,
|
|
width = 50,
|
|
activeOption,
|
|
onClickOption,
|
|
borderOverride = 'border-stronger',
|
|
}: TwoOptionToggleProps) => {
|
|
const buttonStyle = (
|
|
isActive: boolean
|
|
) => `absolute top-0 z-1 text-xs inline-flex h-full items-center justify-center font-medium
|
|
${
|
|
isActive ? 'hover:text-foreground-light hover:text-foreground' : 'hover:text-foreground'
|
|
} hover:text-foreground focus:z-10 focus:outline-hidden focus:border-blue-300 focus:ring-blue
|
|
transition ease-in-out duration-150`
|
|
|
|
return (
|
|
<div
|
|
className={`relative border ${borderOverride} rounded-md h-7`}
|
|
style={{ padding: 1, width: (width + 1) * 2 }}
|
|
>
|
|
<span
|
|
style={{ width, translate: activeOption === options[1] ? '0px' : `${width - 2}px` }}
|
|
aria-hidden="true"
|
|
className={cn(
|
|
'z-0 inline-block rounded-sm h-full bg-overlay-hover shadow-sm transform',
|
|
'transition-all ease-in-out border border-strong'
|
|
)}
|
|
/>
|
|
{options.map((option, index: number) => (
|
|
<span
|
|
key={`toggle_${index}`}
|
|
style={{ width: width + 1 }}
|
|
className={`
|
|
${activeOption === option ? 'text-foreground' : 'text-foreground-light'}
|
|
${index === 0 ? 'right-0' : 'left-0'}
|
|
${buttonStyle(activeOption === option)}
|
|
cursor-pointer
|
|
`}
|
|
onClick={() => onClickOption(option)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
'capitalize hover:text-foreground',
|
|
activeOption === option ? 'text-foreground' : 'text-foreground-light'
|
|
)}
|
|
>
|
|
{option}
|
|
</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|