[pull] master from supabase:master

apps/studio/components/interfaces/Home/Home.tsx

@@ -98,6 +98,14 @@ export const Home = () => {
   // [Joshen] JFYI minus 1 as the replicas endpoint returns the primary DB minimally
   const replicasCount = Math.max(0, (replicasData?.length ?? 1) - 1)
 
+  if (isPaused) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <ProjectPausedState />
+      </div>
+    )
+  }
+
   return (
     <div className="w-full px-4">
       <div className={cn('py-16 ', !isPaused && 'border-b border-muted ')}>
@@ -200,84 +208,81 @@ export const Home = () => {
             </div>
           </div>
           <ProjectUpgradeFailedBanner />
-          {isPaused && <ProjectPausedState />}
         </div>
       </div>
 
-      {!isPaused && (
-        <>
-          <div className="py-16 border-b border-muted">
-            <div className="mx-auto max-w-7xl space-y-16">
-              {IS_PLATFORM && project?.status !== PROJECT_STATUS.INACTIVE && (
-                <>{isNewProject ? <NewProjectPanel /> : <ProjectUsageSection />}</>
-              )}
-              {!isNewProject && project?.status !== PROJECT_STATUS.INACTIVE && <AdvisorWidget />}
-            </div>
+      <>
+        <div className="py-16 border-b border-muted">
+          <div className="mx-auto max-w-7xl space-y-16">
+            {IS_PLATFORM && project?.status !== PROJECT_STATUS.INACTIVE && (
+              <>{isNewProject ? <NewProjectPanel /> : <ProjectUsageSection />}</>
+            )}
+            {!isNewProject && project?.status !== PROJECT_STATUS.INACTIVE && <AdvisorWidget />}
           </div>
+        </div>
 
-          <div className="bg-surface-100/5 py-16">
-            <div className="mx-auto max-w-7xl space-y-16">
-              {project?.status !== PROJECT_STATUS.INACTIVE && (
-                <>
-                  <div className="space-y-8">
-                    <h2 className="text-lg">Client libraries</h2>
-                    <div className="grid grid-cols-2 gap-x-8 gap-y-8 md:gap-12 mb-12 md:grid-cols-3">
-                      {clientLibraries!.map((library) => (
-                        // [Alaister]: Looks like the useCustomContent has wonky types. I'll look at a fix later.
-                        <ClientLibrary key={(library as any).language} {...(library as any)} />
-                      ))}
-                    </div>
+        <div className="bg-surface-100/5 py-16">
+          <div className="mx-auto max-w-7xl space-y-16">
+            {project?.status !== PROJECT_STATUS.INACTIVE && (
+              <>
+                <div className="space-y-8">
+                  <h2 className="text-lg">Client libraries</h2>
+                  <div className="grid grid-cols-2 gap-x-8 gap-y-8 md:gap-12 mb-12 md:grid-cols-3">
+                    {clientLibraries!.map((library) => (
+                      // [Alaister]: Looks like the useCustomContent has wonky types. I'll look at a fix later.
+                      <ClientLibrary key={(library as any).language} {...(library as any)} />
+                    ))}
                   </div>
-                  {showExamples && (
-                    <div className="flex flex-col gap-y-8">
-                      <h4 className="text-lg">Example projects</h4>
-                      {!!projectHomepageExampleProjects ? (
-                        <div className="grid gap-2 md:gap-8 md:grid-cols-2 lg:grid-cols-3">
-                          {/* [Alaister]: Looks like the useCustomContent has wonky types. I'll look at a fix later. */}
-                          {(projectHomepageExampleProjects as any)
-                            .sort((a: any, b: any) => a.title.localeCompare(b.title))
-                            .map((project: any) => (
-                              <ExampleProject key={project.url} {...project} />
-                            ))}
-                        </div>
-                      ) : (
-                        <div className="flex justify-center">
-                          <Tabs_Shadcn_ defaultValue="app" className="w-full">
-                            <TabsList_Shadcn_ className="flex gap-4 mb-8">
-                              <TabsTrigger_Shadcn_ value="app">App Frameworks</TabsTrigger_Shadcn_>
-                              <TabsTrigger_Shadcn_ value="mobile">
-                                Mobile Frameworks
-                              </TabsTrigger_Shadcn_>
-                            </TabsList_Shadcn_>
-                            <TabsContent_Shadcn_ value="app">
-                              <div className="grid gap-2 md:gap-8 md:grid-cols-2 lg:grid-cols-3">
-                                {EXAMPLE_PROJECTS.filter((project) => project.type === 'app')
-                                  .sort((a, b) => a.title.localeCompare(b.title))
-                                  .map((project) => (
-                                    <ExampleProject key={project.url} {...project} />
-                                  ))}
-                              </div>
-                            </TabsContent_Shadcn_>
-                            <TabsContent_Shadcn_ value="mobile">
-                              <div className="grid gap-2 md:gap-8 md:grid-cols-2 lg:grid-cols-3">
-                                {EXAMPLE_PROJECTS.filter((project) => project.type === 'mobile')
-                                  .sort((a, b) => a.title.localeCompare(b.title))
-                                  .map((project) => (
-                                    <ExampleProject key={project.url} {...project} />
-                                  ))}
-                              </div>
-                            </TabsContent_Shadcn_>
-                          </Tabs_Shadcn_>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
+                </div>
+                {showExamples && (
+                  <div className="flex flex-col gap-y-8">
+                    <h4 className="text-lg">Example projects</h4>
+                    {!!projectHomepageExampleProjects ? (
+                      <div className="grid gap-2 md:gap-8 md:grid-cols-2 lg:grid-cols-3">
+                        {/* [Alaister]: Looks like the useCustomContent has wonky types. I'll look at a fix later. */}
+                        {(projectHomepageExampleProjects as any)
+                          .sort((a: any, b: any) => a.title.localeCompare(b.title))
+                          .map((project: any) => (
+                            <ExampleProject key={project.url} {...project} />
+                          ))}
+                      </div>
+                    ) : (
+                      <div className="flex justify-center">
+                        <Tabs_Shadcn_ defaultValue="app" className="w-full">
+                          <TabsList_Shadcn_ className="flex gap-4 mb-8">
+                            <TabsTrigger_Shadcn_ value="app">App Frameworks</TabsTrigger_Shadcn_>
+                            <TabsTrigger_Shadcn_ value="mobile">
+                              Mobile Frameworks
+                            </TabsTrigger_Shadcn_>
+                          </TabsList_Shadcn_>
+                          <TabsContent_Shadcn_ value="app">
+                            <div className="grid gap-2 md:gap-8 md:grid-cols-2 lg:grid-cols-3">
+                              {EXAMPLE_PROJECTS.filter((project) => project.type === 'app')
+                                .sort((a, b) => a.title.localeCompare(b.title))
+                                .map((project) => (
+                                  <ExampleProject key={project.url} {...project} />
+                                ))}
+                            </div>
+                          </TabsContent_Shadcn_>
+                          <TabsContent_Shadcn_ value="mobile">
+                            <div className="grid gap-2 md:gap-8 md:grid-cols-2 lg:grid-cols-3">
+                              {EXAMPLE_PROJECTS.filter((project) => project.type === 'mobile')
+                                .sort((a, b) => a.title.localeCompare(b.title))
+                                .map((project) => (
+                                  <ExampleProject key={project.url} {...project} />
+                                ))}
+                            </div>
+                          </TabsContent_Shadcn_>
+                        </Tabs_Shadcn_>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </>
+            )}
           </div>
-        </>
-      )}
+        </div>
+      </>
     </div>
   )
 }

apps/studio/components/interfaces/HomeNew/TopSection.tsx

@@ -37,19 +37,7 @@ export const TopSection = () => {
         : 'Welcome to your project'
 
   if (isPaused) {
-    return (
-      <div className="w-full">
-        <div className="mb-8">
-          {!isMainBranch && (
-            <Link href={`/project/${parentProject?.ref}`} className="text-sm text-foreground-light">
-              {parentProject?.name}
-            </Link>
-          )}
-          <h1 className="text-3xl">{projectName}</h1>
-        </div>
-        <ProjectPausedState />
-      </div>
-    )
+    return <ProjectPausedState />
   }
 
   return (

apps/studio/components/interfaces/LogDrains/LogDrains.constants.tsx

@@ -1,5 +1,5 @@
-import { Datadog, Grafana, Sentry } from 'icons'
 import { components } from 'api-types'
+import { Datadog, Grafana, Sentry } from 'icons'
 import { BracesIcon } from 'lucide-react'
 
 const iconProps = {
@@ -8,6 +8,8 @@ const iconProps = {
   className: 'text-foreground-light',
 }
 
+export type LogDrainType = components['schemas']['CreateBackendParamsOpenapi']['type']
+
 export const LOG_DRAIN_TYPES = [
   {
     value: 'webhook',
@@ -39,14 +41,6 @@ export const LOG_DRAIN_TYPES = [
 
 export const LOG_DRAIN_SOURCE_VALUES = LOG_DRAIN_TYPES.map((source) => source.value)
 
-// export type LogDrainType =
-//   | (typeof LOG_DRAIN_TYPES)[number]['value']
-//   | 'postgres'
-//   | 'bigquery'
-//   | 'elastic'
-
-export type LogDrainType = components['schemas']['LFBackend']['type']
-
 export const DATADOG_REGIONS = [
   {
     label: 'AP1',

apps/studio/components/interfaces/ProjectAPIDocs/Content/Bucket.tsx

@@ -8,7 +8,7 @@ import { DOCS_RESOURCE_CONTENT } from '../ProjectAPIDocs.constants'
 import ResourceContent from '../ResourceContent'
 import type { ContentProps } from './Content.types'
 
-const Bucket = ({ language, apikey, endpoint }: ContentProps) => {
+export const Bucket = ({ language, apikey, endpoint }: ContentProps) => {
   const { ref } = useParams()
   const snap = useAppStateSnapshot()
   const { data } = useBucketsQuery({ projectRef: ref })
@@ -106,5 +106,3 @@ const Bucket = ({ language, apikey, endpoint }: ContentProps) => {
     </div>
   )
 }
-
-export default Bucket

apps/studio/components/interfaces/ProjectAPIDocs/Content/EdgeFunction.tsx

@@ -6,7 +6,7 @@ import { DOCS_RESOURCE_CONTENT } from '../ProjectAPIDocs.constants'
 import ResourceContent from '../ResourceContent'
 import type { ContentProps } from './Content.types'
 
-const Bucket = ({ language, apikey = 'API_KEY', endpoint }: ContentProps) => {
+export const EdgeFunction = ({ language, apikey = 'API_KEY', endpoint }: ContentProps) => {
   const { ref } = useParams()
   const snap = useAppStateSnapshot()
   const { data } = useEdgeFunctionsQuery({ projectRef: ref })
@@ -37,5 +37,3 @@ const Bucket = ({ language, apikey = 'API_KEY', endpoint }: ContentProps) => {
     </div>
   )
 }
-
-export default Bucket

apps/studio/components/interfaces/ProjectAPIDocs/Content/EdgeFunctions.tsx

@@ -2,7 +2,7 @@ import ContentSnippet from '../ContentSnippet'
 import { DOCS_CONTENT } from '../ProjectAPIDocs.constants'
 import type { ContentProps } from './Content.types'
 
-const EdgeFunctions = ({ language }: ContentProps) => {
+export const EdgeFunctions = ({ language }: ContentProps) => {
   return (
     <>
       <ContentSnippet selectedLanguage={language} snippet={DOCS_CONTENT.edgeFunctions} />
@@ -12,5 +12,3 @@ const EdgeFunctions = ({ language }: ContentProps) => {
     </>
   )
 }
-
-export default EdgeFunctions

apps/studio/components/interfaces/ProjectAPIDocs/Content/Entities.tsx

@@ -12,7 +12,7 @@ import ContentSnippet from '../ContentSnippet'
 import { DOCS_CONTENT } from '../ProjectAPIDocs.constants'
 import type { ContentProps } from './Content.types'
 
-const Entities = ({ language }: ContentProps) => {
+export const Entities = ({ language }: ContentProps) => {
   const { ref } = useParams()
   const [isGeneratingTypes, setIsGeneratingTypes] = useState(false)
 
@@ -62,5 +62,3 @@ const Entities = ({ language }: ContentProps) => {
     </>
   )
 }
-
-export default Entities

apps/studio/components/interfaces/ProjectAPIDocs/Content/Entity.tsx

@@ -30,7 +30,7 @@ function getColumnType(type: string, format: string) {
   }
 }
 
-const Entity = ({ language, apikey = '', endpoint = '' }: ContentProps) => {
+export const Entity = ({ language, apikey = '', endpoint = '' }: ContentProps) => {
   const { ref } = useParams()
   const snap = useAppStateSnapshot()
   const resource = snap.activeDocsSection[1]
@@ -144,5 +144,3 @@ const Entity = ({ language, apikey = '', endpoint = '' }: ContentProps) => {
     </div>
   )
 }
-
-export default Entity

apps/studio/components/interfaces/ProjectAPIDocs/Content/Introduction.tsx

@@ -11,7 +11,7 @@ import ContentSnippet from '../ContentSnippet'
 import { DOCS_CONTENT } from '../ProjectAPIDocs.constants'
 import type { ContentProps } from './Content.types'
 
-const Introduction = ({ showKeys, language, apikey, endpoint }: ContentProps) => {
+export const Introduction = ({ showKeys, language, apikey, endpoint }: ContentProps) => {
   const { ref } = useParams()
   const { data: apiKeys } = useAPIKeysQuery({ projectRef: ref })
   const { data } = useProjectSettingsV2Query({ projectRef: ref })
@@ -139,5 +139,3 @@ const Introduction = ({ showKeys, language, apikey, endpoint }: ContentProps) =>
     </>
   )
 }
-
-export default Introduction

apps/studio/components/interfaces/ProjectAPIDocs/Content/Realtime.tsx

@@ -2,7 +2,7 @@ import ContentSnippet from '../ContentSnippet'
 import { DOCS_CONTENT } from '../ProjectAPIDocs.constants'
 import type { ContentProps } from './Content.types'
 
-const Realtime = ({ language }: ContentProps) => {
+export const Realtime = ({ language }: ContentProps) => {
   return (
     <>
       <ContentSnippet selectedLanguage={language} snippet={DOCS_CONTENT.realtime} />
@@ -13,5 +13,3 @@ const Realtime = ({ language }: ContentProps) => {
     </>
   )
 }
-
-export default Realtime

apps/studio/components/interfaces/ProjectAPIDocs/Content/Storage.tsx

@@ -2,12 +2,10 @@ import ContentSnippet from '../ContentSnippet'
 import { DOCS_CONTENT } from '../ProjectAPIDocs.constants'
 import type { ContentProps } from './Content.types'
 
-const Storage = ({ language }: ContentProps) => {
+export const Storage = ({ language }: ContentProps) => {
   return (
     <>
       <ContentSnippet selectedLanguage={language} snippet={DOCS_CONTENT.storage} />
     </>
   )
 }
-
-export default Storage

apps/studio/components/interfaces/ProjectAPIDocs/Content/StoredProcedures.tsx

@@ -2,7 +2,7 @@ import ContentSnippet from '../ContentSnippet'
 import { DOCS_CONTENT } from '../ProjectAPIDocs.constants'
 import type { ContentProps } from './Content.types'
 
-const StoredProcedures = ({ language }: ContentProps) => {
+export const StoredProcedures = ({ language }: ContentProps) => {
   return (
     <>
       <ContentSnippet
@@ -12,5 +12,3 @@ const StoredProcedures = ({ language }: ContentProps) => {
     </>
   )
 }
-
-export default StoredProcedures

apps/studio/components/interfaces/ProjectAPIDocs/Content/UserManagement.tsx

@@ -3,7 +3,7 @@ import ContentSnippet from '../ContentSnippet'
 import { DOCS_CONTENT } from '../ProjectAPIDocs.constants'
 import type { ContentProps } from './Content.types'
 
-const UserManagement = ({ language, apikey, endpoint }: ContentProps) => {
+export const UserManagement = ({ language, apikey, endpoint }: ContentProps) => {
   const { authenticationSignInProviders } = useIsFeatureEnabled([
     'authentication:sign_in_providers',
   ])
@@ -87,5 +87,3 @@ const UserManagement = ({ language, apikey, endpoint }: ContentProps) => {
     </>
   )
 }
-
-export default UserManagement