feat(web-console): Add IndexedDB wrapper for storage

packages/browser-tests/README.md

@@ -3,6 +3,12 @@
 To run browser tests in a local dev environment:
 
 * make sure `localhost:9999` points to QuestDB Web Console
+* disable telemetry in QuestDB Web Console. Use env variable `QDB_TELEMETRY_ENABLED=false`
+  if running with docker, you can pass the variable like this:
+  ```
+  docker run -e QDB_TELEMETRY_ENABLED=false -p 9000:9000 -p 9009:9009 questdb/questdb:latest
+  ```
+
 * run `cypress` through `yarn`:
 ```
 yarn workspace browser-tests test

packages/browser-tests/cypress/commands.js

@@ -9,26 +9,26 @@ addMatchImageSnapshotCommand({
 
 const ctrlOrCmd = Cypress.platform === "darwin" ? "{cmd}" : "{ctrl}";
 
-beforeEach(() => {
-  cy.intercept(
-    {
-      method: "POST",
-      url: "/*",
-      hostname: "alurin.questdb.io",
-    },
-    (req) => {
-      req.reply("success");
+before(() => {
+  Cypress.on("uncaught:exception", (err) => {
+    // this error can be safely ignored
+    if (err.message.includes("ResizeObserver loop")) {
+      return false;
     }
-  );
+  });
 
+  indexedDB.deleteDatabase("web-console");
+});
+
+beforeEach(() => {
   cy.intercept(
     {
       method: "GET",
       url: "/**",
       hostname: "api.github.com",
     },
     (req) => {
-      req.reply("success");
+      req.reply("{}");
     }
   );
 });
@@ -46,7 +46,7 @@ Cypress.Commands.add("getGridRow", (n) =>
 Cypress.Commands.add("getGridRows", () => cy.get(".qg-r").filter(":visible"));
 
 Cypress.Commands.add("typeQuery", (query) =>
-  cy.get(".monaco-editor textarea").first().click().type(query)
+  cy.getEditor().click({ force: true }).type(query)
 );
 
 Cypress.Commands.add("runLine", () => {
@@ -73,7 +73,11 @@ Cypress.Commands.add("selectQuery", (n) =>
     .click()
 );
 
-Cypress.Commands.add("getEditor", () => cy.get(".monaco-editor textarea"));
+Cypress.Commands.add("getEditor", () => cy.get(".monaco-editor[role='code'] "));
+
+Cypress.Commands.add("getEditorContent", () =>
+  cy.get(".monaco-editor textarea")
+);
 
 Cypress.Commands.add("getAutocomplete", () =>
   cy.get('[widgetid="editor.widget.suggestWidget"]')

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

@@ -26,6 +26,7 @@ describe("appendQuery", () => {
     ).as("getConsoleConfiguration");
 
     cy.visit(baseUrl);
+    cy.getEditor().should("be.visible");
   });
 
   afterEach(() => {
@@ -35,22 +36,22 @@ describe("appendQuery", () => {
   it("should append and select first query", () => {
     cy.selectQuery(0);
     const expected = `${queries[0]}\n`;
-    cy.getEditor().should("have.value", expected);
+    cy.getEditorContent().should("have.value", expected);
     cy.getSelectedLines().should("have.length", 1);
     cy.matchImageSnapshot(); // screenshot diff
   });
 
   it("should append and select second query", () => {
     cy.selectQuery(1);
     const expected = `${queries[1]}\n`;
-    cy.getEditor().should("have.value", expected);
+    cy.getEditorContent().should("have.value", expected);
     cy.getSelectedLines().should("have.length", 1);
   });
 
   it("should append and select multiline query", () => {
     cy.selectQuery(2);
     const expected = `${queries[2]}\n`;
-    cy.getEditor().should("have.value", expected);
+    cy.getEditorContent().should("have.value", expected);
     // monaco editor visually selects all 3 lines, but creates 4 elements to visualise selection
     cy.getSelectedLines().should("have.length", 4);
   });
@@ -61,7 +62,7 @@ describe("appendQuery", () => {
     cy.typeQuery(`{ctrl}g2{enter}`); // go to line 2
     cy.selectQuery(1);
     const expected = `${queries[1]}\n\n${queries[1]}\n\n${queries[2]}\n`;
-    cy.getEditor().should("have.value", expected);
+    cy.getEditorContent().should("have.value", expected);
     cy.getSelectedLines().should("have.length", 1);
   });
 
@@ -70,39 +71,39 @@ describe("appendQuery", () => {
     cy.selectQuery(0);
     cy.selectQuery(1);
     const expected = `${queries[0]}\n\n${queries[1]}\n\n--b`;
-    cy.getEditor().should("have.value", expected);
+    cy.getEditorContent().should("have.value", expected);
     cy.getSelectedLines().should("have.length", 1);
   });
 
   it("should correctly append and select query when position is first line which is not empty", () => {
     cy.typeQuery(`--a`);
     cy.selectQuery(0);
     const expected = `--a\n\n${queries[0]}\n`;
-    cy.getEditor().should("have.value", expected);
+    cy.getEditorContent().should("have.value", expected);
     cy.getSelectedLines().should("have.length", 1);
   });
 
   it("should correctly append and select query when position is first line which is not empty and there's more content after", () => {
     cy.typeQuery(`--a{enter}{enter}--b{upArrow}{upArrow}`);
     cy.selectQuery(0);
     const expected = `--a\n\n${queries[0]}\n\n--b`;
-    cy.getEditor().should("have.value", expected);
+    cy.getEditorContent().should("have.value", expected);
     cy.getSelectedLines().should("have.length", 1);
   });
 
   it("should correctly append and add surrounding new lines when position is middle line which is empty", () => {
     cy.typeQuery(`--a{enter}{enter}--b{upArrow}`);
     cy.selectQuery(0);
     const expected = `--a\n\n${queries[0]}\n\n--b`;
-    cy.getEditor().should("have.value", expected);
+    cy.getEditorContent().should("have.value", expected);
     cy.getSelectedLines().should("have.length", 1);
   });
 
   it("should correctly append and add surrounding new lines when position is last line which is empty", () => {
     cy.typeQuery(`--a{enter}--b`);
     cy.selectQuery(0);
     const expected = `--a\n--b\n\n${queries[0]}\n`;
-    cy.getEditor().should("have.value", expected);
+    cy.getEditorContent().should("have.value", expected);
     cy.getSelectedLines().should("have.length", 1);
     cy.matchImageSnapshot();
   });
@@ -111,7 +112,7 @@ describe("appendQuery", () => {
     cy.typeQuery(`--a{enter}`);
     cy.selectQuery(0);
     const expected = `--a\n\n${queries[0]}\n`;
-    cy.getEditor().should("have.value", expected);
+    cy.getEditorContent().should("have.value", expected);
     cy.getSelectedLines().should("have.length", 1);
   });
 
@@ -120,19 +121,14 @@ describe("appendQuery", () => {
     cy.typeQuery(`{ctrl}g2{enter}{rightArrow}`); // go to line 2
     cy.selectQuery(0);
     const expected = `--a\n--b\n\n${queries[0]}\n\n--c`;
-    cy.getEditor().should("have.value", expected);
+    cy.getEditorContent().should("have.value", expected);
     cy.getSelectedLines().should("have.length", 1);
   });
 });
 
 describe("&query URL param", () => {
-  before(() => {
-    Cypress.on("uncaught:exception", (err) => {
-      // this error can be safely ignored
-      if (err.message.includes("ResizeObserver loop limit exceeded")) {
-        return false;
-      }
-    });
+  afterEach(() => {
+    cy.clearEditor();
   });
 
   it("should append and select single line query", () => {
@@ -162,7 +158,7 @@ describe("&query URL param", () => {
     const query = "select x\nfrom long_sequence(1);\n\n-- a\n-- b\n-- c";
     cy.typeQuery(query).clickRun();
     cy.visit(`${baseUrl}?query=${encodeURIComponent(query)}&executeQuery=true`);
-    cy.getEditor().should("have.value", query);
+    cy.getEditorContent().should("have.value", query);
   });
 
   it("should append query and scroll to it", () => {
@@ -179,23 +175,16 @@ describe("&query URL param", () => {
     cy.getVisibleLines()
       .invoke("text")
       .should("match", /hello.world$/); // not matching on appendedQuery, because query should be selected for which Monaco adds special chars between words
-    cy.clearEditor();
   });
 });
 
 describe("autocomplete", () => {
   before(() => {
-    Cypress.on("uncaught:exception", (err) => {
-      // this error can be safely ignored
-      if (err.message.includes("ResizeObserver loop limit exceeded")) {
-        return false;
-      }
-    });
-
     cy.visit(baseUrl);
   });
 
   beforeEach(() => {
+    cy.getEditor().should("be.visible");
     cy.clearEditor();
   });
 
@@ -266,13 +255,6 @@ describe("errors", () => {
 
 describe("running query with F9", () => {
   before(() => {
-    Cypress.on("uncaught:exception", (err) => {
-      // this error can be safely ignored
-      if (err.message.includes("ResizeObserver loop limit exceeded")) {
-        return false;
-      }
-    });
-
     cy.visit(baseUrl);
   });
 

packages/web-console/package.json

@@ -33,6 +33,8 @@
     "compare-versions": "^5.0.1",
     "core-js": "^3.22.8",
     "date-fns": "2.14.0",
+    "dexie": "^3.2.4",
+    "dexie-react-hooks": "^1.1.6",
     "docsearch.js": "2.6.3",
     "dotenv": "^10.0.0",
     "echarts": "^5.2.2",