Preliminary logic to move Import into the bottom panel

packages/web-console/src/components/CreateTableDialog/index.tsx

@@ -16,7 +16,7 @@ export const CreateTableDialog = () => {
   >(undefined)
   const dispatch = useDispatch()
   const tables = useSelector(selectors.query.getTables)
-  const activePanel = useSelector(selectors.console.getActivePanel)
+  const activeSidebar = useSelector(selectors.console.getActiveSidebar)
   const { appendQuery } = useEditor()
 
   const handleAddTableSchema = (values: SchemaFormValues) => {
@@ -36,14 +36,14 @@ export const CreateTableDialog = () => {
   }
 
   useEffect(() => {
-    if (activePanel === "news") {
+    if (activeSidebar === "news") {
       setAddTableDialogOpen(undefined)
     }
-  }, [activePanel])
+  }, [activeSidebar])
 
   useEffect(() => {
     if (addTableDialogOpen !== undefined) {
-      dispatch(actions.console.setActivePanel("create"))
+      dispatch(actions.console.setActiveSidebar("create"))
     }
   }, [addTableDialogOpen])
 

packages/web-console/src/components/Logo/index.tsx

@@ -1,6 +1,4 @@
 import React from "react"
-import { useDispatch } from "react-redux"
-import { actions } from "../../store"
 import styled from "styled-components"
 import { color } from "../../utils"
 import { Information } from "@styled-icons/remix-line"
@@ -19,15 +17,9 @@ const Root = styled.div`
   cursor: pointer;
 `
 export const Logo = () => {
-  const dispatch = useDispatch()
   return (
     <Root>
-      <PrimaryToggleButton
-        onClick={() => dispatch(actions.console.setActivePanel("console"))}
-      >
-        <Information size={BUTTON_ICON_SIZE} />
-      </PrimaryToggleButton>
-      {/* <img alt="QuestDB Logo" height="23" src="/assets/favicon.svg" /> */}
+      <Information size={BUTTON_ICON_SIZE} />
     </Root>
   )
 }

packages/web-console/src/components/TableSchemaDialog/dialog.tsx

@@ -192,7 +192,7 @@ export const Dialog = ({
       onOpenChange={(isOpen) => {
         if (isOpen && action === "add") {
           dispatch(
-            actions.console.setActivePanel(isOpen ? "create" : "console"),
+            actions.console.setActiveSidebar(isOpen ? "create" : undefined),
           )
         }
       }}

packages/web-console/src/components/index.ts

@@ -30,7 +30,6 @@ export * from "./Hooks"
 export * from "./IconWithTooltip"
 export * from "./Input"
 export * from "./Link"
-export * from "./Page"
 export * from "./PaneContent"
 export * from "./PaneMenu"
 export * from "./PaneWrapper"

packages/web-console/src/consts/index.ts

@@ -23,7 +23,7 @@
  ******************************************************************************/
 
 export enum BusEvent {
-  MSG_ACTIVE_PANEL = "active.panel",
+  MSG_active_sidebar = "active.panel",
   MSG_EDITOR_FOCUS = "editor.focus",
   MSG_EDITOR_SET = "editor.set",
   MSG_EDITOR_INSERT_COLUMN = "editor.insert.column",

packages/web-console/src/js/console/globals.js

@@ -30,6 +30,6 @@ export const MSG_QUERY_OK = "query.out.ok"
 export const MSG_QUERY_ERROR = "query.out.error"
 export const MSG_QUERY_DATASET = "query.out.dataset"
 export const MSG_QUERY_FIND_N_EXEC = "query.build.execute"
-export const MSG_ACTIVE_PANEL = "active.panel"
+export const MSG_active_sidebar = "active.panel"
 export const MSG_EDITOR_FOCUS = "editor.focus"
 export const MSG_CHART_DRAW = "chart.draw"

packages/web-console/src/js/console/quick-vis.js

@@ -305,7 +305,7 @@ export function quickVis(root, msgBus) {
   function bind() {
     viewport = div.find(".quick-vis-canvas")[0]
     $(window).resize(resize)
-    bus.on(qdb.MSG_ACTIVE_PANEL, resize)
+    bus.on(qdb.MSG_active_sidebar, resize)
     echart = echarts.init(viewport, eChartsMacarons)
     bus.on(qdb.MSG_QUERY_DATASET, updatePickers)
     bus.on(qdb.MSG_QUERY_CANCEL, cancelDraw)

packages/web-console/src/scenes/Console/Menu/index.tsx

@@ -317,7 +317,7 @@ const Menu = () => {
           icon={
             <Button
               skin="secondary"
-              onClick={() => dispatch(actions.console.setActivePanel("news"))}
+              onClick={() => dispatch(actions.console.setActiveSidebar("news"))}
             >
               <Notification2 size="18px" />
             </Button>

packages/web-console/src/scenes/Console/import.tsx

@@ -0,0 +1,9 @@
+import React from "react"
+import { PaneContent } from "../../components/PaneContent"
+import { PaneWrapper } from "../../components/PaneWrapper"
+
+export const Import = () => (
+  <PaneWrapper>
+    <PaneContent>import</PaneContent>
+  </PaneWrapper>
+)

packages/web-console/src/scenes/Console/index.tsx

@@ -1,24 +1,25 @@
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import styled from "styled-components"
 import { Splitter, useScreenSize, PopperHover } from "../../components"
 import Editor from "../Editor"
 import Result from "../Result"
 import Schema from "../Schema"
-import { ZeroState } from "../Result/zero-state"
+import { ZeroState } from "./zero-state"
 import { useCallback } from "react"
 import { BusEvent } from "../../consts"
 import { useLocalStorage } from "../../providers/LocalStorageProvider"
 import { StoreKey } from "../../utils/localStorage/types"
-import { useSelector, useDispatch } from "react-redux"
+import { useSelector } from "react-redux"
 import { selectors, actions } from "../../store"
 import { Tooltip } from "../../components/Tooltip"
 import { Sidebar } from "../../components/Sidebar"
 import { Navigation } from "../../components/Sidebar/navigation"
 import { Database2, Grid, PieChart, Upload2 } from "@styled-icons/remix-line"
-import { ChevronDoubleLeft } from "@styled-icons/bootstrap"
-import { ViewMode } from "./types"
+import { ResultViewMode } from "./types"
 import { BUTTON_ICON_SIZE } from "../../consts/index"
 import { PrimaryToggleButton } from "../../components"
+import { Import } from "./import"
+import { use } from "echarts"
 
 const Root = styled.div`
   display: flex;
@@ -37,15 +38,15 @@ const Bottom = styled.div`
   flex: 1;
 `
 
-const ToggleTablesIcon = styled(ChevronDoubleLeft)<{ splitterbasis: number }>`
-  transform: rotate(
-    ${({ splitterbasis }) => (splitterbasis === 0 ? "180deg" : "0deg")}
-  );
+const Tab = styled.div`
+  display: flex;
+  width: calc(100% - 4.5rem);
+  height: 100%;
 `
 
 const viewModes: {
   icon: React.ReactNode
-  mode: ViewMode
+  mode: ResultViewMode
   tooltipText: string
 }[] = [
   {
@@ -60,28 +61,60 @@ const viewModes: {
   },
 ]
 
+type BottomPanel = "result" | "zeroState" | "import"
+
 const Console = () => {
   const { sm } = useScreenSize()
   const { editorSplitterBasis, resultsSplitterBasis, updateSettings } =
     useLocalStorage()
   const result = useSelector(selectors.query.getResult)
-  const dispatch = useDispatch()
-  const [resultViewMode, setResultViewMode] = useState<ViewMode>("grid")
+  const [resultViewMode, setResultViewMode] = useState<ResultViewMode>("grid")
+  const [bottomPanel, setBottomPanel] = useState<BottomPanel>("zeroState")
+  const resultRef = React.useRef<HTMLDivElement>(null)
+  const zeroStateRef = React.useRef<HTMLDivElement>(null)
+  const importRef = React.useRef<HTMLDivElement>(null)
+
+  const showPanel = (panel: BottomPanel) => {
+    if (resultRef.current) {
+      resultRef.current.style.display = panel === "result" ? "flex" : "none"
+    }
+    if (zeroStateRef.current) {
+      zeroStateRef.current.style.display =
+        panel === "zeroState" ? "flex" : "none"
+    }
+    if (importRef.current) {
+      importRef.current.style.display = panel === "import" ? "flex" : "none"
+    }
+  }
 
   const handleEditorSplitterChange = useCallback((value) => {
     updateSettings(StoreKey.EDITOR_SPLITTER_BASIS, value)
     setTimeout(() => {
-      window.bus.trigger(BusEvent.MSG_ACTIVE_PANEL)
+      window.bus.trigger(BusEvent.MSG_active_sidebar)
     }, 0)
   }, [])
 
   const handleResultsSplitterChange = useCallback((value) => {
     updateSettings(StoreKey.RESULTS_SPLITTER_BASIS, value)
     setTimeout(() => {
-      window.bus.trigger(BusEvent.MSG_ACTIVE_PANEL)
+      window.bus.trigger(BusEvent.MSG_active_sidebar)
     }, 0)
   }, [])
 
+  useEffect(() => {
+    if (resultRef.current && result) {
+      setBottomPanel("result")
+    } else if (zeroStateRef.current) {
+      setBottomPanel("zeroState")
+    }
+  }, [result])
+
+  useEffect(() => {
+    if (bottomPanel) {
+      showPanel(bottomPanel)
+    }
+  }, [bottomPanel])
+
   return (
     <Root>
       <Splitter
@@ -136,8 +169,13 @@ const Console = () => {
                   trigger={
                     <Navigation
                       direction="left"
-                      onClick={() => setResultViewMode(mode)}
-                      selected={resultViewMode === mode}
+                      onClick={() => {
+                        setBottomPanel("result")
+                        setResultViewMode(mode)
+                      }}
+                      selected={
+                        bottomPanel === "result" && resultViewMode === mode
+                      }
                     >
                       {icon}
                     </Navigation>
@@ -147,12 +185,21 @@ const Console = () => {
                 </PopperHover>
               ))}
             <PrimaryToggleButton
-              onClick={() => dispatch(actions.console.setActivePanel("import"))}
+              onClick={() => setBottomPanel("import")}
+              selected={bottomPanel === "import"}
             >
               <Upload2 size={BUTTON_ICON_SIZE} />
             </PrimaryToggleButton>
           </Sidebar>
-          {result ? <Result viewMode={resultViewMode} /> : <ZeroState />}
+          <Tab ref={resultRef}>
+            {result && <Result viewMode={resultViewMode} />}
+          </Tab>
+          <Tab ref={zeroStateRef}>
+            <ZeroState />
+          </Tab>
+          <Tab ref={importRef}>
+            <Import />
+          </Tab>
         </Bottom>
       </Splitter>
     </Root>

packages/web-console/src/scenes/Console/types.ts

@@ -1 +1 @@
-export type ViewMode = "chart" | "grid"
+export type ResultViewMode = "chart" | "grid"

packages/web-console/src/scenes/Import/index.tsx

@@ -1,6 +1,5 @@
 import React from "react"
 import styled from "styled-components"
-import { Page } from "../../components"
 import { ImportCSVFiles } from "./ImportCSVFiles"
 import { BusEvent } from "../../consts"
 
@@ -14,21 +13,19 @@ const Root = styled.div`
 
 const Import = () => {
   return (
-    <Page>
-      <Root>
-        <ImportCSVFiles
-          onImported={(result) => {
-            if (result.status === "OK") {
-              bus.trigger(BusEvent.MSG_QUERY_SCHEMA)
-              bus.trigger(BusEvent.MSG_QUERY_FIND_N_EXEC, {
-                query: `"${result.location}"`,
-                options: { appendAt: "end" },
-              })
-            }
-          }}
-        />
-      </Root>
-    </Page>
+    <Root>
+      <ImportCSVFiles
+        onImported={(result) => {
+          if (result.status === "OK") {
+            bus.trigger(BusEvent.MSG_QUERY_SCHEMA)
+            bus.trigger(BusEvent.MSG_QUERY_FIND_N_EXEC, {
+              query: `"${result.location}"`,
+              options: { appendAt: "end" },
+            })
+          }
+        }}
+      />
+    </Root>
   )
 }