From 5b4bee1edbef420a4fea6877d34e76fd947830ff Mon Sep 17 00:00:00 2001
From: Alaister Young <a@alaisteryoung.com>
Date: Tue, 4 Feb 2025 14:36:00 +0800
Subject: [PATCH] table editor working in embedded mode

---
 .../TableGridEditor/GridHeaderActions.tsx      | 13 ++++++++++---
 apps/studio/lib/constants/index.ts             |  2 ++
 apps/studio/lib/embedded.ts                    | 18 +++++++++++++++++-
 apps/studio/next.config.js                     |  1 +
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
index 8b84431db85..e9f1f21715a 100644
--- a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
@@ -25,6 +25,7 @@ import { useTableUpdateMutation } from 'data/tables/table-update-mutation'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { PROTECTED_SCHEMAS } from 'lib/constants/schemas'
+import { useIsEmbedded } from 'lib/embedded'
 import {
   Button,
   PopoverContent_Shadcn_,
@@ -113,6 +114,10 @@ const GridHeaderActions = ({ table }: GridHeaderActionsProps) => {
   // This will change when we allow autogenerated API docs for schemas other than `public`
   const doesHaveAutoGeneratedAPIDocs = table.schema === 'public'
 
+  // [Alaister]: This is only here to disable features that are not yet supported
+  // in embedded mode. This can be removed once we support them.
+  const isEmbedded = useIsEmbedded()
+
   const { hasLint: viewHasLints, matchingLint: matchingViewLint } = getEntityLintDetails(
     table.name,
     'security_definer_view',
@@ -185,7 +190,7 @@ const GridHeaderActions = ({ table }: GridHeaderActionsProps) => {
               </TooltipContent>
             </Tooltip>
           )}
-          {isTable && !isLocked ? (
+          {isTable && !isLocked && !isEmbedded ? (
             table.rls_enabled ? (
               <>
                 {policies.length < 1 && !isLocked ? (
@@ -382,7 +387,7 @@ const GridHeaderActions = ({ table }: GridHeaderActionsProps) => {
             </Popover_Shadcn_>
           )}
           <RoleImpersonationPopover serviceRoleLabel="postgres" />
-          {isTable && realtimeEnabled && (
+          {isTable && realtimeEnabled && !isEmbedded && (
             <Button
               type="default"
               icon={
@@ -396,7 +401,9 @@ const GridHeaderActions = ({ table }: GridHeaderActionsProps) => {
               Realtime {isRealtimeEnabled ? 'on' : 'off'}
             </Button>
           )}
-          {doesHaveAutoGeneratedAPIDocs && <APIDocsButton section={['entities', table.name]} />}
+          {doesHaveAutoGeneratedAPIDocs && !isEmbedded && (
+            <APIDocsButton section={['entities', table.name]} />
+          )}
         </div>
       )}
       <ConfirmationModal
diff --git a/apps/studio/lib/constants/index.ts b/apps/studio/lib/constants/index.ts
index 1418f12a5e2..5940f02cc66 100644
--- a/apps/studio/lib/constants/index.ts
+++ b/apps/studio/lib/constants/index.ts
@@ -80,6 +80,8 @@ export const LOCAL_STORAGE_KEYS = {
   AUTH_SMTP_CHANGES_WARNING: 'auth-smtp-changes-warning-dismissed',
 
   AUTH_USERS_COLUMNS_CONFIGURATION: (ref: string) => `supabase-auth-users-columns-${ref}`,
+
+  EMBEDDED_MODE: 'supabase-is-embedded-mode',
 }
 
 export const OPT_IN_TAGS = {
diff --git a/apps/studio/lib/embedded.ts b/apps/studio/lib/embedded.ts
index 7f7b4f64b09..573114dad52 100644
--- a/apps/studio/lib/embedded.ts
+++ b/apps/studio/lib/embedded.ts
@@ -1,7 +1,23 @@
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { LOCAL_STORAGE_KEYS } from './constants'
 
 export function useIsEmbedded() {
   const router = useRouter()
 
-  return router.query.embed === '' || Boolean(router.query.embed)
+  const isEmbeddedQueryParam = router.query._embed === '' || Boolean(router.query._embed)
+
+  const [isEmbedded, setIsEmbedded] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.EMBEDDED_MODE,
+    isEmbeddedQueryParam
+  )
+
+  useEffect(() => {
+    if (!isEmbedded && isEmbeddedQueryParam) {
+      setIsEmbedded(isEmbeddedQueryParam)
+    }
+  }, [isEmbedded, isEmbeddedQueryParam, setIsEmbedded])
+
+  return isEmbedded
 }
diff --git a/apps/studio/next.config.js b/apps/studio/next.config.js
index faee5f9cbb2..523352efb59 100644
--- a/apps/studio/next.config.js
+++ b/apps/studio/next.config.js
@@ -88,6 +88,7 @@ const csp = [
   `object-src 'none';`,
   `base-uri 'self';`,
   `form-action 'self';`,
+  // TODO(alaister): update this with the real domains
   `frame-ancestors http://localhost:5173;`,
   `block-all-mixed-content;`,
   ...(process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' &&