webui: Improved approach to ensure the desired status message is shown

Author: justinclift

cypress/e2e/1-webui/live_execute_sql.cy.js

@@ -85,6 +85,7 @@ describe('live execute', () => {
     cy.get('[data-cy="formatsqlbtn"]').click()
 
     // Verify the changed text
+    cy.wait(waitTime)
     cy.get('[data-cy="usersqltext"]').should('contain',
       'CREATE TABLE\n' +
         '  livetest1 (field1 INTEGER, field2 TEXT, field3 INTEGER)')

webui/templates/execute.html

@@ -19,7 +19,7 @@
                             <span class="caret"></span>
                         </button>
                         <ul uib-dropdown-menu class="dropdown-menu" role="menu">
-                            <li ng-repeat="exec in execNames" role="menuitem" ng-click="changeExec(exec)" data-cy="exec-{{ exec }}">
+                            <li ng-repeat="exec in execNames" role="menuitem" ng-click="changeExec(exec, true)" data-cy="exec-{{ exec }}">
                                 <a href="">{{ exec }}</a>
                             </li>
                         </ul>
@@ -144,20 +144,22 @@ <h4 style="color: {{ statusMessageColour }};" data-cy="statusmsg">&nbsp;{{ statu
         };
 
         // Change to a newly selected SQL statement
-        $scope.changeExec = function(newExec) {
+        $scope.changeExec = function(newExec, updateMsg) {
             // Retrieve the newly chosen SQL statement from the server
             $http.get("/x/execget/[[ .DB.Info.Owner ]]/[[ .DB.Info.Database ]]?sqlname="+newExec).then(
                 function success(response) {
-                    // Clear any existing status message
-                    $scope.statusMessage = "";
+                    if (updateMsg) {
+                        // Clear any existing status message
+                        $scope.statusMessage = "";
+                    }
 
                     // Apply the retrieved information
                     document.getElementById("savename").value = newExec;
                     $scope.selectedName = newExec;
 
                     // We include '.textContent' here now because Cypress (v12.3.0) *refuses* to return the correct
-                    // data if '.value' is used.  Instead, Cypress returns old data which of course fails every test
-                    // using it.  Everything else (Chromium, FF, etc) is totally fine, returning the correct data.
+                    // data if just '.value' is used.  Instead, Cypress returns old data which of course fails every
+                    // test using it.  Everything else (Chromium, FF, etc) is totally fine, returning the correct data.
                     // Cypress itself even *visually displays* the correct data that it should be returning.  But no,
                     // the actual .should() call done by Cypress returns *old* (incorrect) data, causing failures.
                     // WTF? :(
@@ -167,17 +169,19 @@ <h4 style="color: {{ statusMessageColour }};" data-cy="statusmsg">&nbsp;{{ statu
                     updateSQL();
 
                 }, function failure(response) {
-                    // Retrieving statement text failed, so display the returned error message
-                    $scope.statusMessageColour = "red";
-                    $scope.statusMessage = nowString() + "Retrieving saved SQL failed: " + response.data;
+                    if (updateMsg) {
+                        // Retrieving statement text failed, so display the returned error message
+                        $scope.statusMessageColour = "red";
+                        $scope.statusMessage = nowString() + "Retrieving saved SQL failed: " + response.data;
+                    }
                 }
             )
         }
 
         // If there are saved SQL statements but none of them is named "default", then change the Saved SQL drop down
         // selector to use the first one
         if (($scope.execNames.length > 0) && (!$scope.execNames.includes("default"))) {
-            $scope.changeExec($scope.execNames[0]);
+            $scope.changeExec($scope.execNames[0], true);
         }
 
         // Deletes a saved SQL statement
@@ -207,12 +211,7 @@ <h4 style="color: {{ statusMessageColour }};" data-cy="statusmsg">&nbsp;{{ statu
                                 let newSelected = $scope.execNames[0];
                                 $scope.selectedName = newSelected;
                                 document.getElementById("savename").value = newSelected;
-                                $scope.changeExec(newSelected);
-
-                                // We need to set the status message here too, otherwise the ~async changeExec() above
-                                // can overwrite it
-                                $scope.statusMessageColour = "green";
-                                $scope.statusMessage = nowString() + "SQL statement '" + name + "' deleted";
+                                $scope.changeExec(newSelected, false);
                             }
                         }