feat: Pass dashboard context to explore through local storage (#20743)

* feat: Pass dashboard context to explore through local storage * Remove console log * Remove unused local storage keys * Fix lint * Fix link * Fix UT * fix lint * fix prettier * Fix bug * Fix bug with some sample dashboards * Roll back unnecessary change * style fix * Add comments * Fix lint * Address code review comments * Fix
apache · Jul 25, 2022 · 0945d4a · 0945d4a
1 parent 644148b
commit 0945d4a
Show file tree

Hide file tree

Showing 31 changed files with 850 additions and 247 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -299,6 +299,7 @@
     "exports-loader": "^0.7.0",
     "fetch-mock": "^7.7.3",
     "fork-ts-checker-webpack-plugin": "^6.3.3",
+    "history": "^4.10.1",
     "ignore-styles": "^5.0.1",
     "imports-loader": "^3.0.0",
     "jest": "^26.6.3",

diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/Dashboard.ts b/superset-frontend/packages/superset-ui-core/src/query/types/Dashboard.ts
@@ -116,6 +116,10 @@ export type Filters = {
   [filterId: string]: Filter | Divider;
 };
 
+export type PartialFilters = {
+  [filterId: string]: Partial<Filters[keyof Filters]>;
+};
+
 export type NativeFiltersState = {
   filters: Filters;
   filterSets: FilterSets;

diff --git a/superset-frontend/spec/fixtures/mockNativeFilters.ts b/superset-frontend/spec/fixtures/mockNativeFilters.ts
@@ -145,6 +145,7 @@ export const singleNativeFiltersState = {
       inverseSelection: false,
       allowsMultipleValues: false,
       isRequired: false,
+      chartsInScope: [230],
     },
   },
 };

diff --git a/superset-frontend/src/components/EditableTitle/index.tsx b/superset-frontend/src/components/EditableTitle/index.tsx
@@ -16,9 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { MouseEvent, useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
+import { Link } from 'react-router-dom';
 import cx from 'classnames';
-import { css, styled, t } from '@superset-ui/core';
+import { css, styled, SupersetTheme, t } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
 import CertifiedBadge from '../CertifiedBadge';
 
@@ -37,7 +38,7 @@ export interface EditableTitleProps {
   placeholder?: string;
   certifiedBy?: string;
   certificationDetails?: string;
-  onClickTitle?: (event: MouseEvent) => void;
+  url?: string;
 }
 
 const StyledCertifiedBadge = styled(CertifiedBadge)`
@@ -58,7 +59,7 @@ export default function EditableTitle({
   placeholder = '',
   certifiedBy,
   certificationDetails,
-  onClickTitle,
+  url,
   // rest is related to title tooltip
   ...rest
 }: EditableTitleProps) {
@@ -218,20 +219,20 @@ export default function EditableTitle({
   }
   if (!canEdit) {
     // don't actually want an input in this case
-    titleComponent = onClickTitle ? (
-      <span
-        role="button"
-        onClick={onClickTitle}
-        tabIndex={0}
+    titleComponent = url ? (
+      <Link
+        to={url}
         data-test="editable-title-input"
-        css={css`
+        css={(theme: SupersetTheme) => css`
+          color: ${theme.colors.grayscale.dark1};
+          text-decoration: none;
           :hover {
             text-decoration: underline;
           }
         `}
       >
         {value}
-      </span>
+      </Link>
     ) : (
       <span data-test="editable-title-input">{value}</span>
     );

diff --git a/superset-frontend/src/constants.ts b/superset-frontend/src/constants.ts
@@ -65,7 +65,7 @@ export const URL_PARAMS = {
   },
   sliceId: {
     name: 'slice_id',
-    type: 'string',
+    type: 'number',
   },
   datasourceId: {
     name: 'datasource_id',
@@ -103,6 +103,10 @@ export const URL_PARAMS = {
     name: 'save_action',
     type: 'string',
   },
+  dashboardPageId: {
+    name: 'dashboard_page_id',
+    type: 'string',
+  },
 } as const;
 
 export const RESERVED_CHART_URL_PARAMS: string[] = [

diff --git a/superset-frontend/src/dashboard/actions/hydrate.js b/superset-frontend/src/dashboard/actions/hydrate.js
@@ -55,6 +55,8 @@ import { FeatureFlag, isFeatureEnabled } from '../../featureFlags';
 import extractUrlParams from '../util/extractUrlParams';
 import getNativeFilterConfig from '../util/filterboxMigrationHelper';
 import { updateColorSchema } from './dashboardInfo';
+import { getChartIdsInFilterScope } from '../util/getChartIdsInFilterScope';
+import updateComponentParentsList from '../util/updateComponentParentsList';
 
 export const HYDRATE_DASHBOARD = 'HYDRATE_DASHBOARD';
 
@@ -256,6 +258,19 @@ export const hydrateDashboard =
         layout[layoutId].meta.sliceName = slice.slice_name;
       }
     });
+
+    // make sure that parents tree is built
+    if (
+      Object.values(layout).some(
+        element => element.id !== DASHBOARD_ROOT_ID && !element.parents,
+      )
+    ) {
+      updateComponentParentsList({
+        currentComponent: layout[DASHBOARD_ROOT_ID],
+        layout,
+      });
+    }
+
     buildActiveFilters({
       dashboardFilters,
       components: layout,
@@ -333,9 +348,21 @@ export const hydrateDashboard =
                 rootPath: [DASHBOARD_ROOT_ID],
                 excluded: [chartId], // By default it doesn't affects itself
               },
+              chartsInScope: Array.from(sliceIds),
             },
           };
         }
+        if (
+          behaviors.includes(Behavior.INTERACTIVE_CHART) &&
+          !metadata.chart_configuration[chartId].crossFilters?.chartsInScope
+        ) {
+          metadata.chart_configuration[chartId].crossFilters.chartsInScope =
+            getChartIdsInFilterScope(
+              metadata.chart_configuration[chartId].crossFilters.scope,
+              charts,
+              dashboardLayout.present,
+            );
+        }
       });
     }
 

diff --git a/...set-frontend/src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingModal.tsx b/...set-frontend/src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingModal.tsx
@@ -24,6 +24,8 @@ import Button from 'src/components/Button';
 import { AntdForm } from 'src/components';
 import { setChartConfiguration } from 'src/dashboard/actions/dashboardInfo';
 import { ChartConfiguration } from 'src/dashboard/reducers/types';
+import { ChartsState, Layout, RootState } from 'src/dashboard/types';
+import { getChartIdsInFilterScope } from 'src/dashboard/util/getChartIdsInFilterScope';
 import CrossFilterScopingForm from './CrossFilterScopingForm';
 import { CrossFilterScopingFormType } from './types';
 import { StyledForm } from '../nativeFilters/FiltersConfigModal/FiltersConfigModal';
@@ -44,14 +46,24 @@ const CrossFilterScopingModal: FC<CrossFilterScopingModalProps> = ({
   const chartConfig = useSelector<any, ChartConfiguration>(
     ({ dashboardInfo }) => dashboardInfo?.metadata?.chart_configuration,
   );
+  const charts = useSelector<RootState, ChartsState>(state => state.charts);
+  const layout = useSelector<RootState, Layout>(
+    state => state.dashboardLayout.present,
+  );
   const scope = chartConfig?.[chartId]?.crossFilters?.scope;
   const handleSave = () => {
+    const chartsInScope = getChartIdsInFilterScope(
+      form.getFieldValue('scope'),
+      charts,
+      layout,
+    );
+
     dispatch(
       setChartConfiguration({
         ...chartConfig,
         [chartId]: {
           id: chartId,
-          crossFilters: { scope: form.getFieldValue('scope') },
+          crossFilters: { scope: form.getFieldValue('scope'), chartsInScope },
         },
       }),
     );

diff --git a/superset-frontend/src/dashboard/components/Dashboard.test.jsx b/superset-frontend/src/dashboard/components/Dashboard.test.jsx
@@ -31,7 +31,6 @@ import datasources from 'spec/fixtures/mockDatasource';
 import {
   extraFormData,
   NATIVE_FILTER_ID,
-  layoutForSingleNativeFilter,
   singleNativeFiltersState,
   dataMaskWith1Filter,
 } from 'spec/fixtures/mockNativeFilters';
@@ -157,7 +156,7 @@ describe('Dashboard', () => {
           ...getAllActiveFilters({
             dataMask: dataMaskWith1Filter,
             nativeFilters: singleNativeFiltersState.filters,
-            layout: layoutForSingleNativeFilter,
+            allSliceIds: [227, 229, 230],
           }),
         },
       });

diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts b/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts
@@ -28,7 +28,6 @@ import {
 } from '@superset-ui/core';
 import { NO_TIME_RANGE, TIME_FILTER_MAP } from 'src/explore/constants';
 import { getChartIdsInFilterBoxScope } from 'src/dashboard/util/activeDashboardFilters';
-import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
 import { ChartConfiguration } from 'src/dashboard/reducers/types';
 import { Layout } from 'src/dashboard/types';
 import { areObjectsEqual } from 'src/reduxUtils';
@@ -293,18 +292,9 @@ export const selectNativeIndicatorsForChart = (
   let crossFilterIndicators: any = [];
   if (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
     const dashboardLayoutValues = Object.values(dashboardLayout);
-    const chartLayoutItem = dashboardLayoutValues.find(
-      layoutItem => layoutItem?.meta?.chartId === chartId,
-    );
     crossFilterIndicators = Object.values(chartConfiguration)
-      .filter(
-        chartConfig =>
-          !chartConfig.crossFilters.scope.excluded.includes(chartId) &&
-          chartConfig.crossFilters.scope.rootPath.some(
-            elementId =>
-              chartLayoutItem?.type === CHART_TYPE &&
-              chartLayoutItem?.parents?.includes(elementId),
-          ),
+      .filter(chartConfig =>
+        chartConfig.crossFilters.chartsInScope.includes(chartId),
       )
       .map(chartConfig => {
         const filterState = dataMask[chartConfig.id]?.filterState;