Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(dashboard): Let users re-arrange native filters (#16154)
* feat. flag: ON * refactor filter tabs * WIP * Drag and Rearrange, styling * refactoring dnd code * Add apache license header * Fix bug reported during PR review * Minor fix on remove * turn off filters * Fix status * Fix a test * Address PR comments * iSort fixes * Add type key to the new filters * Fix wrong attribute * indent * PR comments * PR comments * Fix failing tests * Styling * Fix remove filter * Fix the drag issue * Save works * fix * Write tests * Style changes * New Icon * Grab & Grabbing Cursor * Commented out code * Fix tests, fix CI * Fix failing tests * Fix test * Style fixes * portal nodes dependency * More style fixes * PR comments * add unique ids to collapse panels * Filter removal bug fixed * PR comments * Fix test warnings * delete filter tabs * Fix the breaking test * Fix warnings * Fix the weird bug on cancel * refactor * Fix broken scope
- Loading branch information
Showing
20 changed files
with
1,084 additions
and
394 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
141 changes: 141 additions & 0 deletions
141
...et-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| /** | ||
| * 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, { | ||
| shouldForwardProp: propName => propName !== 'isDragging', | ||
| })<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; |
Oops, something went wrong.