Nudge panel layout

studio/components/interfaces/Docs/GeneratingTypes.tsx

@@ -69,18 +69,27 @@ export default function GeneratingTypes({ selectedLang }: Props) {
             application within <code>src/index.ts</code>.
           </p>
         </article>
-        <article className={`code ${selectedLang === 'js' ? 'flex items-center' : ''}`}>
-          {selectedLang === 'js' && (
-            <Button
-              type="default"
-              disabled={isGeneratingTypes}
-              loading={isGeneratingTypes}
-              icon={<IconDownload strokeWidth={1.5} />}
-              onClick={generateTypes}
-            >
-              Generate and download types
-            </Button>
-          )}
+        <article
+          className={`code ${selectedLang === 'js' ? 'flex items-center justify-center' : ''}`}
+        >
+          <div className="grid gap-2">
+            <p className="text-center">
+              {selectedLang === 'js' && (
+                <Button
+                  type="default"
+                  disabled={isGeneratingTypes}
+                  loading={isGeneratingTypes}
+                  icon={<IconDownload strokeWidth={1.5} />}
+                  onClick={generateTypes}
+                >
+                  Generate and download types
+                </Button>
+              )}
+            </p>
+            <p className="text-xs text-scale-1100 bg-scale-200 p-4 mt-2">
+              Remember to re-generate and download this file as you make changes to your tables.
+            </p>
+          </div>
           <CodeSnippet selectedLang={selectedLang} snippet={localSnippets.cliLogin()} />
           <CodeSnippet
             selectedLang={selectedLang}

studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx

@@ -70,7 +70,9 @@ const GridHeaderActions: FC<Props> = ({
           </Tooltip.Content>
         </Tooltip.Root>
       )}
-      <RenderAPIPreviewToggle />
+      <div className="mt-[1px]">
+        <RenderAPIPreviewToggle />
+      </div>
       <Link href={`/project/${projectRef}/auth/policies#${table.id}`}>
         <a>
           <Button

studio/components/interfaces/TableGridEditor/TableGridEditor.tsx

@@ -18,7 +18,6 @@ import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query'
 import { snakeToCamel } from 'lib/helpers'
 import { JsonEditValue } from './SidePanelEditor/RowEditor/RowEditor.types'
-import Introduction from 'components/to-be-cleaned/Docs/Pages/Tables/Introduction'
 import LangSelector from '../Docs/LangSelector'
 import GeneratingTypes from '../Docs/GeneratingTypes'
 
@@ -70,8 +69,7 @@ const TableGridEditor: FC<Props> = ({
 }) => {
   const { meta, ui, vault } = useStore()
   const router = useRouter()
-  const { query } = router
-  const { ref: projectRef, page } = useParams()
+  const { ref: projectRef, page, id } = useParams()
   const gridRef = useRef<SupabaseGridRef>(null)
 
   const tables = meta.tables.list()
@@ -126,11 +124,6 @@ const TableGridEditor: FC<Props> = ({
     : undefined
   const swaggerUrl = settings?.autoApiService?.restUrl
 
-  const canReadServiceKey = checkPermissions(
-    PermissionAction.READ,
-    'service_api_keys.service_role_key'
-  )
-
   const {
     data: jsonSchema,
     error: jsonSchemaError,
@@ -156,7 +149,7 @@ const TableGridEditor: FC<Props> = ({
   }, [selectedTable?.id])
 
   if (isUndefined(selectedTable)) {
-    return <NotFoundState id={Number(router.query.id)} />
+    return <NotFoundState id={Number(id)} />
   }
 
   const tableId = selectedTable?.id
@@ -344,7 +337,7 @@ const TableGridEditor: FC<Props> = ({
                       <ResourceContent
                         autoApiService={autoApiService}
                         selectedLang={selectedLang}
-                        resourceId={tables.find((table) => table.id === Number(query.id))?.name}
+                        resourceId={tables.find((table) => table.id === Number(id))?.name}
                         resources={resources}
                         definitions={jsonSchema.definitions}
                         paths={jsonSchema.paths}

studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx

@@ -42,10 +42,10 @@ export default function Introduction({ autoApiService, selectedLang }: Props) {
             documentation will change too.
           </p>
           <p>
-            <b>Please note:</b> if you make changes to a field (column) name or type, the API
-            interface for those fields will change correspondingly. Therefore, please make sure to
-            update your API implementation accordingly whenever you make changes to your Supabase
-            schema from the graphical interface.
+            <b>Note:</b> if you make changes to a field (column) name or type, the API interface for
+            those fields will change correspondingly. Therefore, please make sure to update your API
+            implementation accordingly whenever you make changes to your Supabase schema from the
+            graphical interface.
           </p>
 
           <div className="not-prose mb-6">
@@ -91,8 +91,8 @@ export default function Introduction({ autoApiService, selectedLang }: Props) {
       </div>
 
       <h2 className="doc-heading">Client Libraries</h2>
-      <div className="doc-section">
-        <article className="text ">
+      <div className="doc-section doc-section--client-libraries">
+        <article className="text">
           <p>Your API consists of both a RESTful interface and a Realtime interface.</p>
           <p>
             For interacting with the Realtime streams, we provide client libraries that handle the

studio/styles/ui.scss

@@ -230,6 +230,26 @@
     }
   }
 
+  &.Docs--table-editor .doc-section--introduction {
+    .text {
+      width: 85%;
+    }
+  }
+
+  &.Docs--table-editor .doc-section--client-libraries {
+    flex-direction: column;
+    margin-bottom: 40px;
+
+    .text,
+    .code {
+      width: 100%;
+      max-width: none;
+    }
+    .code {
+      margin-bottom: 20px;
+    }
+  }
+
   .doc-section article:first-child {
     @apply prose prose-docs prose-sm max-w-none;
   }