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))}
editMode={editMode}
// you cannot drop on/displace tabs if they already exist
disableDragdrop={!!topLevelTabs}
disableDragDrop={!!topLevelTabs}
style={{
marginLeft: dashboardFiltersOpen || editMode ? 0 : -32,
}}

View File

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

View File

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

View File

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