feat: Move cross filters to Dashboard

superset-frontend/src/components/Chart/Chart.jsx

@@ -77,7 +77,6 @@ const propTypes = {
   postTransformProps: PropTypes.func,
   datasetsStatus: PropTypes.oneOf(['loading', 'error', 'complete']),
   isInView: PropTypes.bool,
-  // cross-filters
   emitCrossFilters: PropTypes.bool,
 };
 

superset-frontend/src/components/Chart/ChartRenderer.jsx

@@ -62,7 +62,6 @@ const propTypes = {
   ownState: PropTypes.object,
   postTransformProps: PropTypes.func,
   source: PropTypes.oneOf([ChartSource.Dashboard, ChartSource.Explore]),
-  // cross filters
   emitCrossFilters: PropTypes.bool,
 };
 

superset-frontend/src/components/DropdownSelectableIcon/index.tsx

@@ -22,7 +22,6 @@ import Icons from 'src/components/Icons';
 import { DropdownButton } from 'src/components/DropdownButton';
 import { DropdownButtonProps } from 'antd/lib/dropdown';
 import { Menu, MenuProps } from 'src/components/Menu';
-import { css, Global } from '@emotion/react';
 
 const { SubMenu } = Menu;
 
@@ -79,18 +78,26 @@ const StyledMenu = styled(Menu)`
   `}
 `;
 
+const StyleSubmenuItem = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
 export default (props: DropDownSelectableProps) => {
   const theme = useTheme();
   const { icon, info, menuItems, selectedKeys, onSelect } = props;
   const menuItem = (label: string | React.ReactNode, key: string) => (
     <Menu.Item key={key}>
-      {label}
-      {selectedKeys?.includes(key) && (
-        <Icons.Check
-          iconColor={theme.colors.primary.base}
-          className="tick-menu-item"
-        />
-      )}
+      <StyleSubmenuItem>
+        <span>{label}</span>
+        {selectedKeys?.includes(key) && (
+          <Icons.Check
+            iconColor={theme.colors.primary.base}
+            className="tick-menu-item"
+            iconSize="xl"
+          />
+        )}
+      </StyleSubmenuItem>
     </Menu.Item>
   );
   const overlayMenu = useMemo(
@@ -120,21 +127,10 @@ export default (props: DropDownSelectableProps) => {
   );
 
   return (
-    <>
-      <Global
-        styles={css`
-          .ant-dropdown-menu .ant-dropdown-menu-item > .tick-menu-item {
-            float: right;
-            margin-right: 0;
-            font-size: ${theme.typography.sizes.xl}px;
-          }
-        `}
-      />
-      <StyledDropdownButton
-        overlay={overlayMenu}
-        trigger={['click']}
-        icon={icon}
-      />
-    </>
+    <StyledDropdownButton
+      overlay={overlayMenu}
+      trigger={['click']}
+      icon={icon}
+    />
   );
 };

superset-frontend/src/dashboard/actions/dashboardState.js

@@ -36,6 +36,7 @@ import {
   SAVE_TYPE_OVERWRITE,
   SAVE_TYPE_OVERWRITE_CONFIRMED,
 } from 'src/dashboard/util/constants';
+import { isCrossFiltersEnabled } from 'src/dashboard/util/crossFilters';
 import {
   addSuccessToast,
   addWarningToast,
@@ -268,10 +269,9 @@ export function saveDashboardRequest(data, id, saveType) {
         timed_refresh_immune_slices:
           data.metadata?.timed_refresh_immune_slices || [],
         // cross-filters should be enabled by default
-        cross_filters_enabled:
-          metadataCrossFiltersEnabled === undefined
-            ? true
-            : metadataCrossFiltersEnabled,
+        cross_filters_enabled: isCrossFiltersEnabled(
+          metadataCrossFiltersEnabled,
+        ),
       },
     };
 

superset-frontend/src/dashboard/actions/hydrate.js

@@ -26,6 +26,7 @@ import { applyDefaultFormData } from 'src/explore/store';
 import { buildActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
 import { findPermission } from 'src/utils/findPermission';
 import { canUserEditDashboard } from 'src/dashboard/util/permissionUtils';
+import { isCrossFiltersEnabled } from 'src/dashboard/util/crossFilters';
 import {
   DASHBOARD_FILTER_SCOPE_GLOBAL,
   dashboardFilter,
@@ -394,11 +395,9 @@ export const hydrateDashboard =
 
     const { roles } = user;
     const canEdit = canUserEditDashboard(dashboard, user);
-    const crossFiltersEnabled =
-      (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
-        (metadata.cross_filters_enabled === undefined ||
-          metadata.cross_filters_enabled)) ||
-      false;
+    const crossFiltersEnabled = isCrossFiltersEnabled(
+      metadata.cross_filters_enabled,
+    );
 
     return dispatch({
       type: HYDRATE_DASHBOARD,

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx

@@ -66,6 +66,11 @@ const FilterBarSettings = () => {
   const [crossFiltersEnabled, setCrossFiltersEnabled] = useState<boolean>(
     shouldEnableCrossFilters,
   );
+  const canEdit = useSelector<RootState, boolean>(
+    ({ dashboardInfo }) => dashboardInfo.dash_edit_perm,
+  );
+  const canSetHorizontalFilterBar =
+    canEdit && isFeatureEnabled(FeatureFlag.HORIZONTAL_FILTER_BAR);
   const crossFiltersMenuKey = 'cross-filters-menu-key';
   const isOrientation = (o: SelectedKey): o is FilterBarOrientation =>
     o === FilterBarOrientation.VERTICAL ||
@@ -120,8 +125,17 @@ const FilterBarSettings = () => {
     ),
     [crossFiltersEnabled],
   );
-  const menuItems: DropDownSelectableProps['menuItems'] = [
-    {
+  const menuItems: DropDownSelectableProps['menuItems'] = [];
+
+  if (isCrossFiltersFeatureEnabled) {
+    menuItems.unshift({
+      key: crossFiltersMenuKey,
+      label: crossFiltersMenuItem,
+    });
+  }
+
+  if (canSetHorizontalFilterBar) {
+    menuItems.push({
       key: 'placement',
       label: t('Orientation of filter bar'),
       children: [
@@ -134,16 +148,13 @@ const FilterBarSettings = () => {
           label: t('Horizontal (Top)'),
         },
       ],
-    },
-  ];
-
-  if (isCrossFiltersFeatureEnabled) {
-    menuItems.unshift({
-      key: crossFiltersMenuKey,
-      label: crossFiltersMenuItem,
     });
   }
 
+  if (!menuItems.length) {
+    return null;
+  }
+
   return (
     <DropdownSelectableIcon
       onSelect={changeFilterBarSettings}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx

@@ -17,14 +17,7 @@
  * under the License.
  */
 /* eslint-disable no-param-reassign */
-import {
-  css,
-  FeatureFlag,
-  isFeatureEnabled,
-  styled,
-  t,
-  useTheme,
-} from '@superset-ui/core';
+import { css, styled, t, useTheme } from '@superset-ui/core';
 import React, { FC, useMemo } from 'react';
 import Icons from 'src/components/Icons';
 import Button from 'src/components/Button';
@@ -109,14 +102,12 @@ const Header: FC<HeaderProps> = ({ toggleFiltersBar }) => {
   const dashboardId = useSelector<RootState, number>(
     ({ dashboardInfo }) => dashboardInfo.id,
   );
-  const canSetHorizontalFilterBar =
-    canEdit && isFeatureEnabled(FeatureFlag.HORIZONTAL_FILTER_BAR);
 
   return (
     <Wrapper>
       <TitleArea>
         <span>{t('Filters')}</span>
-        {canSetHorizontalFilterBar && <FilterBarSettings />}
+        <FilterBarSettings />
         <HeaderButton
           {...getFilterBarTestId('collapse-button')}
           buttonStyle="link"

superset-frontend/src/dashboard/util/crossFilters.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 { FeatureFlag, isFeatureEnabled } from '@superset-ui/core';
+
+export const isCrossFiltersEnabled = (
+  metadataCrossFiltersEnabled: boolean | undefined,
+): boolean =>
+  (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
+    (metadataCrossFiltersEnabled === undefined ||
+      metadataCrossFiltersEnabled)) ||
+  false;