-
- Source
-
+ {!isForm && (
+
+ Source
+
+ )}
}
- iconRight={
}
+ iconRight={
+
+ }
{...buttonProps}
className={cn(
- 'pr-2 rounded-l-none',
+ 'pr-2 justify-start',
+ !isForm && 'rounded-l-none',
variant === 'connected-on-right' && 'rounded-r-none',
variant === 'connected-on-left' && 'rounded-l-none border-l-0',
variant === 'connected-on-both' && 'rounded-none border-x-0',
@@ -127,12 +134,12 @@ export const DatabaseSelector = ({
value={option.id}
className="cursor-pointer w-full"
onSelect={() => {
- state.setSelectedDatabaseId(option.id)
+ if (!isForm) state.setSelectedDatabaseId(option.id)
setOpen(false)
onSelectId(option.id)
}}
onClick={() => {
- state.setSelectedDatabaseId(option.id)
+ if (!isForm) state.setSelectedDatabaseId(option.id)
setOpen(false)
onSelectId(option.id)
}}
@@ -184,12 +191,12 @@ export const DatabaseSelector = ({
value={database.identifier}
className="cursor-pointer w-full"
onSelect={() => {
- state.setSelectedDatabaseId(database.identifier)
+ if (!isForm) state.setSelectedDatabaseId(database.identifier)
setOpen(false)
onSelectId(database.identifier)
}}
onClick={() => {
- state.setSelectedDatabaseId(database.identifier)
+ if (!isForm) state.setSelectedDatabaseId(database.identifier)
setOpen(false)
onSelectId(database.identifier)
}}
diff --git a/apps/studio/components/ui/UpgradePlanButton.tsx b/apps/studio/components/ui/UpgradePlanButton.tsx
index 186feac161e..1842ab7f0e7 100644
--- a/apps/studio/components/ui/UpgradePlanButton.tsx
+++ b/apps/studio/components/ui/UpgradePlanButton.tsx
@@ -73,7 +73,13 @@ export const UpgradePlanButton = ({
: `/project/${ref ?? '_'}/settings/addons?panel=${addon}&source=${source}`
: `/org/${slug ?? '_'}/billing?panel=subscriptionPlan&source=${source}`
- const linkChildren = children || (!!addon ? 'Enable add-on' : `Upgrade to ${plan}`)
+ const linkChildren =
+ children ||
+ (isOnPaidPlanAndRequestingToPurchaseAddon
+ ? addon === 'computeSize'
+ ? 'Change compute size'
+ : 'Enable add-on'
+ : `Upgrade to ${plan}`)
const link = billingAll ? (
{linkChildren}
) : (
diff --git a/apps/studio/data/read-replicas/replicas-query.ts b/apps/studio/data/read-replicas/replicas-query.ts
index e4dc14ba655..a119c3b4853 100644
--- a/apps/studio/data/read-replicas/replicas-query.ts
+++ b/apps/studio/data/read-replicas/replicas-query.ts
@@ -1,10 +1,12 @@
import { useQuery } from '@tanstack/react-query'
-import { useFeatureFlags, useFlag } from 'common'
+import { LOCAL_STORAGE_KEYS, useFeatureFlags, useFlag, useParams } from 'common'
import type { components } from 'data/api'
import { get, handleError } from 'data/fetchers'
import type { ResponseError, UseCustomQueryOptions } from 'types'
import { replicaKeys } from './keys'
+import { DashboardPreference } from '@/components/interfaces/Settings/General/DashboardPreferences'
+import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
export const MAX_REPLICAS_BELOW_XL = 2
@@ -69,29 +71,36 @@ export const useConnectionStringForReadOps = (): {
identifier: string | undefined
connectionString: string | undefined | null
} => {
+ const { ref: projectRef } = useParams()
const { hasLoaded: flagsLoaded } = useFeatureFlags()
- const defaultToReadReplicaConnectionString = useFlag('defaultToReadReplicaConnectionString')
+ const showDashboardPreferences = useFlag('dashboardPreferences')
+
+ const [dashboardPreferences, , { isLoading: isLoadingLocalStorage }] =
+ useLocalStorageQuery
(
+ LOCAL_STORAGE_KEYS.DASHBOARD_PREFERENCES(projectRef ?? '_'),
+ {}
+ )
const { data: project, isSuccess: isSuccessProject } = useSelectedProjectQuery()
const { data: databases = [], isLoading: isLoadingDatabases } = useReadReplicasQuery({
projectRef: project?.ref,
})
- const readReplicas = databases.filter(
- (x) => x.identifier !== project?.ref && x.status === 'ACTIVE_HEALTHY'
- )
- const readReplica = readReplicas.some((x) => x.region === project?.region)
- ? readReplicas.find((x) => x.region === project?.region)
- : readReplicas[0]
-
- if (!isSuccessProject || isLoadingDatabases || !flagsLoaded) {
+ if (!isSuccessProject || isLoadingDatabases || !flagsLoaded || isLoadingLocalStorage) {
return { connectionString: undefined, type: undefined, identifier: undefined }
}
- if (!defaultToReadReplicaConnectionString) {
+ if (!showDashboardPreferences) {
return { type: 'primary', identifier: project.ref, connectionString: project.connectionString }
}
+ const readReplicas = databases.filter(
+ (x) => x.identifier !== project?.ref && x.status === 'ACTIVE_HEALTHY'
+ )
+ const readReplica = readReplicas.find(
+ (x) => x.identifier === dashboardPreferences.defaultDatabase
+ )
+
return {
type: !!readReplica ? 'replica' : 'primary',
identifier: !!readReplica ? readReplica.identifier : project.ref,
diff --git a/apps/studio/pages/project/[ref]/settings/general.tsx b/apps/studio/pages/project/[ref]/settings/general.tsx
index 433e9053ee0..31306bbe406 100644
--- a/apps/studio/pages/project/[ref]/settings/general.tsx
+++ b/apps/studio/pages/project/[ref]/settings/general.tsx
@@ -23,6 +23,8 @@ import {
PageHeaderTitle,
} from 'ui-patterns/PageHeader'
+import { Project } from '@/components/interfaces/Settings/General/Project'
+
const ProjectSettings: NextPageWithLayout = () => {
const { data: project } = useSelectedProjectQuery()
const { data: selectedOrganization } = useSelectedOrganizationQuery()
@@ -55,7 +57,7 @@ const ProjectSettings: NextPageWithLayout = () => {
-
+
{/* this is only settable on compliance orgs, currently that means HIPAA orgs */}
{!isBranch && hasHipaaAddon && }
{projectSettingsCustomDomains && }
diff --git a/apps/studio/pages/project/[ref]/settings/index.tsx b/apps/studio/pages/project/[ref]/settings/index.tsx
deleted file mode 100644
index cc72e8e673c..00000000000
--- a/apps/studio/pages/project/[ref]/settings/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import DefaultLayout from 'components/layouts/DefaultLayout'
-import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
-import type { NextPageWithLayout } from 'types'
-
-const Settings: NextPageWithLayout = () => {
- return <>{/* Use this as a page template for settings pages
*/}
-}
-
-Settings.getLayout = (page) => (
-
- {page}
-
-)
-
-export default Settings
diff --git a/apps/studio/pages/project/[ref]/settings/preferences.tsx b/apps/studio/pages/project/[ref]/settings/preferences.tsx
new file mode 100644
index 00000000000..08ecba7527d
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/settings/preferences.tsx
@@ -0,0 +1,40 @@
+import DefaultLayout from 'components/layouts/DefaultLayout'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
+import type { NextPageWithLayout } from 'types'
+import { PageContainer } from 'ui-patterns/PageContainer'
+import {
+ PageHeader,
+ PageHeaderDescription,
+ PageHeaderMeta,
+ PageHeaderSummary,
+ PageHeaderTitle,
+} from 'ui-patterns/PageHeader'
+
+import { DashboardPreferences } from '@/components/interfaces/Settings/General/DashboardPreferences'
+
+const Preferences: NextPageWithLayout = () => {
+ return (
+ <>
+
+
+
+ Dashboard Preferences
+
+ Configure how the dashboard interacts with your project
+
+
+
+
+
+
+
+
+ )
+}
+
+Preferences.getLayout = (page) => (
+
+ {page}
+
+)
+export default Preferences
diff --git a/packages/common/constants/local-storage.ts b/packages/common/constants/local-storage.ts
index d484857f70c..98f168b4633 100644
--- a/packages/common/constants/local-storage.ts
+++ b/packages/common/constants/local-storage.ts
@@ -13,6 +13,7 @@ export const LOCAL_STORAGE_KEYS = {
FEEDBACK_WIDGET_SCREENSHOT: 'feedback-widget-screenshot',
INCIDENT_BANNER_DISMISSED_IDS: 'incident-banner-dismissed-ids',
MAINTENANCE_BANNER_DISMISSED: (id: string) => `maintenance-banner-dismissed-${id}`,
+ DASHBOARD_PREFERENCES: (ref: string) => `dashboard-preferences-${ref}`,
UI_PREVIEW_API_SIDE_PANEL: 'supabase-ui-api-side-panel',
UI_PREVIEW_CLS: 'supabase-ui-cls',