+
Reach out to the community
+
- Expected response time is based on your billing plan. Pro and Pay as You Go plans are
- prioritized.
+ For other support, including questions on our client libraries, advice, or best
+ practices.
-
+
-
-
-
-
Reach out to the community
-
-
- For other support, including questions on our client libraries, advice, or best
- practices.
-
-
-
-
-
-
+
+
}>
+ GitHub Discussions
+
+
- }
- >
-
}
- >
-
Help
-
-
+
+
)
}
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
index 1ff8530f549..ebc0348ea3f 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
@@ -12,15 +12,19 @@ import { Fragment, useState } from 'react'
import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
import { useNotificationsQuery } from 'data/notifications/notifications-query'
import { getProjectDetail } from 'data/projects/project-detail-query'
-import { invalidateProjectsQuery, setProjectPostgrestStatus } from 'data/projects/projects-query'
+import { setProjectPostgrestStatus } from 'data/projects/projects-query'
import { useStore } from 'hooks'
import { delete_, patch, post } from 'lib/common/fetch'
import { API_URL } from 'lib/constants'
import { Project } from 'types'
-import { Alert, Button, IconArrowRight, IconBell, Popover } from 'ui'
+import { Alert, Button, IconArrowRight, IconBell, IconInbox, Popover } from 'ui'
import NotificationRow from './NotificationRow'
-const NotificationsPopover = () => {
+interface NotificationsPopoverProps {
+ alt?: boolean
+}
+
+const NotificationsPopover = ({ alt = false }: NotificationsPopoverProps) => {
const queryClient = useQueryClient()
const router = useRouter()
const { meta, ui } = useStore()
@@ -35,9 +39,10 @@ const NotificationsPopover = () => {
if (!notifications) return <>
- const hasNewNotifications = notifications?.some(
+ const newNotifications = notifications?.filter(
(notification) => notification.notification_status === NotificationStatus.New
)
+ const hasNewNotifications = newNotifications.length > 0
const onOpenChange = async (open: boolean) => {
// TODO(alaister): move this to a mutation
@@ -232,21 +237,47 @@ const NotificationsPopover = () => {
>
-
+
+ {hasNewNotifications && (
+ <>
+ {alt ? null : (
+
+ )}
+
+ )}
}
+ type={alt ? 'text' : 'default'}
+ className={alt ? 'px-1' : ''}
+ icon={
+ hasNewNotifications ? (
+
+
{newNotifications.length}
+
+ ) : alt ? (
+
+ ) : (
+
+ )
+ }
+ iconRight={
+ hasNewNotifications ? (
+ <>
+ {alt ? (
+
+ ) : (
+
+ )}
+
+ ) : null
+ }
>
- {hasNewNotifications && (
-
- )}
- {/* Left-most navigation side bar to access products */}
- {!hideIconBar &&
}
+
+
+
+
+ {title
+ ? `${title} | Supabase`
+ : selectedTable
+ ? `${selectedTable} | ${projectName} | ${organizationName} | Supabase`
+ : projectName
+ ? `${projectName} | ${organizationName} | Supabase`
+ : organizationName
+ ? `${organizationName} | Supabase`
+ : 'Supabase'}
+
+
+
+
+ {/* Left-most navigation side bar to access products */}
+ {!hideIconBar &&
}
- {/* Product menu bar */}
- {!showPausedState && (
-
- {productMenu}
-
- )}
-
-
- {!hideHeader && }
- {showPausedState ? (
-
- ) : (
- {children}
+ {/* Product menu bar */}
+ {!showPausedState && (
+
+ {productMenu}
+
)}
-
-
- {/* Left-most navigation side bar to access products */}
- {!hideIconBar &&
}
+
+
+
+ {title ? `${title} | Supabase` : 'Supabase'}
+
+
+
+
+ {/* Left-most navigation side bar to access products */}
+ {!hideIconBar &&
}
- {/* Product menu bar */}
- {productMenu && !showPausedState && (
-
{productMenu}
- )}
-
-
- {!hideHeader && }
- {showPausedState ? (
-
- ) : (
- children
+ {/* Product menu bar */}
+ {productMenu && !showPausedState && (
+ {productMenu}
)}
-
-
+
+
Account Settings
+ {accountSettings.map((link) => (
+
+ ))}
+
+
+
+
Organization
+ {organizationSettings.map((link) => (
+
+ ))}
+
+
+ {/* [Joshen] Hiding below until we figure out a better UX for consolidating settings on projects */}
+ {/*
+
Projects
+
+ {projects?.map((project) => (
+
+ ))}
+
+
+
*/}
+
+ {projectSettings.map((link) => {
+ const href = link.pathname.replace('[ref]', project.ref)
+ return (
+
+ )
+ })}
+
+
+
+ )
+}
+
+export default ProjectSettingsMenuItem
diff --git a/studio/components/layouts/SettingsLayout/SettingsLayout.tsx b/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
index 61c49d15af0..81ec13f6e89 100644
--- a/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
+++ b/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
@@ -1,51 +1,30 @@
-import { useFlag, useSelectedOrganization, useSelectedProject, useStore, withAuth } from 'hooks'
-import { observer } from 'mobx-react-lite'
-import { useRouter } from 'next/router'
-import { PropsWithChildren, useEffect } from 'react'
-import { generateSettingsMenu } from './SettingsMenu.utils'
-
+import { PropsWithChildren } from 'react'
+import AppLayout from '../AppLayout/AppLayout'
import { useParams } from 'common'
-import ProductMenu from 'components/ui/ProductMenu'
-import ProjectLayout from '../'
-
-interface SettingsLayoutProps {
- title?: string
-}
-
-const SettingsLayout = ({ title, children }: PropsWithChildren) => {
- const { ref } = useParams()
- const { ui, meta } = useStore()
- const project = useSelectedProject()
- const organization = useSelectedOrganization()
- const isOrgBilling = !!organization?.subscription_id
+import OrganizationSettingsMenu from './OrganizationSettingsMenu'
+import AccountSettingsMenu from './AccountSettingsMenu'
+import { useRouter } from 'next/router'
+const SettingsLayout = ({ children }: PropsWithChildren<{}>) => {
const router = useRouter()
- // billing pages live under /billing/invoices and /billing/subscription, etc
- // so we need to pass the [5]th part of the url to the menu
- const page = router.pathname.includes('billing')
- ? router.pathname.split('/')[5]
- : router.pathname.split('/')[4]
-
- const isVaultEnabled = useFlag('vaultExtension')
- const menuRoutes = generateSettingsMenu(ref, project, isVaultEnabled, isOrgBilling)
-
- useEffect(() => {
- if (ui.selectedProjectRef) {
- meta.extensions.load()
- }
- }, [ui.selectedProjectRef])
+ const { ref, slug } = useParams()
return (
- }
- >
-
- {children}
-
-
+
+
+ {router.pathname !== '/projects' && (
+
+ {slug === undefined && ref === undefined ? (
+
+ ) : (
+
+ )}
+
+ )}
+
{children}
+
+