feat: Use SPA navigation between AddSlice and Dataset list pages (#21683)

superset-frontend/src/addSlice/AddSliceContainer.tsx

@@ -23,7 +23,7 @@ import { styled, t, SupersetClient, JsonResponse } from '@superset-ui/core';
 import { getUrlParam } from 'src/utils/urlUtils';
 import { URL_PARAMS } from 'src/constants';
 import { isNullish } from 'src/utils/common';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 import Button from 'src/components/Button';
 import { AsyncSelect, Steps } from 'src/components';
 import { Tooltip } from 'src/components/Tooltip';
@@ -32,7 +32,6 @@ import withToasts from 'src/components/MessageToasts/withToasts';
 import VizTypeGallery, {
   MAX_ADVISABLE_VIZ_GALLERY_WIDTH,
 } from 'src/explore/components/controls/VizTypeControl/VizTypeGallery';
-import _ from 'lodash';
 import { findPermission } from 'src/utils/findPermission';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
 
@@ -329,18 +328,18 @@ export class AddSliceContainer extends React.PureComponent<
     const isButtonDisabled = this.isBtnDisabled();
     const datasetHelpText = this.state.canCreateDataset ? (
       <span data-test="dataset-write">
-        <a
-          href="/tablemodelview/list/#create"
-          rel="noopener noreferrer"
-          target="_blank"
+        <Link
+          to="/tablemodelview/list/#create"
+          data-test="add-chart-new-dataset"
         >
           {t('Add a dataset')}
-        </a>
+        </Link>
         {` ${t('or')} `}
         <a
           href="https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/#registering-a-new-table"
           rel="noopener noreferrer"
           target="_blank"
+          data-test="add-chart-new-dataset-instructions"
         >
           {`${t('view instructions')} `}
           <i className="fa fa-external-link" />

superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import React, { FunctionComponent, useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import { styled, t } from '@superset-ui/core';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
 import Modal from 'src/components/Modal';
@@ -54,6 +55,7 @@ const DatasetModal: FunctionComponent<DatasetModalProps> = ({
   onHide,
   show,
 }) => {
+  const history = useHistory();
   const [currentDatabase, setCurrentDatabase] = useState<
     DatabaseObject | undefined
   >();
@@ -100,9 +102,13 @@ const DatasetModal: FunctionComponent<DatasetModalProps> = ({
     setDisableSave(true);
   };
 
-  const hide = () => {
-    setItem(LocalStorageKeys.db, null);
+  const cleanup = () => {
     clearModal();
+    setItem(LocalStorageKeys.db, null);
+  };
+
+  const hide = () => {
+    cleanup();
     onHide();
   };
 
@@ -122,8 +128,8 @@ const DatasetModal: FunctionComponent<DatasetModalProps> = ({
       if (onDatasetAdd) {
         onDatasetAdd({ id: response.id, ...response });
       }
-      window.location.href = `/chart/add?dataset=${currentTableName}`;
-      hide();
+      history.push(`/chart/add?dataset=${currentTableName}`);
+      cleanup();
     });
   };