fix: handle running new queries when there is an operaton in progress

.github/workflows/ci.yml

@@ -20,16 +20,20 @@ jobs:
           cache: maven
 
       - name: Build QuestDB
-        run: mvn clean package -f e2e/questdb/pom.xml -DskipTests -P build-binaries
+        run:
+          mvn clean package -f e2e/questdb/pom.xml -DskipTests -P build-binaries
 
       - name: Extract QuestDB
-        run: tar -xzf e2e/questdb/core/target/questdb-*-rt-linux-x86-64.tar.gz -C tmp/
+        run:
+          tar -xzf e2e/questdb/core/target/questdb-*-rt-linux-x86-64.tar.gz -C
+          tmp/
 
       - name: Create DB Root
         run: mkdir tmp/dbroot
 
       - name: Start QuestDB
-        run: ./tmp/questdb-*-rt-linux-x86-64/bin/questdb.sh start -d ./tmp/dbroot
+        run:
+          ./tmp/questdb-*-rt-linux-x86-64/bin/questdb.sh start -d ./tmp/dbroot
         env:
           QDB_DEV_MODE_ENABLED: "true"
           QDB_TELEMETRY_ENABLED: "false"
@@ -58,7 +62,8 @@ jobs:
         run: ./tmp/questdb-*-rt-linux-x86-64/bin/questdb.sh stop
 
       - name: Start QuestDB, set auth credentials
-        run: ./tmp/questdb-*-rt-linux-x86-64/bin/questdb.sh start -d ./tmp/dbroot
+        run:
+          ./tmp/questdb-*-rt-linux-x86-64/bin/questdb.sh start -d ./tmp/dbroot
         env:
           QDB_DEV_MODE_ENABLED: "true"
           QDB_HTTP_USER: "admin"

e2e/commands.js

@@ -213,6 +213,12 @@ Cypress.Commands.add("getRunIconInLine", (lineNumber) => {
   return cy.get(selector).first();
 });
 
+Cypress.Commands.add("getCancelIconInLine", (lineNumber) => {
+  cy.get(".cancelQueryGlyph").should("be.visible");
+  const selector = `.cancelQueryGlyph-line-${lineNumber}`;
+  return cy.get(selector).first();
+});
+
 Cypress.Commands.add("openRunDropdownInLine", (lineNumber) => {
   cy.getRunIconInLine(lineNumber).rightclick();
 });

e2e/tests/console/editor.spec.js

@@ -1235,3 +1235,106 @@ describe("multiple run buttons with dynamic query log", () => {
     cy.get(".cursorQueryGlyph").should("have.length", 3)
   })
 })
+
+describe("abortion on new query execution", () => {
+  beforeEach(() => {
+    cy.loadConsoleWithAuth()
+    cy.getEditorContent().should("be.visible")
+    cy.clearEditor()
+    cy.intercept("/exec*", (req) => {
+      req.on("response", (res) => {
+        res.setDelay(1200)
+      })
+    })
+  })
+
+  it("should show abort confirmation dialog when triggering new query while another is running", () => {
+    // When
+    cy.typeQuery("select 1;\nselect 2;")
+    cy.clickRunIconInLine(1)
+
+    // Then
+    cy.getCancelIconInLine(1).should("be.visible")
+
+    // When
+    cy.clickRunIconInLine(2)
+
+    // Then
+    cy.getByDataHook("abort-confirmation-dialog").should("be.visible")
+
+    // When
+    cy.getByDataHook("abort-confirmation-dialog-confirm").click()
+
+    // Then
+    cy.getByDataHook("success-notification").should("contain", "select 2")
+
+    // When
+    cy.clickLine(1)
+
+    // Then
+    cy.getByDataHook("error-notification").should(
+      "contain",
+      "Cancelled by user",
+    )
+
+    // When
+    cy.clickLine(2)
+
+    // Then
+    cy.getByDataHook("success-notification").should("contain", "select 2")
+  })
+
+  it("should keep original query running when dismiss is clicked in abort dialog", () => {
+    // When
+    cy.typeQuery("select 1;\nselect 2;")
+    cy.clickRunIconInLine(1)
+
+    // Then
+    cy.getCancelIconInLine(1).should("be.visible")
+
+    // When
+    cy.clickRunIconInLine(2)
+
+    // Then
+    cy.getByDataHook("abort-confirmation-dialog").should("be.visible")
+
+    // When
+    cy.getByDataHook("abort-confirmation-dialog-dismiss").click()
+
+    // Then
+    cy.getByDataHook("abort-confirmation-dialog").should("not.exist")
+    cy.getByDataHook("success-notification").should("contain", "select 1")
+  })
+
+  it("should run new query after original completes while abort dialog is open", () => {
+    // When
+    cy.typeQuery("select 1;\nselect 2;")
+    cy.clickRunIconInLine(1)
+
+    // Then
+    cy.getCancelIconInLine(1).should("be.visible")
+
+    // When
+    cy.clickRunIconInLine(2)
+
+    // Then
+    cy.getByDataHook("abort-confirmation-dialog").should("be.visible")
+
+    // When (wait for original to complete naturally)
+    cy.getByDataHook("success-notification").should("contain", "select 1")
+    cy.wait(100)
+
+    // Then
+    cy.getByDataHook("success-notification").should("contain", "select 1")
+
+    // When
+    cy.getByDataHook("abort-confirmation-dialog-confirm").click()
+
+    // Then
+    cy.getByDataHook("success-notification").should("contain", "select 2")
+    cy.clickLine(1)
+    cy.getByDataHook("success-notification").should("contain", "select 1")
+    cy.clickLine(2)
+    cy.getByDataHook("success-notification").should("contain", "select 2")
+  })
+})

src/components/TopBar/toolbar.tsx

@@ -476,7 +476,7 @@ export const Toolbar = () => {
         )
         if (response.type === QuestDB.Type.DQL && response.count === 1) {
           const serverInfo = response.data[0]
-          sendServerInfoTelemetry(serverInfo)
+          void sendServerInfoTelemetry(serverInfo)
         }
         return
       }

src/index.tsx

@@ -60,7 +60,9 @@ const epicMiddleware = createEpicMiddleware<
 
 const store = createStore(rootReducer, compose(applyMiddleware(epicMiddleware)))
 
-epicMiddleware.run(rootEpic)
+if (import.meta.env.MODE !== "development") {
+  epicMiddleware.run(rootEpic)
+}
 
 const FadeReg = createGlobalFadeTransition("fade-reg", TransitionDuration.REG)
 

src/providers/EditorProvider/index.tsx

@@ -38,6 +38,8 @@ export type EditorContext = {
   monacoRef: MutableRefObject<Monaco | null>
   insertTextAtCursor: (text: string) => void
   appendQuery: (query: string, options?: AppendQueryOptions) => void
+  tabsDisabled: boolean
+  setTabsDisabled: (disabled: boolean) => void
   buffers: Buffer[]
   activeBuffer: Buffer
   setActiveBuffer: (
@@ -72,6 +74,8 @@ const defaultValues = {
   monacoRef: { current: null },
   insertTextAtCursor: () => undefined,
   appendQuery: () => undefined,
+  tabsDisabled: false,
+  setTabsDisabled: () => undefined,
   buffers: [],
   activeBuffer: fallbackBuffer,
   setActiveBuffer: () => Promise.resolve(),
@@ -97,7 +101,7 @@ export const EditorProvider: React.FC = ({ children }) => {
   const [temporaryBufferId, setTemporaryBufferId] = useState<number | null>(
     null,
   )
-
+  const [tabsDisabled, setTabsDisabled] = useState(false)
   const rawBuffers = useLiveQuery(bufferStore.getAll, [])
   const buffers = useMemo(() => {
     if (!rawBuffers) return undefined
@@ -396,6 +400,8 @@ export const EditorProvider: React.FC = ({ children }) => {
           }
         },
         inFocus,
+        tabsDisabled,
+        setTabsDisabled,
         buffers,
         activeBuffer,
         setActiveBuffer,

src/scenes/Editor/Monaco/QueryDropdown.tsx

@@ -67,8 +67,8 @@ type QueryDropdownProps = {
   positionRef: React.MutableRefObject<{ x: number; y: number } | null>
   queriesRef: React.MutableRefObject<Request[]>
   isContextMenuRef: React.MutableRefObject<boolean>
-  onRunQuery: (query?: Request) => void
-  onExplainQuery: (query?: Request) => void
+  onRunQuery: (query: Request) => void
+  onExplainQuery: (query: Request) => void
 }
 
 export const QueryDropdown: React.FC<QueryDropdownProps> = ({