mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Joshen Lim
0b97e0ff86
## Context Related to dashboard scalability Previous PR: https://github.com/supabase/supabase/pull/42856 Note: Changes are all feature flagged still and I'm still not entirely convinced with the current UX Will iterate as as go along, and only make this publicly available when we're satisfied with the behaviour Adds a "Dashboard preference" section to the project settings <img width="265" height="740" alt="image" src="https://github.com/user-attachments/assets/6ce1aa19-26c2-47c6-a9c4-595137266631" /> In which users can then select which database they'd like to use for read queries run from the dashboard Note: Everything is local storage for now, but we'd need middleware support if we want to make this setting persist for all users on the project <img width="791" height="434" alt="image" src="https://github.com/user-attachments/assets/e651d6d9-fed4-4da4-b552-c9f93f8d46d3" /> Added a dialog as well to further explain what this implies <img width="610" height="312" alt="image" src="https://github.com/user-attachments/assets/0aa957af-cb51-476f-aa79-8948a7cbe5ae" /> ## To test - Choosing a replica in dashboard preferences will only affect the table editor as thats the only place that's set up so far to use a replica for read queries (I'll need to follow up for other parts of the dashboard in subsequent PRs)
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { ProductMenu } from 'components/ui/ProductMenu'
|
|
import { withAuth } from 'hooks/misc/withAuth'
|
|
import { useRouter } from 'next/router'
|
|
import type { PropsWithChildren } from 'react'
|
|
|
|
import { ProjectLayout } from '../ProjectLayout'
|
|
import { useGenerateSettingsMenu } from './SettingsMenu.utils'
|
|
|
|
/**
|
|
* Menu-only component for the settings section. Used by the desktop sidebar and by the
|
|
* mobile sheet submenu. Must not wrap ProjectLayout so that opening the settings submenu
|
|
* in the mobile sheet does not overwrite registerOpenMenu and break the menu button.
|
|
*/
|
|
export const SettingsProductMenu = () => {
|
|
const router = useRouter()
|
|
|
|
const page = router.pathname.includes('billing')
|
|
? router.pathname.split('/')[5]
|
|
: router.pathname.split('/')[4]
|
|
|
|
const menu = useGenerateSettingsMenu()
|
|
|
|
return <ProductMenu page={page} menu={menu} />
|
|
}
|
|
|
|
interface SettingsLayoutProps {
|
|
title?: string
|
|
}
|
|
|
|
export const SettingsLayout = ({ title, children }: PropsWithChildren<SettingsLayoutProps>) => {
|
|
return (
|
|
<ProjectLayout
|
|
isBlocking={false}
|
|
title={title || 'Settings'}
|
|
product="Settings"
|
|
productMenu={<SettingsProductMenu />}
|
|
>
|
|
{children}
|
|
</ProjectLayout>
|
|
)
|
|
}
|
|
|
|
export default withAuth(SettingsLayout)
|