feat: Cross Filters in FilterBar

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

@@ -445,6 +445,9 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
   const fullSizeChartId = useSelector<RootState, number | null>(
     state => state.dashboardState.fullSizeChartId,
   );
+  const crossFiltersEnabled = isFeatureEnabled(
+    FeatureFlag.DASHBOARD_CROSS_FILTERS,
+  );
   const filterBarOrientation = useSelector<RootState, FilterBarOrientation>(
     ({ dashboardInfo }) =>
       isFeatureEnabled(FeatureFlag.HORIZONTAL_FILTER_BAR)
@@ -523,7 +526,8 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
   const filterSetEnabled = isFeatureEnabled(
     FeatureFlag.DASHBOARD_NATIVE_FILTERS_SET,
   );
-  const showFilterBar = nativeFiltersEnabled && !editMode;
+  const showFilterBar =
+    (crossFiltersEnabled || nativeFiltersEnabled) && !editMode;
 
   const offset =
     FILTER_BAR_HEADER_HEIGHT +

superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx

@@ -19,7 +19,7 @@
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
-import { Indicator } from 'src/dashboard/components/FiltersBadge/selectors';
+import { Indicator } from 'src/dashboard/components/nativeFilters/selectors';
 import DetailsPanel from '.';
 
 const createProps = () => ({

superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx

@@ -29,7 +29,7 @@ import {
   Reset,
   Title,
 } from 'src/dashboard/components/FiltersBadge/Styles';
-import { Indicator } from 'src/dashboard/components/FiltersBadge/selectors';
+import { Indicator } from 'src/dashboard/components/nativeFilters/selectors';
 import FilterIndicator from 'src/dashboard/components/FiltersBadge/FilterIndicator';
 import { RootState } from 'src/dashboard/types';
 

superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx

@@ -19,7 +19,7 @@
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
-import { Indicator } from 'src/dashboard/components/FiltersBadge/selectors';
+import { Indicator } from 'src/dashboard/components/nativeFilters/selectors';
 import FilterIndicator from '.';
 
 const createProps = () => ({

superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/index.tsx

@@ -28,7 +28,7 @@ import {
   ItemIcon,
   Title,
 } from 'src/dashboard/components/FiltersBadge/Styles';
-import { Indicator } from 'src/dashboard/components/FiltersBadge/selectors';
+import { Indicator } from 'src/dashboard/components/nativeFilters/selectors';
 
 export interface IndicatorProps {
   indicator: Indicator;

superset-frontend/src/dashboard/components/FiltersBadge/index.tsx

@@ -24,20 +24,20 @@ import { DataMaskStateWithId, Filters } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { usePrevious } from 'src/hooks/usePrevious';
 import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
-import {
-  ChartsState,
-  DashboardInfo,
-  DashboardLayout,
-  RootState,
-} from 'src/dashboard/types';
 import DetailsPanelPopover from './DetailsPanel';
 import { Pill } from './Styles';
 import {
   Indicator,
   IndicatorStatus,
   selectIndicatorsForChart,
   selectNativeIndicatorsForChart,
-} from './selectors';
+} from '../nativeFilters/selectors';
+import {
+  ChartsState,
+  DashboardInfo,
+  DashboardLayout,
+  RootState,
+} from '../../types';
 
 export interface FiltersBadgeProps {
   chartId: number;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.test.tsx

@@ -0,0 +1,82 @@
+/**
+ * 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 from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import { FilterBarOrientation } from 'src/dashboard/types';
+import { IndicatorStatus } from '../../selectors';
+import CrossFilter from './CrossFilter';
+
+const mockedProps = {
+  filter: {
+    name: 'test',
+    emitterId: 1,
+    column: 'country_name',
+    value: 'Italy',
+    status: IndicatorStatus.CrossFilterApplied,
+    path: ['test-path'],
+  },
+  orientation: FilterBarOrientation.HORIZONTAL,
+  last: false,
+};
+
+const setup = (props: typeof mockedProps) =>
+  render(<CrossFilter {...props} />, {
+    useRedux: true,
+  });
+
+test('CrossFilter should render', () => {
+  const { container } = setup(mockedProps);
+  expect(container).toBeInTheDocument();
+});
+
+test('Title should render', () => {
+  setup(mockedProps);
+  expect(screen.getByText('test')).toBeInTheDocument();
+});
+
+test('Search icon should be visible', () => {
+  setup(mockedProps);
+  expect(
+    screen.getByTestId('cross-filters-highlight-emitter'),
+  ).toBeInTheDocument();
+});
+
+test('Column and value should be visible', () => {
+  setup(mockedProps);
+  expect(screen.getByText('country_name')).toBeInTheDocument();
+  expect(screen.getByText('Italy')).toBeInTheDocument();
+});
+
+test('Tag should be closable', () => {
+  setup(mockedProps);
+  expect(screen.getByRole('img', { name: 'close' })).toBeInTheDocument();
+});
+
+test('Divider should not be visible', () => {
+  setup(mockedProps);
+  expect(screen.queryByTestId('cross-filters-divider')).not.toBeInTheDocument();
+});
+
+test('Divider should be visible', () => {
+  setup({
+    ...mockedProps,
+    last: true,
+  });
+  expect(screen.getByTestId('cross-filters-divider')).toBeInTheDocument();
+});

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx

@@ -0,0 +1,114 @@
+/**
+ * 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, { useCallback } from 'react';
+import { css, useTheme } from '@superset-ui/core';
+import { CrossFilterIndicator } from 'src/dashboard/components/nativeFilters/selectors';
+import { useDispatch } from 'react-redux';
+import { setFocusedNativeFilter } from 'src/dashboard/actions/nativeFilters';
+import { FilterBarOrientation } from 'src/dashboard/types';
+import { updateDataMask } from 'src/dataMask/actions';
+import CrossFilterTag from './CrossFilterTag';
+import CrossFilterTitle from './CrossFilterTitle';
+
+const CrossFilter = (props: {
+  filter: CrossFilterIndicator;
+  orientation: FilterBarOrientation;
+  last?: boolean;
+}) => {
+  const { filter, orientation, last } = props;
+  const theme = useTheme();
+  const dispatch = useDispatch();
+
+  const handleHighlightFilterSource = useCallback(
+    (path?: string[]) => {
+      if (path) {
+        dispatch(setFocusedNativeFilter(path[0]));
+      }
+    },
+    [dispatch],
+  );
+
+  const handleRemoveCrossFilter = (chartId: number) => {
+    dispatch(
+      updateDataMask(chartId, {
+        extraFormData: {
+          filters: [],
+        },
+        filterState: {
+          value: null,
+          selectedValues: null,
+        },
+      }),
+    );
+  };
+
+  return (
+    <div
+      key={`${filter.name}${filter.emitterId}`}
+      css={css`
+        ${orientation === FilterBarOrientation.VERTICAL
+          ? `
+            display: block;
+            margin-bottom: ${theme.gridUnit * 4}px;
+          `
+          : `
+            display: flex;
+          `}
+      `}
+    >
+      <CrossFilterTitle
+        title={filter.name}
+        orientation={orientation || FilterBarOrientation.HORIZONTAL}
+        onHighlightFilterSource={() => handleHighlightFilterSource(filter.path)}
+      />
+      {(filter.column || filter.value) && (
+        <CrossFilterTag
+          filter={filter}
+          orientation={orientation}
+          removeCrossFilter={handleRemoveCrossFilter}
+        />
+      )}
+      {last && (
+        <span
+          data-test="cross-filters-divider"
+          css={css`
+            ${orientation === FilterBarOrientation.HORIZONTAL
+              ? `
+                width: 1px;
+                height: 22px;
+                margin-left: ${theme.gridUnit * 4}px;
+                margin-right: ${theme.gridUnit}px;
+              `
+              : `
+                width: 100%;
+                height: 1px;
+                display: block;
+                margin-bottom: ${theme.gridUnit * 4}px;
+                margin-top: ${theme.gridUnit * 4}px;
+            `}
+            background: ${theme.colors.grayscale.light2};
+          `}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CrossFilter;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.test.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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 userEvent from '@testing-library/user-event';
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import { FilterBarOrientation } from 'src/dashboard/types';
+import { IndicatorStatus } from '../../selectors';
+import CrossFilterTag from './CrossFilterTag';
+
+const mockedProps = {
+  filter: {
+    name: 'test',
+    emitterId: 1,
+    column: 'country_name',
+    value: 'Italy',
+    status: IndicatorStatus.CrossFilterApplied,
+    path: ['test-path'],
+  },
+  orientation: FilterBarOrientation.HORIZONTAL,
+  removeCrossFilter: jest.fn(),
+};
+
+const setup = (props: typeof mockedProps) =>
+  render(<CrossFilterTag {...props} />, {
+    useRedux: true,
+  });
+
+test('CrossFilterTag should render', () => {
+  const { container } = setup(mockedProps);
+  expect(container).toBeInTheDocument();
+});
+
+test('Column and value should be visible', () => {
+  setup(mockedProps);
+  expect(screen.getByText('country_name')).toBeInTheDocument();
+  expect(screen.getByText('Italy')).toBeInTheDocument();
+});
+
+test('Tag should be closable', () => {
+  setup(mockedProps);
+  const close = screen.getByRole('img', { name: 'close' });
+  expect(close).toBeInTheDocument();
+  userEvent.click(close);
+  expect(mockedProps.removeCrossFilter).toHaveBeenCalledWith(1);
+});