[superset] branch master updated: fix(sql lab): Selecting edit on a query from query history doesn't update the SQL Editor properly (#19290)

[ru...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new bbe0af348b fix(sql lab): Selecting edit on a query from query history doesn't update the SQL Editor properly (#19290)
bbe0af348b is described below

commit bbe0af348bd0c973ce62f1a0b95fd9b7c04fd97e
Author: Diego Medina <di...@gmail.com>
AuthorDate: Fri Apr 15 14:49:32 2022 -0400

    fix(sql lab): Selecting edit on a query from query history doesn't update the SQL Editor properly (#19290)
---
 .../src/SqlLab/components/AceEditorWrapper/index.tsx     | 16 ++++++++++++----
 .../src/SqlLab/components/SqlEditor/index.jsx            |  6 ++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
index 35722ba866..e2e141608c 100644
--- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
+++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
@@ -66,7 +66,6 @@ interface Props {
 
 interface State {
   sql: string;
-  selectedText: string;
   words: AceCompleterKeyword[];
 }
 
@@ -80,13 +79,20 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
     extendedTables: [],
   };
 
+  private currentSelectionCache;
+
   constructor(props: Props) {
     super(props);
     this.state = {
       sql: props.sql,
-      selectedText: '',
       words: [],
     };
+
+    // The editor changeSelection is called multiple times in a row,
+    // faster than React reconciliation process, so the selected text
+    // needs to be stored out of the state to ensure changes to it
+    // get saved immediately
+    this.currentSelectionCache = '';
     this.onChange = this.onChange.bind(this);
   }
 
@@ -146,17 +152,19 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
     editor.$blockScrolling = Infinity; // eslint-disable-line no-param-reassign
     editor.selection.on('changeSelection', () => {
       const selectedText = editor.getSelectedText();
+
       // Backspace trigger 1 character selection, ignoring
       if (
-        selectedText !== this.state.selectedText &&
+        selectedText !== this.currentSelectionCache &&
         selectedText.length !== 1
       ) {
-        this.setState({ selectedText });
         this.props.actions.queryEditorSetSelectedText(
           this.props.queryEditor,
           selectedText,
         );
       }
+
+      this.currentSelectionCache = selectedText;
     });
   }
 
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index 14e8caa011..c6708b266c 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -240,6 +240,12 @@ class SqlEditor extends React.PureComponent {
     });
   }
 
+  componentDidUpdate() {
+    if (this.props.queryEditor.sql !== this.state.sql) {
+      this.onSqlChanged(this.props.queryEditor.sql);
+    }
+  }
+
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleWindowResize);
     window.removeEventListener('beforeunload', this.onBeforeUnload);