#3458503: Improve the page hierarchy display
Closes #3458503
:rotating_light:This MR still has the temporary cy.wait()'s in tests that are to be replaced but everything else can still be reviewed.
This MR uses cy.wait()'s in tests that are marked with a TODO to replace them.
- Adds drag and drop functionality in the layers menu. Can move components from a slot to another slot, from a slot to the root level, undo and redo works
- Some dragging related behaviors and design still need to be refined. I created a followup issue for that and in the IS there are edge cases that I've noticed so far. https://www.drupal.org/project/experience_builder/issues/3470594
- Adds Cypress dnd functionality taken from https://github.com/dmtrKovalenko/cypress-real-events/pull/17/files
Edited by Harumi Jang
Merge request reports
Activity
assigned to @hooroomoo
mentioned in merge request !80 (closed)
mentioned in merge request !91 (closed)
added 20 commits
-
a114f9da...20d3a635 - 17 commits from branch
project:0.x - b82c12c6 - Init commit
- ec03bd22 - Wip: create a node item
- 50e10af0 - Fix hover and select issue on individual item in layers menu
Toggle commit list-
a114f9da...20d3a635 - 17 commits from branch
added 9 commits
-
50e10af0...2b807448 - 4 commits from branch
project:0.x - 4c446dc8 - Init commit
- d6a50743 - Wip: create a node item
- ceaca5b4 - Fix hover and select issue on individual item in layers menu
- 1a9b081e - Simplify SortableContainer and keep collapsibleTrigger and its state in the same component
- 09152cb0 - cleanup
Toggle commit list-
50e10af0...2b807448 - 4 commits from branch
added 4 commits
Toggle commit listadded 1 commit
- 897a8c59 - Remove unused css and attribute and add a drag and drop custom command
added 17 commits
-
897a8c59...bd8ee98e - 5 commits from branch
project:0.x - bd8ee98e...332652d0 - 2 earlier commits
- ecf36a97 - Fix hover and select issue on individual item in layers menu
- 8ab8fa9b - Simplify SortableContainer and keep collapsibleTrigger and its state in the same component
- 59dda31c - cleanup
- dbc83dfa - remove old code
- 622f2f2a - Rename TreeNode to TreeItem, only allow drag in slots and root, and remove console logs
- 7de26a32 - Allow dragging a component at the end of the root level by setting the menu height to 100%
- 98757607 - Add back nametag and remove unsethovered line
- 5471ce6b - Remove unused css and attribute and add a drag and drop custom command
- c1059b54 - wip tests
- af6aa1eb - Add cypress dnd helper and add tests that currently uses waits
Toggle commit list-
897a8c59...bd8ee98e - 5 commits from branch
added 2 commits
requested review from @balintbrews and @bnjmnm
16 }); 17 18 it('Drag a component from the column one slot to the root level then to the column two slot', () => { 19 cy.loadURLandWaitForXBLoaded(); 20 cy.get('.primaryMenuContent').find('.treeItem[data-xb-uuid="two-column-uuid"]').find('button').click(); 21 cy.get('.primaryMenuContent').find('.treeItem[data-xb-uuid="two-column-uuid-slot-column_one"]').find('button').click(); 22 23 // Before dragging, check that the component is in the column one slot in the layers menu and preview. 24 cy.get('.treeItem[data-xb-uuid="dynamic-image-udf7d"]').parent('[data-xb-uuid="two-column-uuid-slot-column_one"]').should('exist'); 25 cy.get('.treeItem[data-xb-uuid="dynamic-image-udf7d"]').siblings('.treeItem[data-xb-uuid="two-column-uuid"]').should('not.exist'); 26 cy.getIframeBody().find('[data-xb-uuid="dynamic-image-udf7d"]').parent('[data-xb-uuid="two-column-uuid-slot-column_one"]').should('exist'); 27 cy.getIframeBody().find('[data-xb-uuid="dynamic-image-udf7d"]').siblings('[data-xb-uuid="two-column-uuid"]').should('not.exist'); 28 29 // Drag image component out of the slot and to the root level. 30 cy.get('.treeItem[data-xb-uuid="dynamic-image-udf7d"]').realDnd('.rootNodeWrapper[data-xb-uuid="root"]'); 31 cy.wait(1000);
Please register or sign in to reply