table editor working in embedded mode

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

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 = {

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
 }

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' &&