Chore/add flag for html title (#39173)

* Add flag for custom html title

* nit

apps/studio/components/layouts/APIAuthorizationLayout.tsx

@@ -1,3 +1,4 @@
+import { useCustomContent } from 'hooks/custom-content/useCustomContent'
 import { BASE_PATH } from 'lib/constants'
 import { useTheme } from 'next-themes'
 import Head from 'next/head'
@@ -9,10 +10,12 @@ export interface APIAuthorizationLayoutProps {}
 
 const APIAuthorizationLayout = ({ children }: PropsWithChildren<APIAuthorizationLayoutProps>) => {
   const { resolvedTheme } = useTheme()
+  const { appTitle } = useCustomContent(['app:title'])
+
   return (
     <>
       <Head>
-        <title>Authorize API access | Supabase</title>
+        <title>Authorize API access | {appTitle || 'Supabase'}</title>
       </Head>
       <main className="h-screen flex flex-col w-full h-full overflow-y-auto">
         <div>

apps/studio/components/layouts/AccountLayout/AccountLayout.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 import { PropsWithChildren, useEffect } from 'react'
 
 import { LOCAL_STORAGE_KEYS } from 'common'
+import { useCustomContent } from 'hooks/custom-content/useCustomContent'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { withAuth } from 'hooks/misc/withAuth'
 import { IS_PLATFORM } from 'lib/constants'
@@ -18,6 +19,9 @@ const AccountLayout = ({ children, title }: PropsWithChildren<AccountLayoutProps
   const router = useRouter()
   const appSnap = useAppStateSnapshot()
 
+  const { appTitle } = useCustomContent(['app:title'])
+  const titleSuffix = appTitle || 'Supabase'
+
   const [lastVisitedOrganization] = useLocalStorageQuery(
     LOCAL_STORAGE_KEYS.LAST_VISITED_ORGANIZATION,
     ''
@@ -41,7 +45,7 @@ const AccountLayout = ({ children, title }: PropsWithChildren<AccountLayoutProps
   return (
     <>
       <Head>
-        <title>{title ? `${title} | Supabase` : 'Supabase'}</title>
+        <title>{title ? `${title} | ${titleSuffix}` : titleSuffix}</title>
         <meta name="description" content="Supabase Studio" />
       </Head>
       <div className={cn('flex flex-col w-screen h-[calc(100vh-48px)]')}>

apps/studio/components/layouts/LinkAwsMarketplaceLayout.tsx

@@ -1,3 +1,4 @@
+import { useCustomContent } from 'hooks/custom-content/useCustomContent'
 import { BASE_PATH } from 'lib/constants'
 import { useTheme } from 'next-themes'
 import Head from 'next/head'
@@ -12,10 +13,12 @@ const LinkAwsMarketplaceLayout = ({
   children,
 }: PropsWithChildren<LinkAwsMarketplaceLayoutProps>) => {
   const { resolvedTheme } = useTheme()
+  const { appTitle } = useCustomContent(['app:title'])
+
   return (
     <>
       <Head>
-        <title>AWS Marketplace Setup | Supabase</title>
+        <title>AWS Marketplace Setup | {appTitle || 'Supabase'}</title>
       </Head>
       <main className="flex flex-col flex-grow w-full h-full overflow-y-auto">
         <div>

apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx

@@ -9,6 +9,7 @@ import ProjectAPIDocs from 'components/interfaces/ProjectAPIDocs/ProjectAPIDocs'
 import { AIAssistant } from 'components/ui/AIAssistantPanel/AIAssistant'
 import { Loading } from 'components/ui/Loading'
 import { ResourceExhaustionWarningBanner } from 'components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner'
+import { useCustomContent } from 'hooks/custom-content/useCustomContent'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { withAuth } from 'hooks/misc/withAuth'
@@ -94,6 +95,9 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
     const { mobileMenuOpen, showSidebar, setMobileMenuOpen } = useAppStateSnapshot()
     const aiSnap = useAiAssistantStateSnapshot()
 
+    const { appTitle } = useCustomContent(['app:title'])
+    const titleSuffix = appTitle || 'Supabase'
+
     useHotKey(() => aiSnap.toggleAssistant(), 'i', [aiSnap])
 
     const editor = useEditorType()
@@ -124,14 +128,14 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
         <Head>
           <title>
             {title
-              ? `${title} | Supabase`
+              ? `${title} | ${titleSuffix}`
               : selectedTable
-                ? `${selectedTable} | ${projectName} | ${organizationName} | Supabase`
+                ? `${selectedTable} | ${projectName} | ${organizationName} | ${titleSuffix}`
                 : projectName
-                  ? `${projectName} | ${organizationName} | Supabase`
+                  ? `${projectName} | ${organizationName} | ${titleSuffix}`
                   : organizationName
-                    ? `${organizationName} | Supabase`
-                    : 'Supabase'}
+                    ? `${organizationName} | ${titleSuffix}`
+                    : titleSuffix}
           </title>
           <meta name="description" content="Supabase Studio" />
         </Head>

apps/studio/hooks/custom-content/CustomContent.types.ts

@@ -1,6 +1,8 @@
 import type { CloudProvider } from 'shared-data'
 
 export type CustomContentTypes = {
+  appTitle: string
+
   dashboardAuthCustomProvider: string
 
   organizationLegalDocuments: {

apps/studio/hooks/custom-content/custom-content.json

@@ -1,6 +1,8 @@
 {
   "$schema": "./custom-content.schema.json",
 
+  "app:title": null,
+
   "dashboard_auth:custom_provider": null,
 
   "organization:legal_documents": null,

apps/studio/hooks/custom-content/custom-content.sample.json

@@ -1,6 +1,8 @@
 {
   "$schema": "./custom-content.schema.json",
 
+  "app:title": "Test Title",
+
   "dashboard_auth:custom_provider": "Nimbus",
 
   "organization:legal_documents": [

apps/studio/hooks/custom-content/custom-content.schema.json

@@ -6,6 +6,11 @@
       "type": "string"
     },
 
+    "app:title": {
+      "type": ["string", "null"],
+      "description": "Render a custom HTML title for the site"
+    },
+
     "dashboard_auth:custom_provider": {
       "type": ["string", "null"],
       "description": "Show a custom provider on the sign in page (Continue with X)"
@@ -85,6 +90,7 @@
     }
   },
   "required": [
+    "app:title",
     "organization:legal_documents",
     "project_homepage:client_libraries",
     "project_homepage:example_projects",

apps/studio/pages/_app.tsx

@@ -50,6 +50,7 @@ import { MonacoThemeProvider } from 'components/interfaces/App/MonacoThemeProvid
 import { GlobalErrorBoundaryState } from 'components/ui/GlobalErrorBoundaryState'
 import { useRootQueryClient } from 'data/query-client'
 import { customFont, sourceCodePro } from 'fonts'
+import { useCustomContent } from 'hooks/custom-content/useCustomContent'
 import { AuthProvider } from 'lib/auth'
 import { API_URL, BASE_PATH, IS_PLATFORM, useDefaultProvider } from 'lib/constants'
 import { ProfileProvider } from 'lib/profile'
@@ -84,6 +85,7 @@ loader.config({
 
 function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
   const queryClient = useRootQueryClient()
+  const { appTitle } = useCustomContent(['app:title'])
 
   const getLayout = Component.getLayout ?? ((page) => page)
 
@@ -127,7 +129,7 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
               >
                 <ProfileProvider>
                   <Head>
-                    <title>Supabase</title>
+                    <title>{appTitle ?? 'Supabase'}</title>
                     <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                     <meta property="og:image" content={`${BASE_PATH}/img/supabase-logo.png`} />
                     {/* [Alaister]: This has to be an inline style tag here and not a separate component due to next/font */}

apps/studio/pages/claim-project.tsx

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import { useMemo, useState } from 'react'
+import { PropsWithChildren, useMemo, useState } from 'react'
 
 import { useParams } from 'common'
 import { ProjectClaimBenefits } from 'components/interfaces/Organization/ProjectClaim/benefits'
@@ -10,10 +10,24 @@ import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useApiAuthorizationQuery } from 'data/api-authorization/api-authorization-query'
 import { useOrganizationProjectClaimQuery } from 'data/organizations/organization-project-claim-query'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useCustomContent } from 'hooks/custom-content/useCustomContent'
 import { withAuth } from 'hooks/misc/withAuth'
 import type { NextPageWithLayout } from 'types'
 import { Admonition } from 'ui-patterns'
 
+const ClaimProjectPageLayout = ({ children }: PropsWithChildren) => {
+  const { appTitle } = useCustomContent(['app:title'])
+
+  return (
+    <>
+      <Head>
+        <title>Claim project | {appTitle || 'Supabase'}</title>
+      </Head>
+      {children}
+    </>
+  )
+}
+
 const ClaimProjectPage: NextPageWithLayout = () => {
   const { auth_id, token: claimToken } = useParams()
   const [selectedOrgSlug, setSelectedOrgSlug] = useState<string>()
@@ -111,12 +125,9 @@ const ClaimProjectPage: NextPageWithLayout = () => {
 }
 
 ClaimProjectPage.getLayout = (page) => (
-  <>
-    <Head>
-      <title>Claim project | Supabase</title>
-    </Head>
+  <ClaimProjectPageLayout>
     <main className="flex flex-col w-full min-h-screen overflow-y-auto">{page}</main>
-  </>
+  </ClaimProjectPageLayout>
 )
 
 export default withAuth(ClaimProjectPage)