Postgres/MySQL: Fixes issue with toggle query editor mode (#35890) (#35894)

* Postgres/MySQL: Fixes issue with toggle query editor mode

* PostGres/MySQL: Use $evalAsync instead of manual $digest

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
(cherry picked from commit eea3ea9755)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

public/app/plugins/datasource/mysql/query_ctrl.ts

@@ -164,12 +164,20 @@ export class MysqlQueryCtrl extends QueryCtrl {
           icon: 'exclamation-triangle',
           yesText: 'Switch',
           onConfirm: () => {
-            this.target.rawQuery = !this.target.rawQuery;
+            // This could be called from React, so wrap in $evalAsync.
+            // Will then either run as part of the current digest cycle or trigger a new one.
+            this.$scope.$evalAsync(() => {
+              this.target.rawQuery = !this.target.rawQuery;
+            });
           },
         })
       );
     } else {
-      this.target.rawQuery = !this.target.rawQuery;
+      // This could be called from React, so wrap in $evalAsync.
+      // Will then either run as part of the current digest cycle or trigger a new one.
+      this.$scope.$evalAsync(() => {
+        this.target.rawQuery = !this.target.rawQuery;
+      });
     }
   }
 

public/app/plugins/datasource/postgres/query_ctrl.ts

@@ -196,12 +196,20 @@ export class PostgresQueryCtrl extends QueryCtrl {
           icon: 'exclamation-triangle',
           yesText: 'Switch',
           onConfirm: () => {
-            this.target.rawQuery = !this.target.rawQuery;
+            // This could be called from React, so wrap in $evalAsync.
+            // Will then either run as part of the current digest cycle or trigger a new one.
+            this.$scope.$evalAsync(() => {
+              this.target.rawQuery = !this.target.rawQuery;
+            });
           },
         })
       );
     } else {
-      this.target.rawQuery = !this.target.rawQuery;
+      // This could be called from React, so wrap in $evalAsync.
+      // Will then either run as part of the current digest cycle or trigger a new one.
+      this.$scope.$evalAsync(() => {
+        this.target.rawQuery = !this.target.rawQuery;
+      });
     }
   }