feat(console): disable "Import" section when readOnly mode is on (#357)

README.md

 <div align="center">
-  <img alt="QuestDB Logo" src="https://raw.githubusercontent.com/questdb/questdb/master/.github/logo-readme.png" width="405px"/>
+  <img alt="QuestDB Logo" src="https://raw.githubusercontent.com/questdb/questdb/master/.github/logo-readme.png" width="305px"/>
 </div>
 <div align="center">
-  <kbd><img src="https://raw.githubusercontent.com/questdb/questdb/master/.github/watch.gif" alt="Watch this repo" width="320px"/></kbd>
+  <kbd><img src="https://raw.githubusercontent.com/questdb/questdb/master/.github/watch.gif" alt="Watch this repo" width="400px"/></kbd>
 </div>
 <p>&nbsp;</p>
 

ui/src/components/Tooltip/index.tsx

@@ -27,8 +27,8 @@ export const TooltipArrow = styled.div`
     left: 0;
     content: "";
     transform: rotate(45deg);
-    background: ${color("draculaForeground")};
-    border: 1px solid ${color("draculaBackgroundDarker")};
+    background: ${color("draculaBackgroundDarker")};
+    border: 1px solid ${color("gray1")};
     border-radius: 1px;
   }
 `
@@ -36,9 +36,9 @@ export const TooltipArrow = styled.div`
 export const Wrapper = styled.div`
   position: relative;
   max-width: 260px;
-  padding: 0.25rem 1rem;
-  background: ${color("draculaForeground")};
-  border: 1px solid ${color("draculaBackgroundDarker")};
+  padding: 1rem;
+  background: ${color("draculaBackgroundDarker")};
+  border: 1px solid ${color("gray1")};
   border-radius: 1px;
 
   &[data-popper-placement^="right"] ${TooltipArrow} {
@@ -80,7 +80,7 @@ export const Wrapper = styled.div`
 
 export const Tooltip = ({ arrow, children, ...rest }: Props) => (
   <Wrapper {...rest}>
-    <Text color="black">{children}</Text>
+    <Text color="draculaForeground">{children}</Text>
     {arrow && <TooltipArrow ref={arrow.setArrowElement} style={arrow.styles} />}
   </Wrapper>
 )

ui/src/scenes/Editor/index.tsx

@@ -20,12 +20,26 @@ import { BusEvent } from "utils"
 
 import QueryPicker from "./QueryPicker"
 
+const Title = styled(PaneTitle)`
+  .algolia-autocomplete {
+    flex: 0 1 168px;
+  }
+`
+
 const Separator = styled.div`
   flex: 1;
 `
 
 const DocsearchInput = styled(Input)`
-  width: 180px;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const QueryPickerButton = styled(SecondaryButton)`
+  margin: 0 1rem;
+  flex: 0 0 auto;
 `
 
 const Editor = () => {
@@ -80,7 +94,7 @@ const Editor = () => {
   }, [])
 
   return (
-    <PaneTitle>
+    <Title>
       {running && (
         <ErrorButton onClick={handleClick}>
           <ControllerStop size="18px" />
@@ -101,10 +115,10 @@ const Editor = () => {
           active={popperActive}
           onToggle={handleToggle}
           trigger={
-            <SecondaryButton onClick={handleClick}>
+            <QueryPickerButton onClick={handleClick}>
               <Plus size="18px" />
               <span>Saved queries</span>
-            </SecondaryButton>
+            </QueryPickerButton>
           }
         >
           <QueryPicker hidePicker={handleHidePicker} queries={savedQueries} />
@@ -115,10 +129,10 @@ const Editor = () => {
 
       <DocsearchInput
         id="docsearch-input"
-        placeholder="Search documentation..."
+        placeholder="Search documentation"
         title="Search..."
       />
-    </PaneTitle>
+    </Title>
   )
 }
 

ui/src/scenes/Footer/index.tsx

@@ -15,7 +15,6 @@ const Icons = styled.div`
   display: flex;
   padding-right: 1rem;
   align-items: center;
-  font-size: 2rem;
 `
 
 const Footer = () => (

ui/src/scenes/Sidebar/index.tsx

 import React, { useCallback, useEffect, useState } from "react"
+import { useSelector } from "react-redux"
 import styled from "styled-components"
 import { Code } from "@styled-icons/entypo/Code"
 import { Upload } from "@styled-icons/entypo/Upload"
 
 import { PopperHover, PrimaryToggleButton, Tooltip } from "components"
+import { selectors } from "store"
 import { color } from "utils"
 
 const Wrapper = styled.div`
@@ -38,6 +40,16 @@ const Navigation = styled(PrimaryToggleButton)<NavigationProps>`
   justify-content: center;
 `
 
+const DisabledNavigation = styled.div`
+  display: flex;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  flex: 0 0 5rem;
+  align-items: center;
+  justify-content: center;
+`
+
 type Tab = "console" | "import"
 
 const Sidebar = () => {
@@ -48,6 +60,7 @@ const Sidebar = () => {
   const handleImportClick = useCallback(() => {
     setSelected("import")
   }, [])
+  const { readOnly } = useSelector(selectors.console.getConfiguration)
 
   useEffect(() => {
     const consolePanel = document.querySelector<HTMLElement>(".js-sql-panel")
@@ -91,19 +104,43 @@ const Sidebar = () => {
       </PopperHover>
 
       <PopperHover
-        delay={350}
+        delay={readOnly ? 0 : 350}
         placement="right"
         trigger={
-          <Navigation
-            direction="left"
-            onClick={handleImportClick}
-            selected={selected === "import"}
-          >
-            <Upload size="16px" />
-          </Navigation>
+          readOnly ? (
+            <DisabledNavigation>
+              <Navigation
+                direction="left"
+                disabled
+                onClick={handleImportClick}
+                selected={selected === "import"}
+              >
+                <Upload size="16px" />
+              </Navigation>
+            </DisabledNavigation>
+          ) : (
+            <Navigation
+              direction="left"
+              onClick={handleImportClick}
+              selected={selected === "import"}
+            >
+              <Upload size="16px" />
+            </Navigation>
+          )
         }
       >
-        <Tooltip>Import</Tooltip>
+        <Tooltip>
+          {readOnly ? (
+            <>
+              <b>Import</b> is currently disabled.
+              <br />
+              To use this feature, turn <b>read-only</b> mode to <i>false</i> in
+              the configuration file
+            </>
+          ) : (
+            <>Import</>
+          )}
+        </Tooltip>
       </PopperHover>
     </Wrapper>
   )