feat(cross-filters): Add scoping for cross filters (#13625)

* feat: cross filter modal

* refactor: add charts metadata

* refactor: add charts metadata

* feat: cross filters scoping

* fix: fix CR notes

* test: fix test

* lint: fix lint

superset-frontend/spec/javascripts/dashboard/components/Dashboard_spec.jsx

@@ -39,7 +39,7 @@ import dashboardInfo from 'spec/fixtures/mockDashboardInfo';
 import { dashboardLayout } from 'spec/fixtures/mockDashboardLayout';
 import dashboardState from 'spec/fixtures/mockDashboardState';
 import { sliceEntitiesForChart as sliceEntities } from 'spec/fixtures/mockSliceEntities';
-import { getActiveNativeFilters } from 'src/dashboard/util/activeDashboardNativeFilters';
+import { getAllActiveFilters } from 'src/dashboard/util/activeAllDashboardFilters';
 
 describe('Dashboard', () => {
   const props = {
@@ -154,9 +154,9 @@ describe('Dashboard', () => {
       wrapper.setProps({
         activeFilters: {
           ...OVERRIDE_FILTERS,
-          ...getActiveNativeFilters({
+          ...getAllActiveFilters({
             dataMask: dataMaskWith1Filter,
-            filters: singleNativeFiltersState.filters,
+            nativeFilters: singleNativeFiltersState.filters,
             layout: layoutForSingleNativeFilter,
           }),
         },

superset-frontend/spec/javascripts/dashboard/util/getFormDataWithExtraFilters_spec.ts

@@ -41,6 +41,7 @@ describe('getFormDataWithExtraFilters', () => {
     },
   };
   const mockArgs: GetFormDataWithExtraFiltersArguments = {
+    chartConfiguration: {},
     charts: {
       [chartId]: mockChart,
     },

superset-frontend/src/dashboard/actions/dashboardInfo.ts

@@ -0,0 +1,81 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Dispatch } from 'redux';
+import { makeApi } from '@superset-ui/core';
+import { ChartConfiguration, DashboardInfo } from '../reducers/types';
+
+export const DASHBOARD_INFO_UPDATED = 'DASHBOARD_INFO_UPDATED';
+
+// updates partially changed dashboard info
+export function dashboardInfoChanged(newInfo: { metadata: any }) {
+  return { type: DASHBOARD_INFO_UPDATED, newInfo };
+}
+export const SET_CHART_CONFIG_BEGIN = 'SET_CHART_CONFIG_BEGIN';
+export interface SetChartConfigBegin {
+  type: typeof SET_CHART_CONFIG_BEGIN;
+  chartConfiguration: ChartConfiguration;
+}
+export const SET_CHART_CONFIG_COMPLETE = 'SET_CHART_CONFIG_COMPLETE';
+export interface SetChartConfigComplete {
+  type: typeof SET_CHART_CONFIG_COMPLETE;
+  chartConfiguration: ChartConfiguration;
+}
+export const SET_CHART_CONFIG_FAIL = 'SET_CHART_CONFIG_FAIL';
+export interface SetChartConfigFail {
+  type: typeof SET_CHART_CONFIG_FAIL;
+  chartConfiguration: ChartConfiguration;
+}
+export const setChartConfiguration = (
+  chartConfiguration: ChartConfiguration,
+) => async (dispatch: Dispatch, getState: () => any) => {
+  dispatch({
+    type: SET_CHART_CONFIG_BEGIN,
+    chartConfiguration,
+  });
+  const { id, metadata } = getState().dashboardInfo;
+
+  // TODO extract this out when makeApi supports url parameters
+  const updateDashboard = makeApi<
+    Partial<DashboardInfo>,
+    { result: DashboardInfo }
+  >({
+    method: 'PUT',
+    endpoint: `/api/v1/dashboard/${id}`,
+  });
+
+  try {
+    const response = await updateDashboard({
+      json_metadata: JSON.stringify({
+        ...metadata,
+        chart_configuration: chartConfiguration,
+      }),
+    });
+    dispatch(
+      dashboardInfoChanged({
+        metadata: JSON.parse(response.result.json_metadata),
+      }),
+    );
+    dispatch({
+      type: SET_CHART_CONFIG_COMPLETE,
+      chartConfiguration,
+    });
+  } catch (err) {
+    dispatch({ type: SET_CHART_CONFIG_FAIL, chartConfiguration });
+  }
+};

superset-frontend/src/dashboard/actions/nativeFilters.ts

@@ -26,7 +26,7 @@ import {
   SET_DATA_MASK_FOR_FILTER_CONFIG_FAIL,
 } from 'src/dataMask/actions';
 import { dashboardInfoChanged } from './dashboardInfo';
-import { FilterSet } from '../reducers/types';
+import { DashboardInfo, FilterSet } from '../reducers/types';
 
 export const SET_FILTER_CONFIG_BEGIN = 'SET_FILTER_CONFIG_BEGIN';
 export interface SetFilterConfigBegin {
@@ -60,11 +60,6 @@ export interface SetFilterSetsConfigFail {
   filterSetsConfig: FilterSet[];
 }
 
-interface DashboardInfo {
-  id: number;
-  json_metadata: string;
-}
-
 export const setFilterConfiguration = (
   filterConfig: FilterConfiguration,
 ) => async (dispatch: Dispatch, getState: () => any) => {
@@ -87,7 +82,7 @@ export const setFilterConfiguration = (
     const response = await updateDashboard({
       json_metadata: JSON.stringify({
         ...metadata,
-        filter_configuration: filterConfig,
+        native_filter_configuration: filterConfig,
       }),
     });
     dispatch(

superset-frontend/src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingForm.tsx

@@ -0,0 +1,54 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { FC } from 'react';
+import { FormInstance } from 'antd/lib/form';
+import FilterScope from '../nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope';
+import { setCrossFilterFieldValues } from './utils';
+import { Scope } from '../nativeFilters/types';
+import { useForceUpdate } from '../nativeFilters/FiltersConfigModal/FiltersConfigForm/utils';
+import { CrossFilterScopingFormType } from './types';
+
+type CrossFilterScopingFormProps = {
+  scope: Scope;
+  form: FormInstance<CrossFilterScopingFormType>;
+};
+
+const CrossFilterScopingForm: FC<CrossFilterScopingFormProps> = ({
+  form,
+  scope,
+}) => {
+  const forceUpdate = useForceUpdate();
+  const formScope = form.getFieldValue('scope');
+  const formScoping = form.getFieldValue('scoping');
+  return (
+    <FilterScope
+      updateFormValues={(values: any) => {
+        setCrossFilterFieldValues(form, {
+          ...values,
+        });
+      }}
+      scope={scope}
+      formScope={formScope}
+      forceUpdate={forceUpdate}
+      formScoping={formScoping}
+    />
+  );
+};
+
+export default CrossFilterScopingForm;

superset-frontend/src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingModal.tsx

@@ -0,0 +1,97 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t } from '@superset-ui/core';
+import React, { FC } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { StyledModal } from 'src/common/components/Modal';
+import Button from 'src/components/Button';
+import { Form } from 'src/common/components';
+import { setChartConfiguration } from 'src/dashboard/actions/dashboardInfo';
+import { ChartConfiguration } from 'src/dashboard/reducers/types';
+import CrossFilterScopingForm from './CrossFilterScopingForm';
+import { CrossFilterScopingFormType } from './types';
+import { StyledForm } from '../nativeFilters/FiltersConfigModal/FiltersConfigModal';
+
+type CrossFilterScopingModalProps = {
+  chartId: number;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const CrossFilterScopingModal: FC<CrossFilterScopingModalProps> = ({
+  isOpen,
+  chartId,
+  onClose,
+}) => {
+  const dispatch = useDispatch();
+  const [form] = Form.useForm<CrossFilterScopingFormType>();
+  const chartConfig = useSelector<any, ChartConfiguration>(
+    ({ dashboardInfo }) => dashboardInfo?.metadata?.chart_configuration,
+  );
+  const scope = chartConfig?.[chartId]?.crossFilters?.scope;
+  const handleSave = () => {
+    dispatch(
+      setChartConfiguration({
+        ...chartConfig,
+        [chartId]: { crossFilters: { scope: form.getFieldValue('scope') } },
+      }),
+    );
+    onClose();
+  };
+
+  return (
+    <StyledModal
+      visible={isOpen}
+      maskClosable={false}
+      title={t('Cross Filter Scoping')}
+      width="55%"
+      destroyOnClose
+      onCancel={onClose}
+      onOk={handleSave}
+      centered
+      data-test="cross-filter-scoping-modal"
+      footer={
+        <>
+          <Button
+            key="cancel"
+            buttonStyle="secondary"
+            data-test="cross-filter-scoping-modal-cancel-button"
+            onClick={onClose}
+          >
+            {t('Cancel')}
+          </Button>
+          <Button
+            key="submit"
+            buttonStyle="primary"
+            onClick={handleSave}
+            data-test="cross-filter-scoping-modal-save-button"
+          >
+            {t('Save')}
+          </Button>
+        </>
+      }
+    >
+      <StyledForm preserve={false} form={form} layout="vertical">
+        <CrossFilterScopingForm form={form} scope={scope} />
+      </StyledForm>
+    </StyledModal>
+  );
+};
+
+export default CrossFilterScopingModal;

superset-frontend/src/dashboard/actions/dashboardInfo.js → superset-frontend/src/dashboard/components/CrossFilterScopingModal/types.ts

@@ -17,9 +17,8 @@
  * under the License.
  */
 
-export const DASHBOARD_INFO_UPDATED = 'DASHBOARD_INFO_UPDATED';
+import { Scope } from '../nativeFilters/types';
 
-// updates partially changed dashboard info
-export function dashboardInfoChanged(newInfo) {
-  return { type: DASHBOARD_INFO_UPDATED, newInfo };
-}
+export type CrossFilterScopingFormType = {
+  scope: Scope;
+};

superset-frontend/src/dashboard/components/CrossFilterScopingModal/utils.ts

@@ -0,0 +1,29 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { FormInstance } from 'antd/lib/form';
+
+// eslint-disable-next-line import/prefer-default-export
+export const setCrossFilterFieldValues = (
+  form: FormInstance,
+  values: object,
+) => {
+  form.setFieldsValue({
+    ...values,
+  });
+};

superset-frontend/src/dashboard/components/Dashboard.jsx

@@ -207,7 +207,10 @@ class Dashboard extends React.PureComponent {
       this.appliedOwnDataCharts,
     );
     [...allKeys].forEach(filterKey => {
-      if (!currFilterKeys.includes(filterKey)) {
+      if (
+        !currFilterKeys.includes(filterKey) &&
+        appliedFilterKeys.includes(filterKey)
+      ) {
         // filterKey is removed?
         affectedChartIds.push(...appliedFilters[filterKey].scope);
       } else if (!appliedFilterKeys.includes(filterKey)) {