-
{actions.map((item, i) => (
diff --git a/apps/studio/components/layouts/Tabs/Tabs.tsx b/apps/studio/components/layouts/Tabs/Tabs.tsx
index 66fb4b9b715..847a3c11d45 100644
--- a/apps/studio/components/layouts/Tabs/Tabs.tsx
+++ b/apps/studio/components/layouts/Tabs/Tabs.tsx
@@ -12,7 +12,6 @@ import { Plus, X } from 'lucide-react'
import { useRouter } from 'next/router'
import { useParams } from 'common'
-import { TabsUpdateTooltip } from 'components/interfaces/App/FeaturePreview/TableEditorTabs'
import { useAppStateSnapshot } from 'state/app-state'
import { editorEntityTypes, useTabsStateSnapshot, type Tab } from 'state/tabs'
import {
@@ -173,43 +172,41 @@ export const EditorTabs = () => {
{/* Non-draggable new tab */}
{hasNewTab && (
- <>
-
+
+ New
+
+ {
+ e.preventDefault()
+ e.stopPropagation()
+ }}
+ className="ml-1 opacity-0 group-hover:opacity-100 hover:bg-200 rounded-sm cursor-pointer"
+ onMouseDown={(e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ }}
+ onPointerDown={(e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ handleClose('new')
+ }}
>
-
- New
-
- {
- e.preventDefault()
- e.stopPropagation()
- }}
- className="ml-1 opacity-0 group-hover:opacity-100 hover:bg-200 rounded-sm cursor-pointer"
- onMouseDown={(e) => {
- e.preventDefault()
- e.stopPropagation()
- }}
- onPointerDown={(e) => {
- e.preventDefault()
- e.stopPropagation()
- handleClose('new')
- }}
- >
- {' '}
-
-
-
+
+ {' '}
+
+
)}
@@ -235,8 +232,6 @@ export const EditorTabs = () => {
-
-
diff --git a/apps/studio/components/layouts/editors/EditorBaseLayout.tsx b/apps/studio/components/layouts/editors/EditorBaseLayout.tsx
index eafb111c3b0..9f0da404d7f 100644
--- a/apps/studio/components/layouts/editors/EditorBaseLayout.tsx
+++ b/apps/studio/components/layouts/editors/EditorBaseLayout.tsx
@@ -2,10 +2,6 @@ import { usePathname } from 'next/navigation'
import { ComponentProps, ReactNode } from 'react'
import { useParams } from 'common'
-import {
- useIsSQLEditorTabsEnabled,
- useIsTableEditorTabsEnabled,
-} from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { useTabsStateSnapshot } from 'state/tabs'
import { cn } from 'ui'
import { ProjectLayoutWithAuth } from '../ProjectLayout/ProjectLayout'
@@ -26,12 +22,6 @@ export const EditorBaseLayout = ({ children, title, product, ...props }: Explore
const editor = useEditorType()
const tabs = useTabsStateSnapshot()
- const isTableEditorTabsEnabled = useIsTableEditorTabsEnabled()
- const isSQLEditorTabsEnabled = useIsSQLEditorTabsEnabled()
-
- const tableEditorTabsEnabled = editor === 'table' && isTableEditorTabsEnabled
- const sqlEditorTabsEnabled = editor === 'sql' && isSQLEditorTabsEnabled
-
const hasNoOpenTabs =
editor === 'table' ? tabs.openTabs.filter((x) => !x.startsWith('sql')).length === 0 : false
const hideTabs =
@@ -40,16 +30,14 @@ export const EditorBaseLayout = ({ children, title, product, ...props }: Explore
return (
- {tableEditorTabsEnabled || sqlEditorTabsEnabled ? (
-
- {hideTabs ?
- ) : null}
+
+ {hideTabs ?
{children}
diff --git a/apps/studio/pages/project/[ref]/editor/[id].tsx b/apps/studio/pages/project/[ref]/editor/[id].tsx
index 8e4bab3f158..7409c843e69 100644
--- a/apps/studio/pages/project/[ref]/editor/[id].tsx
+++ b/apps/studio/pages/project/[ref]/editor/[id].tsx
@@ -1,7 +1,6 @@
import { useEffect } from 'react'
import { useParams } from 'common'
-import { useIsTableEditorTabsEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { TableGridEditor } from 'components/interfaces/TableGridEditor/TableGridEditor'
import DefaultLayout from 'components/layouts/DefaultLayout'
import { EditorBaseLayout } from 'components/layouts/editors/EditorBaseLayout'
@@ -30,11 +29,9 @@ const TableEditorPage: NextPageWithLayout = () => {
* - selectedTable changes (when a new table is loaded)
* - id changes (when URL parameter changes)
*/
- const isTableEditorTabsEnabled = useIsTableEditorTabsEnabled()
useEffect(() => {
- // tabs preview flag logic
- if (isTableEditorTabsEnabled && selectedTable && projectRef) {
+ if (selectedTable && projectRef) {
const tabId = createTabId(selectedTable.entity_type, { id: selectedTable.id })
if (!store.tabsMap[tabId]) {
store.addTab({
@@ -52,7 +49,7 @@ const TableEditorPage: NextPageWithLayout = () => {
store.makeTabActive(tabId)
}
}
- }, [selectedTable, id, projectRef, isTableEditorTabsEnabled])
+ }, [selectedTable, id, projectRef])
return {
- tabs.handleTabClose({
- id: tabId,
- router,
- editor,
- onClearDashboardHistory: () => {
- if (ref) appSnap.setDashboardHistory(ref, 'sql', undefined)
- },
- })
- }}
- >
- Close tab
-
- ) : (
-
-
- )}
-
+ {!!tabId ? (
+ {
+ tabs.handleTabClose({
+ id: tabId,
+ router,
+ editor,
+ onClearDashboardHistory: () => {
+ if (ref) appSnap.setDashboardHistory(ref, 'sql', undefined)
+ },
+ })
+ }}
+ >
+ Close tab
+
+ ) : (
+
+
)}
diff --git a/apps/studio/pages/project/[ref]/sql/index.tsx b/apps/studio/pages/project/[ref]/sql/index.tsx
index 633f87e8738..b76303b8010 100644
--- a/apps/studio/pages/project/[ref]/sql/index.tsx
+++ b/apps/studio/pages/project/[ref]/sql/index.tsx
@@ -1,12 +1,12 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
import { useParams } from 'common'
-import { useIsSQLEditorTabsEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import DefaultLayout from 'components/layouts/DefaultLayout'
import { EditorBaseLayout } from 'components/layouts/editors/EditorBaseLayout'
import SQLEditorLayout from 'components/layouts/SQLEditorLayout/SQLEditorLayout'
import { SQLEditorMenu } from 'components/layouts/SQLEditorLayout/SQLEditorMenu'
import { NewTab } from 'components/layouts/Tabs/NewTab'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
import { useAppStateSnapshot } from 'state/app-state'
import { useTabsStateSnapshot } from 'state/tabs'
import type { NextPageWithLayout } from 'types'
@@ -16,26 +16,20 @@ const TableEditorPage: NextPageWithLayout = () => {
const { ref: projectRef } = useParams()
const store = useTabsStateSnapshot()
const appSnap = useAppStateSnapshot()
- const isSqlEditorTabsEnabled = useIsSQLEditorTabsEnabled()
useEffect(() => {
- if (!isSqlEditorTabsEnabled) {
- // Redirect to /new if not using tabs
- router.push(`/project/${projectRef}/sql/new`)
- } else {
- // Handle redirect to last opened snippet tab, or last snippet tab
- const lastOpenedTab = appSnap.dashboardHistory.sql
- const lastTabId = store.openTabs.find((id) => store.tabsMap[id]?.type === 'sql')
- if (lastOpenedTab !== undefined) {
- router.push(`/project/${projectRef}/sql/${appSnap.dashboardHistory.sql}`)
- } else if (lastTabId) {
- const lastTab = store.tabsMap[lastTabId]
- if (lastTab) router.push(`/project/${projectRef}/sql/${lastTab.id.replace('sql-', '')}`)
- }
+ // Handle redirect to last opened snippet tab, or last snippet tab
+ const lastOpenedTab = appSnap.dashboardHistory.sql
+ const lastTabId = store.openTabs.find((id) => store.tabsMap[id]?.type === 'sql')
+ if (lastOpenedTab !== undefined) {
+ router.push(`/project/${projectRef}/sql/${appSnap.dashboardHistory.sql}`)
+ } else if (lastTabId) {
+ const lastTab = store.tabsMap[lastTabId]
+ if (lastTab) router.push(`/project/${projectRef}/sql/${lastTab.id.replace('sql-', '')}`)
}
- }, [isSqlEditorTabsEnabled])
+ }, [])
- return isSqlEditorTabsEnabled ?
: null
+ return
}
TableEditorPage.getLayout = (page) => (
diff --git a/apps/studio/pages/project/[ref]/sql/quickstarts.tsx b/apps/studio/pages/project/[ref]/sql/quickstarts.tsx
index bdeffe57588..2b69bbc2512 100644
--- a/apps/studio/pages/project/[ref]/sql/quickstarts.tsx
+++ b/apps/studio/pages/project/[ref]/sql/quickstarts.tsx
@@ -2,7 +2,6 @@ import { useParams } from 'next/navigation'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
-import { useIsSQLEditorTabsEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import SQLQuickstarts from 'components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts'
import DefaultLayout from 'components/layouts/DefaultLayout'
import { EditorBaseLayout } from 'components/layouts/editors/EditorBaseLayout'
@@ -16,25 +15,20 @@ const SqlQuickstarts: NextPageWithLayout = () => {
const { ref } = useParams<{ ref: string }>()
const tabs = useTabsStateSnapshot()
- const isSqlEditorTabsEnabled = useIsSQLEditorTabsEnabled()
-
useEffect(() => {
- if (isSqlEditorTabsEnabled) {
- if (!router.isReady) return
+ if (!router.isReady) return
- const tabId = createTabId('sql', { id: 'quickstarts' })
-
- tabs.addTab({
- id: tabId,
- type: 'sql',
- label: 'Quickstarts',
- metadata: {
- sqlId: 'quickstarts',
- name: 'quickstarts',
- },
- })
- }
- }, [router.isReady, isSqlEditorTabsEnabled, ref])
+ const tabId = createTabId('sql', { id: 'quickstarts' })
+ tabs.addTab({
+ id: tabId,
+ type: 'sql',
+ label: 'Quickstarts',
+ metadata: {
+ sqlId: 'quickstarts',
+ name: 'quickstarts',
+ },
+ })
+ }, [router.isReady, ref])
return
}
diff --git a/apps/studio/pages/project/[ref]/sql/templates.tsx b/apps/studio/pages/project/[ref]/sql/templates.tsx
index 45920a90c96..2e219edaa52 100644
--- a/apps/studio/pages/project/[ref]/sql/templates.tsx
+++ b/apps/studio/pages/project/[ref]/sql/templates.tsx
@@ -2,7 +2,6 @@ import { useParams } from 'next/navigation'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
-import { useIsSQLEditorTabsEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import SQLTemplates from 'components/interfaces/SQLEditor/SQLTemplates/SQLTemplates'
import DefaultLayout from 'components/layouts/DefaultLayout'
import { EditorBaseLayout } from 'components/layouts/editors/EditorBaseLayout'
@@ -16,25 +15,20 @@ const SqlTemplates: NextPageWithLayout = () => {
const { ref } = useParams<{ ref: string }>()
const tabs = useTabsStateSnapshot()
- const isSqlEditorTabsEnabled = useIsSQLEditorTabsEnabled()
-
useEffect(() => {
- if (isSqlEditorTabsEnabled) {
- if (!router.isReady) return
+ if (!router.isReady) return
- const tabId = createTabId('sql', { id: 'templates' })
-
- tabs.addTab({
- id: tabId,
- type: 'sql',
- label: 'Templates',
- metadata: {
- sqlId: 'templates',
- name: 'templates',
- },
- })
- }
- }, [router.isReady, isSqlEditorTabsEnabled, ref])
+ const tabId = createTabId('sql', { id: 'templates' })
+ tabs.addTab({
+ id: tabId,
+ type: 'sql',
+ label: 'Templates',
+ metadata: {
+ sqlId: 'templates',
+ name: 'templates',
+ },
+ })
+ }, [router.isReady, ref])
return
}
diff --git a/e2e/studio/features/sql-editor.spec.ts b/e2e/studio/features/sql-editor.spec.ts
index efb523b4183..b437c0a2f23 100644
--- a/e2e/studio/features/sql-editor.spec.ts
+++ b/e2e/studio/features/sql-editor.spec.ts
@@ -1,11 +1,11 @@
import { expect } from '@playwright/test'
+import { env } from '../env.config'
import { test } from '../utils/test'
import { toUrl } from '../utils/to-url'
-import { env } from '../env.config'
test.describe('SQL Editor', () => {
test('should check if SQL editor can run simple commands', async ({ page }) => {
- await page.goto(toUrl(`/project/${env.PROJECT_REF}/sql`))
+ await page.goto(toUrl(`/project/${env.PROJECT_REF}/sql/new?skip=true`))
const editor = page.getByRole('code').nth(0)