diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx index 212b480f9d7..999c07b7b53 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx @@ -5,32 +5,34 @@ import { EditorBaseLayout } from '../editors/editor-base-layout' import { SQLEditorMenu } from './SQLEditorMenu' export interface SQLEditorLayoutProps { - title: string + // title: string children: ReactNode } -const SQLEditorLayout = ({ title, children }: SQLEditorLayoutProps) => { +const SQLEditorLayout = ({ children }: SQLEditorLayoutProps) => { const [showOngoingQueries, setShowOngoingQueries] = useState(false) return ( - setShowOngoingQueries(true)} - /> - } - isBlocking={false} - resizableSidebar - > + // setShowOngoingQueries(true)} + // /> + // } + // isBlocking={false} + // resizableSidebar + // > + <> {children} setShowOngoingQueries(false)} /> - + + // ) } diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx index dce32b418ac..ceae19a2321 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx @@ -29,7 +29,7 @@ import { import { SQLEditorNav as SQLEditorNavV2 } from './SQLEditorNavV2/SQLEditorNav' interface SQLEditorMenuProps { - onViewOngoingQueries: () => void + onViewOngoingQueries?: () => void } export const SQLEditorMenu = ({ onViewOngoingQueries }: SQLEditorMenuProps) => { diff --git a/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx b/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx index 1628935942b..42a26f088bc 100644 --- a/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx +++ b/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx @@ -21,18 +21,20 @@ const TableEditorLayout = ({ children }: PropsWithChildren<{}>) => { } return ( - } - isBlocking={false} - resizableSidebar - > + // } + // isBlocking={false} + // resizableSidebar + // > + <> {children} setShowOngoingQueries(false)} /> - + + // ) } diff --git a/apps/studio/components/layouts/editors/handle-editor-layouts.tsx b/apps/studio/components/layouts/editors/handle-editor-layouts.tsx index e8b17b2f25b..d272aa90847 100644 --- a/apps/studio/components/layouts/editors/handle-editor-layouts.tsx +++ b/apps/studio/components/layouts/editors/handle-editor-layouts.tsx @@ -4,19 +4,22 @@ import dynamic from 'next/dynamic' import { JSXElementConstructor, ReactElement, Suspense } from 'react' import { ProjectContextFromParamsProvider } from '../ProjectLayout/ProjectContext' import { useEditorType } from './editors-layout.hooks' +// import ExplorerLayout from '../explorer/layout' +import TableEditorLayout from '../TableEditorLayout/TableEditorLayout' +import SQLEditorLayout from '../SQLEditorLayout/SQLEditorLayout' // Dynamically import layouts to reduce initial bundle size // These are loaded only when needed -const ExplorerLayout = dynamic( - () => import('../explorer/layout').then((mod) => mod.ExplorerLayout), - { ssr: false } -) -const TableEditorLayout = dynamic(() => import('../TableEditorLayout/TableEditorLayout'), { - ssr: false, -}) -const SQLEditorLayout = dynamic(() => import('../SQLEditorLayout/SQLEditorLayout'), { - ssr: false, -}) +// const ExplorerLayout = dynamic( +// () => import('../explorer/layout').then((mod) => mod.ExplorerLayout), +// { ssr: false } +// ) +// const TableEditorLayout = dynamic(() => import('../TableEditorLayout/TableEditorLayout'), { +// ssr: false, +// }) +// const SQLEditorLayout = dynamic(() => import('../SQLEditorLayout/SQLEditorLayout'), { +// ssr: false, +// }) /** * HandleEditorLayouts is responsible for rendering the appropriate layout based on: @@ -37,16 +40,15 @@ export const HandleEditorLayouts = ({ const projectExplorer = useFlag('projectExplorer') return ( - - - {projectExplorer ? ( - {children} - ) : editor === 'table' ? ( - {children} - ) : ( - {children} - )} - - + <> + {projectExplorer ? ( + <> + ) : // {children} + editor === 'table' ? ( + {children} + ) : ( + {children} + )} + ) } diff --git a/apps/studio/components/layouts/tabs/explorer-tabs.tsx b/apps/studio/components/layouts/tabs/explorer-tabs.tsx index e34b208ced4..1f71bbe7495 100644 --- a/apps/studio/components/layouts/tabs/explorer-tabs.tsx +++ b/apps/studio/components/layouts/tabs/explorer-tabs.tsx @@ -1,39 +1,24 @@ import { DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core' import { horizontalListSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable' import { CSS } from '@dnd-kit/utilities' +import { TabIcon } from 'components/explorer/tabs/TabIcon' import { AnimatePresence, motion } from 'framer-motion' -import { useActionKey } from 'hooks/useActionKey' -import { - CirclePlus, - Eye, - PanelLeftClose, - PanelLeftOpen, - Plus, - Table2, - Workflow, - X, -} from 'lucide-react' +import { Plus, X } from 'lucide-react' import { useRouter } from 'next/router' import { useMemo } from 'react' -import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2' import { getTabsStore, - makeTabPermanent, - openNewContentTab, - removeTab, - type Tab, - type TabType, - handleTabNavigation, handleTabClose, handleTabDragEnd, + handleTabNavigation, + makeTabPermanent, + type Tab, } from 'state/tabs' -import { cn, SQL_ICON, Tabs_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui' +import { cn, Tabs_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui' import { useSnapshot } from 'valtio' -import { sidebarState } from './sidebar-state' -import { TabIcon } from 'components/explorer/tabs/TabIcon' -import { CollapseButton } from './collapse-button' import { useEditorType } from '../editors/editors-layout.hooks' -import { useFlag } from 'hooks/ui/useFlag' +import { CollapseButton } from './collapse-button' +import { sidebarState } from './sidebar-state' interface TabsProps { storeKey: string @@ -53,13 +38,11 @@ const SortableTab = ({ index, openTabs, onClose, - storeKey, }: { tab: Tab index: number openTabs: Tab[] onClose: (id: string) => void - storeKey: string }) => { const router = useRouter() const currentSchema = (router.query.schema as string) || 'public' @@ -89,9 +72,6 @@ const SortableTab = ({ return false }, [openTabs, currentSchema, tab.type]) - // Create a motion version of TabsTrigger while preserving all functionality - const MotionTabsTrigger = motion(TabsTrigger_Shadcn_) - return (
- {index < openTabs.length && ( -
- )} + {/* {index < openTabs.length - 1 &&
} */}
) } -export function ExplorerTabs({ storeKey, onClose }: TabsProps) { +export function ExplorerTabs({ onClose }: TabsProps) { const editor = useEditorType() - const projectExplorer = useFlag('projectExplorer') const router = useRouter() const store = getTabsStore() const tabs = useSnapshot(store) @@ -164,8 +141,6 @@ export function ExplorerTabs({ storeKey, onClose }: TabsProps) { return tab.type === editor }) - const newTab = openTabs.find((tab) => tab.type === 'new') - const handleDragEnd = (event: DragEndEvent) => { const { active, over } = event if (!over || active.id === over.id) return @@ -207,11 +182,10 @@ export function ExplorerTabs({ storeKey, onClose }: TabsProps) { {regularTabs.map((tab, index) => ( handleClose(tab.id)} - storeKey={storeKey} /> ))} diff --git a/apps/studio/pages/project/[ref]/editor/[id].tsx b/apps/studio/pages/project/[ref]/editor/[id].tsx index 098984f0864..b5eb5b4838d 100644 --- a/apps/studio/pages/project/[ref]/editor/[id].tsx +++ b/apps/studio/pages/project/[ref]/editor/[id].tsx @@ -1,11 +1,14 @@ import { useParams } from 'common/hooks' import { TableGridEditor } from 'components/interfaces/TableGridEditor' import DeleteConfirmationDialogs from 'components/interfaces/TableGridEditor/DeleteConfirmationDialogs' +import { EditorBaseLayout } from 'components/layouts/editors/editor-base-layout' import { HandleEditorLayouts } from 'components/layouts/editors/handle-editor-layouts' import { ProjectContextFromParamsProvider, useProjectContext, } from 'components/layouts/ProjectLayout/ProjectContext' +import TableEditorLayout from 'components/layouts/TableEditorLayout/TableEditorLayout' +import TableEditorMenu from 'components/layouts/TableEditorLayout/TableEditorMenu' import { useTableEditorQuery } from 'data/table-editor/table-editor-query' import { useTheme } from 'next-themes' import { useRouter } from 'next/router' @@ -19,6 +22,7 @@ const TableEditorPage: NextPageWithLayout = () => { const { id: _id, ref: projectRef } = useParams() const id = _id ? Number(_id) : undefined const store = getTabsStore() + const { project } = useProjectContext() const { data: selectedTable, isLoading } = useTableEditorQuery({ projectRef: project?.ref, @@ -78,7 +82,9 @@ const TableEditorPage: NextPageWithLayout = () => { TableEditorPage.getLayout = (page) => ( - {page} + }> + {page} + ) diff --git a/apps/studio/pages/project/[ref]/editor/index.tsx b/apps/studio/pages/project/[ref]/editor/index.tsx index cb56de1af8a..eabc2411a56 100644 --- a/apps/studio/pages/project/[ref]/editor/index.tsx +++ b/apps/studio/pages/project/[ref]/editor/index.tsx @@ -1,8 +1,11 @@ import { useParams } from 'common' import EmptyState from 'components/interfaces/TableGridEditor/EmptyState' import SidePanelEditor from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor' +import { EditorBaseLayout } from 'components/layouts/editors/editor-base-layout' import { HandleEditorLayouts } from 'components/layouts/editors/handle-editor-layouts' import { ProjectContextFromParamsProvider } from 'components/layouts/ProjectLayout/ProjectContext' +import TableEditorLayout from 'components/layouts/TableEditorLayout/TableEditorLayout' +import TableEditorMenu from 'components/layouts/TableEditorLayout/TableEditorMenu' import { NewTab } from 'components/layouts/tabs/new-tab' import { useRouter } from 'next/router' import { getTabsStore } from 'state/tabs' @@ -36,7 +39,9 @@ const TableEditorPage: NextPageWithLayout = () => { TableEditorPage.getLayout = (page) => ( - {page} + }> + {page} + ) diff --git a/apps/studio/pages/project/[ref]/sql/[id].tsx b/apps/studio/pages/project/[ref]/sql/[id].tsx index 84172afd262..44884c923a5 100644 --- a/apps/studio/pages/project/[ref]/sql/[id].tsx +++ b/apps/studio/pages/project/[ref]/sql/[id].tsx @@ -1,12 +1,15 @@ import { useMonaco } from '@monaco-editor/react' import { useParams } from 'common/hooks/useParams' import SQLEditor from 'components/interfaces/SQLEditor/SQLEditor' +import { EditorBaseLayout } from 'components/layouts/editors/editor-base-layout' import { HandleEditorLayouts } from 'components/layouts/editors/handle-editor-layouts' -import { ExplorerLayout } from 'components/layouts/explorer/layout' + import { ProjectContextFromParamsProvider, useProjectContext, } from 'components/layouts/ProjectLayout/ProjectContext' +import SQLEditorLayout from 'components/layouts/SQLEditorLayout/SQLEditorLayout' +import { SQLEditorMenu } from 'components/layouts/SQLEditorLayout/SQLEditorMenu' import getPgsqlCompletionProvider from 'components/ui/CodeEditor/Providers/PgSQLCompletionProvider' import getPgsqlSignatureHelpProvider from 'components/ui/CodeEditor/Providers/PgSQLSignatureHelpProvider' import { useContentIdQuery } from 'data/content/content-id-query' @@ -27,7 +30,7 @@ import type { NextPageWithLayout } from 'types' const SqlEditor: NextPageWithLayout = () => { const router = useRouter() const monaco = useMonaco() - const { id, ref, content } = useParams() + const { id, ref } = useParams() const { project } = useProjectContext() const appSnap = useAppStateSnapshot() @@ -191,7 +194,9 @@ const SqlEditor: NextPageWithLayout = () => { SqlEditor.getLayout = (page) => ( - {page} + }> + {page} + ) diff --git a/apps/studio/pages/project/[ref]/sql/index.tsx b/apps/studio/pages/project/[ref]/sql/index.tsx index 183c0658674..8b007428fa4 100644 --- a/apps/studio/pages/project/[ref]/sql/index.tsx +++ b/apps/studio/pages/project/[ref]/sql/index.tsx @@ -1,6 +1,9 @@ import { useParams } from 'common' +import { EditorBaseLayout } from 'components/layouts/editors/editor-base-layout' import { HandleEditorLayouts } from 'components/layouts/editors/handle-editor-layouts' import { ProjectContextFromParamsProvider } from 'components/layouts/ProjectLayout/ProjectContext' +import SQLEditorLayout from 'components/layouts/SQLEditorLayout/SQLEditorLayout' +import { SQLEditorMenu } from 'components/layouts/SQLEditorLayout/SQLEditorMenu' import { NewTab } from 'components/layouts/tabs/new-tab' import { useRouter } from 'next/router' import { getTabsStore } from 'state/tabs' @@ -31,7 +34,9 @@ const TableEditorPage: NextPageWithLayout = () => { TableEditorPage.getLayout = (page) => ( - {page} + }> + {page} + ) diff --git a/apps/studio/state/tabs.ts b/apps/studio/state/tabs.ts index 46a18bd3a85..2d37a23257c 100644 --- a/apps/studio/state/tabs.ts +++ b/apps/studio/state/tabs.ts @@ -223,7 +223,10 @@ export const handleTabClose = ( tabsStore.openTabs = [...currentTabs.map((tab) => tab.id).filter((id) => id !== currentTab.id)] } - if (!nextTabId) { + if (nextTabId) { + tabsStore.activeTab = nextTabId + handleTabNavigation(nextTabId, router) + } else { // If no tabs of same type, go to the home of the current section switch (currentTab.type) { case 'sql': @@ -237,11 +240,6 @@ export const handleTabClose = ( } } - if (nextTabId) { - tabsStore.activeTab = nextTabId - handleTabNavigation(nextTabId, router) - } - onClose?.(id) }