chore(web-console): Improvements for Tables section

packages/browser-tests/cypress/commands.js

@@ -263,8 +263,9 @@ Cypress.Commands.add("loadConsoleWithAuth", (clearWarnings) => {
 });
 
 Cypress.Commands.add("refreshSchema", () => {
-  cy.getByDataHook("schema-settings-button").click();
-  cy.getByDataHook("schema-refresh").click();
+  // toggle between auto-refresh modes to trigger a schema refresh
+  cy.getByDataHook("schema-auto-refresh-button").click();
+  cy.getByDataHook("schema-auto-refresh-button").click();
 });
 
 Cypress.Commands.add("getEditorTabs", () => {

packages/browser-tests/cypress/integration/console/schema.spec.js

@@ -132,6 +132,54 @@ describe("questdb schema with suspended tables with Linux OS error codes", () =>
   });
 });
 
+describe("table select UI", () => {
+  before(() => {
+    cy.loadConsoleWithAuth();
+
+    tables.forEach((table) => {
+      cy.createTable(table);
+    });
+    cy.refreshSchema();
+  });
+  beforeEach(() => {
+    cy.loadConsoleWithAuth();
+  });
+
+  it("should show select ui on click", () => {
+    cy.getByDataHook("schema-select-button").click();
+    cy.getByDataHook("schema-copy-to-clipboard-button").should("be.visible");
+    cy.getByDataHook("schema-copy-to-clipboard-button").should("be.disabled");
+    cy.getByDataHook("schema-select-all-button").should("be.visible");
+  });
+
+  it("should select and deselect tables", () => {
+    cy.getByDataHook("schema-select-button").click();
+    cy.getByDataHook("schema-table-title").contains("btc_trades").click();
+    cy.getByDataHook("schema-table-title")
+      .contains("chicago_weather_stations")
+      .click();
+    cy.getByDataHook("schema-copy-to-clipboard-button")
+      .should("not.be.disabled")
+      .click();
+    // Electron only!
+    if (Cypress.isBrowser("electron")) {
+      ["btc_trades", "chicago_weather_stations"].forEach((table) => {
+        cy.window()
+          .its("navigator.clipboard")
+          .then((clip) => clip.readText())
+          .should("contain", `CREATE TABLE '${table}'`);
+      });
+    }
+  });
+
+  after(() => {
+    cy.loadConsoleWithAuth();
+    tables.forEach((table) => {
+      cy.dropTable(table);
+    });
+  });
+});
+
 describe("questdb schema in read-only mode", () => {
   before(() => {
     cy.intercept(

packages/react-components/src/components/Button/skin.ts

@@ -24,6 +24,7 @@ type ColorShape = {
   white: string;
   inherit: string;
   tooltipBackground: string;
+  offWhite: string;
 };
 
 type Color = keyof ColorShape;
@@ -42,7 +43,7 @@ export const skins = [
   "transparent",
 ] as const;
 
-export type Skin = typeof skins[number];
+export type Skin = (typeof skins)[number];
 
 const themes: {
   [key in Skin]: {
@@ -125,16 +126,16 @@ const themes: {
     normal: {
       background: "transparent",
       border: "transparent",
-      color: "foreground",
+      color: "offWhite",
     },
     hover: {
       background: "comment",
       border: "transparent",
-      color: "foreground",
+      color: "offWhite",
     },
     disabled: {
       background: "transparent",
-      border: "gray1",
+      border: "transparent",
       color: "gray1",
     },
   },
@@ -165,10 +166,6 @@ export const makeSkin = (skin: Skin) => {
     color: ${getColor(theme.normal.color)};
     border-color: ${getColor(theme.normal.border)};
 
-    &:focus {
-      box-shadow: inset 0 0 0 1px ${getColor("foreground")};
-    }
-
     &:hover:not([disabled]) {
       background: ${getColor(theme.hover.background)};
       color: ${getColor(theme.hover.color)};

packages/react-components/src/theme/color.ts

@@ -22,6 +22,7 @@ export type Color = {
   white: string;
   inherit: string;
   tooltipBackground: string;
+  offWhite: string;
 };
 
 export const color: Color = {
@@ -48,4 +49,5 @@ export const color: Color = {
   white: "#fafafa",
   inherit: "inherit",
   tooltipBackground: "#6272a4",
+  offWhite: "#bdbdbd",
 };

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

@@ -82,7 +82,7 @@ const baseStyles = css<Props>`
   ${bezierTransition};
   ${({ disabled }) => disabled && "cursor: default; pointer-events: none;"};
   color: ${({ selected, theme }) =>
-    theme.color[selected ? "foreground" : "offWhite"]};
+    theme.color[selected ? "green" : "offWhite"]};
 
   svg + span,
   img + span {

packages/web-console/src/modules/EventBus/index.ts

@@ -21,7 +21,7 @@ class EventBus {
 
   unsubscribe<T extends any>(
     eventType: EventType,
-    handler: (eventPayload?: T) => void,
+    handler?: (eventPayload?: T) => void,
   ): void {
     this.emitter.off(eventType, handler)
   }

packages/web-console/src/providers/LocalStorageProvider/index.tsx

@@ -43,6 +43,7 @@ const defaultConfig: LocalConfig = {
   editorSplitterBasis: 350,
   resultsSplitterBasis: 350,
   exampleQueriesVisited: false,
+  autoRefreshTables: true,
 }
 
 type ContextProps = {
@@ -53,6 +54,7 @@ type ContextProps = {
   resultsSplitterBasis: number
   updateSettings: (key: StoreKey, value: SettingsType) => void
   exampleQueriesVisited: boolean
+  autoRefreshTables: boolean
 }
 
 const defaultValues: ContextProps = {
@@ -63,6 +65,7 @@ const defaultValues: ContextProps = {
   resultsSplitterBasis: 350,
   updateSettings: (key: StoreKey, value: SettingsType) => undefined,
   exampleQueriesVisited: false,
+  autoRefreshTables: true,
 }
 
 export const LocalStorageContext = createContext<ContextProps>(defaultValues)
@@ -96,6 +99,12 @@ export const LocalStorageProvider = ({
     getValue(StoreKey.EXAMPLE_QUERIES_VISITED) === "true",
   )
 
+  const [autoRefreshTables, setAutoRefreshTables] = useState<boolean>(
+    getValue(StoreKey.AUTO_REFRESH_TABLES)
+      ? getValue(StoreKey.AUTO_REFRESH_TABLES) === "true"
+      : defaultConfig.autoRefreshTables,
+  )
+
   const updateSettings = (key: StoreKey, value: SettingsType) => {
     setValue(key, value.toString())
     refreshSettings(key)
@@ -126,6 +135,9 @@ export const LocalStorageProvider = ({
           parseInteger(value, defaultConfig.resultsSplitterBasis),
         )
         break
+      case StoreKey.AUTO_REFRESH_TABLES:
+        setAutoRefreshTables(value === "true")
+        break
     }
   }
 
@@ -139,6 +151,7 @@ export const LocalStorageProvider = ({
         resultsSplitterBasis,
         updateSettings,
         exampleQueriesVisited,
+        autoRefreshTables,
       }}
     >
       {children}

packages/web-console/src/providers/LocalStorageProvider/types.ts

@@ -31,4 +31,5 @@ export type LocalConfig = {
   editorSplitterBasis: number
   resultsSplitterBasis: number
   exampleQueriesVisited: boolean
+  autoRefreshTables: boolean
 }

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

@@ -142,7 +142,7 @@ const Console = () => {
                             : 0,
                         )
                       }}
-                      selected={resultsSplitterBasis !== 0}
+                      selected={editorSplitterBasis !== 0}
                     >
                       <Database2 size={BUTTON_ICON_SIZE} />
                     </Navigation>
@@ -167,6 +167,7 @@ const Console = () => {
               <Allotment.Pane
                 preferredSize={editorSplitterBasis}
                 visible={editorSplitterBasis !== 0 && !sm}
+                minSize={250}
               >
                 <Schema />
               </Allotment.Pane>

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

@@ -31,11 +31,8 @@ import { Menu as _MenuIcon } from "@styled-icons/remix-fill"
 import { CornerDownLeft } from "@styled-icons/evaicons-solid"
 
 import {
-  ErrorButton,
   PaneMenu,
   PopperToggle,
-  SecondaryButton,
-  SuccessButton,
   TransitionDuration,
   TransparentButton,
   useKeyPress,
@@ -49,6 +46,7 @@ import { useLocalStorage } from "../../../providers/LocalStorageProvider"
 import { StoreKey } from "../../../utils/localStorage/types"
 import { DocSearch } from "@docsearch/react"
 import { useSettings } from "../../../providers"
+import { Button } from "@questdb/react-components"
 
 import "@docsearch/css"
 
@@ -68,15 +66,15 @@ const Separator = styled.div`
   flex: 1;
 `
 
-const QueryPickerButton = styled(SecondaryButton)<{
-  firstTimeVisitor: boolean
+const QueryPickerButton = styled(Button)<{
+  $firstTimeVisitor: boolean
 }>`
   position: relative;
   margin: 0 1rem;
   flex: 0 0 auto;
 
-  ${({ firstTimeVisitor }) =>
-    firstTimeVisitor &&
+  ${({ $firstTimeVisitor }) =>
+    $firstTimeVisitor &&
     `&:after {
     border-radius: 50%;
     content: "";
@@ -187,7 +185,10 @@ const Menu = () => {
           active={queriesPopperActive}
           onToggle={handleQueriesToggle}
           trigger={
-            <QueryPickerButton firstTimeVisitor={!exampleQueriesVisited}>
+            <QueryPickerButton
+              skin="secondary"
+              $firstTimeVisitor={!exampleQueriesVisited}
+            >
               <Add size="18px" />
               <span>Example queries</span>
             </QueryPickerButton>
@@ -203,23 +204,30 @@ const Menu = () => {
       <Separator />
 
       {running.value && (
-        <ErrorButton onClick={handleClick}>
-          <Stop size="18px" />
-          <span>Cancel</span>
-        </ErrorButton>
+        <Button
+          skin="error"
+          onClick={handleClick}
+          prefixIcon={<Stop size="18px" />}
+        >
+          Cancel
+        </Button>
       )}
 
       {!running.value && (
-        <SuccessButton title="Ctrl+Enter" onClick={handleClick}>
-          <Play size="18px" />
-          <span>Run</span>
+        <Button
+          skin="success"
+          title="Ctrl+Enter"
+          onClick={handleClick}
+          prefixIcon={<Play size="18px" />}
+        >
+          Run
           <RunShortcut>
             <Key>{ctrlCmd}</Key>
             <Key>
               <CornerDownLeft size="16px" />
             </Key>
           </RunShortcut>
-        </SuccessButton>
+        </Button>
       )}
 
       <MenuItems>

packages/web-console/src/scenes/Editor/Monaco/index.tsx

@@ -381,7 +381,7 @@ const MonacoEditor = () => {
               }),
             )
           }
-        }, 250)
+        }, 1000)
 
         void quest
           .queryRaw(request.query, { limit: "0,1000", explain: true })