chore(ui): fix example query logic (#1466)

ui/src/consts/index.ts

@@ -28,6 +28,8 @@ export enum BusEvent {
   MSG_EDITOR_EXECUTE_ALT = "editor.execute.alt",
   MSG_EDITOR_FOCUS = "editor.focus",
   MSG_EDITOR_SET = "editor.set",
+  MSG_EDITOR_INSERT_COLUMN = "editor.insert.column",
+  MSG_EDITOR_INSERT_QUERY = "editor.insert.query",
   MSG_QUERY_CANCEL = "query.in.cancel",
   MSG_QUERY_DATASET = "query.out.dataset",
   MSG_QUERY_ERROR = "query.out.error",

ui/src/scenes/Editor/Ace/index.tsx

@@ -308,11 +308,22 @@ const Ace = () => {
       },
     )
 
-    window.bus.on("editor.insert.column", (_event, column) => {
+    window.bus.on(BusEvent.MSG_EDITOR_INSERT_COLUMN, (_event, column) => {
       editor.insert(column)
       editor.focus()
     })
 
+    window.bus.on(BusEvent.MSG_EDITOR_INSERT_QUERY, (_event, text) => {
+      const firstLine = editor.session.getLine(0)
+      const { row } = editor.getCursorPosition()
+      const line = editor.session.getLine(row)
+      editor.session.insert(
+        { column: line.length, row },
+        firstLine === "" ? text : `\n\n${text}`,
+      )
+      editor.focus()
+    })
+
     window.bus.on(BusEvent.MSG_EDITOR_FOCUS, () => {
       editor.scrollToLine(
         editor.getCursorPosition().row + 1,

ui/src/scenes/Editor/QueryPicker/Row/index.tsx

@@ -27,7 +27,6 @@ import styled, { css } from "styled-components"
 import { FileCode } from "@styled-icons/remix-line/FileCode"
 
 import { Text, TransitionDuration } from "components"
-import { BusEvent } from "consts"
 import { QueryShape } from "types"
 import { color } from "utils"
 
@@ -35,6 +34,7 @@ type Props = Readonly<{
   active: boolean
   hidePicker: () => void
   onHover: (query?: QueryShape) => void
+  onAdd: (query: QueryShape) => void
   query: QueryShape
 }>
 
@@ -78,11 +78,10 @@ const Name = styled(Text)`
   flex: 0 0 auto;
 `
 
-const Row = ({ active, hidePicker, onHover, query }: Props) => {
+const Row = ({ active, onHover, onAdd, query }: Props) => {
   const handleClick = useCallback(() => {
-    hidePicker()
-    window.bus.trigger(BusEvent.MSG_EDITOR_SET, query.value)
-  }, [hidePicker, query])
+    onAdd(query)
+  }, [query, onAdd])
   const handleMouseEnter = useCallback(() => {
     onHover(query)
   }, [query, onHover])

ui/src/scenes/Editor/QueryPicker/index.tsx

@@ -22,7 +22,7 @@
  *
  ******************************************************************************/
 
-import React, { forwardRef, Ref, useEffect, useState } from "react"
+import React, { forwardRef, Ref, useCallback, useEffect, useState } from "react"
 import styled from "styled-components"
 import { DownArrowSquare } from "@styled-icons/boxicons-solid/DownArrowSquare"
 import { UpArrowSquare } from "@styled-icons/boxicons-solid/UpArrowSquare"
@@ -72,6 +72,14 @@ const QueryPicker = ({ hidePicker, queries, ref }: Props) => {
   const [cursor, setCursor] = useState(0)
   const [hovered, setHovered] = useState<QueryShape | undefined>()
 
+  const addQuery = useCallback(
+    (query: QueryShape) => {
+      hidePicker()
+      window.bus.trigger(BusEvent.MSG_EDITOR_INSERT_QUERY, query.value)
+    },
+    [hidePicker],
+  )
+
   useEffect(() => {
     if (queries.length && downPress) {
       setCursor((prevState) =>
@@ -88,10 +96,9 @@ const QueryPicker = ({ hidePicker, queries, ref }: Props) => {
 
   useEffect(() => {
     if (enterPress && queries[cursor]) {
-      hidePicker()
-      window.bus.trigger(BusEvent.MSG_EDITOR_SET, queries[cursor].value)
+      addQuery(queries[cursor])
     }
-  }, [cursor, enterPress, hidePicker, queries])
+  }, [cursor, enterPress, hidePicker, queries, addQuery])
 
   useEffect(() => {
     if (hovered) {
@@ -113,7 +120,8 @@ const QueryPicker = ({ hidePicker, queries, ref }: Props) => {
         <Row
           active={i === cursor}
           hidePicker={hidePicker}
-          key={query.name}
+          key={query.value}
+          onAdd={addQuery}
           onHover={setHovered}
           query={query}
         />

ui/src/scenes/Schema/Row/index.tsx

@@ -38,6 +38,7 @@ import {
   TransitionDuration,
 } from "components"
 import { color } from "utils"
+import { BusEvent } from "../../../consts"
 
 type Props = Readonly<{
   className?: string
@@ -143,7 +144,7 @@ const Row = ({
     (event: MouseEvent) => {
       event.stopPropagation()
       window.bus.trigger(
-        "editor.insert.column",
+        BusEvent.MSG_EDITOR_INSERT_COLUMN,
         kind === "table" ? `'${name}'` : name,
       )
     },

ui/src/store/Console/selectors.ts

@@ -28,7 +28,7 @@ import { ConsoleConfigShape, StoreShape } from "types"
 import { defaultConfig } from "./reducers"
 
 const getConfig: (store: StoreShape) => ConsoleConfigShape = (store) =>
-  store.console.config || defaultConfig
+  store.console.config ?? defaultConfig
 
 const getSideMenuOpened: (store: StoreShape) => boolean = (store) =>
   store.console.sideMenuOpened