From a753a599ea2ab17781e39bc2da3e92ec53a8168c Mon Sep 17 00:00:00 2001 From: Danny White <3104761+dnywh@users.noreply.github.com> Date: Thu, 12 Mar 2026 14:08:15 +1100 Subject: [PATCH] feat(studio): page titles for logs and observability (#43535) Stacked PR 3/5 for page title improvements. Includes Logs and Observability layout title adoption, unified logs title cleanup, and small route title fixes. _Base: [dnywh/feat/page-titles](https://github.com/supabase/supabase/pull/43538)_ --- ## What kind of change does this PR introduce? - Resolves FE-1960 - Resolves FE-1983 - Resolves DEPR-207 ## What is the current behavior? Page titles between surfaces are inconsistent and vague. Sometimes they say the product name: ``` My Project | My Org | Supabase ``` ...even when on a specific surface like Database > Tables. Other times they show the entity name but skip over the project or org name : ``` Edge Functions | Supabase ``` ## What is the new behavior? Logs and Observability adopts the layout title format introduced in https://github.com/supabase/supabase/pull/43538: ``` users | Table Editor | My Project | My Org | Supabase hello-world | Logs | Edge Functions | My Project | My Org | Supabase Backups | Database | My Project | My Org | Supabase Authentication | My Project | My Org | Supabase ``` That format is: entity, section, surface, project, org, brand. Also includes unified logs title cleanup, and small route title fixes. ## Additional context Related stacked PRs also based on the the original [dnywh/feat/page-titles](https://github.com/supabase/supabase/pull/43538) branch: - https://github.com/supabase/supabase/pull/43534 - https://github.com/supabase/supabase/pull/43536 - https://github.com/supabase/supabase/pull/43537 --------- Co-authored-by: Joshen Lim --- .../layouts/LogsLayout/LogsLayout.tsx | 19 ++++++++++++------- .../ObservabilityLayout.tsx | 4 ++-- .../project/[ref]/logs/explorer/index.tsx | 2 +- .../project/[ref]/logs/explorer/recent.tsx | 2 +- .../project/[ref]/logs/explorer/saved.tsx | 2 +- .../project/[ref]/logs/explorer/templates.tsx | 2 +- .../studio/pages/project/[ref]/logs/index.tsx | 3 ++- .../project/[ref]/logs/pg-upgrade-logs.tsx | 2 +- .../project/[ref]/observability/[id].tsx | 2 +- .../project/[ref]/observability/index.tsx | 2 +- .../[ref]/observability/query-performance.tsx | 2 +- .../project/[ref]/observability/storage.tsx | 2 +- 12 files changed, 25 insertions(+), 19 deletions(-) diff --git a/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx b/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx index 18eca1e0c14..bcf845096cd 100644 --- a/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx +++ b/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx @@ -1,15 +1,14 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' - -import { PropsWithChildren } from 'react' - import NoPermission from 'components/ui/NoPermission' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { withAuth } from 'hooks/misc/withAuth' +import { PropsWithChildren } from 'react' + import { ProjectLayout } from '../ProjectLayout' import { LogsSidebarMenuV2 } from './LogsSidebarMenuV2' interface LogsLayoutProps { - title?: string + title: string } const LogsLayout = ({ title, children }: PropsWithChildren) => { @@ -20,12 +19,14 @@ const LogsLayout = ({ title, children }: PropsWithChildren) => if (!canUseLogsExplorer) { if (isLoading) { - return + return ( + + ) } if (!isLoading && !canUseLogsExplorer) { return ( - + ) @@ -33,7 +34,11 @@ const LogsLayout = ({ title, children }: PropsWithChildren) => } return ( - }> + } + > {children} ) diff --git a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityLayout.tsx b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityLayout.tsx index f8d3692ca5f..0461d1ab1c0 100644 --- a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityLayout.tsx +++ b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityLayout.tsx @@ -14,7 +14,7 @@ import { ProjectLayout } from '../ProjectLayout' import ObservabilityMenu from './ObservabilityMenu' interface ObservabilityLayoutProps { - title?: string + title: string } const ObservabilityLayoutContent = ({ @@ -85,8 +85,8 @@ const ObservabilityLayoutContent = ({ if (reportsAll) { return ( } isBlocking={false} > diff --git a/apps/studio/pages/project/[ref]/logs/explorer/index.tsx b/apps/studio/pages/project/[ref]/logs/explorer/index.tsx index df6375cc053..8f6c10628d9 100644 --- a/apps/studio/pages/project/[ref]/logs/explorer/index.tsx +++ b/apps/studio/pages/project/[ref]/logs/explorer/index.tsx @@ -476,7 +476,7 @@ export const LogsExplorerPage: NextPageWithLayout = () => { LogsExplorerPage.getLayout = (page) => ( - {page} + {page} ) diff --git a/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx b/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx index 4fdfda5bdda..2c0903d9f4f 100644 --- a/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx +++ b/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx @@ -61,7 +61,7 @@ export const LogsSavedPage: NextPageWithLayout = () => { LogsSavedPage.getLayout = (page) => ( - {page} + {page} ) diff --git a/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx b/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx index e180af79eb9..50f94af56e7 100644 --- a/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx +++ b/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx @@ -68,7 +68,7 @@ export const LogsSavedPage: NextPageWithLayout = () => { LogsSavedPage.getLayout = (page) => ( - {page} + {page} ) diff --git a/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx b/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx index 15a52d0cbc4..174fb2bf1e0 100644 --- a/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx +++ b/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx @@ -43,7 +43,7 @@ export const LogsTemplatesPage: NextPageWithLayout = () => { LogsTemplatesPage.getLayout = (page) => ( - {page} + {page} ) diff --git a/apps/studio/pages/project/[ref]/logs/index.tsx b/apps/studio/pages/project/[ref]/logs/index.tsx index ca61c7cf858..6a0ce4399df 100644 --- a/apps/studio/pages/project/[ref]/logs/index.tsx +++ b/apps/studio/pages/project/[ref]/logs/index.tsx @@ -24,7 +24,8 @@ export const LogPage: NextPageWithLayout = () => { if (isUnifiedLogsEnabled) { return ( - + {/* Omit the generic product segment here; project/org context already makes the route clear. */} + diff --git a/apps/studio/pages/project/[ref]/logs/pg-upgrade-logs.tsx b/apps/studio/pages/project/[ref]/logs/pg-upgrade-logs.tsx index 9661aa7bdd9..97672dbfd66 100644 --- a/apps/studio/pages/project/[ref]/logs/pg-upgrade-logs.tsx +++ b/apps/studio/pages/project/[ref]/logs/pg-upgrade-logs.tsx @@ -11,7 +11,7 @@ export const LogPage: NextPageWithLayout = () => { LogPage.getLayout = (page) => ( - {page} + {page} ) diff --git a/apps/studio/pages/project/[ref]/observability/[id].tsx b/apps/studio/pages/project/[ref]/observability/[id].tsx index 31a47fdc61f..62143a5088c 100644 --- a/apps/studio/pages/project/[ref]/observability/[id].tsx +++ b/apps/studio/pages/project/[ref]/observability/[id].tsx @@ -14,7 +14,7 @@ const PageLayout: NextPageWithLayout = () => ( PageLayout.getLayout = (page) => ( - {page} + {page} ) diff --git a/apps/studio/pages/project/[ref]/observability/index.tsx b/apps/studio/pages/project/[ref]/observability/index.tsx index 24e081daa5d..37e98a5dcb7 100644 --- a/apps/studio/pages/project/[ref]/observability/index.tsx +++ b/apps/studio/pages/project/[ref]/observability/index.tsx @@ -96,7 +96,7 @@ export const UserReportPage: NextPageWithLayout = () => { UserReportPage.getLayout = (page) => ( - {page} + {page} ) diff --git a/apps/studio/pages/project/[ref]/observability/query-performance.tsx b/apps/studio/pages/project/[ref]/observability/query-performance.tsx index 22a5b54b6be..784c45fed75 100644 --- a/apps/studio/pages/project/[ref]/observability/query-performance.tsx +++ b/apps/studio/pages/project/[ref]/observability/query-performance.tsx @@ -127,7 +127,7 @@ const QueryPerformanceReport: NextPageWithLayout = () => { QueryPerformanceReport.getLayout = (page) => ( - {page} + {page} ) diff --git a/apps/studio/pages/project/[ref]/observability/storage.tsx b/apps/studio/pages/project/[ref]/observability/storage.tsx index b10cfac2a25..8d10d6a79f4 100644 --- a/apps/studio/pages/project/[ref]/observability/storage.tsx +++ b/apps/studio/pages/project/[ref]/observability/storage.tsx @@ -196,7 +196,7 @@ export const StorageReport: NextPageWithLayout = () => { StorageReport.getLayout = (page) => ( - {page} + {page} )