Update org settings pages to use OrgLayout

studio/components/layouts/OrganizationLayout.tsx

@@ -0,0 +1,23 @@
+import { useStore } from 'hooks'
+import { observer } from 'mobx-react-lite'
+import { FC, ReactNode } from 'react'
+import { AccountLayout } from './'
+
+interface Props {
+  children: ReactNode
+}
+
+const OrganizationLayout: FC<Props> = ({ children }) => {
+  const { ui } = useStore()
+
+  return (
+    <AccountLayout
+      title={ui.selectedOrganization?.name ?? 'Supabase'}
+      breadcrumbs={[{ key: `org-settings`, label: 'Settings' }]}
+    >
+      {children}
+    </AccountLayout>
+  )
+}
+
+export default observer(OrganizationLayout)

studio/components/layouts/index.ts

@@ -15,6 +15,7 @@ import { WizardLayoutWithoutAuth } from './WizardLayout'
 import VercelIntegrationLayout from './VercelIntegrationLayout'
 import BillingLayout from './BillingLayout'
 import LogsLayout from './LogsLayout/LogsLayout'
+import OrganizationLayout from './OrganizationLayout'
 
 export {
   ProjectLayoutWithAuth,
@@ -34,6 +35,7 @@ export {
   VercelIntegrationLayout,
   BillingLayout,
   LogsLayout,
+  OrganizationLayout,
 }
 
 export default ProjectLayout

studio/pages/org/[slug]/billing.tsx

@@ -1,28 +1,20 @@
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { NextPage } from 'next'
 import { Tabs } from 'ui'
 
+import { NextPageWithLayout } from 'types'
 import { useParams, useStore } from 'hooks'
 import Loading from 'components/ui/Loading'
-import { AccountLayout } from 'components/layouts'
+import { OrganizationLayout } from 'components/layouts'
 import { BillingSettings } from 'components/interfaces/Organization'
 
-const OrgBillingSettings: NextPage = () => {
+const OrgBillingSettings: NextPageWithLayout = () => {
   const { ui } = useStore()
   const { slug } = useParams()
   const router = useRouter()
 
   return (
-    <AccountLayout
-      title={ui.selectedOrganization?.name ?? 'Supabase'}
-      breadcrumbs={[
-        {
-          key: `org-settings`,
-          label: 'Settings',
-        },
-      ]}
-    >
+    <>
       {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
         <Loading />
       ) : (
@@ -55,8 +47,9 @@ const OrgBillingSettings: NextPage = () => {
           </div>
         </div>
       )}
-    </AccountLayout>
+    </>
   )
 }
 
+OrgBillingSettings.getLayout = (page) => <OrganizationLayout>{page}</OrganizationLayout>
 export default observer(OrgBillingSettings)

studio/pages/org/[slug]/general.tsx

@@ -1,28 +1,20 @@
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { NextPage } from 'next'
 import { Tabs } from 'ui'
 
+import { NextPageWithLayout } from 'types'
 import { useParams, useStore } from 'hooks'
 import Loading from 'components/ui/Loading'
-import { AccountLayout } from 'components/layouts'
+import { OrganizationLayout } from 'components/layouts'
 import { GeneralSettings } from 'components/interfaces/Organization'
 
-const OrgGeneralSettings: NextPage = () => {
+const OrgGeneralSettings: NextPageWithLayout = () => {
   const { ui } = useStore()
   const { slug } = useParams()
   const router = useRouter()
 
   return (
-    <AccountLayout
-      title={ui.selectedOrganization?.name ?? 'Supabase'}
-      breadcrumbs={[
-        {
-          key: `org-settings`,
-          label: 'Settings',
-        },
-      ]}
-    >
+    <>
       {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
         <Loading />
       ) : (
@@ -55,8 +47,9 @@ const OrgGeneralSettings: NextPage = () => {
           </div>
         </div>
       )}
-    </AccountLayout>
+    </>
   )
 }
 
+OrgGeneralSettings.getLayout = (page) => <OrganizationLayout>{page}</OrganizationLayout>
 export default observer(OrgGeneralSettings)

studio/pages/org/[slug]/invoices.tsx

@@ -1,28 +1,20 @@
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { NextPage } from 'next'
 import { Tabs } from 'ui'
 
+import { NextPageWithLayout } from 'types'
 import { useParams, useStore } from 'hooks'
 import Loading from 'components/ui/Loading'
-import { AccountLayout } from 'components/layouts'
+import { OrganizationLayout } from 'components/layouts'
 import { InvoicesSettings } from 'components/interfaces/Organization'
 
-const OrgInvoices: NextPage = () => {
+const OrgInvoices: NextPageWithLayout = () => {
   const { ui } = useStore()
   const { slug } = useParams()
   const router = useRouter()
 
   return (
-    <AccountLayout
-      title={ui.selectedOrganization?.name ?? 'Supabase'}
-      breadcrumbs={[
-        {
-          key: `org-settings`,
-          label: 'Settings',
-        },
-      ]}
-    >
+    <>
       {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
         <Loading />
       ) : (
@@ -55,8 +47,9 @@ const OrgInvoices: NextPage = () => {
           </div>
         </div>
       )}
-    </AccountLayout>
+    </>
   )
 }
 
+OrgInvoices.getLayout = (page) => <OrganizationLayout>{page}</OrganizationLayout>
 export default observer(OrgInvoices)

studio/pages/org/[slug]/team.tsx

@@ -1,28 +1,20 @@
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { NextPage } from 'next'
 import { Tabs } from 'ui'
 
+import { NextPageWithLayout } from 'types'
 import { useParams, useStore } from 'hooks'
 import Loading from 'components/ui/Loading'
-import { AccountLayout } from 'components/layouts'
+import { OrganizationLayout } from 'components/layouts'
 import { TeamSettings } from 'components/interfaces/Organization'
 
-const OrgTeamSettings: NextPage = () => {
+const OrgTeamSettings: NextPageWithLayout = () => {
   const { ui } = useStore()
   const { slug } = useParams()
   const router = useRouter()
 
   return (
-    <AccountLayout
-      title={ui.selectedOrganization?.name ?? 'Supabase'}
-      breadcrumbs={[
-        {
-          key: `org-settings`,
-          label: 'Settings',
-        },
-      ]}
-    >
+    <>
       {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
         <Loading />
       ) : (
@@ -55,8 +47,9 @@ const OrgTeamSettings: NextPage = () => {
           </div>
         </div>
       )}
-    </AccountLayout>
+    </>
   )
 }
 
+OrgTeamSettings.getLayout = (page) => <OrganizationLayout>{page}</OrganizationLayout>
 export default observer(OrgTeamSettings)