Add warning about disabled public schema on api page

apps/studio/components/interfaces/Docs/Pages/Tables/Introduction.tsx

@@ -3,14 +3,24 @@ import Link from 'next/link'
 
 import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'
 import GeneratingTypes from 'components/interfaces/Docs/GeneratingTypes'
+import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
+import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_, Button } from 'ui'
+import { Info } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
 
 interface IntroductionProps {
   selectedLang: 'bash' | 'js'
 }
 
 const Introduction = ({ selectedLang }: IntroductionProps) => {
-  const { ref } = useParams()
+  const { ref: projectRef } = useParams()
+  const { data: config } = useProjectPostgrestConfigQuery({ projectRef })
 
+  const isPublicSchemaEnabled = config?.db_schema
+    .split(',')
+    .map((name) => name.trim())
+    .includes('public')
+  console.log({ isPublicSchemaEnabled })
   return (
     <>
       <h2 className="doc-heading">Introduction</h2>
@@ -20,6 +30,32 @@ const Introduction = ({ selectedLang }: IntroductionProps) => {
             All views and tables in the <code>public</code> schema and accessible by the active
             database role for a request are available for querying.
           </p>
+          <div className="flex">
+            {!isPublicSchemaEnabled && (
+              <Alert_Shadcn_ variant="default">
+                <Info className="h-4 w-4" />
+                <AlertTitle_Shadcn_ className="!-mt-3">
+                  <ReactMarkdown>The `public` schema is not exposed</ReactMarkdown>
+                </AlertTitle_Shadcn_>
+                <AlertDescription_Shadcn_ className="flex flex-col gap-3 !-mt-6">
+                  <ReactMarkdown>
+                    You will not be able to query tables and views in the `public` schema via
+                    postgREST or supabase-js.
+                  </ReactMarkdown>
+                  <div>
+                    <Button asChild type="default" className="inline-block">
+                      <Link
+                        href={`/project/${projectRef}/settings/api#postgrest-config`}
+                        className="!no-underline !hover:bg-surface-100 !text-foreground"
+                      >
+                        View schema settings
+                      </Link>
+                    </Button>
+                  </div>
+                </AlertDescription_Shadcn_>
+              </Alert_Shadcn_>
+            )}
+          </div>
         </article>
       </div>
 
@@ -56,7 +92,7 @@ const Introduction = ({ selectedLang }: IntroductionProps) => {
             If you still want to use GraphQL, you can. Supabase provides you with a full Postgres
             database, so as long as your middleware can connect to the database then you can still
             use the tools you love. You can find the database connection details{' '}
-            <Link href={`/project/${ref}/settings/database`}>in the settings.</Link>
+            <Link href={`/project/${projectRef}/settings/database`}>in the settings.</Link>
           </p>
         </article>
         <article className="code">

apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx

@@ -106,7 +106,7 @@ const PostgrestConfig = () => {
           <>
             <FormPanel
               disabled={true}
-              header={<p>API settings</p>}
+              header="API settings"
               footer={
                 <div className="flex px-8 py-4">
                   <FormActions

apps/studio/components/interfaces/Settings/API/ServiceList.tsx

@@ -169,7 +169,7 @@ const ServiceList = () => {
             <JWTSettings />
           </section>
 
-          <section>
+          <section id="postgrest-config">
             <PostgrestConfig />
           </section>
         </>

apps/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx

@@ -32,43 +32,44 @@ export const generateDocsMenu = (
           : []),
       ],
     },
-    ...(flags?.isPublicSchemaEnabled
-      ? [
-          {
-            title: 'Tables and Views',
-            items: [
-              {
-                name: 'Introduction',
-                key: 'tables-intro',
-                url: `/project/${ref}/api?page=tables-intro`,
+
+    {
+      title: 'Tables and Views',
+      items: [
+        {
+          name: 'Introduction',
+          key: 'tables-intro',
+          url: `/project/${ref}/api?page=tables-intro`,
+          items: [],
+        },
+        ...(flags?.isPublicSchemaEnabled
+          ? tables.sort().map((table) => {
+              return {
+                name: table,
+                key: table,
+                url: `/project/${ref}/api?resource=${table}`,
                 items: [],
-              },
-              ...tables.sort().map((table) => {
-                return {
-                  name: table,
-                  key: table,
-                  url: `/project/${ref}/api?resource=${table}`,
-                  items: [],
-                }
-              }),
-            ],
-          },
-          {
-            title: 'Stored Procedures',
-            items: [
-              {
-                name: 'Introduction',
-                key: 'rpc-intro',
-                url: `/project/${ref}/api?page=rpc-intro`,
-                items: [],
-              },
-              ...functions.map((fn) => {
-                return { name: fn, key: fn, url: `/project/${ref}/api?rpc=${fn}`, items: [] }
-              }),
-            ],
-          },
-        ]
-      : []),
+              }
+            })
+          : []),
+      ],
+    },
+    {
+      title: 'Stored Procedures',
+      items: [
+        {
+          name: 'Introduction',
+          key: 'rpc-intro',
+          url: `/project/${ref}/api?page=rpc-intro`,
+          items: [],
+        },
+        ...(flags?.isPublicSchemaEnabled
+          ? functions.map((fn) => {
+              return { name: fn, key: fn, url: `/project/${ref}/api?rpc=${fn}`, items: [] }
+            })
+          : []),
+      ],
+    },
 
     {
       title: 'GraphQL',