From a5b6ccc1ec98cce297d5f8579c7704668fe698f3 Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Tue, 11 Apr 2023 16:19:18 -0700
Subject: [PATCH] fix(sqllab): rendering performance regression (#23653)

---
 .../components/SqlEditor/SqlEditor.test.jsx   | 39 ++++++++++++++++---
 .../src/SqlLab/components/SqlEditor/index.jsx |  2 -
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
index 9dcc37fdd1..67f25d4d39 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
@@ -25,6 +25,7 @@ import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import {
+  SET_QUERY_EDITOR_SQL_DEBOUNCE_MS,
   SQL_EDITOR_GUTTER_HEIGHT,
   SQL_EDITOR_GUTTER_MARGIN,
   SQL_TOOLBAR_HEIGHT,
@@ -43,8 +44,14 @@ import {
 
 jest.mock('src/components/AsyncAceEditor', () => ({
   ...jest.requireActual('src/components/AsyncAceEditor'),
-  FullSQLEditor: props => (
-    <div data-test="react-ace">{JSON.stringify(props)}</div>
+  FullSQLEditor: ({ onChange, onBlur, value }) => (
+    <textarea
+      data-test="react-ace"
+      onChange={evt => onChange(evt.target.value)}
+      onBlur={onBlur}
+    >
+      {value}
+    </textarea>
   ),
 }));
 jest.mock('src/SqlLab/components/SqlEditorLeftBar', () => () => (
@@ -166,10 +173,8 @@ describe('SqlEditor', () => {
         },
       }),
     );
-
-    expect(await findByTestId('react-ace')).toHaveTextContent(
-      JSON.stringify({ value: expectedSql }).slice(1, -1),
-    );
+    const editor = await findByTestId('react-ace');
+    expect(editor).toHaveValue(expectedSql);
   });
 
   it('render a SouthPane', async () => {
@@ -179,6 +184,28 @@ describe('SqlEditor', () => {
     ).toBeInTheDocument();
   });
 
+  it('triggers setQueryEditorAndSaveSql with debounced call to avoid performance regression', async () => {
+    const { findByTestId } = setup(mockedProps, store);
+    const editor = await findByTestId('react-ace');
+    const sql = 'select *';
+    fireEvent.change(editor, { target: { value: sql } });
+    // Verify no immediate sql update triggered
+    expect(
+      store.getActions().filter(({ type }) => type === 'QUERY_EDITOR_SET_SQL'),
+    ).toHaveLength(0);
+    await waitFor(
+      () =>
+        expect(
+          store
+            .getActions()
+            .filter(({ type }) => type === 'QUERY_EDITOR_SET_SQL'),
+        ).toHaveLength(1),
+      {
+        timeout: SET_QUERY_EDITOR_SQL_DEBOUNCE_MS + 100,
+      },
+    );
+  });
+
   it('runs query action with ctas false', async () => {
     const expectedStore = mockStore({
       ...initialState,
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index 83286e5881..ba6d89511d 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -49,7 +49,6 @@ import {
   persistEditorHeight,
   postStopQuery,
   queryEditorSetAutorun,
-  queryEditorSetSql,
   queryEditorSetAndSaveSql,
   queryEditorSetTemplateParams,
   runQueryFromSqlEditor,
@@ -456,7 +455,6 @@ const SqlEditor = ({
   );
 
   const onSqlChanged = sql => {
-    dispatch(queryEditorSetSql(queryEditor, sql));
     setQueryEditorAndSaveSqlWithDebounce(sql);
     // Request server-side validation of the query text
     if (canValidateQuery()) {