chore: Restructure explore redux state (#20448)

* chore: Restructure explore redux state

* fixes

* fix tests

* add new tests

* Fix type

* Address comments

* Fix bug

* Fix import

* Add new test

* Move unsaved chart id to a constant

* Add todo

superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx

@@ -26,7 +26,6 @@ import ExploreViewContainer from '.';
 
 const reduxState = {
   explore: {
-    common: { conf: { SUPERSET_WEBSERVER_TIMEOUT: 60 } },
     controls: {
       datasource: { value: '1__table' },
       viz_type: { value: 'table' },
@@ -37,10 +36,10 @@ const reduxState = {
       columns: [{ is_dttm: false }],
       metrics: [{ id: 1, metric_name: 'count' }],
     },
-    user: {
-      userId: 1,
-    },
     isStarred: false,
+    slice: {
+      slice_id: 1,
+    },
   },
   charts: {
     1: {
@@ -50,6 +49,18 @@ const reduxState = {
       },
     },
   },
+  user: {
+    userId: 1,
+  },
+  common: { conf: { SUPERSET_WEBSERVER_TIMEOUT: 60 } },
+  datasources: {
+    '1__table': {
+      id: 1,
+      type: 'table',
+      columns: [{ is_dttm: false }],
+      metrics: [{ id: 1, metric_name: 'count' }],
+    },
+  },
 };
 
 const key = 'aWrs7w29sd';
@@ -67,6 +78,7 @@ jest.mock('lodash/debounce', () => ({
 fetchMock.post('glob:*/api/v1/explore/form_data*', { key });
 fetchMock.put('glob:*/api/v1/explore/form_data*', { key });
 fetchMock.get('glob:*/api/v1/explore/form_data*', {});
+fetchMock.get('glob:*/favstar/slice*', { count: 0 });
 
 const renderWithRouter = (withKey?: boolean) => {
   const path = '/superset/explore/';

superset-frontend/src/explore/components/ExploreViewContainer/index.jsx

@@ -37,6 +37,12 @@ import {
   LocalStorageKeys,
 } from 'src/utils/localStorageHelpers';
 import { RESERVED_CHART_URL_PARAMS, URL_PARAMS } from 'src/constants';
+import { areObjectsEqual } from 'src/reduxUtils';
+import * as logActions from 'src/logger/actions';
+import {
+  LOG_ACTIONS_MOUNT_EXPLORER,
+  LOG_ACTIONS_CHANGE_EXPLORE_CONTROLS,
+} from 'src/logger/LogUtils';
 import { getUrlParam } from 'src/utils/urlUtils';
 import cx from 'classnames';
 import * as chartActions from 'src/components/Chart/chartAction';
@@ -44,21 +50,16 @@ import { fetchDatasourceMetadata } from 'src/dashboard/actions/datasources';
 import { chartPropShape } from 'src/dashboard/util/propShapes';
 import { mergeExtraFormData } from 'src/dashboard/components/nativeFilters/utils';
 import { postFormData, putFormData } from 'src/explore/exploreUtils/formData';
+import { datasourcesActions } from 'src/explore/actions/datasourcesActions';
+import { mountExploreUrl } from 'src/explore/exploreUtils';
+import { getFormDataFromControls } from 'src/explore/controlUtils';
+import * as exploreActions from 'src/explore/actions/exploreActions';
+import * as saveModalActions from 'src/explore/actions/saveModalActions';
 import { useTabId } from 'src/hooks/useTabId';
 import ExploreChartPanel from '../ExploreChartPanel';
 import ConnectedControlPanelsContainer from '../ControlPanelsContainer';
 import SaveModal from '../SaveModal';
 import DataSourcePanel from '../DatasourcePanel';
-import { mountExploreUrl } from '../../exploreUtils';
-import { areObjectsEqual } from '../../../reduxUtils';
-import { getFormDataFromControls } from '../../controlUtils';
-import * as exploreActions from '../../actions/exploreActions';
-import * as saveModalActions from '../../actions/saveModalActions';
-import * as logActions from '../../../logger/actions';
-import {
-  LOG_ACTIONS_MOUNT_EXPLORER,
-  LOG_ACTIONS_CHANGE_EXPLORE_CONTROLS,
-} from '../../../logger/LogUtils';
 import ConnectedExploreChartHeader from '../ExploreChartHeader';
 
 const propTypes = {
@@ -693,53 +694,62 @@ function ExploreViewContainer(props) {
 ExploreViewContainer.propTypes = propTypes;
 
 function mapStateToProps(state) {
-  const { explore, charts, impressionId, dataMask, reports } = state;
-  const form_data = getFormDataFromControls(explore.controls);
+  const {
+    explore,
+    charts,
+    common,
+    impressionId,
+    dataMask,
+    reports,
+    datasources,
+    user,
+  } = state;
+  const { controls, slice } = explore;
+  const form_data = getFormDataFromControls(controls);
+  const slice_id = form_data.slice_id ?? slice?.slice_id ?? 0; // 0 - unsaved chart
   form_data.extra_form_data = mergeExtraFormData(
     { ...form_data.extra_form_data },
     {
-      ...dataMask[form_data.slice_id ?? 0]?.ownState, // 0 - unsaved chart
+      ...dataMask[slice_id]?.ownState,
     },
   );
-  const chartKey = Object.keys(charts)[0];
-  const chart = charts[chartKey];
+  const chart = charts[slice_id];
 
   let dashboardId = Number(explore.form_data?.dashboardId);
   if (Number.isNaN(dashboardId)) {
     dashboardId = undefined;
   }
 
+  const datasource = datasources[form_data.datasource];
+
   return {
     isDatasourceMetaLoading: explore.isDatasourceMetaLoading,
-    datasource: explore.datasource,
-    datasource_type: explore.datasource.type,
-    datasourceId: explore.datasource_id,
+    datasource,
+    datasource_type: datasource.type,
+    datasourceId: datasource.datasource_id,
     dashboardId,
     controls: explore.controls,
-    can_overwrite: !!explore.can_overwrite,
     can_add: !!explore.can_add,
     can_download: !!explore.can_download,
-    column_formats: explore.datasource
-      ? explore.datasource.column_formats
-      : null,
-    containerId: explore.slice
-      ? `slice-container-${explore.slice.slice_id}`
+    can_overwrite: !!explore.can_overwrite,
+    column_formats: datasource?.column_formats ?? null,
+    containerId: slice
+      ? `slice-container-${slice.slice_id}`
       : 'slice-container',
     isStarred: explore.isStarred,
-    slice: explore.slice,
-    sliceName: explore.sliceName,
+    slice,
+    sliceName: explore.sliceName ?? slice?.slice_name ?? null,
     triggerRender: explore.triggerRender,
     form_data,
-    table_name: form_data.datasource_name,
+    table_name: datasource.table_name,
     vizType: form_data.viz_type,
-    standalone: explore.standalone,
-    force: explore.force,
-    forcedHeight: explore.forced_height,
+    standalone: !!explore.standalone,
+    force: !!explore.force,
     chart,
-    timeout: explore.common.conf.SUPERSET_WEBSERVER_TIMEOUT,
-    ownState: dataMask[form_data.slice_id ?? 0]?.ownState, // 0 - unsaved chart
+    timeout: common.conf.SUPERSET_WEBSERVER_TIMEOUT,
+    ownState: dataMask[slice_id]?.ownState,
     impressionId,
-    user: explore.user,
+    user,
     exploreState: explore,
     reports,
   };
@@ -748,6 +758,7 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
   const actions = {
     ...exploreActions,
+    ...datasourcesActions,
     ...saveModalActions,
     ...chartActions,
     ...logActions,