fix: multiple UI critical issues: autocomplete, file loading, search clearing, and stop functionality (#567)

* Initial plan

* Fix multiple UI issues: autocomplete, file loading, search clearing, and stop functionality

Co-authored-by: kobenguyent <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: kobenguyent <[email protected]>

Author: Copilot

lib/api/stop.js

@@ -5,21 +5,40 @@ const { event } = require('codeceptjs');
 module.exports = async (req, res) => {
   debug('Stopping test execution');
 
-  if (global.runner) {
-    global.runner.abort();
-    
-    // Ensure we properly signal test completion and reset running state
-    event.dispatcher.once(event.all.result, () => {
-      global.runner._abort = false;
-      debug('Test runner stopped and reset');
-      // Emit exit event to reset frontend running state
-      wsEvents.codeceptjs.exit(-1); // -1 indicates stopped by user
-    });
-  } else {
-    // If no runner is active, still emit exit event to reset frontend state
-    debug('No active runner found, resetting state');
+  try {
+    if (global.runner) {
+      debug('Aborting active runner');
+      global.runner.abort();
+      
+      // Set a timeout to ensure we don't wait forever
+      const timeout = setTimeout(() => {
+        debug('Stop timeout reached, forcing exit event');
+        wsEvents.codeceptjs.exit(-1);
+        global.runner = null;
+      }, 5000); // 5 second timeout
+      
+      // Ensure we properly signal test completion and reset running state
+      event.dispatcher.once(event.all.result, () => {
+        clearTimeout(timeout);
+        if (global.runner) {
+          global.runner._abort = false;
+        }
+        global.runner = null;
+        debug('Test runner stopped and reset');
+        // Emit exit event to reset frontend running state
+        wsEvents.codeceptjs.exit(-1); // -1 indicates stopped by user
+      });
+    } else {
+      // If no runner is active, still emit exit event to reset frontend state
+      debug('No active runner found, resetting state');
+      wsEvents.codeceptjs.exit(-1);
+    }
+
+    return res.status(200).send('OK');
+  } catch (error) {
+    debug('Error stopping test execution:', error);
+    // Always emit exit event to reset state even if there's an error
     wsEvents.codeceptjs.exit(-1);
+    return res.status(500).send('Failed to stop execution');
   }
-
-  return res.status(200).send('OK');
 };

lib/model/editor-repository.js

@@ -29,7 +29,6 @@ class EditorRepository {
 
       // Find the scenario starting at or near the line number
       let startIndex = Math.max(0, lineNumber - 1);
-      let foundScenario = false;
 
       // Search for the closest Scenario definition to the target line
       let bestMatch = null;
@@ -51,7 +50,6 @@ class EditorRepository {
       }
 
       startIndex = bestMatch;
-      foundScenario = true;
 
       // Find the end of the scenario by matching braces
       let braceCount = 0;

src/components/RunButton.vue

@@ -62,14 +62,31 @@ export default {
       this.$emit('run');
     },
     stop() {
+      // Emit CLI stop command first
       this.$socket.emit('cli.line', 'exit');
       this.$store.commit('cli/stopCli');
-      this.$store.dispatch('testRuns/stop');
-      this.disabled = true;
-      setTimeout(() => {
-        this.canBeStopped = false;
-        this.disabled = false;
-      }, 3000); // wait for 3 secs to stop
+      
+      // Call the stop API endpoint
+      this.$store.dispatch('testRuns/stop')
+        .then(() => {
+          this.disabled = true;
+          // Wait for backend to signal completion via WebSocket
+          setTimeout(() => {
+            this.canBeStopped = false;
+            this.disabled = false;
+          }, 3000); // wait for 3 secs to reset UI state
+        })
+        .catch((error) => {
+          console.error('Error stopping tests:', error);
+          // Even if API call fails, reset UI state
+          this.disabled = true;
+          setTimeout(() => {
+            this.canBeStopped = false;
+            this.disabled = false;
+            // Force UI state reset
+            this.$store.commit('testRuns/setRunning', false);
+          }, 2000);
+        });
     },
 
   }

src/components/ScenarioSource.vue

@@ -274,7 +274,7 @@ export default {
           this.mode = 'file';
         }
         
-        const { data } = response.data;
+        const data = response.data.data;
         this.editorContent = data.source || data.content;
         this.originalContent = this.editorContent;
         this.currentStartLine = data.startLine || 1;
@@ -364,6 +364,9 @@ export default {
         });
       }
       
+      // Setup autocomplete now that Monaco is fully loaded
+      this.setupAutocomplete();
+      
       // Focus editor
       editor.focus();
     },

src/components/pages/ScenariosPage.vue

@@ -249,6 +249,11 @@ export default {
     },
     clearSearch() {
       this.search = '';
+      // Clear timeout to prevent race conditions
+      if (this.loadProjectTimeout) {
+        clearTimeout(this.loadProjectTimeout);
+        this.loadProjectTimeout = null;
+      }
       this.loadProject(true);
     },
 
@@ -306,23 +311,37 @@ export default {
       // Debounce the search to improve performance
       if (this.loadProjectTimeout) {
         clearTimeout(this.loadProjectTimeout);
+        this.loadProjectTimeout = null;
       }
       
       if (!immediate) {
         this.loadProjectTimeout = setTimeout(() => this.loadProject(true), 300);
         return;
       }
       
+      // Prevent concurrent loading
+      if (this.loading) {
+        return;
+      }
+      
       this.updateUrl();
 
       this.loading = true;
       const loadingComponent = this.$buefy.loading.open({ container: null });
 
       try {
         const response = await axios.get(
-          `/api/scenarios?q=${this.search}&m=${this.matchType}`
+          `/api/scenarios?q=${encodeURIComponent(this.search)}&m=${this.matchType}`
         );
         this.project = response.data;
+      } catch (error) {
+        console.error('Error loading project:', error);
+        // Show error message to user
+        this.$buefy.toast.open({
+          message: 'Failed to load test scenarios',
+          type: 'is-danger',
+          duration: 3000
+        });
       } finally {
         this.loading = false;
         loadingComponent.close();

src/store/modules/testruns.js

@@ -122,8 +122,15 @@ const testRuns = {
       commit('setRunning', true);
     },
 
-    stop: async function () {
-      await axios.post('/api/scenarios/stop', {});
+    stop: async function ({ commit }) {
+      try {
+        await axios.post('/api/scenarios/stop', {});
+      } catch (error) {
+        console.error('Error calling stop API:', error);
+        // Force reset running state even if API call fails
+        commit('setRunning', false);
+        throw error;
+      }
     },
 
     runGrep: async function ({ commit }, grep) {