[UI] Split editor component (#635)

Author: mykalmax

web/client/src/api/index.ts

@@ -35,15 +35,13 @@ export function useApiDag(): UseQueryResult<DagApiCommandsDagGet200> {
   })
 }
 
-export function useApiFileByPath(path?: string): UseQueryResult<File> {
+export function useApiFileByPath(path: string): UseQueryResult<File> {
   return useQuery({
     queryKey: [`/api/files`, path],
     queryFn: async ({ signal }) =>
-      path != null &&
-      path !== '' &&
-      (await getFileApiFilesPathGet(path, { signal })),
-    enabled: false,
+      await getFileApiFilesPathGet(path, { signal }),
     cacheTime: 0,
+    enabled: false,
   })
 }
 

web/client/src/context/context.ts

@@ -1,5 +1,7 @@
 import { create } from 'zustand'
 import {
+  type Model,
+  type ModelsModels,
   type ContextEnvironmentEnd,
   type ContextEnvironmentStart,
   type Environment,
@@ -16,6 +18,8 @@ interface ContextStore {
   environments: Set<ModelEnvironment>
   initialStartDate?: ContextEnvironmentStart
   initialEndDate?: ContextEnvironmentEnd
+  models: Map<string, Model>
+  setModels: (models?: ModelsModels) => void
   isExistingEnvironment: (
     environment: ModelEnvironment | EnvironmentName,
   ) => boolean
@@ -41,21 +45,29 @@ export const useStoreContext = create<ContextStore>((set, get) => ({
   environments,
   initialStartDate: undefined,
   initialEndDate: undefined,
-  getNextEnvironment(): ModelEnvironment {
+  models: new Map(),
+  setModels(models = {}) {
+    set(() => {
+      return {
+        models: Object.values(models).reduce((acc, model) => {
+          acc.set(model.name, model)
+          acc.set(model.path, model)
+
+          return acc
+        }, new Map()),
+      }
+    })
+  },
+  getNextEnvironment() {
     return get().environments.values().next().value
   },
-  setInitialDates(
-    initialStartDate?: ContextEnvironmentStart,
-    initialEndDate?: ContextEnvironmentEnd,
-  ): void {
+  setInitialDates(initialStartDate, initialEndDate) {
     set({
       initialStartDate,
       initialEndDate,
     })
   },
-  isExistingEnvironment(
-    environment: ModelEnvironment | EnvironmentName,
-  ): boolean {
+  isExistingEnvironment(environment) {
     const s = get()
 
     if ((environment as ModelEnvironment).isModel)
@@ -71,7 +83,7 @@ export const useStoreContext = create<ContextStore>((set, get) => ({
 
     return hasEnvironment
   },
-  setEnvironment(environment: ModelEnvironment): void {
+  setEnvironment(environment) {
     set(() => {
       ModelEnvironment.save({
         environment,
@@ -82,10 +94,7 @@ export const useStoreContext = create<ContextStore>((set, get) => ({
       }
     })
   },
-  addLocalEnvironment(
-    localEnvironment: EnvironmentName,
-    created_from?: EnvironmentName,
-  ): void {
+  addLocalEnvironment(localEnvironment, created_from) {
     set(s => {
       if (isStringEmptyOrNil(localEnvironment)) return s
 
@@ -110,7 +119,7 @@ export const useStoreContext = create<ContextStore>((set, get) => ({
       }
     })
   },
-  removeLocalEnvironment(localEnvironment: ModelEnvironment) {
+  removeLocalEnvironment(localEnvironment) {
     set(s => {
       s.environments.delete(localEnvironment)
 
@@ -123,7 +132,7 @@ export const useStoreContext = create<ContextStore>((set, get) => ({
       }
     })
   },
-  addSyncronizedEnvironments(envs: Environment[] = []) {
+  addSyncronizedEnvironments(envs = []) {
     set(s => {
       const environments = Array.from(s.environments)
 

web/client/src/context/editor.ts

@@ -1,25 +1,142 @@
 import { create } from 'zustand'
+import useLocalStorage from '~/hooks/useLocalStorage'
+import { ModelFile } from '~/models'
+import { isTrue } from '~/utils'
+import { sqlglotWorker } from '~/workers'
+
+export interface Dialect {
+  dialect_title: string
+  dialect_name: string
+}
 
 interface EditorStore {
-  tabQueryPreviewContent?: string
-  tabTableContent?: any[]
-  tabTerminalContent?: string
-  setTabQueryPreviewContent: (tabQueryPreviewContent?: string) => void
-  setTabTableContent: (tabTableContent?: any[]) => void
-  setTabTerminalContent: (tabTerminalContent?: string) => void
+  storedTabsIds: ID[]
+  tabs: Map<ID, EditorTab>
+  tab: EditorTab
+  engine: Worker
+  dialects: Dialect[]
+  previewQuery?: string
+  previewTable?: any[]
+  previewConsole?: string
+  selectTab: (tab: EditorTab) => void
+  addTab: (tab: EditorTab) => void
+  closeTab: (id: ID) => void
+  createTab: (file?: ModelFile) => EditorTab
+  setDialects: (dialects: Dialect[]) => void
+  refreshTab: () => void
+  setPreviewQuery: (previewQuery?: string) => void
+  setPreviewTable: (previewTable?: any[]) => void
+  setPreviewConsole: (previewConsole?: string) => void
+}
+
+interface EditorPreview<TTable = any> {
+  queryPreview?: string
+  table?: TTable[]
+  terminal?: string
 }
 
+export interface EditorTab {
+  file: ModelFile
+  isValid: boolean
+  isSaved: boolean
+  isInitial: boolean
+  dialect?: string
+  preview?: EditorPreview
+}
+
+const [getStoredTabs, setStoredTabs] = useLocalStorage<{ ids: ID[] }>('tabs')
+
+const initialFile = createLocalFile()
+const initialTab: EditorTab = createTab(initialFile, true)
+const initialTabs = new Map([[initialFile.id, initialTab]])
+
 export const useStoreEditor = create<EditorStore>((set, get) => ({
-  tabQueryPreviewContent: undefined,
-  tabTableContent: undefined,
-  tabTerminalContent: undefined,
-  setTabQueryPreviewContent: (tabQueryPreviewContent?: string) => {
-    set(() => ({ tabQueryPreviewContent }))
+  storedTabsIds: getStoredTabsIds(),
+  tab: initialTab,
+  tabs: initialTabs,
+  engine: sqlglotWorker,
+  dialects: [],
+  refreshTab() {
+    get().selectTab({ ...get().tab })
   },
-  setTabTableContent: (tabTableContent?: any[]) => {
-    set(() => ({ tabTableContent }))
+  setDialects(dialects) {
+    set(() => ({
+      dialects,
+    }))
   },
-  setTabTerminalContent: (tabTerminalContent?: string) => {
-    set(() => ({ tabTerminalContent }))
+  selectTab(tab) {
+    set(() => ({ tab }))
+
+    get().addTab(tab)
+  },
+  addTab(tab) {
+    const tabs = new Map([...get().tabs, [tab.file.id, tab]])
+
+    setStoredTabs({
+      ids: Array.from(tabs.values())
+        .filter(tab => tab.file.isRemote)
+        .map(tab => tab.file.id),
+    })
+
+    set(() => ({
+      tabsIds: getStoredTabsIds(),
+      tabs,
+    }))
+  },
+  closeTab(id) {
+    const s = get()
+
+    if (isTrue(s.tabs.get(id)?.isInitial)) return
+
+    const tabs = Array.from(get().tabs.values())
+    const indexAt = tabs.findIndex(tab => tab.file.id === id)
+
+    s.tabs.delete(id)
+
+    if (id === s.tab.file.id) {
+      s.selectTab(tabs.at(indexAt - 1) as EditorTab)
+    }
+
+    set(() => ({
+      tabs: new Map(s.tabs),
+    }))
+  },
+  createTab,
+  previewQuery: undefined,
+  previewTable: undefined,
+  previewConsole: undefined,
+  setPreviewQuery(previewQuery) {
+    set(() => ({ previewQuery }))
+  },
+  setPreviewTable(previewTable) {
+    set(() => ({ previewTable }))
+  },
+  setPreviewConsole(previewConsole) {
+    set(() => ({ previewConsole }))
   },
 }))
+
+function createTab(
+  file: ModelFile = createLocalFile(),
+  isInitial = false,
+): EditorTab {
+  return {
+    file,
+    isInitial,
+    isValid: true,
+    isSaved: true,
+  }
+}
+
+function createLocalFile(): ModelFile {
+  return new ModelFile({
+    name: '',
+    path: '',
+    content:
+      '-- Create arbitrary SQL queries\n-- and execute them against different environments\n\n',
+  })
+}
+
+function getStoredTabsIds(): ID[] {
+  return getStoredTabs()?.ids ?? []
+}

web/client/src/context/fileTree.ts

@@ -1,76 +1,37 @@
 import { create } from 'zustand'
-import useLocalStorage from '~/hooks/useLocalStorage'
-import { isArrayNotEmpty, isFalse } from '~/utils'
-import { ModelFile } from '../models'
+import { ModelDirectory, type ModelFile } from '../models'
+import { type Directory } from '~/api/client'
 
 interface FileTreeStore {
+  project?: ModelDirectory
   files: Map<ID, ModelFile>
-  activeFile: ModelFile
-  openedFiles: Set<ModelFile>
-  setOpenedFiles: (files: Set<ModelFile>) => void
-  selectFile: (file: ModelFile) => void
-  getNextOpenedFile: () => ModelFile
+  selectedFile?: ModelFile
+  selectFile: (selectedFile: ModelFile) => void
   setFiles: (files: ModelFile[]) => void
+  refreshProject: () => void
+  setProject: (project?: Directory) => void
 }
 
-const initialFile = new ModelFile()
-
-const [getOpenedFilesIds, setOpenedFilesIds] = useLocalStorage<{ ids: ID[] }>(
-  'openedFiles',
-)
-
 export const useStoreFileTree = create<FileTreeStore>((set, get) => ({
+  project: undefined,
   files: new Map(),
-  activeFile: initialFile,
-  openedFiles: new Set([initialFile]),
-  setFiles(files: ModelFile[]) {
-    set(() => {
-      const openedFilesIds = getOpenedFilesIds()?.ids ?? []
-      const openedFiles = new Set<ModelFile>([initialFile])
-      const output = new Map()
-
-      if (isArrayNotEmpty(openedFilesIds)) {
-        files.forEach(file => {
-          if (openedFilesIds.includes(file.id)) {
-            openedFiles.add(file)
-          }
-
-          output.set(file.id, file)
-        })
-      }
-
-      return {
-        files: output,
-        openedFiles,
-      }
-    })
-  },
-  setOpenedFiles(files: Set<ModelFile>) {
-    set(() => {
-      const openedFiles = new Set(files)
-
-      setOpenedFilesIds({
-        ids: Array.from(openedFiles.values())
-          .filter(file => isFalse(file.isLocal))
-          .map(file => file.id),
-      })
-
-      return { openedFiles }
-    })
+  selectedFile: undefined,
+  setProject(project) {
+    set(() => ({
+      project: new ModelDirectory(project),
+    }))
   },
-  getNextOpenedFile() {
-    return get().openedFiles.values().next().value
+  setFiles(files) {
+    set(() => ({
+      files: files.reduce((acc, file) => acc.set(file.id, file), new Map()),
+    }))
   },
-  selectFile(file: ModelFile) {
-    const s = get()
-
-    if (isFalse(s.openedFiles.has(file))) {
-      s.openedFiles.add(file)
-    }
-
+  selectFile(selectedFile) {
     set(() => ({
-      activeFileId: file.id,
-      activeFile: file,
+      selectedFile,
     }))
   },
+  refreshProject() {
+    get().setProject(get().project)
+  },
 }))