refactor: Renders addSlice in SPA (apache#20675)

* refactor: Renders addSlice in SPA

* Removes unused imports

* Fixes test imports

* Removes unnecessary imports

Author: michael-s-molina

superset-frontend/src/addSlice/AddSliceContainer.test.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { ReactWrapper, mount } from 'enzyme';
+import { ReactWrapper } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import Button from 'src/components/Button';
 import { AsyncSelect } from 'src/components';
 import {
@@ -28,8 +29,6 @@ import {
 import VizTypeGallery from 'src/explore/components/controls/VizTypeControl/VizTypeGallery';
 import { act } from 'spec/helpers/testing-library';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
-import { ThemeProvider } from '@emotion/react';
-import { supersetTheme } from '@superset-ui/core';
 
 const datasource = {
   value: '1',
@@ -62,13 +61,20 @@ const mockUserWithDatasetWrite: UserWithPermissionsAndRoles = {
   isAnonymous: false,
 };
 
+// We don't need the actual implementation for the tests
+const routeProps = {
+  history: {} as any,
+  location: {} as any,
+  match: {} as any,
+};
+
 async function getWrapper(user = mockUser) {
   const wrapper = mount(
-    <AddSliceContainer user={user} addSuccessToast={() => null} />,
-    {
-      wrappingComponent: ThemeProvider,
-      wrappingComponentProps: { theme: supersetTheme },
-    },
+    <AddSliceContainer
+      user={user}
+      addSuccessToast={() => null}
+      {...routeProps}
+    />,
   ) as unknown as ReactWrapper<
     AddSliceContainerProps,
     AddSliceContainerState,

superset-frontend/src/addSlice/AddSliceContainer.tsx

@@ -23,6 +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 Button from 'src/components/Button';
 import { AsyncSelect, Steps } from 'src/components';
 import { Tooltip } from 'src/components/Tooltip';
@@ -42,10 +43,10 @@ type Dataset = {
   datasource_type: string;
 };
 
-export type AddSliceContainerProps = {
+export interface AddSliceContainerProps extends RouteComponentProps {
   user: UserWithPermissionsAndRoles;
   addSuccessToast: (arg: string) => void;
-};
+}
 
 export type AddSliceContainerState = {
   datasource?: { label: string; value: string };
@@ -254,7 +255,7 @@ export class AddSliceContainer extends React.PureComponent<
   }
 
   gotoSlice() {
-    window.location.href = this.exploreUrl();
+    this.props.history.push(this.exploreUrl());
   }
 
   changeDatasource(datasource: { label: string; value: string }) {
@@ -418,4 +419,4 @@ export class AddSliceContainer extends React.PureComponent<
   }
 }
 
-export default withToasts(AddSliceContainer);
+export default withRouter(withToasts(AddSliceContainer));

superset-frontend/src/addSlice/App.tsx

@@ -41,7 +41,7 @@ import handleResourceExport from 'src/utils/export';
 import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
 import SubMenu, { SubMenuProps } from 'src/views/components/SubMenu';
 import FaveStar from 'src/components/FaveStar';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import ListView, {
   Filter,
   FilterOperator,
@@ -153,6 +153,8 @@ function ChartList(props: ChartListProps) {
     user: { userId },
   } = props;
 
+  const history = useHistory();
+
   const {
     state: {
       loading,
@@ -653,7 +655,7 @@ function ChartList(props: ChartListProps) {
       ),
       buttonStyle: 'primary',
       onClick: () => {
-        window.location.assign('/chart/add');
+        history.push('/chart/add');
       },
     });
 

superset-frontend/src/addSlice/index.tsx

@@ -321,13 +321,23 @@ const RightMenu = ({
                   roles,
                 ) && (
                   <Menu.Item key={menu.label}>
-                    <a href={menu.url}>
-                      <i
-                        data-test={`menu-item-${menu.label}`}
-                        className={`fa ${menu.icon}`}
-                      />{' '}
-                      {menu.label}
-                    </a>
+                    {isFrontendRoute(menu.url) ? (
+                      <Link to={menu.url || ''}>
+                        <i
+                          data-test={`menu-item-${menu.label}`}
+                          className={`fa ${menu.icon}`}
+                        />{' '}
+                        {menu.label}
+                      </Link>
+                    ) : (
+                      <a href={menu.url}>
+                        <i
+                          data-test={`menu-item-${menu.label}`}
+                          className={`fa ${menu.icon}`}
+                        />{' '}
+                        {menu.label}
+                      </a>
+                    )}
                   </Menu.Item>
                 )
               );

superset-frontend/src/views/CRUD/chart/ChartList.tsx

@@ -21,6 +21,12 @@ import React, { lazy } from 'react';
 // not lazy loaded since this is the home page.
 import Welcome from 'src/views/CRUD/welcome/Welcome';
 
+const AddSliceContainer = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "AddSliceContainer" */ 'src/addSlice/AddSliceContainer'
+    ),
+);
 const AnnotationLayersList = lazy(
   () =>
     import(
@@ -117,6 +123,10 @@ export const routes: Routes = [
     path: '/superset/dashboard/:idOrSlug/',
     Component: DashboardRoute,
   },
+  {
+    path: '/chart/add',
+    Component: AddSliceContainer,
+  },
   {
     path: '/chart/list/',
     Component: ChartList,

superset-frontend/src/views/components/RightMenu.tsx

@@ -209,7 +209,6 @@ const config = {
     menu: addPreamble('src/views/menu.tsx'),
     spa: addPreamble('/src/views/index.tsx'),
     embedded: addPreamble('/src/embedded/index.tsx'),
-    addSlice: addPreamble('/src/addSlice/index.tsx'),
     sqllab: addPreamble('/src/SqlLab/index.tsx'),
     profile: addPreamble('/src/profile/index.tsx'),
     showSavedQuery: [path.join(APP_DIR, '/src/showSavedQuery/index.jsx')],

superset-frontend/src/views/routes.tsx

@@ -14,9 +14,6 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
-import json
-
-from flask import g
 from flask_appbuilder import expose, has_access
 from flask_appbuilder.models.sqla.interface import SQLAInterface
 from flask_babel import lazy_gettext as _
@@ -26,9 +23,8 @@
 from superset.models.slice import Slice
 from superset.superset_typing import FlaskResponse
 from superset.utils import core as utils
-from superset.views.base import common_bootstrap_payload, DeleteMixin, SupersetModelView
+from superset.views.base import DeleteMixin, SupersetModelView
 from superset.views.chart.mixin import SliceMixin
-from superset.views.utils import bootstrap_user_data
 
 
 class SliceModelView(
@@ -57,13 +53,7 @@ def pre_delete(self, item: "SliceModelView") -> None:
     @expose("/add", methods=["GET", "POST"])
     @has_access
     def add(self) -> FlaskResponse:
-        payload = {
-            "common": common_bootstrap_payload(),
-            "user": bootstrap_user_data(g.user, include_perms=True),
-        }
-        return self.render_template(
-            "superset/add_slice.html", bootstrap_data=json.dumps(payload)
-        )
+        return super().render_app_template()
 
     @expose("/list/")
     @has_access