supabase/apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx

import { type Hotkey } from '@tanstack/react-hotkeys'
import { LOCAL_STORAGE_KEYS, useParams } from 'common'
import {
  AlignLeftIcon,
  CheckIcon,
  KeyboardIcon,
  Loader2Icon,
  MoreVerticalIcon,
  SquareCodeIcon,
} from 'lucide-react'
import { useRouter } from 'next/router'
import { useCallback, useContext, useEffect, useRef, useState } from 'react'
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  KeyboardShortcut,
} from 'ui'

import { ExplorerToolbarAction } from './ExplorerToolbar'
import { QueryEditor, type ExplorerQueryModel, type QueryEditorHandle } from './QueryEditor'
import { SaveQueryDropdown } from './SaveQueryDropdown'
import { type QueryDisplay, type QueryResult } from './types'
import { toQuerySourceBinding } from '@/data/query-sources/query-source-registry'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
import { explorerQueryState, useExplorerQueryStateSnapshot } from '@/state/explorer-query'
import { useControlledRoleImpersonationState } from '@/state/role-impersonation-state'
import { hotkeyToKeys } from '@/state/shortcuts/formatShortcut'
import { SHORTCUT_DEFINITIONS, SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { createTabId, TabsStateContext } from '@/state/tabs'

/** Query-tab lifecycle adapter around the shared QueryEditor. */
export const ExplorerQueryTab = () => {
  const router = useRouter()
  const { id, ref } = useParams()
  const tabs = useContext(TabsStateContext)
  const querySnap = useExplorerQueryStateSnapshot()

  const [isIntellisenseEnabled, setIsIntellisenseEnabled] = useLocalStorageQuery(
    LOCAL_STORAGE_KEYS.SQL_EDITOR_INTELLISENSE,
    true
  )

  const queryEditorRef = useRef<QueryEditorHandle>(null)

  const hotkeySequnece: Hotkey | undefined =
    SHORTCUT_DEFINITIONS[SHORTCUT_IDS.SQL_EDITOR_FORMAT].sequence[0]
  const formatKeys = hotkeySequnece ? hotkeyToKeys(hotkeySequnece) : undefined

  const [restoredQueryKey, setRestoredQueryKey] = useState<string>()
  const [showQuery, setShowQuery] = useState(true)

  const stateDraft = id ? querySnap.drafts[id] : undefined
  const draft = stateDraft?.projectRef === ref ? stateDraft : undefined
  const result = draft && id ? querySnap.results[id] : undefined
  const queryKey = id && ref ? `${ref}:${id}` : undefined
  const isDraftReady = !!queryKey && restoredQueryKey === queryKey

  const roleImpersonationState = useControlledRoleImpersonationState(
    draft?._tag === 'database' ? draft.role : undefined,
    useCallback(
      (role) => {
        if (id) explorerQueryState.setRole({ id, role })
      },
      [id]
    )
  )

  useEffect(() => {
    if (!id || !ref) return

    setShowQuery(true)
    explorerQueryState.restoreDraft({ id, projectRef: ref })
    setRestoredQueryKey(`${ref}:${id}`)
  }, [id, ref])

  useEffect(() => {
    if (!id || !isDraftReady || !draft?.pendingAutoRun) return

    queryEditorRef.current?.run()
    explorerQueryState.clearPendingAutoRun({ id })
  }, [id, isDraftReady, draft?.pendingAutoRun])

  if (!queryKey || restoredQueryKey !== queryKey) {
    return (
      <div
        role="status"
        aria-label="Loading query"
        className="flex h-full items-center justify-center bg-surface-100"
      >
        <Loader2Icon className="animate-spin text-foreground-muted" size={18} />
      </div>
    )
  }

  if (!id || !draft) {
    return (
      <div className="flex h-full flex-col items-center justify-center gap-3 bg-surface-100">
        <SquareCodeIcon className="text-foreground-muted" size={24} />
        <div className="text-center">
          <p className="text-sm font-medium">Query draft not found</p>
          <p className="text-sm text-foreground-lighter">
            This local draft may have been closed or cleared from this browser.
          </p>
        </div>
        <Button variant="primary" onClick={() => router.push(`/project/${ref}/explorer`)}>
          Back to Explorer
        </Button>
      </div>
    )
  }

  const display: QueryDisplay = {
    view: draft.view,
    chart: draft.chart ? { ...draft.chart, y_series: [...draft.chart.y_series] } : undefined,
  }

  const query: ExplorerQueryModel =
    draft._tag === 'logs'
      ? { ...toQuerySourceBinding(draft), uncheckedSql: draft.uncheckedSql }
      : {
          ...toQuerySourceBinding(draft),
          uncheckedSql: draft.uncheckedSql,
          rowLimit: draft.rowLimit,
        }

  const persistTab = () => tabs.makeTabPermanent(createTabId('query', { id }))

  const handleResultChange = (nextResult: QueryResult) => {
    explorerQueryState.setResult({
      id,
      result: { ...nextResult, executedAt: Date.now() },
    })
  }

  return (
    <QueryEditor
      ref={queryEditorRef}
      id={id}
      location={{ surface: 'query_tab', queryId: id }}
      variant="viewport"
      title={draft.name}
      query={query}
      result={result}
      display={display}
      showQuery={showQuery}
      onShowQueryChange={setShowQuery}
      roleImpersonationState={roleImpersonationState}
      onTitleChange={(value) => {
        persistTab()
        const name = value.trim() || 'Run SQL'
        explorerQueryState.updateDraft({ id, name })
        tabs.updateTab(createTabId('query', { id }), { label: name })
      }}
      onSqlChange={(sql) => {
        persistTab()
        explorerQueryState.updateDraft({ id, sql })
      }}
      onSourceChange={(source) => {
        persistTab()
        explorerQueryState.updateDraft({ id, source })
      }}
      onRowLimitChange={(rowLimit) => {
        persistTab()
        explorerQueryState.updateDraft({ id, rowLimit })
      }}
      onResultChange={handleResultChange}
      onDisplayChange={(display) => {
        persistTab()
        explorerQueryState.setDisplay({ id, display })
      }}
      toolbarActions={
        <>
          <SaveQueryDropdown
            query={{ title: draft.name, sql: draft.uncheckedSql }}
            source={toQuerySourceBinding(draft)}
          />
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <ExplorerToolbarAction icon={<MoreVerticalIcon size={16} strokeWidth={2} />} />
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-48" align="end">
              <DropdownMenuItem
                className="justify-between"
                onClick={() => setIsIntellisenseEnabled(!isIntellisenseEnabled)}
              >
                <div className="flex items-center gap-x-2">
                  <KeyboardIcon size={14} />
                  <span>Intellisense enabled</span>
                </div>
                {isIntellisenseEnabled && <CheckIcon className="text-primary" size={16} />}
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                className="justify-between"
                onClick={() => queryEditorRef.current?.prettify()}
              >
                <span className="flex items-center gap-x-2">
                  <AlignLeftIcon size={14} />
                  Prettify SQL
                </span>
                {formatKeys && <KeyboardShortcut keys={formatKeys} />}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </>
      }
    />
  )
}