fix: Drag inner tab to outer tab while editing a dashboard will show an error (#15946)

This commit is contained in:
Michael S. Molina 2021-07-30 08:20:43 -03:00 committed by GitHub
parent c2e4290392
commit e8f18f4dbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 6 deletions

View File

@ -246,7 +246,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
onDrop={dropResult => dispatch(handleComponentDrop(dropResult))} onDrop={dropResult => dispatch(handleComponentDrop(dropResult))}
editMode={editMode} editMode={editMode}
// you cannot drop on/displace tabs if they already exist // you cannot drop on/displace tabs if they already exist
disableDragdrop={!!topLevelTabs} disableDragDrop={!!topLevelTabs}
style={{ style={{
marginLeft: dashboardFiltersOpen || editMode ? 0 : -32, marginLeft: dashboardFiltersOpen || editMode ? 0 : -32,
}} }}

View File

@ -37,7 +37,7 @@ const propTypes = {
component: componentShape.isRequired, component: componentShape.isRequired,
parentComponent: componentShape, parentComponent: componentShape,
depth: PropTypes.number.isRequired, depth: PropTypes.number.isRequired,
disableDragdrop: PropTypes.bool, disableDragDrop: PropTypes.bool,
orientation: PropTypes.oneOf(['row', 'column']), orientation: PropTypes.oneOf(['row', 'column']),
index: PropTypes.number.isRequired, index: PropTypes.number.isRequired,
style: PropTypes.object, style: PropTypes.object,
@ -58,7 +58,7 @@ const defaultProps = {
className: null, className: null,
style: null, style: null,
parentComponent: null, parentComponent: null,
disableDragdrop: false, disableDragDrop: false,
children() {}, children() {},
onDrop() {}, onDrop() {},
orientation: 'row', orientation: 'row',
@ -104,6 +104,7 @@ export class UnwrappedDragDroppable extends React.Component {
className, className,
orientation, orientation,
dragSourceRef, dragSourceRef,
disableDragDrop,
isDragging, isDragging,
isDraggingOver, isDraggingOver,
style, style,
@ -112,7 +113,7 @@ export class UnwrappedDragDroppable extends React.Component {
const { dropIndicator } = this.state; const { dropIndicator } = this.state;
const dropIndicatorProps = const dropIndicatorProps =
isDraggingOver && dropIndicator isDraggingOver && dropIndicator && !disableDragDrop
? { ? {
className: cx( className: cx(
'drop-indicator', 'drop-indicator',

View File

@ -54,6 +54,9 @@ export const dragConfig = [
export const dropConfig = [ export const dropConfig = [
TYPE, TYPE,
{ {
canDrop(props) {
return !props.disableDragDrop;
},
hover(props, monitor, component) { hover(props, monitor, component) {
if (component && component.mounted) { if (component && component.mounted) {
handleHover(props, monitor, component); handleHover(props, monitor, component);

View File

@ -34,7 +34,7 @@ import getLeafComponentIdFromPath from '../../util/getLeafComponentIdFromPath';
import { componentShape } from '../../util/propShapes'; import { componentShape } from '../../util/propShapes';
import { NEW_TAB_ID, DASHBOARD_ROOT_ID } from '../../util/constants'; import { NEW_TAB_ID, DASHBOARD_ROOT_ID } from '../../util/constants';
import { RENDER_TAB, RENDER_TAB_CONTENT } from './Tab'; import { RENDER_TAB, RENDER_TAB_CONTENT } from './Tab';
import { TAB_TYPE } from '../../util/componentTypes'; import { TABS_TYPE, TAB_TYPE } from '../../util/componentTypes';
const propTypes = { const propTypes = {
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
@ -315,7 +315,11 @@ export class Tabs extends React.PureComponent {
orientation="row" orientation="row"
index={index} index={index}
depth={depth} depth={depth}
onDrop={handleComponentDrop} onDrop={dropResult => {
if (dropResult.dragging.type !== TABS_TYPE) {
handleComponentDrop(dropResult);
}
}}
editMode={editMode} editMode={editMode}
> >
{({ {({