multi buffer support in editor

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

@@ -25,7 +25,9 @@ describe("appendQuery", () => {
       consoleConfiguration
     ).as("getConsoleConfiguration");
 
+    indexedDB.deleteDatabase("web-console");
     cy.visit(baseUrl);
+    cy.getEditor().should("be.visible");
   });
 
   it("should append and select query", () => {
@@ -46,59 +48,87 @@ describe("appendQuery", () => {
     cy.getEditor().should("have.value", expected).snapshot();
   });
 
-  it("should correctly append and select query after multiple inserts", () => {
-    cy.selectQuery(1);
-    cy.selectQuery(2);
-    cy.typeQuery(`{ctrl}g2{enter}`); // go to line 2
+  it("should open new tab for each new query", () => {
+    cy.selectQuery(0);
     cy.selectQuery(1);
-    const expected = `${queries[1]}\n\n${queries[1]}\n\n${queries[2]}\n`;
-    cy.getEditor().should("have.value", expected).snapshot();
+    cy.getTab(0).click();
+    cy.getEditor().should(
+      "have.value",
+      `${consoleConfiguration.savedQueries[0].value}\n`
+    );
+
+    cy.getTab(1).click();
+    cy.getEditor().should(
+      "have.value",
+      consoleConfiguration.savedQueries[1].value
+    );
   });
 
-  it("should correctly append and select query when position is first line which is empty", () => {
+  // this test is trying to assert `appendQuery` through `QueryPicker`.
+  // `QueryPicker` adds new tab for each query
+  // @TODO: move `appendQuery` test to `@questdb/web-console` unit tests
+  it.skip("should correctly append and select query when position is first line which is empty", () => {
     cy.typeQuery(`{enter}--b{upArrow}`);
     cy.selectQuery(0);
     cy.selectQuery(1);
     const expected = `${queries[0]}\n\n${queries[1]}\n\n--b`;
     cy.getEditor().should("have.value", expected).snapshot();
   });
 
-  it("should correctly append and select query when position is first line which is not empty", () => {
+  // this test is trying to assert `appendQuery` through `QueryPicker`.
+  // `QueryPicker` adds new tab for each query
+  // @TODO: move `appendQuery` test to `@questdb/web-console` unit tests
+  it.skip("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).snapshot();
   });
 
-  it("should correctly append and select query when position is first line which is not empty and there's more content after", () => {
+  // this test is trying to assert `appendQuery` through `QueryPicker`.
+  // `QueryPicker` adds new tab for each query
+  // @TODO: move `appendQuery` test to `@questdb/web-console` unit tests
+  it.skip("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).snapshot();
   });
 
-  it("should correctly append and add surrounding new lines when position is middle line which is empty", () => {
+  // this test is trying to assert `appendQuery` through `QueryPicker`.
+  // `QueryPicker` adds new tab for each query
+  // @TODO: move `appendQuery` test to `@questdb/web-console` unit tests
+  it.skip("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).snapshot();
   });
 
-  it("should correctly append and add surrounding new lines when position is last line which is empty", () => {
+  // this test is trying to assert `appendQuery` through `QueryPicker`.
+  // `QueryPicker` adds new tab for each query
+  // @TODO: move `appendQuery` test to `@questdb/web-console` unit tests
+  it.skip("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).snapshot();
   });
 
-  it("should correctly append and add surrounding new lines when there are two lines and position is last line which is empty", () => {
+  // this test is trying to assert `appendQuery` through `QueryPicker`.
+  // `QueryPicker` adds new tab for each query
+  // @TODO: move `appendQuery` test to `@questdb/web-console` unit tests
+  it.skip("should correctly append and add surrounding new lines when there are two lines and position is last line which is empty", () => {
     cy.typeQuery(`--a{enter}`);
     cy.selectQuery(0);
     const expected = `--a\n\n${queries[0]}\n`;
     cy.getEditor().should("have.value", expected).snapshot();
   });
 
-  it("should correctly append and add surrounding new lines when position is middle of non empty line and next line is empty", () => {
+  // this test is trying to assert `appendQuery` through `QueryPicker`.
+  // `QueryPicker` adds new tab for each query
+  // @TODO: move `appendQuery` test to `@questdb/web-console` unit tests
+  it.skip("should correctly append and add surrounding new lines when position is middle of non empty line and next line is empty", () => {
     cy.typeQuery(`--a{enter}--b{enter}{enter}--c`);
     cy.typeQuery(`{ctrl}g2{enter}{rightArrow}`); // go to line 2
     cy.selectQuery(0);
@@ -149,17 +179,20 @@ describe("&query URL param", () => {
 
 describe("autocomplete", () => {
   beforeEach(() => {
+    indexedDB.deleteDatabase("web-console");
     Cypress.on("uncaught:exception", (err) => {
       // this error can be safely ignored
       if (err.message.includes("ResizeObserver loop limit exceeded")) {
         return false;
       }
     });
+
+    cy.visit(baseUrl);
+    cy.getEditor().should("be.visible");
   });
 
   it("should work when tables list is empty", () => {
-    cy.visit(baseUrl);
-    cy.typeQuery("select * from tel");
+    cy.typeQuery("select * from teleme");
     cy.getAutocomplete().should("not.be.visible");
     cy.clearEditor();
     cy.runQuery('create table "my_secrets" ("secret" string)');
@@ -170,7 +203,6 @@ describe("autocomplete", () => {
   });
 
   it("should work when tables list is not empty", () => {
-    cy.visit(baseUrl);
     cy.runQuery('create table "my_secrets" ("secret" string)');
     cy.runQuery('create table "my_publics" ("public" string)');
     cy.reload();

packages/browser-tests/cypress/support/commands.js

@@ -17,7 +17,9 @@ Cypress.Commands.add("runQuery", (query) => {
   return cy.typeQuery(query).type("{ctrl}{enter}").wait("@exec");
 });
 
-Cypress.Commands.add("clearEditor", () => cy.typeQuery("{ctrl}a{backspace}"));
+Cypress.Commands.add("clearEditor", () => {
+  cy.typeQuery("{ctrl}a{backspace}");
+});
 
 Cypress.Commands.add("selectQuery", (n) =>
   cy
@@ -41,5 +43,10 @@ Cypress.Commands.add("getErrorMarker", () => cy.get(".squiggly-error"));
 Cypress.Commands.add("F9", () =>
   cy.getEditor().trigger("keydown", {
     keyCode: 120,
+    force: true,
   })
 );
+
+Cypress.Commands.add("getTab", (nth = 0) =>
+  cy.get("[data-hook^=tab-]").eq(nth)
+);

packages/web-console/package.json

@@ -30,6 +30,8 @@
     "compare-versions": "^5.0.1",
     "core-js": "^3.22.8",
     "date-fns": "2.14.0",
+    "dexie": "^3.2.2",
+    "dexie-react-hooks": "^1.1.1",
     "docsearch.js": "2.6.3",
     "dotenv": "^10.0.0",
     "echarts": "^5.2.2",
@@ -53,7 +55,8 @@
     "sql-formatter": "^4.0.2",
     "styled-components": "5.1.1",
     "styled-icons": "10.2.1",
-    "throttle-debounce": "2.2.1"
+    "throttle-debounce": "2.2.1",
+    "usehooks-ts": "^2.7.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",