fix: Save dataset + chart when Chart source is Query (#20880)

* feat: save dataset savemodal

* fix lint

* add comments

* enable chart power query

* clean up

* added test

* fix overwrite

* add proper error messaging for save datasetModal

* lint

* fix ts lint

* fix

* Disables Save button while network call is in progress, removing second Chart saved toast message

* change naming

* err

* Update superset-frontend/src/explore/components/SaveModal.tsx

Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>

* Update SaveModal.tsx

Co-authored-by: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Co-authored-by: Eric Briscoe <eric.j.briscoe@gmail.com>
Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>

superset-frontend/src/explore/components/ExploreViewContainer/index.jsx

@@ -56,6 +56,7 @@ import { getFormDataFromControls } from 'src/explore/controlUtils';
 import * as exploreActions from 'src/explore/actions/exploreActions';
 import * as saveModalActions from 'src/explore/actions/saveModalActions';
 import { useTabId } from 'src/hooks/useTabId';
+import withToasts from 'src/components/MessageToasts/withToasts';
 import ExploreChartPanel from '../ExploreChartPanel';
 import ConnectedControlPanelsContainer from '../ControlPanelsContainer';
 import SaveModal from '../SaveModal';
@@ -589,6 +590,7 @@ function ExploreViewContainer(props) {
         />
         {showingModal && (
           <SaveModal
+            addDangerToast={props.addDangerToast}
             onHide={toggleModal}
             actions={props.actions}
             form_data={props.form_data}
@@ -767,4 +769,4 @@ function mapDispatchToProps(dispatch) {
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(ExploreViewContainer);
+)(withToasts(ExploreViewContainer));

superset-frontend/src/explore/components/SaveModal.test.jsx

@@ -54,7 +54,7 @@ const initialState = {
   },
 };
 
-const store = mockStore(initialState);
+const initialStore = mockStore(initialState);
 
 const defaultProps = {
   onHide: () => ({}),
@@ -79,16 +79,36 @@ const mockDashboardData = {
   result: [{ id: 'id', dashboard_title: 'dashboard title' }],
 };
 
+const queryStore = mockStore({
+  chart: {},
+  saveModal: {
+    dashboards: [],
+  },
+  explore: {
+    datasource: { name: 'test', type: 'query' },
+    slice: null,
+    alert: null,
+  },
+  user: {
+    userId: 1,
+  },
+});
+
+const queryDefaultProps = {
+  ...defaultProps,
+  form_data: { datasource: '107__query', url_params: { foo: 'bar' } },
+};
+
 const fetchDashboardsEndpoint = `glob:*/dashboardasync/api/read?_flt_0_owners=${1}`;
 
 beforeAll(() => fetchMock.get(fetchDashboardsEndpoint, mockDashboardData));
 
 afterAll(() => fetchMock.restore());
 
-const getWrapper = () =>
+const getWrapper = (props = defaultProps, store = initialStore) =>
   shallow(
     <BrowserRouter>
-      <SaveModal {...defaultProps} store={store} />
+      <SaveModal {...props} store={store} />
     </BrowserRouter>,
   )
     .dive()
@@ -168,7 +188,7 @@ test('sets action when overwriting slice', () => {
 test('fetches dashboards on component mount', () => {
   sinon.spy(defaultProps.actions, 'fetchDashboards');
   mount(
-    <Provider store={store}>
+    <Provider store={initialStore}>
       <SaveModal {...defaultProps} />
     </Provider>,
   );
@@ -198,3 +218,9 @@ test('removes alert', () => {
   expect(wrapper.state().alert).toBeNull();
   defaultProps.actions.removeSaveModalAlert.restore();
 });
+
+test('set dataset name when chart source is query', () => {
+  const wrapper = getWrapper(queryDefaultProps, queryStore);
+  expect(wrapper.find('[data-test="new-dataset-name"]')).toExist();
+  expect(wrapper.state().datasetName).toBe('test');
+});