From 5d4d50a609b155cb2251fb01a7dcd7831b733ca3 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Wed, 17 Jun 2020 12:24:10 -0700
Subject: [PATCH] fix(sqllab): table refresh API endpoint (#10076)

---
 .../src/components/TableSelector.jsx          | 100 ++++++++++--------
 1 file changed, 58 insertions(+), 42 deletions(-)

diff --git a/superset-frontend/src/components/TableSelector.jsx b/superset-frontend/src/components/TableSelector.jsx
index 0cc4b9839..6b1ae2222 100644
--- a/superset-frontend/src/components/TableSelector.jsx
+++ b/superset-frontend/src/components/TableSelector.jsx
@@ -18,12 +18,12 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select from 'src/components/Select';
+import { Select, AsyncSelect } from 'src/components/Select';
 import { ControlLabel, Label } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
 
-import AsyncSelect from './AsyncSelect';
+import SupersetAsyncSelect from './AsyncSelect';
 import RefreshLabel from './RefreshLabel';
 import './TableSelector.less';
 
@@ -70,25 +70,19 @@ export default class TableSelector extends React.PureComponent {
       schema: props.schema,
       tableName: props.tableName,
     };
-    this.changeSchema = this.changeSchema.bind(this);
+    this.onDatabaseChange = this.onDatabaseChange.bind(this);
+    this.onSchemaChange = this.onSchemaChange.bind(this);
     this.changeTable = this.changeTable.bind(this);
     this.dbMutator = this.dbMutator.bind(this);
     this.getTableNamesBySubStr = this.getTableNamesBySubStr.bind(this);
     this.onChange = this.onChange.bind(this);
-    this.onDatabaseChange = this.onDatabaseChange.bind(this);
   }
+
   componentDidMount() {
     this.fetchSchemas(this.state.dbId);
     this.fetchTables();
   }
-  onDatabaseChange(db, force = false) {
-    const dbId = db ? db.id : null;
-    this.setState({ schemaOptions: [] });
-    this.props.onSchemaChange(null);
-    this.props.onDbChange(db);
-    this.fetchSchemas(dbId, force);
-    this.setState({ dbId, schema: null, tableOptions: [] }, this.onChange);
-  }
+
   onChange() {
     this.props.onChange({
       dbId: this.state.dbId,
@@ -96,17 +90,25 @@ export default class TableSelector extends React.PureComponent {
       tableName: this.state.tableName,
     });
   }
-  getTableNamesBySubStr(input) {
-    if (!this.props.dbId || !input) {
+
+  onDatabaseChange(db, selectChangeMeta) {
+    return this.changeDataBase(db);
+  }
+
+  onSchemaChange(schemaOpt, selectActionMeta) {
+    return this.changeSchema(schemaOpt);
+  }
+
+  getTableNamesBySubStr(substr = 'undefined') {
+    if (!this.props.dbId || !substr) {
       const options = [];
       return Promise.resolve({ options });
     }
+    const encodedSchema = encodeURIComponent(this.props.schema);
+    const encodedSubstr = encodeURIComponent(substr);
     return SupersetClient.get({
       endpoint: encodeURI(
-        `/superset/tables/${this.props.dbId}/` +
-          `${encodeURIComponent(this.props.schema)}/${encodeURIComponent(
-            input,
-          )}`,
+        `/superset/tables/${this.props.dbId}/${encodedSchema}/${encodedSubstr}`,
       ),
     }).then(({ json }) => {
       const options = json.options.map(o => ({
@@ -119,6 +121,7 @@ export default class TableSelector extends React.PureComponent {
       return { options };
     });
   }
+
   dbMutator(data) {
     this.props.getDbList(data.result);
     if (data.result.length === 0) {
@@ -132,16 +135,15 @@ export default class TableSelector extends React.PureComponent {
       label: `${row.backend} ${row.database_name}`,
     }));
   }
-  fetchTables(force, substr) {
-    const forceRefresh = force || false;
+
+  fetchTables(forceRefresh = false, substr = 'undefined') {
     const { dbId, schema } = this.state;
+    const encodedSchema = encodeURIComponent(schema);
+    const encodedSubstr = encodeURIComponent(substr);
     if (dbId && schema) {
       this.setState(() => ({ tableLoading: true, tableOptions: [] }));
       const endpoint = encodeURI(
-        `/superset/tables/${dbId}/` +
-          `${encodeURIComponent(schema)}/${encodeURIComponent(
-            substr,
-          )}/${forceRefresh}/`,
+        `/superset/tables/${dbId}/${encodedSchema}/${encodedSubstr}/${!!forceRefresh}/`,
       );
       return SupersetClient.get({ endpoint })
         .then(({ json }) => {
@@ -166,13 +168,12 @@ export default class TableSelector extends React.PureComponent {
     this.setState(() => ({ tableLoading: false, tableOptions: [] }));
     return Promise.resolve();
   }
-  fetchSchemas(dbId, force) {
+
+  fetchSchemas(dbId, forceRefresh = false) {
     const actualDbId = dbId || this.props.dbId;
-    const forceRefresh = force || false;
     if (actualDbId) {
       this.setState({ schemaLoading: true });
       const endpoint = `/superset/schemas/${actualDbId}/${forceRefresh}/`;
-
       return SupersetClient.get({ endpoint })
         .then(({ json }) => {
           const schemaOptions = json.schemas.map(s => ({
@@ -188,9 +189,27 @@ export default class TableSelector extends React.PureComponent {
           this.props.handleError(t('Error while fetching schema list'));
         });
     }
-
     return Promise.resolve();
   }
+
+  changeDataBase(db, force = false) {
+    const dbId = db ? db.id : null;
+    this.setState({ schemaOptions: [] });
+    this.props.onSchemaChange(null);
+    this.props.onDbChange(db);
+    this.fetchSchemas(dbId, force);
+    this.setState({ dbId, schema: null, tableOptions: [] }, this.onChange);
+  }
+
+  changeSchema(schemaOpt, force = false) {
+    const schema = schemaOpt ? schemaOpt.value : null;
+    this.props.onSchemaChange(schema);
+    this.setState({ schema }, () => {
+      this.fetchTables(force);
+      this.onChange();
+    });
+  }
+
   changeTable(tableOpt) {
     if (!tableOpt) {
       this.setState({ tableName: '' });
@@ -203,14 +222,7 @@ export default class TableSelector extends React.PureComponent {
     }
     this.props.onTableChange(tableName, schemaName);
   }
-  changeSchema(schemaOpt, force = false) {
-    const schema = schemaOpt ? schemaOpt.value : null;
-    this.props.onSchemaChange(schema);
-    this.setState({ schema }, () => {
-      this.fetchTables(force);
-      this.onChange();
-    });
-  }
+
   renderDatabaseOption(db) {
     return (
       <span>
@@ -221,6 +233,7 @@ export default class TableSelector extends React.PureComponent {
       </span>
     );
   }
+
   renderTableOption(option) {
     return (
       <span className="TableLabel">
@@ -235,6 +248,7 @@ export default class TableSelector extends React.PureComponent {
       </span>
     );
   }
+
   renderSelectRow(select, refreshBtn) {
     return (
       <div className="section">
@@ -243,9 +257,10 @@ export default class TableSelector extends React.PureComponent {
       </div>
     );
   }
+
   renderDatabaseSelect() {
     return this.renderSelectRow(
-      <AsyncSelect
+      <SupersetAsyncSelect
         dataEndpoint={
           '/api/v1/database/?q=' +
           '(keys:!(none),' +
@@ -272,6 +287,7 @@ export default class TableSelector extends React.PureComponent {
       />,
     );
   }
+
   renderSchema() {
     return this.renderSelectRow(
       <Select
@@ -286,7 +302,7 @@ export default class TableSelector extends React.PureComponent {
         )}
         isLoading={this.state.schemaLoading}
         autosize={false}
-        onChange={this.changeSchema}
+        onChange={this.onSchemaChange}
       />,
       <RefreshLabel
         onClick={() => this.onDatabaseChange({ id: this.props.dbId }, true)}
@@ -294,6 +310,7 @@ export default class TableSelector extends React.PureComponent {
       />,
     );
   }
+
   renderTable() {
     let tableSelectPlaceholder;
     let tableSelectDisabled = false;
@@ -310,7 +327,6 @@ export default class TableSelector extends React.PureComponent {
     const select = this.props.schema ? (
       <Select
         name="select-table"
-        ref="selectTable"
         isLoading={this.state.tableLoading}
         ignoreAccents={false}
         placeholder={t('Select table or type table name')}
@@ -321,10 +337,8 @@ export default class TableSelector extends React.PureComponent {
         optionRenderer={this.renderTableOption}
       />
     ) : (
-      <Select
-        async
+      <AsyncSelect
         name="async-select-table"
-        ref="selectTable"
         placeholder={tableSelectPlaceholder}
         disabled={tableSelectDisabled}
         autosize={false}
@@ -342,6 +356,7 @@ export default class TableSelector extends React.PureComponent {
       />,
     );
   }
+
   renderSeeTableLabel() {
     return (
       <div className="section">
@@ -356,6 +371,7 @@ export default class TableSelector extends React.PureComponent {
       </div>
     );
   }
+
   render() {
     return (
       <div className="TableSelector">