Merge branch 'fix/studio-circular-imports-may' into chore/vite

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreview.constants.tsx

@@ -46,4 +46,4 @@ export const FEATURE_PREVIEWS = [
     isNew: false,
     isPlatformOnly: false,
   },
-]
+] as const

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx

@@ -5,44 +5,7 @@ import { FeatureFlagContext, LOCAL_STORAGE_KEYS } from 'common'
 import { useFlag } from 'hooks/ui/useFlag'
 import { IS_PLATFORM } from 'lib/constants'
 import { EMPTY_OBJ } from 'lib/void'
-
-export const FEATURE_PREVIEWS = [
-  {
-    key: LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR,
-    name: 'Directly edit database entities',
-    discussionsUrl: 'https://github.com/orgs/supabase/discussions/33690',
-    isNew: true,
-    isPlatformOnly: false,
-  },
-  {
-    key: LOCAL_STORAGE_KEYS.UI_TABLE_EDITOR_TABS,
-    name: 'Table Editor Tabs',
-    discussionsUrl: 'https://github.com/orgs/supabase/discussions/35636',
-    isNew: true,
-    isPlatformOnly: false,
-  },
-  {
-    key: LOCAL_STORAGE_KEYS.UI_SQL_EDITOR_TABS,
-    name: 'SQL Editor Tabs',
-    discussionsUrl: 'https://github.com/orgs/supabase/discussions/35636',
-    isNew: true,
-    isPlatformOnly: true,
-  },
-  {
-    key: LOCAL_STORAGE_KEYS.UI_PREVIEW_API_SIDE_PANEL,
-    name: 'Project API documentation',
-    discussionsUrl: 'https://github.com/orgs/supabase/discussions/18038',
-    isNew: false,
-    isPlatformOnly: false,
-  },
-  {
-    key: LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS,
-    name: 'Column-level privileges',
-    discussionsUrl: 'https://github.com/orgs/supabase/discussions/20295',
-    isNew: false,
-    isPlatformOnly: false,
-  },
-]
+import { FEATURE_PREVIEWS } from './FeaturePreview.constants'
 
 type FeaturePreviewContextType = {
   flags: { [key: string]: boolean }

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx

@@ -1,6 +1,6 @@
 import { ExternalLink, Eye, EyeOff, FlaskConical } from 'lucide-react'
 import Link from 'next/link'
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 
 import { LOCAL_STORAGE_KEYS, useParams } from 'common'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
@@ -9,22 +9,8 @@ import { IS_PLATFORM } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
 import { removeTabsByEditor } from 'state/tabs'
 import { Badge, Button, Modal, ScrollArea, cn } from 'ui'
-import { APISidePanelPreview } from './APISidePanelPreview'
-import { CLSPreview } from './CLSPreview'
-import { FEATURE_PREVIEWS, useFeaturePreviewContext } from './FeaturePreviewContext'
-import { InlineEditorPreview } from './InlineEditorPreview'
-import { SqlEditorTabsPreview } from './SqlEditorTabs'
-import { TableEditorTabsPreview } from './TableEditorTabs'
-
-const FEATURE_PREVIEW_KEY_TO_CONTENT: {
-  [key: string]: React.ReactNode
-} = {
-  [LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR]: <InlineEditorPreview />,
-  [LOCAL_STORAGE_KEYS.UI_TABLE_EDITOR_TABS]: <TableEditorTabsPreview />,
-  [LOCAL_STORAGE_KEYS.UI_SQL_EDITOR_TABS]: <SqlEditorTabsPreview />,
-  [LOCAL_STORAGE_KEYS.UI_PREVIEW_API_SIDE_PANEL]: <APISidePanelPreview />,
-  [LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS]: <CLSPreview />,
-}
+import { FEATURE_PREVIEWS } from './FeaturePreview.constants'
+import { useFeaturePreviewContext } from './FeaturePreviewContext'
 
 const FeaturePreviewModal = () => {
   const { ref } = useParams()
@@ -83,6 +69,11 @@ const FeaturePreviewModal = () => {
     }
   }, [snap.showFeaturePreviewModal])
 
+  const featurePreviewContent = useMemo(
+    () => FEATURE_PREVIEWS.find((f) => f.key === selectedFeatureKey)?.content,
+    [selectedFeatureKey]
+  )
+
   return (
     <Modal
       hideFooter
@@ -143,7 +134,7 @@ const FeaturePreviewModal = () => {
                 </Button>
               </div>
             </div>
-            {FEATURE_PREVIEW_KEY_TO_CONTENT[selectedFeatureKey]}
+            {featurePreviewContent}
           </div>
         </div>
       ) : (

apps/studio/components/interfaces/Integrations/Wrappers/OverviewTab.tsx

@@ -18,8 +18,8 @@ import {
   WarningIcon,
 } from 'ui'
 import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
-import { INTEGRATIONS } from '../Landing/Integrations.constants'
 import { CreateWrapperSheet } from './CreateWrapperSheet'
+import { WRAPPERS } from './Wrappers.constants'
 import { WrapperTable } from './WrapperTable'
 
 export const WrapperOverviewTab = () => {
@@ -34,13 +34,12 @@ export const WrapperOverviewTab = () => {
     connectionString: project?.connectionString,
   })
 
-  const integration = INTEGRATIONS.find((i) => i.id === id)
+  const wrapperMeta = WRAPPERS.find((w) => w.name === id)
 
-  if (integration?.type !== 'wrapper') {
+  if (!wrapperMeta) {
     return <p className="text-sm text-foreground-light">Unsupported integration type</p>
   }
 
-  const wrapperMeta = integration.meta
   const wrappersExtension = data?.find((ext) => ext.name === 'wrappers')
   const isWrappersExtensionInstalled = !!wrappersExtension?.installed_version
   const hasRequiredVersion =
@@ -117,7 +116,7 @@ export const WrapperOverviewTab = () => {
       <Sheet open={!!createWrapperShown} onOpenChange={() => setisClosingCreateWrapper(true)}>
         <SheetContent size="lg" tabIndex={undefined}>
           <CreateWrapperSheet
-            wrapperMeta={integration.meta}
+            wrapperMeta={wrapperMeta}
             onClose={() => {
               setCreateWrapperShown(false)
               setisClosingCreateWrapper(false)

apps/studio/components/interfaces/Integrations/Wrappers/WrappersTab.tsx

@@ -7,11 +7,11 @@ import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { FDW, useFDWsQuery } from 'data/fdw/fdws-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { Sheet, SheetContent } from 'ui'
-import { INTEGRATIONS } from '../Landing/Integrations.constants'
 import { CreateWrapperSheet } from './CreateWrapperSheet'
-import { WrapperTable } from './WrapperTable'
 import DeleteWrapperModal from './DeleteWrapperModal'
+import { WRAPPERS } from './Wrappers.constants'
 import { wrapperMetaComparator } from './Wrappers.utils'
+import { WrapperTable } from './WrapperTable'
 
 export const WrappersTab = () => {
   const { id } = useParams()
@@ -27,13 +27,12 @@ export const WrappersTab = () => {
   })
 
   const wrappers = data ?? []
-  const integration = INTEGRATIONS.find((i) => i.id === id)
+  const wrapperMeta = WRAPPERS.find((w) => w.name === id)
 
   // this contains a collection of all wrapper instances for the wrapper type
-  const createdWrappers =
-    integration?.type === 'wrapper'
-      ? wrappers.filter((w) => wrapperMetaComparator(integration.meta, w))
-      : []
+  const createdWrappers = wrapperMeta
+    ? wrappers.filter((w) => wrapperMetaComparator(wrapperMeta, w))
+    : []
 
   const Container = useCallback(
     ({ ...props }: { children: ReactNode } & HTMLProps<HTMLDivElement>) => (
@@ -41,9 +40,9 @@ export const WrappersTab = () => {
         {props.children}
         <Sheet open={!!createWrapperShown} onOpenChange={() => setisClosingCreateWrapper(true)}>
           <SheetContent size="lg" tabIndex={undefined}>
-            {integration?.type === 'wrapper' && (
+            {wrapperMeta && (
               <CreateWrapperSheet
-                wrapperMeta={integration.meta}
+                wrapperMeta={wrapperMeta}
                 onClose={() => {
                   setCreateWrapperShown(false)
                   setisClosingCreateWrapper(false)
@@ -56,10 +55,10 @@ export const WrappersTab = () => {
         </Sheet>
       </div>
     ),
-    [createWrapperShown, integration, isClosingCreateWrapper]
+    [createWrapperShown, wrapperMeta, isClosingCreateWrapper]
   )
 
-  if (!integration || integration.type !== 'wrapper') {
+  if (!wrapperMeta) {
     return <div>Missing integration.</div>
   }
 
@@ -69,7 +68,7 @@ export const WrappersTab = () => {
         <div className=" w-full h-48 max-w-4xl">
           <div className="border rounded-lg h-full flex flex-col gap-y-2 items-center justify-center">
             <p className="text-sm text-foreground-light">
-              No {integration.meta.label} wrappers have been installed
+              No {wrapperMeta.label} wrappers have been installed
             </p>
             <ButtonTooltip
               type="default"