From e7020cd3d79430f500407fd3bde3c13cc79bfcc0 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Thu, 19 Dec 2024 02:39:59 +0800 Subject: [PATCH] moar --- .../Organization/resource-banner.tsx | 13 ++-- .../interfaces/app-default-navigation.tsx | 33 +++------ .../interfaces/sidebar-open-top-banner.tsx | 1 - .../layouts/AppLayout/AssistantButton.tsx | 4 +- .../components/layouts/OrganizationLayout.tsx | 48 +++++++------ .../organization-settings-layout.tsx | 68 +++++++++++++++++++ .../pages/org/[slug]/{ => settings}/audit.tsx | 5 +- .../org/[slug]/{ => settings}/billing.tsx | 5 +- .../org/[slug]/{ => settings}/documents.tsx | 5 +- .../org/[slug]/{ => settings}/general.tsx | 5 +- .../org/[slug]/{ => settings}/invoices.tsx | 5 +- 11 files changed, 134 insertions(+), 58 deletions(-) create mode 100644 apps/studio/components/layouts/ProjectLayout/organization-settings-layout.tsx rename apps/studio/pages/org/[slug]/{ => settings}/audit.tsx (80%) rename apps/studio/pages/org/[slug]/{ => settings}/billing.tsx (87%) rename apps/studio/pages/org/[slug]/{ => settings}/documents.tsx (69%) rename apps/studio/pages/org/[slug]/{ => settings}/general.tsx (81%) rename apps/studio/pages/org/[slug]/{ => settings}/invoices.tsx (81%) diff --git a/apps/studio/components/interfaces/Organization/resource-banner.tsx b/apps/studio/components/interfaces/Organization/resource-banner.tsx index 9f70705e913..a3fac8e4cbb 100644 --- a/apps/studio/components/interfaces/Organization/resource-banner.tsx +++ b/apps/studio/components/interfaces/Organization/resource-banner.tsx @@ -18,16 +18,16 @@ export function OrganizationResourceBanner() { type="danger" title="Outstanding Invoices" message="Please pay invoices to avoid service disruption." - link={`/org/${org?.slug}/invoices`} + link={`/org/${org?.slug}/settings/invoices`} org={org} /> )} - {true && ( + {org?.restriction_status === 'grace_period' && ( )} @@ -36,7 +36,7 @@ export function OrganizationResourceBanner() { type="warning" title="Grace period is over" message="Your project will not be able to serve requests when you used up your quota." - link={`/org/${org?.slug}/billing`} + link={`/org/${org?.slug}/settings/billing`} org={org} /> )} @@ -45,7 +45,7 @@ export function OrganizationResourceBanner() { type="danger" title="Services Restricted" message="Your project is unable to serve any requests as your organization has used up its quota." - link={`/org/${org?.slug}/billing`} + link={`/org/${org?.slug}/settings/billing`} org={org} /> )} @@ -78,7 +78,8 @@ const WarningBanner = ({
diff --git a/apps/studio/components/interfaces/app-default-navigation.tsx b/apps/studio/components/interfaces/app-default-navigation.tsx index 02e8818e51d..76a46c8068b 100644 --- a/apps/studio/components/interfaces/app-default-navigation.tsx +++ b/apps/studio/components/interfaces/app-default-navigation.tsx @@ -110,13 +110,6 @@ export function AppDefaultNavigation() { } function NavLink({ route, active }: { route: any; active?: boolean }) { - const router = useRouter() - // const hasItems = route.items && route.items.some((section) => section.items.length > 0) - const [open, setOpen] = useState(false) - - // console.log('route', route) - - // if (!route.items) { return ( { // }, { label: 'Organization settings', - href: `/org/${slug}/settings`, + href: `/org/${slug}/settings/general`, key: 'settings', icon: , }, @@ -291,21 +284,17 @@ const OrganizationLinks = () => { return ( - + {navMenuItems.map((item, i) => ( - - - + ))} diff --git a/apps/studio/components/interfaces/sidebar-open-top-banner.tsx b/apps/studio/components/interfaces/sidebar-open-top-banner.tsx index 7b8941183b5..b355f362bf5 100644 --- a/apps/studio/components/interfaces/sidebar-open-top-banner.tsx +++ b/apps/studio/components/interfaces/sidebar-open-top-banner.tsx @@ -116,7 +116,6 @@ export function SidebarOpenTopBanner() {
{!!project?.ref && ( { type="text" size="tiny" id="assistant-trigger" - className="h-full w-full rounded-none" + className="w-[24px] h-[24px] flex items-center justify-center p-0" onClick={() => { setAiAssistantPanel({ open: !aiAssistantPanel.open }) }} > - + ) } diff --git a/apps/studio/components/layouts/OrganizationLayout.tsx b/apps/studio/components/layouts/OrganizationLayout.tsx index 612469a3a02..af9b9b6fcb9 100644 --- a/apps/studio/components/layouts/OrganizationLayout.tsx +++ b/apps/studio/components/layouts/OrganizationLayout.tsx @@ -8,7 +8,7 @@ import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' import { ExternalLink } from 'lucide-react' import Link from 'next/link' import type { PropsWithChildren } from 'react' -import { Alert_Shadcn_, AlertTitle_Shadcn_, Button, NavMenu, NavMenuItem } from 'ui' +import { Alert_Shadcn_, AlertTitle_Shadcn_, Button, cn, NavMenu, NavMenuItem } from 'ui' import AccountLayout from './AccountLayout/AccountLayout' import DefaultLayout from './DefaultLayout' import { ScaffoldContainer, ScaffoldDivider, ScaffoldHeader, ScaffoldTitle } from './Scaffold' @@ -75,30 +75,34 @@ const OrganizationLayout = ({ children }: PropsWithChildren<{}>) => { const filteredNavMenuItems = navMenuItems.filter((item) => !item.hidden) return ( -
-
+
+
{/* */} {/* - - - {filteredNavMenuItems.map((item) => ( - - {item.label} - - ))} - - - */} + + + {filteredNavMenuItems.map((item) => ( + + {item.label} + + ))} + + + */} {/* */} {/* + {/* + */} + + {navMenuItems.map((item) => ( + + {item.label} + + ))} + + {/* + */} +
{children}
+ + ) +} + +export default OrganizationSettingsLayout diff --git a/apps/studio/pages/org/[slug]/audit.tsx b/apps/studio/pages/org/[slug]/settings/audit.tsx similarity index 80% rename from apps/studio/pages/org/[slug]/audit.tsx rename to apps/studio/pages/org/[slug]/settings/audit.tsx index 3e7501a3d54..4b258c5c5c0 100644 --- a/apps/studio/pages/org/[slug]/audit.tsx +++ b/apps/studio/pages/org/[slug]/settings/audit.tsx @@ -2,6 +2,7 @@ import { AuditLogs } from 'components/interfaces/Organization' import AppLayout from 'components/layouts/AppLayout/AppLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import OrganizationLayout from 'components/layouts/OrganizationLayout' +import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/organization-settings-layout' import { Loading } from 'components/ui/Loading' import { usePermissionsQuery } from 'data/permissions/permissions-query' import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' @@ -19,7 +20,9 @@ const OrgAuditLogs: NextPageWithLayout = () => { OrgAuditLogs.getLayout = (page) => ( - {page} + + {page} + ) diff --git a/apps/studio/pages/org/[slug]/billing.tsx b/apps/studio/pages/org/[slug]/settings/billing.tsx similarity index 87% rename from apps/studio/pages/org/[slug]/billing.tsx rename to apps/studio/pages/org/[slug]/settings/billing.tsx index 45cc25d56b8..31b6af69265 100644 --- a/apps/studio/pages/org/[slug]/billing.tsx +++ b/apps/studio/pages/org/[slug]/settings/billing.tsx @@ -3,6 +3,7 @@ import { BillingSettings } from 'components/interfaces/Organization' import AppLayout from 'components/layouts/AppLayout/AppLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import OrganizationLayout from 'components/layouts/OrganizationLayout' +import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/organization-settings-layout' import { Loading } from 'components/ui/Loading' import { usePermissionsQuery } from 'data/permissions/permissions-query' import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' @@ -42,7 +43,9 @@ const OrgBillingSettings: NextPageWithLayout = () => { OrgBillingSettings.getLayout = (page) => ( - {page} + + {page} + ) diff --git a/apps/studio/pages/org/[slug]/documents.tsx b/apps/studio/pages/org/[slug]/settings/documents.tsx similarity index 69% rename from apps/studio/pages/org/[slug]/documents.tsx rename to apps/studio/pages/org/[slug]/settings/documents.tsx index 4b95c277216..f1f73cf720c 100644 --- a/apps/studio/pages/org/[slug]/documents.tsx +++ b/apps/studio/pages/org/[slug]/settings/documents.tsx @@ -2,6 +2,7 @@ import { Documents } from 'components/interfaces/Organization' import AppLayout from 'components/layouts/AppLayout/AppLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import OrganizationLayout from 'components/layouts/OrganizationLayout' +import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/organization-settings-layout' import type { NextPageWithLayout } from 'types' const OrgDocuments: NextPageWithLayout = () => { @@ -11,7 +12,9 @@ const OrgDocuments: NextPageWithLayout = () => { OrgDocuments.getLayout = (page) => ( - {page} + + {page} + ) diff --git a/apps/studio/pages/org/[slug]/general.tsx b/apps/studio/pages/org/[slug]/settings/general.tsx similarity index 81% rename from apps/studio/pages/org/[slug]/general.tsx rename to apps/studio/pages/org/[slug]/settings/general.tsx index 33324e8c442..1391b746f41 100644 --- a/apps/studio/pages/org/[slug]/general.tsx +++ b/apps/studio/pages/org/[slug]/settings/general.tsx @@ -2,6 +2,7 @@ import { GeneralSettings as GeneralSettingsLegacy } from 'components/interfaces/ import AppLayout from 'components/layouts/AppLayout/AppLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import OrganizationLayout from 'components/layouts/OrganizationLayout' +import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/organization-settings-layout' import { Loading } from 'components/ui/Loading' import { usePermissionsQuery } from 'data/permissions/permissions-query' import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' @@ -25,7 +26,9 @@ const OrgGeneralSettings: NextPageWithLayout = () => { OrgGeneralSettings.getLayout = (page) => ( - {page} + + {page} + ) diff --git a/apps/studio/pages/org/[slug]/invoices.tsx b/apps/studio/pages/org/[slug]/settings/invoices.tsx similarity index 81% rename from apps/studio/pages/org/[slug]/invoices.tsx rename to apps/studio/pages/org/[slug]/settings/invoices.tsx index 21103064399..60ebd4d4f19 100644 --- a/apps/studio/pages/org/[slug]/invoices.tsx +++ b/apps/studio/pages/org/[slug]/settings/invoices.tsx @@ -2,6 +2,7 @@ import { InvoicesSettings } from 'components/interfaces/Organization' import AppLayout from 'components/layouts/AppLayout/AppLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import OrganizationLayout from 'components/layouts/OrganizationLayout' +import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/organization-settings-layout' import { Loading } from 'components/ui/Loading' import { usePermissionsQuery } from 'data/permissions/permissions-query' import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' @@ -25,7 +26,9 @@ const OrgInvoices: NextPageWithLayout = () => { OrgInvoices.getLayout = (page) => ( - {page} + + {page} + )