supabase/apps/studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx

import { OngoingQueriesPanel } from 'components/interfaces/SQLEditor/OngoingQueriesPanel'
import { withAuth } from 'hooks/misc/withAuth'
import { ReactNode, useMemo, useState } from 'react'
import ProjectLayout from '../ProjectLayout/ProjectLayout'
import { SQLEditorMenu } from './SQLEditorMenu'
import TableEditorMenu from '../TableEditorLayout/TableEditorMenu'
import { Separator } from 'ui'

export interface SQLEditorLayoutProps {
  title: string
  children: ReactNode
}

const SQLEditorLayout = ({ title, children }: SQLEditorLayoutProps) => {
  const [showOngoingQueries, setShowOngoingQueries] = useState(false)
  const productMenu = useMemo(
    () => (
      <>
        <TableEditorMenu />
        <Separator />
        <SQLEditorMenu
          key="sql-editor-menu"
          onViewOngoingQueries={() => setShowOngoingQueries(true)}
        />
      </>
    ),
    []
  )

  return (
    <ProjectLayout
      title={title || 'SQL'}
      product="SQL Editor"
      productMenu={productMenu}
      isBlocking={false}
      resizableSidebar
    >
      {children}
      <OngoingQueriesPanel
        visible={showOngoingQueries}
        onClose={() => setShowOngoingQueries(false)}
      />
    </ProjectLayout>
  )
}

export default withAuth(SQLEditorLayout)