prevent page load race conditions and suggestion selection in editor

Author: emrberk

packages/browser-tests/cypress/commands.js

@@ -363,15 +363,21 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add("clearStorageAndVisit", (url) => {
+  cy.visit(url, {
+    onBeforeLoad: (win) => {
+      win.localStorage.clear();
+      win.indexedDB.deleteDatabase("web-console");
+    },
+  });
+});
+
 Cypress.Commands.add("loadConsoleWithAuth", (clearWarnings = false) => {
-  cy.clearLocalStorage();
-  indexedDB.deleteDatabase("web-console");
-  cy.visit(baseUrl);
+  cy.clearStorageAndVisit(baseUrl);
   cy.loginWithUserAndPassword();
   if (clearWarnings) {
     cy.clearSimulatedWarnings();
-    indexedDB.deleteDatabase("web-console");
-    cy.visit(baseUrl);
+    cy.clearStorageAndVisit(baseUrl);
     cy.getEditor().should("be.visible");
   }
 });

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

@@ -46,7 +46,7 @@ describe("run query", () => {
       cy.realPress("ArrowLeft");
     }
     cy.focused().type(`${ctrlOrCmd}{enter}`);
-    cy.getColumnName(0).should("contain", "count");
+    cy.getColumnName(0).should("contain", "count()");
     cy.getGridRow(0).should("contain", "100");
 
     // go inside the first query
@@ -55,7 +55,7 @@ describe("run query", () => {
       cy.realPress("ArrowLeft");
     }
     cy.focused().type(`${ctrlOrCmd}{enter}`);
-    cy.getColumnName(0).should("contain", "count");
+    cy.getColumnName(0).should("contain", "count()");
     cy.getGridRow(0).should("contain", "100");
   });
 
@@ -918,7 +918,7 @@ describe("handling comments", () => {
   });
 
   it("should highlight and execute sql with line comments inside", () => {
-    cy.typeQuery("select\n\nx\n-- y\n-- z\n from long_sequence(1);");
+    cy.typeQueryDirectly("select\nx\n-- y\n-- z\n from long_sequence(1);");
     cy.getCursorQueryDecoration().should("have.length", 5);
     cy.getCursorQueryGlyph().should("have.length", 1);
     cy.runLine();

packages/web-console/src/components/Hooks/useEffectIgnoreFirst.tsx

@@ -0,0 +1,13 @@
+import React, { useEffect, useRef } from 'react'
+
+export const useEffectIgnoreFirst = (effect: () => void, deps?: React.DependencyList) => {
+  const firstRender = useRef(true)
+
+  useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false
+      return
+    }
+    effect()
+  }, deps ?? [])
+}

packages/web-console/src/scenes/Search/SearchPanel.tsx

@@ -8,6 +8,8 @@ import { SearchResults } from './SearchResults'
 import { eventBus } from '../../modules/EventBus'
 import { EventType } from '../../modules/EventBus/types'
 import { useSearch } from '../../providers'
+import { db } from '../../store/db'
+import { useEffectIgnoreFirst } from '../../components/Hooks/useEffectIgnoreFirst'
 
 const Wrapper = styled(PaneWrapper)<{
   $open?: boolean
@@ -154,8 +156,15 @@ export const SearchPanel = React.forwardRef<SearchPanelRef, SearchPanelProps>(({
     }
   }, [performSearch])
 
-  useEffect(() => {
+  useEffectIgnoreFirst(() => {
     const timeoutId = setTimeout(() => {
+      if (!db.ready) {
+        setTimeout(() => {
+          performSearch()
+        }, 1000)
+        return
+      }
+
       performSearch()
     }, 300)
 

packages/web-console/src/store/db.ts

@@ -38,6 +38,7 @@ export class Storage extends Dexie {
   buffers!: Table<Buffer, number>
   editor_settings!: Table<EditorSettings, number>
   read_notifications!: Table<{ newsId: string }, number>
+  ready: boolean = false
 
   constructor() {
     super("web-console")
@@ -140,6 +141,7 @@ export class Storage extends Dexie {
 
       // clear search params from the address bar
       window.history.replaceState({}, "", url)
+      this.ready = true
     })
   }
 }