feat(dashboard): Let users re-arrange native filters

superset-frontend/spec/fixtures/mockNativeFilters.ts

@@ -448,3 +448,39 @@ export const mockQueryDataForCountries = [
   { country_name: 'Zambia', 'SUM(SP_POP_TOTL)': 438847085 },
   { country_name: 'Zimbabwe', 'SUM(SP_POP_TOTL)': 509866860 },
 ];
+
+export const buildNativeFilter = (
+  id: string,
+  name: string,
+  parents: string[],
+) => ({
+  id,
+  controlValues: {
+    multiSelect: true,
+    enableEmptyFilter: false,
+    defaultToFirstItem: false,
+    inverseSelection: false,
+    searchAllOptions: false,
+  },
+  name,
+  filterType: 'filter_select',
+  targets: [
+    {
+      datasetId: 1,
+      column: {
+        name,
+      },
+    },
+  ],
+  defaultDataMask: {
+    extraFormData: {},
+    filterState: {},
+    ownState: {},
+  },
+  cascadeParentIds: parents,
+  scope: {
+    rootPath: ['ROOT_ID'],
+    excluded: [],
+  },
+  type: 'NATIVE_FILTER',
+});

superset-frontend/spec/javascripts/dashboard/components/nativeFilters/NativeFiltersModal_spec.tsx

@@ -16,14 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { ReactWrapper } from 'enzyme';
 import React from 'react';
-import { styledMount as mount } from 'spec/helpers/theming';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { act } from 'react-dom/test-utils';
-import { ReactWrapper } from 'enzyme';
 import { Provider } from 'react-redux';
-import Alert from 'src/components/Alert';
-import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import { mockStore } from 'spec/fixtures/mockStore';
+import { styledMount as mount } from 'spec/helpers/theming';
+import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
+import Alert from 'src/components/Alert';
 import { FiltersConfigModal } from 'src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal';
 
 Object.defineProperty(window, 'matchMedia', {
@@ -66,7 +68,9 @@ describe('FiltersConfigModal', () => {
   function setup(overridesProps?: any) {
     return mount(
       <Provider store={mockStore}>
-        <FiltersConfigModal {...mockedProps} {...overridesProps} />
+        <DndProvider backend={HTML5Backend}>
+          <FiltersConfigModal {...mockedProps} {...overridesProps} />
+        </DndProvider>
       </Provider>,
     );
   }

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

@@ -220,8 +220,9 @@ describe('FilterBar', () => {
 
   const renderWrapper = (props = closedBarProps, state?: object) =>
     render(<FilterBar {...props} width={280} height={400} offset={0} />, {
-      useRedux: true,
       initialState: state,
+      useDnd: true,
+      useRedux: true,
       useRouter: true,
     });
 

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

@@ -27,6 +27,7 @@ import { getFilterBarTestId } from '..';
 
 export interface FCBProps {
   createNewOnOpen?: boolean;
+  dashboardId?: number;
 }
 
 const HeaderButton = styled(Button)`
@@ -35,6 +36,7 @@ const HeaderButton = styled(Button)`
 
 export const FilterConfigurationLink: React.FC<FCBProps> = ({
   createNewOnOpen,
+  dashboardId,
   children,
 }) => {
   const dispatch = useDispatch();
@@ -65,6 +67,7 @@ export const FilterConfigurationLink: React.FC<FCBProps> = ({
         onSave={submit}
         onCancel={close}
         createNewOnOpen={createNewOnOpen}
+        key={`filters-for-${dashboardId}`}
       />
     </>
   );

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx

@@ -17,16 +17,20 @@
  * under the License.
  */
 import React, { FC, useMemo, useState } from 'react';
-import { DataMask, styled, t } from '@superset-ui/core';
 import { css } from '@emotion/react';
-import * as portals from 'react-reverse-portal';
-import { DataMaskStateWithId } from 'src/dataMask/types';
+import { DataMask, styled, t } from '@superset-ui/core';
+import {
+  createHtmlPortalNode,
+  InPortal,
+  OutPortal,
+} from 'react-reverse-portal';
 import { Collapse } from 'src/common/components';
+import { DataMaskStateWithId } from 'src/dataMask/types';
+import { useDashboardHasTabs, useSelectFiltersInScope } from '../../state';
+import { Filter } from '../../types';
 import CascadePopover from '../CascadeFilters/CascadePopover';
-import { buildCascadeFiltersTree } from './utils';
 import { useFilters } from '../state';
-import { Filter } from '../../types';
-import { useDashboardHasTabs, useSelectFiltersInScope } from '../../state';
+import { buildCascadeFiltersTree } from './utils';
 
 const Wrapper = styled.div`
   padding: ${({ theme }) => theme.gridUnit * 4}px;
@@ -52,7 +56,7 @@ const FilterControls: FC<FilterControlsProps> = ({
   const portalNodes = React.useMemo(() => {
     const nodes = new Array(filterValues.length);
     for (let i = 0; i < filterValues.length; i += 1) {
-      nodes[i] = portals.createHtmlPortalNode();
+      nodes[i] = createHtmlPortalNode();
     }
     return nodes;
   }, [filterValues.length]);
@@ -78,7 +82,7 @@ const FilterControls: FC<FilterControlsProps> = ({
       {portalNodes
         .filter((node, index) => cascadeFilterIds.has(filterValues[index].id))
         .map((node, index) => (
-          <portals.InPortal node={node}>
+          <InPortal node={node}>
             <CascadePopover
               data-test="cascade-filters-control"
               key={cascadeFilters[index].id}
@@ -92,11 +96,17 @@ const FilterControls: FC<FilterControlsProps> = ({
               directPathToChild={directPathToChild}
               inView={false}
             />
-          </portals.InPortal>
+          </InPortal>
         ))}
       {filtersInScope.map(filter => {
         const index = filterValues.findIndex(f => f.id === filter.id);
-        return <portals.OutPortal node={portalNodes[index]} inView />;
+        return (
+          <OutPortal
+            key={`filters-inscope-${index}`}
+            node={portalNodes[index]}
+            inView
+          />
+        );
       })}
       {showCollapsePanel && (
         <Collapse
@@ -134,7 +144,13 @@ const FilterControls: FC<FilterControlsProps> = ({
           >
             {filtersOutOfScope.map(filter => {
               const index = cascadeFilters.findIndex(f => f.id === filter.id);
-              return <portals.OutPortal node={portalNodes[index]} inView />;
+              return (
+                <OutPortal
+                  key={`filters-outofscope-${index}`}
+                  node={portalNodes[index]}
+                  inView
+                />
+              );
             })}
           </Collapse.Panel>
         </Collapse>

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

@@ -87,6 +87,9 @@ const Header: FC<HeaderProps> = ({
   const canEdit = useSelector<RootState, boolean>(
     ({ dashboardInfo }) => dashboardInfo.dash_edit_perm,
   );
+  const dashboardId = useSelector<RootState, number>(
+    ({ dashboardInfo }) => dashboardInfo.id,
+  );
 
   const isClearAllDisabled = Object.values(dataMaskApplied).every(
     filter =>
@@ -99,7 +102,10 @@ const Header: FC<HeaderProps> = ({
       <TitleArea>
         <span>{t('Filters')}</span>
         {canEdit && (
-          <FilterConfigurationLink createNewOnOpen={filterValues.length === 0}>
+          <FilterConfigurationLink
+            dashboardId={dashboardId}
+            createNewOnOpen={filterValues.length === 0}
+          >
             <Icons.Edit
               data-test="create-filter"
               iconColor={theme.colors.grayscale.base}

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx

@@ -0,0 +1,138 @@
+/**
+ * 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 { styled } from '@superset-ui/core';
+import React, { useRef } from 'react';
+import {
+  DragSourceMonitor,
+  DropTargetMonitor,
+  useDrag,
+  useDrop,
+  XYCoord,
+} from 'react-dnd';
+import Icons, { IconType } from 'src/components/Icons';
+
+interface TitleContainerProps {
+  readonly isDragging: boolean;
+}
+const FILTER_TYPE = 'FILTER';
+
+const Container = styled.div<TitleContainerProps>`
+  ${({ isDragging, theme }) => `
+    opacity: ${isDragging ? 0.3 : 1};
+    cursor: ${isDragging ? 'grabbing' : 'pointer'};
+    width: 100%;
+    display: flex;
+    padding:  ${theme.gridUnit}px
+`}
+`;
+
+const DragIcon = styled(Icons.Drag)<IconType & { isDragging: boolean }>`
+  ${({ isDragging, theme }) => `
+    font-size: ${theme.typography.sizes.m}px;
+    margin-top: 15px;
+    cursor: ${isDragging ? 'grabbing' : 'grab'};
+    padding-left: ${theme.gridUnit}px;
+`}
+`;
+
+interface FilterTabTitleProps {
+  index: number;
+  filterIds: string[];
+  onRearrage: (dragItemIndex: number, targetIndex: number) => void;
+}
+
+interface DragItem {
+  index: number;
+  filterIds: string[];
+  type: string;
+}
+
+export const DraggableFilter: React.FC<FilterTabTitleProps> = ({
+  index,
+  onRearrage,
+  filterIds,
+  children,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [{ isDragging }, drag] = useDrag({
+    item: { filterIds, type: FILTER_TYPE, index },
+    collect: (monitor: DragSourceMonitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  const [, drop] = useDrop({
+    accept: FILTER_TYPE,
+    hover: (item: DragItem, monitor: DropTargetMonitor) => {
+      if (!ref.current) {
+        return;
+      }
+
+      const dragIndex = item.index;
+      const hoverIndex = index;
+
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      // Determine rectangle on screen
+      const hoverBoundingRect = ref.current?.getBoundingClientRect();
+
+      // Get vertical middle
+      const hoverMiddleY =
+        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+
+      // Get pixels to the top
+      const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
+
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+
+      onRearrage(dragIndex, hoverIndex);
+      // Note: we're mutating the monitor item here.
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      // eslint-disable-next-line no-param-reassign
+      item.index = hoverIndex;
+    },
+  });
+  drag(drop(ref));
+  return (
+    <Container ref={ref} isDragging={isDragging}>
+      <DragIcon isDragging={isDragging} alt="Move icon" className="dragIcon" />
+      <div css={{ flexGrow: 4 }}>{children}</div>
+    </Container>
+  );
+};
+
+export default DraggableFilter;