feat: have user go to explore after dataset creation (#19965)

* feat: have user go to explore after dataset creation * change flow to create chart * fix lint * update with suggestions and add store for toasts * fix ts * fix test * lint
apache · Jul 12, 2022 · c795dc2 · c795dc2
1 parent 8d4994a
commit c795dc2
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 14 deletions.
diff --git a/superset-frontend/src/addSlice/AddSliceContainer.test.tsx b/superset-frontend/src/addSlice/AddSliceContainer.test.tsx
@@ -17,17 +17,19 @@
  * under the License.
  */
 import React from 'react';
-import { ReactWrapper } from 'enzyme';
+import { ReactWrapper, mount } from 'enzyme';
 import Button from 'src/components/Button';
 import { AsyncSelect } from 'src/components';
-import AddSliceContainer, {
+import {
+  AddSliceContainer,
   AddSliceContainerProps,
   AddSliceContainerState,
 } from 'src/addSlice/AddSliceContainer';
 import VizTypeGallery from 'src/explore/components/controls/VizTypeControl/VizTypeGallery';
-import { styledMount as mount } from 'spec/helpers/theming';
 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',
@@ -61,7 +63,13 @@ const mockUserWithDatasetWrite: UserWithPermissionsAndRoles = {
 };
 
 async function getWrapper(user = mockUser) {
-  const wrapper = mount(<AddSliceContainer user={user} />) as ReactWrapper<
+  const wrapper = mount(
+    <AddSliceContainer user={user} addSuccessToast={() => null} />,
+    {
+      wrappingComponent: ThemeProvider,
+      wrappingComponentProps: { theme: supersetTheme },
+    },
+  ) as unknown as ReactWrapper<
     AddSliceContainerProps,
     AddSliceContainerState,
     AddSliceContainer

diff --git a/superset-frontend/src/addSlice/AddSliceContainer.tsx b/superset-frontend/src/addSlice/AddSliceContainer.tsx
@@ -18,17 +18,20 @@
  */
 import React, { ReactNode } from 'react';
 import rison from 'rison';
+import querystring from 'query-string';
 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 Button from 'src/components/Button';
 import { AsyncSelect, Steps } from 'src/components';
 import { Tooltip } from 'src/components/Tooltip';
+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';
 
@@ -41,10 +44,12 @@ type Dataset = {
 
 export type AddSliceContainerProps = {
   user: UserWithPermissionsAndRoles;
+  addSuccessToast: (arg: string) => void;
 };
 
 export type AddSliceContainerState = {
   datasource?: { label: string; value: string };
+  datasetName?: string | string[] | null;
   vizType: string | null;
   canCreateDataset: boolean;
 };
@@ -201,7 +206,7 @@ const StyledStepDescription = styled.div`
   `}
 `;
 
-export default class AddSliceContainer extends React.PureComponent<
+export class AddSliceContainer extends React.PureComponent<
   AddSliceContainerProps,
   AddSliceContainerState
 > {
@@ -224,6 +229,21 @@ export default class AddSliceContainer extends React.PureComponent<
     this.onVizTypeDoubleClick = this.onVizTypeDoubleClick.bind(this);
   }
 
+  componentDidMount() {
+    const params = querystring.parse(window.location.search)?.dataset as string;
+    if (params) {
+      this.loadDatasources(params, 0, 1).then(r => {
+        const datasource = r.data[0];
+        // override here to force styling of option label
+        // which expects a reactnode instead of string
+        // @ts-expect-error
+        datasource.label = datasource.customLabel;
+        this.setState({ datasource });
+      });
+      this.props.addSuccessToast(t('The dataset has been saved'));
+    }
+  }
+
   exploreUrl() {
     const dashboardId = getUrlParam(URL_PARAMS.dashboardId);
     let url = `/explore/?viz_type=${this.state.vizType}&datasource=${this.state.datasource?.value}`;
@@ -397,3 +417,5 @@ export default class AddSliceContainer extends React.PureComponent<
     );
   }
 }
+
+export default withToasts(AddSliceContainer);
diff --git a/superset-frontend/src/addSlice/App.tsx b/superset-frontend/src/addSlice/App.tsx
@@ -18,8 +18,14 @@
  */
 import React from 'react';
 import { hot } from 'react-hot-loader/root';
+import thunk from 'redux-thunk';
+import { createStore, compose, applyMiddleware, combineReducers } from 'redux';
+import { Provider } from 'react-redux';
 import { ThemeProvider } from '@superset-ui/core';
 import { GlobalStyles } from 'src/GlobalStyles';
+import messageToastReducer from 'src/components/MessageToasts/reducers';
+import { initEnhancer } from 'src/reduxUtils';
+import ToastContainer from 'src/components/MessageToasts/ToastContainer';
 import setupApp from '../setup/setupApp';
 import setupPlugins from '../setup/setupPlugins';
 import { DynamicPluginProvider } from '../components/DynamicPlugins';
@@ -35,15 +41,26 @@ const bootstrapData = JSON.parse(
   addSliceContainer?.getAttribute('data-bootstrap') || '{}',
 );
 
+const store = createStore(
+  combineReducers({
+    messageToasts: messageToastReducer,
+  }),
+  {},
+  compose(applyMiddleware(thunk), initEnhancer(false)),
+);
+
 initFeatureFlags(bootstrapData.common.feature_flags);
 
 const App = () => (
-  <ThemeProvider theme={theme}>
-    <GlobalStyles />
-    <DynamicPluginProvider>
-      <AddSliceContainer user={bootstrapData.user} />
-    </DynamicPluginProvider>
-  </ThemeProvider>
+  <Provider store={store}>
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <DynamicPluginProvider>
+        <AddSliceContainer user={bootstrapData.user} />
+        <ToastContainer />
+      </DynamicPluginProvider>
+    </ThemeProvider>
+  </Provider>
 );
 
 export default hot(App);
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDatasetModal.tsx
@@ -50,7 +50,6 @@ const TableSelectorContainer = styled.div`
 
 const DatasetModal: FunctionComponent<DatasetModalProps> = ({
   addDangerToast,
-  addSuccessToast,
   onDatasetAdd,
   onHide,
   show,
@@ -123,7 +122,7 @@ const DatasetModal: FunctionComponent<DatasetModalProps> = ({
       if (onDatasetAdd) {
         onDatasetAdd({ id: response.id, ...response });
       }
-      addSuccessToast(t('The dataset has been saved'));
+      window.location.href = `/chart/add?dataset=${currentTableName}`;
       hide();
     });
   };
@@ -134,7 +133,7 @@ const DatasetModal: FunctionComponent<DatasetModalProps> = ({
       primaryButtonLoading={loading}
       onHandledPrimaryAction={onSave}
       onHide={hide}
-      primaryButtonName={t('Add')}
+      primaryButtonName={t('Add Dataset and Create Chart')}
       show={show}
       title={t('Add dataset')}
     >