mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 03:45:06 +03:00
Joshen Lim
2d1a2ff9a2
## Context Sets up the Explorer behind the feature preview modal + removes the temporary entry point from the SQL Editor Changes are still not live on production, so will only affect local + staging. Enabling the feature preview will replace the sidebar nav for SQL Editor to new Explorer (Icon remains unchanged, just the label) <img width="918" height="647" alt="image" src="https://github.com/user-attachments/assets/b088eb47-1176-4618-b345-d1ec0521b092" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added an “Explorer & Notebooks” feature preview with an overview image and direct access to Explorer or SQL Editor. - Added Explorer navigation when the preview is enabled. - **Improvements** - Updated desktop and mobile navigation to consistently display the available editor destination. - Improved the Explorer shortcut tooltip to clearly say “Go to Explorer.” - Organized SQL Editor previews under the Editors category. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
37 lines
948 B
TypeScript
37 lines
948 B
TypeScript
import { PropsWithChildren, ReactNode } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
interface ProductMenuBarProps {
|
|
title: string
|
|
titleBadge?: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export const ProductMenuBar = ({
|
|
title,
|
|
titleBadge,
|
|
children,
|
|
className,
|
|
}: PropsWithChildren<ProductMenuBarProps>) => {
|
|
return (
|
|
<div
|
|
/**
|
|
* id used in playwright-tests/tests/snapshot/spec/table-editor.spec.ts
|
|
* */
|
|
id="spec-click-target"
|
|
className={cn(
|
|
'flex flex-col w-full h-full', // Layout
|
|
'hide-scrollbar bg-dash-sidebar border-default'
|
|
)}
|
|
>
|
|
<div className="border-default flex min-h-(--header-height) items-center border-b px-6 justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<h4 className="text-lg">{title}</h4>
|
|
{titleBadge}
|
|
</div>
|
|
</div>
|
|
<div className={cn('grow overflow-y-auto', className)}>{children}</div>
|
|
</div>
|
|
)
|
|
}
|