fix: datasets populating after user creation (#12368)

superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.tsx

@@ -27,7 +27,6 @@ describe('SaveDatasetModal', () => {
     onOk: () => {},
     onHide: () => {},
     handleDatasetNameChange: () => {},
-    userDatasetsOwned: [],
     handleSaveDatasetRadioBtnState: () => {},
     saveDatasetRadioBtnState: 1,
     handleOverwriteCancel: () => {},
@@ -37,19 +36,22 @@ describe('SaveDatasetModal', () => {
     shouldOverwriteDataset: false,
     userDatasetOptions: [],
     disableSaveAndExploreBtn: false,
-    handleSaveDatasetModalSearch: () => {},
+    handleSaveDatasetModalSearch: () => Promise,
     filterAutocompleteOption: () => false,
     onChangeAutoComplete: () => {},
   };
   it('renders a radio group btn', () => {
+    // @ts-ignore
     const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
     expect(wrapper.find(Radio.Group)).toExist();
   });
   it('renders a autocomplete', () => {
+    // @ts-ignore
     const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
     expect(wrapper.find(AutoComplete)).toExist();
   });
   it('renders an input form ', () => {
+    // @ts-ignore
     const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
     expect(wrapper.find(Input)).toExist();
   });

superset-frontend/src/SqlLab/components/ResultSet.tsx

@@ -23,11 +23,13 @@ import moment from 'moment';
 import { RadioChangeEvent } from 'antd/lib/radio';
 import Button from 'src/components/Button';
 import shortid from 'shortid';
-import { styled, t } from '@superset-ui/core';
+import rison from 'rison';
+import { styled, t, makeApi } from '@superset-ui/core';
+import { debounce } from 'lodash';
 
 import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
 import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
-import { getByUser, put as updateDatset } from 'src/api/dataset';
+import { put as updateDatset } from 'src/api/dataset';
 import Loading from '../../components/Loading';
 import ExploreCtasResultsButton from './ExploreCtasResultsButton';
 import ExploreResultsButton from './ExploreResultsButton';
@@ -56,11 +58,6 @@ const EXPLORE_CHART_DEFAULT = {
 
 const LOADING_STYLES: CSSProperties = { position: 'relative', minHeight: 100 };
 
-interface DatasetOption {
-  datasetId: number;
-  datasetName: string;
-}
-
 interface DatasetOptionAutocomplete {
   value: string;
   datasetId: number;
@@ -85,7 +82,6 @@ interface ResultSetState {
   data: Record<string, any>[];
   showSaveDatasetModal: boolean;
   newSaveDatasetName: string;
-  userDatasetsOwned: DatasetOption[];
   saveDatasetRadioBtnState: number;
   shouldOverwriteDataSet: boolean;
   datasetToOverwrite: Record<string, any>;
@@ -124,7 +120,6 @@ export default class ResultSet extends React.PureComponent<
       data: [],
       showSaveDatasetModal: false,
       newSaveDatasetName: this.getDefaultDatasetName(),
-      userDatasetsOwned: [],
       saveDatasetRadioBtnState: DatasetRadioState.SAVE_NEW,
       shouldOverwriteDataSet: false,
       datasetToOverwrite: {},
@@ -150,8 +145,9 @@ export default class ResultSet extends React.PureComponent<
     this.handleOverwriteDatasetOption = this.handleOverwriteDatasetOption.bind(
       this,
     );
-    this.handleSaveDatasetModalSearch = this.handleSaveDatasetModalSearch.bind(
-      this,
+    this.handleSaveDatasetModalSearch = debounce(
+      this.handleSaveDatasetModalSearch.bind(this),
+      1000,
     );
     this.handleFilterAutocompleteOption = this.handleFilterAutocompleteOption.bind(
       this,
@@ -162,26 +158,9 @@ export default class ResultSet extends React.PureComponent<
     this.handleExploreBtnClick = this.handleExploreBtnClick.bind(this);
   }
 
-  async componentDidMount() {
+  componentDidMount() {
     // only do this the first time the component is rendered/mounted
     this.reRunQueryIfSessionTimeoutErrorOnMount();
-
-    const appContainer = document.getElementById('app');
-    const bootstrapData = JSON.parse(
-      appContainer?.getAttribute('data-bootstrap') || '{}',
-    );
-
-    if (bootstrapData.user && bootstrapData.user.userId) {
-      const datasets = await getByUser(bootstrapData.user.userId);
-      const userDatasetsOwned = datasets.map(
-        (r: { table_name: string; id: number }) => ({
-          datasetName: r.table_name,
-          datasetId: r.id,
-        }),
-      );
-
-      this.setState({ userDatasetsOwned });
-    }
   }
 
   UNSAFE_componentWillReceiveProps(nextProps: ResultSetProps) {
@@ -317,18 +296,46 @@ export default class ResultSet extends React.PureComponent<
     });
   };
 
-  handleSaveDatasetModalSearch = (searchText: string) => {
+  handleSaveDatasetModalSearch = async (searchText: string) => {
     // Making sure that autocomplete input has a value before rendering the dropdown
     // Transforming the userDatasetsOwned data for SaveModalComponent)
-    const { userDatasetsOwned } = this.state;
-    const userDatasets = !searchText
-      ? []
-      : userDatasetsOwned.map(d => ({
-          value: d.datasetName,
-          datasetId: d.datasetId,
-        }));
+    const appContainer = document.getElementById('app');
+    const bootstrapData = JSON.parse(
+      appContainer?.getAttribute('data-bootstrap') || '{}',
+    );
 
-    this.setState({ userDatasetOptions: userDatasets });
+    if (bootstrapData.user && bootstrapData.user.userId) {
+      const queryParams = rison.encode({
+        filters: [
+          {
+            col: 'table_name',
+            opr: 'ct',
+            value: searchText,
+          },
+          {
+            col: 'owners',
+            opr: 'rel_m_m',
+            value: bootstrapData.user.userId,
+          },
+        ],
+        order_column: 'changed_on_delta_humanized',
+        order_direction: 'desc',
+      });
+
+      const response = await makeApi({
+        method: 'GET',
+        endpoint: '/api/v1/dataset',
+      })(`q=${queryParams}`);
+
+      const userDatasetsOwned = response.result.map(
+        (r: { table_name: string; id: number }) => ({
+          value: r.table_name,
+          datasetId: r.id,
+        }),
+      );
+
+      this.setState({ userDatasetOptions: userDatasetsOwned });
+    }
   };
 
   handleFilterAutocompleteOption = (

superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx

@@ -30,7 +30,7 @@ interface SaveDatasetModalProps {
   onOk: () => void;
   onHide: () => void;
   handleDatasetNameChange: (e: React.FormEvent<HTMLInputElement>) => void;
-  handleSaveDatasetModalSearch: (searchText: string) => void;
+  handleSaveDatasetModalSearch: (searchText: string) => Promise<void>;
   filterAutocompleteOption: (
     inputValue: string,
     option: { value: string; datasetId: number },