refactor: handle explore page from dashbaord

superset-frontend/src/explore/ExplorePage.tsx

@@ -17,40 +17,97 @@
  * under the License.
  */
 import React, { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { makeApi, t } from '@superset-ui/core';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  makeApi,
+  t,
+  isDefined,
+  JsonObject,
+  QueryFormData,
+} from '@superset-ui/core';
 import Loading from 'src/components/Loading';
+import { Slice } from 'src/types/Chart';
+import { Dataset } from '@superset-ui/chart-controls';
 import { getParsedExploreURLParams } from './exploreUtils/getParsedExploreURLParams';
 import { hydrateExplore } from './actions/hydrateExplore';
+import { getDatasource } from './actions/datasourcesActions';
 import ExploreViewContainer from './components/ExploreViewContainer';
 import { ExploreResponsePayload } from './types';
 import { fallbackExploreInitialData } from './fixtures';
 import { addDangerToast } from '../components/MessageToasts/actions';
-import { isNullish } from '../utils/common';
+import { getUrlParam } from '../utils/urlUtils';
+import { URL_PARAMS } from '../constants';
+import { RootState } from '../dashboard/types';
 
 const loadErrorMessage = t('Failed to load chart data.');
 
-const fetchExploreData = () => {
-  const exploreUrlParams = getParsedExploreURLParams();
-  return makeApi<{}, ExploreResponsePayload>({
-    method: 'GET',
-    endpoint: 'api/v1/explore/',
-  })(exploreUrlParams);
+interface ResultInterface {
+  result: {
+    form_data: QueryFormData;
+    slice: Slice;
+    dataset: Dataset;
+  };
+}
+
+const isResult = (rv: JsonObject): rv is ResultInterface =>
+  rv?.result?.form_data &&
+  rv?.result?.slice &&
+  rv?.result?.dataset &&
+  isDefined(rv?.result?.dataset?.id) &&
+  isDefined(rv?.result?.dataset?.uid);
+
+const fetchExploreData = async (
+  rootState: RootState,
+  sliceId: string | null,
+): Promise<ResultInterface> => {
+  if (sliceId && rootState?.sliceEntities?.slices?.[sliceId]) {
+    // explore page from Dashboard
+    const slice = rootState?.sliceEntities?.slices?.[sliceId];
+    const form_data = slice?.form_data;
+    let dataset;
+    try {
+      const [datasourcePK] = form_data?.datasource?.split('__');
+      dataset = await getDatasource(datasourcePK);
+    } catch (err) {
+      throw new Error(err);
+    }
+
+    const rv = {
+      result: {
+        form_data,
+        slice,
+        dataset,
+      },
+    };
+    if (isResult(rv)) {
+      return rv;
+    }
+  }
+
+  try {
+    const rv = await makeApi<{}, ExploreResponsePayload>({
+      method: 'GET',
+      endpoint: 'api/v1/explore/',
+    })(getParsedExploreURLParams());
+    if (isResult(rv)) {
+      return rv;
+    }
+    throw loadErrorMessage;
+  } catch (err) {
+    throw new Error(err);
+  }
 };
 
 const ExplorePage = () => {
   const [isLoaded, setIsLoaded] = useState(false);
   const dispatch = useDispatch();
+  const rootState = useSelector(state => state) as RootState;
+  const sliceId = getUrlParam(URL_PARAMS.sliceId);
 
   useEffect(() => {
-    fetchExploreData()
+    fetchExploreData(rootState, sliceId)
       .then(({ result }) => {
-        if (isNullish(result.dataset?.id) && isNullish(result.dataset?.uid)) {
-          dispatch(hydrateExplore(fallbackExploreInitialData));
-          dispatch(addDangerToast(loadErrorMessage));
-        } else {
-          dispatch(hydrateExplore(result));
-        }
+        dispatch(hydrateExplore(result));
       })
       .catch(() => {
         dispatch(hydrateExplore(fallbackExploreInitialData));

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

@@ -19,8 +19,10 @@
 
 import { Dispatch } from 'redux';
 import { Dataset } from '@superset-ui/chart-controls';
+import { SupersetClient, t } from '@superset-ui/core';
 import { updateFormDataByDatasource } from './exploreActions';
 import { ExplorePageState } from '../types';
+import { getClientErrorObject } from '../../utils/getClientErrorObject';
 
 export const SET_DATASOURCE = 'SET_DATASOURCE';
 export interface SetDatasource {
@@ -41,9 +43,23 @@ export function changeDatasource(newDatasource: Dataset) {
   };
 }
 
+export const getDatasource = async (datasourceId: number): Promise<Dataset> => {
+  const endpoint = `/api/v1/dataset/${datasourceId}`;
+  try {
+    const response = await SupersetClient.get({ endpoint });
+    return response.json.result;
+  } catch (err) {
+    const clientError = await getClientErrorObject(err);
+    throw new Error(
+      clientError.message || clientError.error || t('Sorry, an error occurred'),
+    );
+  }
+};
+
 export const datasourcesActions = {
   setDatasource,
   changeDatasource,
+  getDatasource,
 };
 
 export type AnyDatasourcesAction = SetDatasource;

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

@@ -55,8 +55,7 @@ export const hydrateExplore =
     if (dashboardId) {
       initialFormData.dashboardId = dashboardId;
     }
-    const initialDatasource =
-      datasources?.[initialFormData.datasource] ?? dataset;
+    const initialDatasource = dataset;
 
     const initialExploreState = {
       form_data: initialFormData,

superset/datasets/api.py

@@ -129,6 +129,7 @@ class DatasetRestApi(BaseSupersetModelRestApi):
     ]
     show_select_columns = [
         "id",
+        "uid",
         "database.database_name",
         "database.id",
         "table_name",