New zero state

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

@@ -36,9 +36,7 @@ export const CreateTableDialog = () => {
   }
 
   useEffect(() => {
-    if (activeSidebar === "news") {
-      setAddTableDialogOpen(undefined)
-    }
+    setAddTableDialogOpen(activeSidebar === "create" ? "add" : undefined)
   }, [activeSidebar])
 
   useEffect(() => {
@@ -67,8 +65,10 @@ export const CreateTableDialog = () => {
             <PrimaryToggleButton
               selected={addTableDialogOpen !== undefined}
               onClick={() =>
-                setAddTableDialogOpen(
-                  addTableDialogOpen === undefined ? "add" : undefined,
+                dispatch(
+                  actions.console.setActiveSidebar(
+                    addTableDialogOpen ? undefined : "create",
+                  ),
                 )
               }
             >

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react"
+import { useDispatch } from "react-redux"
 import styled from "styled-components"
 import { Splitter, useScreenSize, PopperHover } from "../../components"
 import Editor from "../Editor"
@@ -10,7 +11,7 @@ import { BusEvent } from "../../consts"
 import { useLocalStorage } from "../../providers/LocalStorageProvider"
 import { StoreKey } from "../../utils/localStorage/types"
 import { useSelector } from "react-redux"
-import { selectors } from "../../store"
+import { actions, selectors } from "../../store"
 import { Tooltip } from "../../components/Tooltip"
 import { Sidebar } from "../../components/Sidebar"
 import { Navigation } from "../../components/Sidebar/navigation"
@@ -19,6 +20,7 @@ import { ResultViewMode } from "./types"
 import { BUTTON_ICON_SIZE } from "../../consts/index"
 import { PrimaryToggleButton } from "../../components"
 import { Import } from "./import"
+import { BottomPanel } from "../../store/Console/types"
 
 const Root = styled.div`
   display: flex;
@@ -62,15 +64,14 @@ const viewModes: {
   },
 ]
 
-type BottomPanel = "result" | "zeroState" | "import"
-
 const Console = () => {
+  const dispatch = useDispatch()
   const { sm } = useScreenSize()
   const { editorSplitterBasis, resultsSplitterBasis, updateSettings } =
     useLocalStorage()
   const result = useSelector(selectors.query.getResult)
+  const activeBottomPanel = useSelector(selectors.console.getActiveBottomPanel)
   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)
@@ -104,17 +105,15 @@ const Console = () => {
 
   useEffect(() => {
     if (resultRef.current && result) {
-      setBottomPanel("result")
+      dispatch(actions.console.setActiveBottomPanel("result"))
     } else if (zeroStateRef.current) {
-      setBottomPanel("zeroState")
+      dispatch(actions.console.setActiveBottomPanel("zeroState"))
     }
   }, [result])
 
   useEffect(() => {
-    if (bottomPanel) {
-      showPanel(bottomPanel)
-    }
-  }, [bottomPanel])
+    showPanel(activeBottomPanel)
+  }, [activeBottomPanel])
 
   return (
     <Root>
@@ -169,11 +168,12 @@ const Console = () => {
                     <Navigation
                       direction="left"
                       onClick={() => {
-                        setBottomPanel("result")
+                        dispatch(actions.console.setActiveBottomPanel("result"))
                         setResultViewMode(mode)
                       }}
                       selected={
-                        bottomPanel === "result" && resultViewMode === mode
+                        activeBottomPanel === "result" &&
+                        resultViewMode === mode
                       }
                     >
                       {icon}
@@ -187,8 +187,10 @@ const Console = () => {
               placement="right"
               trigger={
                 <PrimaryToggleButton
-                  onClick={() => setBottomPanel("import")}
-                  selected={bottomPanel === "import"}
+                  onClick={() => {
+                    dispatch(actions.console.setActiveBottomPanel("import"))
+                  }}
+                  selected={activeBottomPanel === "import"}
                 >
                   <Upload2 size={BUTTON_ICON_SIZE} />
                 </PrimaryToggleButton>

packages/web-console/src/scenes/Console/zero-state.tsx

@@ -1,7 +1,14 @@
 import React from "react"
 import styled from "styled-components"
-import { PaneContent, PaneWrapper, Text } from "../../components"
-import { Heading } from "@questdb/react-components"
+import {
+  bezierTransition,
+  PaneContent,
+  PaneWrapper,
+  Text,
+} from "../../components"
+import { Box, Heading } from "@questdb/react-components"
+import { actions } from "../../store"
+import { useDispatch } from "react-redux"
 
 const StyledPaneContent = styled(PaneContent)`
   align-items: center;
@@ -12,8 +19,9 @@ const Items = styled.div`
   display: grid;
   grid-auto-flow: row;
   grid-auto-columns: max-content;
-  gap: 2rem;
+  gap: 4rem;
   text-align: center;
+  justify-items: center;
 `
 
 const StyledHeading = styled(Heading)`
@@ -28,27 +36,89 @@ const StyledText = styled(Text)`
   }
 `
 
-export const ZeroState = () => (
-  <PaneWrapper>
-    <StyledPaneContent>
-      <Items>
-        <StyledHeading level={3}>
-          Enter a query and press <Text color="green">Run</Text> to view
-          results.
-        </StyledHeading>
-        <StyledText color="gray2">
-          Get $200 in free credits when you sign up for{" "}
-          <a
-            href="https://questdb.io/cloud"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            QuestDB Cloud
-          </a>
-          .<br />
-          No credit card required.
-        </StyledText>
-      </Items>
-    </StyledPaneContent>
-  </PaneWrapper>
-)
+const Actions = styled.div`
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: repeat(2, 1fr);
+`
+
+const Action = styled(Box).attrs({ flexDirection: "column", gap: "2rem" })`
+  padding: 2rem;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: #2c2e3d;
+  cursor: pointer;
+
+  &,
+  &:hover {
+    ${bezierTransition};
+  }
+
+  > * {
+    opacity: 0.8;
+  }
+
+  &:hover {
+    background: #3f4252;
+
+    > * {
+      opacity: 1;
+    }
+  }
+`
+
+export const ZeroState = () => {
+  const dispatch = useDispatch()
+
+  return (
+    <PaneWrapper>
+      <StyledPaneContent>
+        <Items>
+          <StyledHeading level={3}>
+            Enter a query and press <Text color="green">Run</Text> to view
+            results.
+          </StyledHeading>
+          <Actions>
+            <Action
+              onClick={() =>
+                dispatch(actions.console.setActiveBottomPanel("import"))
+              }
+            >
+              <img
+                alt="File upload icon"
+                width="60"
+                height="80"
+                src="/assets/upload.svg"
+              />
+              <Heading level={5}>Import CSV</Heading>
+            </Action>
+            <Action
+              onClick={() =>
+                dispatch(actions.console.setActiveSidebar("create"))
+              }
+            >
+              <img
+                alt="Create table icon"
+                width="60"
+                height="80"
+                src="/assets/create-table.svg"
+              />
+              <Heading level={5}>Create table</Heading>
+            </Action>
+          </Actions>
+          <StyledText color="gray2">
+            Get $200 in free credits when you sign up for{" "}
+            <a
+              href="https://questdb.io/cloud"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              QuestDB Cloud
+            </a>
+            .<br />
+            No credit card required.
+          </StyledText>
+        </Items>
+      </StyledPaneContent>
+    </PaneWrapper>
+  )
+}

packages/web-console/src/store/Console/actions.ts

@@ -25,8 +25,9 @@ import {
   ConsoleConfigShape,
   ConsoleAction,
   ConsoleAT,
-  Panel,
-} from "../../types"
+  Sidebar,
+  BottomPanel,
+} from "./types"
 
 const bootstrap = (): ConsoleAction => ({
   type: ConsoleAT.BOOTSTRAP,
@@ -42,11 +43,16 @@ const setConfig = (payload: ConsoleConfigShape): ConsoleAction => ({
   type: ConsoleAT.SET_CONFIG,
 })
 
-const setActiveSidebar = (panel: Panel): ConsoleAction => ({
+const setActiveSidebar = (panel: Sidebar): ConsoleAction => ({
   payload: panel,
   type: ConsoleAT.SET_ACTIVE_SIDEBAR,
 })
 
+const setActiveBottomPanel = (panel: BottomPanel): ConsoleAction => ({
+  payload: panel,
+  type: ConsoleAT.SET_ACTIVE_BOTTOM_PANEL,
+})
+
 const toggleSideMenu = (): ConsoleAction => ({
   type: ConsoleAT.TOGGLE_SIDE_MENU,
 })
@@ -57,4 +63,5 @@ export default {
   setConfig,
   toggleSideMenu,
   setActiveSidebar,
+  setActiveBottomPanel,
 }

packages/web-console/src/store/Console/reducers.ts

@@ -32,6 +32,7 @@ import {
 export const initialState: ConsoleStateShape = {
   sideMenuOpened: false,
   activeSidebar: undefined,
+  activeBottomPanel: "zeroState",
 }
 
 export const defaultConfig: ConsoleConfigShape = {
@@ -69,6 +70,13 @@ const _console = (
       }
     }
 
+    case ConsoleAT.SET_ACTIVE_BOTTOM_PANEL: {
+      return {
+        ...state,
+        activeBottomPanel: action.payload,
+      }
+    }
+
     default:
       return state
   }

packages/web-console/src/store/Console/selectors.ts

@@ -21,7 +21,7 @@
  *  limitations under the License.
  *
  ******************************************************************************/
-import { ConsoleConfigShape, StoreShape, Panel } from "types"
+import { ConsoleConfigShape, StoreShape, Sidebar, BottomPanel } from "types"
 
 import { defaultConfig } from "./reducers"
 
@@ -31,11 +31,15 @@ const getConfig: (store: StoreShape) => ConsoleConfigShape = (store) =>
 const getSideMenuOpened: (store: StoreShape) => boolean = (store) =>
   store.console.sideMenuOpened
 
-const getActiveSidebar: (store: StoreShape) => Panel = (store) =>
+const getActiveSidebar: (store: StoreShape) => Sidebar = (store) =>
   store.console.activeSidebar
 
+const getActiveBottomPanel: (store: StoreShape) => BottomPanel = (store) =>
+  store.console.activeBottomPanel
+
 export default {
   getConfig,
   getSideMenuOpened,
   getActiveSidebar,
+  getActiveBottomPanel,
 }