mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 05:09:12 +03:00
Joshen LimandGildas Garcia
f7ea722b35
## Consolidate Table Editor grid header actions into a single row https://github.com/user-attachments/assets/1020c385-8fa9-4ef1-b5e7-03983111508b ## Changes involved - Index advisor, Realtime, and API docs are now behind a dropdown menu button (Treated as secondary actions) - Grid header actions shifted into the same row as filter bar (more space for data grid) - Header actions will hide while filter bar is in focus (remove distractions, more space for filter bar) ## Changes to filter bar - Filter bar will refocus when deleting a filter - Clicking on the search icon will focus on the free form input of the filter bar <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a “More” dropdown in grid actions to access Realtime, API docs, and Index Advisor. * New dialogs for enabling Index Advisor and toggling Realtime are now consistently managed. * **Improvements** * Improved filter focus handling with auto-refocus when conditions change and responsive header behavior. * Adjusted popover alignment, separator visuals, header/footer/pagination layout and sizing. * Filter bar now supports programmatic focus; Connect button supports icon-only mode. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { Plug } from 'lucide-react'
|
|
import { parseAsBoolean, useQueryState } from 'nuqs'
|
|
import { ComponentProps } from 'react'
|
|
import { Button, cn } from 'ui'
|
|
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
|
|
import { PROJECT_STATUS } from '@/lib/constants'
|
|
import { useTrack } from '@/lib/telemetry/track'
|
|
import { useAppStateSnapshot } from '@/state/app-state'
|
|
|
|
interface ConnectButtonProps {
|
|
buttonType?: ComponentProps<typeof Button>['type']
|
|
className?: string
|
|
iconOnly?: boolean
|
|
}
|
|
|
|
export const ConnectButton = ({
|
|
buttonType = 'default',
|
|
className,
|
|
iconOnly = false,
|
|
}: ConnectButtonProps) => {
|
|
const { data: selectedProject } = useSelectedProjectQuery()
|
|
const { setConnectSheetSource } = useAppStateSnapshot()
|
|
const isActiveHealthy = selectedProject?.status === PROJECT_STATUS.ACTIVE_HEALTHY
|
|
const track = useTrack()
|
|
|
|
const [, setShowConnect] = useQueryState('showConnect', parseAsBoolean.withDefault(false))
|
|
|
|
return (
|
|
<ButtonTooltip
|
|
type={buttonType}
|
|
disabled={!isActiveHealthy}
|
|
className={cn('rounded-full', className)}
|
|
icon={<Plug className="rotate-90" />}
|
|
onClick={() => {
|
|
track('header_connect_button_clicked')
|
|
setConnectSheetSource('header_button')
|
|
setShowConnect(true)
|
|
}}
|
|
tooltip={{
|
|
content: {
|
|
side: 'bottom',
|
|
text: !isActiveHealthy
|
|
? 'Project is currently not active and cannot be connected'
|
|
: undefined,
|
|
},
|
|
}}
|
|
>
|
|
<span className={cn({ 'sr-only': !iconOnly })}>Connect</span>
|
|
</ButtonTooltip>
|
|
)
|
|
}
|