chore(explore): Update chart save to use API endpoints

superset-frontend/src/constants.ts

@@ -99,6 +99,10 @@ export const URL_PARAMS = {
  name: 'show_database_modal',
  type: 'boolean',
  },
+ saveAction: {
+ name: 'save_action',
+ type: 'string',
+ },
 } as const;
 
 export const RESERVED_CHART_URL_PARAMS: string[] = [

superset-frontend/src/explore/ExplorePage.tsx

@@ -16,50 +16,58 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import { makeApi, t } from '@superset-ui/core';
 import Loading from 'src/components/Loading';
+import { addDangerToast } from 'src/components/MessageToasts/actions';
+import { isNullish } from 'src/utils/common';
+import { getUrlParam } from 'src/utils/urlUtils';
+import { URL_PARAMS } from 'src/constants';
 import { getParsedExploreURLParams } from './exploreUtils/getParsedExploreURLParams';
 import { hydrateExplore } from './actions/hydrateExplore';
 import ExploreViewContainer from './components/ExploreViewContainer';
 import { ExploreResponsePayload } from './types';
 import { fallbackExploreInitialData } from './fixtures';
-import { addDangerToast } from '../components/MessageToasts/actions';
-import { isNullish } from '../utils/common';
 
 const loadErrorMessage = t('Failed to load chart data.');
 
-const fetchExploreData = () => {
- const exploreUrlParams = getParsedExploreURLParams();
- return makeApi<{}, ExploreResponsePayload>({
+const fetchExploreData = (exploreUrlParams: URLSearchParams) =>
+ makeApi<{}, ExploreResponsePayload>({
  method: 'GET',
  endpoint: 'api/v1/explore/',
  })(exploreUrlParams);
-};
 
 const ExplorePage = () => {
  const [isLoaded, setIsLoaded] = useState(false);
+ const isExploreInitialized = useRef(false);
  const dispatch = useDispatch();
+ const location = useLocation();
 
  useEffect(() => {
- fetchExploreData()
- .then(({ result }) => {
- if (isNullish(result.dataset?.id) && isNullish(result.dataset?.uid)) {
+ const exploreUrlParams = getParsedExploreURLParams(location);
+ const isSaveAction = !!getUrlParam(URL_PARAMS.saveAction);
+ if (!isExploreInitialized.current || isSaveAction) {
+ fetchExploreData(exploreUrlParams)
+ .then(({ result }) => {
+ if (isNullish(result.dataset?.id) && isNullish(result.dataset?.uid)) {
+ dispatch(hydrateExplore(fallbackExploreInitialData));
+ dispatch(addDangerToast(loadErrorMessage));
+ } else {
+ dispatch(hydrateExplore(result));
+ }
+ })
+ .catch(() => {
  dispatch(hydrateExplore(fallbackExploreInitialData));
  dispatch(addDangerToast(loadErrorMessage));
- } else {
- dispatch(hydrateExplore(result));
- }
- })
- .catch(() => {
- dispatch(hydrateExplore(fallbackExploreInitialData));
- dispatch(addDangerToast(loadErrorMessage));
- })
- .finally(() => {
- setIsLoaded(true);
- });
- }, [dispatch]);
+ })
+ .finally(() => {
+ setIsLoaded(true);
+ isExploreInitialized.current = true;
+ });
+ }
+ }, [dispatch, location]);
 
  if (!isLoaded) {
  return <Loading />;

superset-frontend/src/explore/actions/hydrateExplore.ts

@@ -89,6 +89,7 @@ export const hydrateExplore =
  controlsTransferred: [],
  standalone: getUrlParam(URL_PARAMS.standalone),
  force: getUrlParam(URL_PARAMS.force),
+ sliceDashboards: initialFormData.dashboards,
  };
 
  // apply initial mapStateToProps for all controls, must execute AFTER

superset-frontend/src/explore/actions/saveModalActions.js

@@ -16,8 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { SupersetClient } from '@superset-ui/core';
-import { buildV1ChartDataPayload, getExploreUrl } from '../exploreUtils';
+import { SupersetClient, t } from '@superset-ui/core';
+import { addSuccessToast } from 'src/components/MessageToasts/actions';
+import { buildV1ChartDataPayload } from '../exploreUtils';
 
 export const FETCH_DASHBOARDS_SUCCEEDED = 'FETCH_DASHBOARDS_SUCCEEDED';
 export function fetchDashboardsSucceeded(choices) {
@@ -60,36 +61,140 @@ export function removeSaveModalAlert() {
  return { type: REMOVE_SAVE_MODAL_ALERT };
 }
 
-export function saveSlice(formData, requestParams) {
- return dispatch => {
- let url = getExploreUrl({
- formData,
- endpointType: 'base',
- force: false,
- curUrl: null,
- requestParams,
+export const getSlicePayload = (
+ sliceName,
+ formDataWithNativeFilters,
+ owners,
+) => {
+ const formData = {
+ ...formDataWithNativeFilters,
+ adhoc_filters: formDataWithNativeFilters.adhoc_filters?.filter(
+ f => !f.isExtra,
+ ),
+ };
+
+ const [datasourceId, datasourceType] = formData.datasource.split('__');
+ const payload = {
+ params: JSON.stringify(formData),
+ slice_name: sliceName,
+ viz_type: formData.viz_type,
+ datasource_id: parseInt(datasourceId, 10),
+ datasource_type: datasourceType,
+ dashboards: formData.dashboards,
+ owners,
+ query_context: JSON.stringify(
+ buildV1ChartDataPayload({
+ formData,
+ force: false,
+ resultFormat: 'json',
+ resultType: 'full',
+ setDataMask: null,
+ ownState: null,
+ }),
+ ),
+ };
+ return payload;
+};
+
+const addToasts = (isNewSlice, sliceName, addedToDashboard) => {
+ const toasts = [];
+ if (isNewSlice) {
+ toasts.push(addSuccessToast(t('Chart [%s] has been saved', sliceName)));
+ } else {
+ toasts.push(
+ addSuccessToast(t('Chart [%s] has been overwritten', sliceName)),
+ );
+ }
+
+ if (addedToDashboard) {
+ if (addedToDashboard.new) {
+ toasts.push(
+ addSuccessToast(
+ t(
+ 'Dashboard [%s] just got created and chart [%s] was added to it',
+ addedToDashboard.title,
+ sliceName,
+ ),
+ ),
+ );
+ } else {
+ toasts.push(
+ addSuccessToast(
+ t(
+ 'Chart [%s] was added to dashboard [%s]',
+ sliceName,
+ addedToDashboard.title,
+ ),
+ ),
+ );
+ }
+ }
+
+ return toasts;
+};
+
+// Update existing slice
+export const updateSlice =
+ ({ slice_id: sliceId, owners }, sliceName, formData, addedToDashboard) =>
+ async dispatch => {
+ try {
+ const response = await SupersetClient.put({
+ endpoint: `/api/v1/chart/${sliceId}`,
+ jsonPayload: getSlicePayload(sliceName, formData, owners),
+ });
+
+ dispatch(saveSliceSuccess());
+ addToasts(false, sliceName, addedToDashboard).map(dispatch);
+ return response.json;
+ } catch (error) {
+ dispatch(saveSliceFailed());
+ throw error;
+ }
+ };
+
+// Create new slice
+export const createSlice =
+ (sliceName, formData, addedToDashboard) => async dispatch => {
+ try {
+ const response = await SupersetClient.post({
+ endpoint: `/api/v1/chart/`,
+ jsonPayload: getSlicePayload(sliceName, formData),
+ });
+
+ dispatch(saveSliceSuccess());
+ addToasts(true, sliceName, addedToDashboard).map(dispatch);
+ return response.json;
+ } catch (error) {
+ dispatch(saveSliceFailed());
+ throw error;
+ }
+ };
+
+// Create new dashboard
+export const createDashboard = dashboardName => async dispatch => {
+ try {
+ const response = await SupersetClient.post({
+ endpoint: `/api/v1/dashboard/`,
+ jsonPayload: { dashboard_title: dashboardName },
  });
 
- // TODO: This will be removed in the next PR that will change the logic to save a slice
- url = url.replace('/explore', '/superset/explore');
+ return response.json;
+ } catch (error) {
+ dispatch(saveSliceFailed());
+ throw error;
+ }
+};
 
- // Save the query context so we can re-generate the data from Python
- // for alerts and reports
- const queryContext = buildV1ChartDataPayload({
- formData,
- force: false,
- resultFormat: 'json',
- resultType: 'full',
+// Get existing dashboard from ID
+export const getDashboard = dashboardId => async dispatch => {
+ try {
+ const response = await SupersetClient.get({
+ endpoint: `/api/v1/dashboard/${dashboardId}`,
  });
 
- return SupersetClient.post({
- url,
- postPayload: { form_data: formData, query_context: queryContext },
- })
- .then(response => {
- dispatch(saveSliceSuccess(response.json));
- return response.json;
- })
- .catch(() => dispatch(saveSliceFailed()));
- };
-}
+ return response.json;
+ } catch (error) {
+ dispatch(saveSliceFailed());
+ throw error;
+ }
+};