fix(explore): Chart save modal displays error instead of failing silently (#21920)

superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx

@@ -23,6 +23,7 @@ import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import * as chartAction from 'src/components/Chart/chartAction';
+import * as saveModalActions from 'src/explore/actions/saveModalActions';
 import * as downloadAsImage from 'src/utils/downloadAsImage';
 import * as exploreUtils from 'src/explore/exploreUtils';
 import { FeatureFlag } from '@superset-ui/core';
@@ -114,7 +115,6 @@ const createProps = (additionalProps = {}) => ({
     changed_by: 'John Doe',
     dashboards: [{ id: 1, dashboard_title: 'Test' }],
   },
-  onSaveChart: jest.fn(),
   canOverwrite: false,
   canDownload: false,
   isStarred: false,
@@ -178,19 +178,29 @@ test('does not render the metadata bar when not saved', async () => {
 });
 
 test('Save chart', async () => {
+  const setSaveChartModalVisibility = jest.spyOn(
+    saveModalActions,
+    'setSaveChartModalVisibility',
+  );
   const props = createProps();
   render(<ExploreHeader {...props} />, { useRedux: true });
   expect(await screen.findByText('Save')).toBeInTheDocument();
   userEvent.click(screen.getByText('Save'));
-  expect(props.onSaveChart).toHaveBeenCalled();
+  expect(setSaveChartModalVisibility).toHaveBeenCalledWith(true);
+  setSaveChartModalVisibility.mockClear();
 });
 
 test('Save disabled', async () => {
+  const setSaveChartModalVisibility = jest.spyOn(
+    saveModalActions,
+    'setSaveChartModalVisibility',
+  );
   const props = createProps();
   render(<ExploreHeader {...props} saveDisabled />, { useRedux: true });
   expect(await screen.findByText('Save')).toBeInTheDocument();
   userEvent.click(screen.getByText('Save'));
-  expect(props.onSaveChart).not.toHaveBeenCalled();
+  expect(setSaveChartModalVisibility).not.toHaveBeenCalled();
+  setSaveChartModalVisibility.mockClear();
 });
 
 describe('Additional actions tests', () => {

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

@@ -16,9 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useMemo, useState } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Tooltip } from 'src/components/Tooltip';
 import {
@@ -28,7 +27,6 @@ import {
   SupersetClient,
   t,
 } from '@superset-ui/core';
-import { toggleActive, deleteActiveReport } from 'src/reports/actions/reports';
 import { chartPropShape } from 'src/dashboard/util/propShapes';
 import AlteredSliceTag from 'src/components/AlteredSliceTag';
 import Button from 'src/components/Button';
@@ -37,6 +35,7 @@ import PropertiesModal from 'src/explore/components/PropertiesModal';
 import { sliceUpdated } from 'src/explore/actions/exploreActions';
 import { PageHeaderWithActions } from 'src/components/PageHeaderWithActions';
 import MetadataBar, { MetadataType } from 'src/components/MetadataBar';
+import { setSaveChartModalVisibility } from 'src/explore/actions/saveModalActions';
 import { useExploreAdditionalActionsMenu } from '../useExploreAdditionalActionsMenu';
 
 const propTypes = {
@@ -82,12 +81,11 @@ export const ExploreChartHeader = ({
   canOverwrite,
   canDownload,
   isStarred,
-  sliceUpdated,
   sliceName,
-  onSaveChart,
   saveDisabled,
   metadata,
 }) => {
+  const dispatch = useDispatch();
   const { latestQueryFormData, sliceFormData } = chart;
   const [isPropertiesModalOpen, setIsPropertiesModalOpen] = useState(false);
 
@@ -141,6 +139,17 @@ export const ExploreChartHeader = ({
     setIsPropertiesModalOpen(false);
   };
 
+  const showModal = useCallback(() => {
+    dispatch(setSaveChartModalVisibility(true));
+  }, [dispatch]);
+
+  const updateSlice = useCallback(
+    slice => {
+      dispatch(sliceUpdated(slice));
+    },
+    [dispatch],
+  );
+
   const [menu, isDropdownVisible, setIsDropdownVisible] =
     useExploreAdditionalActionsMenu(
       latestQueryFormData,
@@ -244,7 +253,7 @@ export const ExploreChartHeader = ({
             <div>
               <Button
                 buttonStyle="secondary"
-                onClick={onSaveChart}
+                onClick={showModal}
                 disabled={saveDisabled}
                 data-test="query-save-button"
                 css={saveButtonStyles}
@@ -265,7 +274,7 @@ export const ExploreChartHeader = ({
         <PropertiesModal
           show={isPropertiesModalOpen}
           onHide={closePropertiesModal}
-          onSave={sliceUpdated}
+          onSave={updateSlice}
           slice={slice}
         />
       )}
@@ -275,11 +284,4 @@ export const ExploreChartHeader = ({
 
 ExploreChartHeader.propTypes = propTypes;
 
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(
-    { sliceUpdated, toggleActive, deleteActiveReport },
-    dispatch,
-  );
-}
-
-export default connect(null, mapDispatchToProps)(ExploreChartHeader);
+export default ExploreChartHeader;