Skip to content

Commit b573fd3

Browse files
davemacaulaydavemacaulay
committed
MC-3775: Button editable state is not consistent with the options panel appearing
- Resolve test issues - Ensure CSS classes are applied to elements - Refactor unfocus logic
1 parent 9e029fa commit b573fd3

File tree

8 files changed

+84
-27
lines changed

8 files changed

+84
-27
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderButtonGroupAppearanceTests.xml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,9 @@
349349
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
350350
<argument name="contentType" value="PageBuilderButtonsContentType"/>
351351
</actionGroup>
352+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
353+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
354+
</actionGroup>
352355
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
353356
<argument name="contentType" value="PageBuilderButtonsContentType"/>
354357
</actionGroup>
@@ -413,6 +416,9 @@
413416
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
414417
<argument name="contentType" value="PageBuilderButtonsContentType"/>
415418
</actionGroup>
419+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
420+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
421+
</actionGroup>
416422
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
417423
<argument name="contentType" value="PageBuilderButtonsContentType"/>
418424
</actionGroup>
@@ -597,6 +603,9 @@
597603
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
598604
<argument name="contentType" value="PageBuilderButtonsContentType"/>
599605
</actionGroup>
606+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
607+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
608+
</actionGroup>
600609
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
601610
<argument name="contentType" value="PageBuilderButtonsContentType"/>
602611
</actionGroup>
@@ -1670,6 +1679,9 @@
16701679
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
16711680
<argument name="containerTargetIndex" value="1" />
16721681
</actionGroup>
1682+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
1683+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
1684+
</actionGroup>
16731685
<!-- Enable Same Size -->
16741686
<comment userInput="Enable Same Size" stepKey="commentEditPanel1"/>
16751687
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
@@ -1932,6 +1944,9 @@
19321944
<argument name="containerTargetType" value="PageBuilderTabContentType"/>
19331945
<argument name="containerTargetIndex" value="1" />
19341946
</actionGroup>
1947+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
1948+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
1949+
</actionGroup>
19351950
<!-- Enable Same Size -->
19361951
<comment userInput="Enable Same Size" stepKey="commentEditPanel1"/>
19371952
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
@@ -2032,6 +2047,9 @@
20322047
<argument name="containerTargetType" value="PageBuilderTabContentType"/>
20332048
<argument name="containerTargetIndex" value="1"/>
20342049
</actionGroup>
2050+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
2051+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
2052+
</actionGroup>
20352053
<!-- Enable Same Size -->
20362054
<comment userInput="Enable Same Size" stepKey="commentEditPanel1"/>
20372055
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderButtonGroupTests.xml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,9 @@
8787
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
8888
<argument name="contentType" value="PageBuilderButtonsContentType"/>
8989
</actionGroup>
90+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
91+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
92+
</actionGroup>
9093
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
9194
<argument name="contentType" value="PageBuilderButtonsContentType"/>
9295
</actionGroup>
@@ -127,6 +130,9 @@
127130
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
128131
<argument name="contentType" value="PageBuilderButtonsContentType"/>
129132
</actionGroup>
133+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
134+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
135+
</actionGroup>
130136
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
131137
<argument name="contentType" value="PageBuilderButtonsContentType"/>
132138
</actionGroup>
@@ -414,6 +420,9 @@
414420
<actionGroup ref="dragContentTypeToStage" stepKey="dragButtonsOntoStage">
415421
<argument name="contentType" value="PageBuilderButtonsContentType"/>
416422
</actionGroup>
423+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
424+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
425+
</actionGroup>
417426
<!-- Validate Edit Panel -->
418427
<comment userInput="Validate Edit Panel" stepKey="CommentValidateEditPanel"/>
419428
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
@@ -515,6 +524,9 @@
515524
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
516525
<argument name="contentType" value="PageBuilderButtonsContentType"/>
517526
</actionGroup>
527+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
528+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
529+
</actionGroup>
518530
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
519531
<argument name="contentType" value="PageBuilderButtonsContentType"/>
520532
</actionGroup>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderButtonItemMovingTests.xml

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,9 @@
179179
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
180180
<argument name="contentType" value="PageBuilderButtonsContentType"/>
181181
</actionGroup>
182+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
183+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
184+
</actionGroup>
182185
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
183186
<argument name="contentType" value="PageBuilderButtonsContentType"/>
184187
</actionGroup>
@@ -475,6 +478,9 @@
475478
<actionGroup ref="dragContentTypeToStage" stepKey="dragButtonsOntoStage">
476479
<argument name="contentType" value="PageBuilderButtonsContentType"/>
477480
</actionGroup>
481+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
482+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
483+
</actionGroup>
478484
<!-- Select Inline Appearance -->
479485
<comment userInput="Select Inline Appearance" stepKey="CommentSelectInlineAppearance"/>
480486
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
@@ -673,6 +679,9 @@
673679
<actionGroup ref="dragContentTypeToStage" stepKey="dragButtonsOntoStage1">
674680
<argument name="contentType" value="PageBuilderButtonsContentType"/>
675681
</actionGroup>
682+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
683+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
684+
</actionGroup>
676685
<actionGroup ref="addButton" stepKey="addButton"/>
677686
<!-- Edit 1st button -->
678687
<comment userInput="Edit 1st Button" stepKey="commentEditButton1"/>
@@ -699,7 +708,7 @@
699708
<argument name="contentTypeIndex" value="2"/>
700709
<argument name="dropZoneIndex" value="2"/>
701710
</actionGroup>
702-
<click selector="{{ButtonItemOnStage.base('1')}}" stepKey="clickButton1"/>
711+
<click selector="{{ButtonItemOnStage.openOptionsMenu('2')}}" stepKey="clickButton1"/>
703712
<waitForPageLoad stepKey="waitForPageLoad1"/>
704713
<dragAndDrop selector1="{{ButtonItemOnStage.moveHandle('2')}}" selector2="{{PageBuilderStage.contentTypeContainer(PageBuilderRowContentType.role, '2')}}" stepKey="dragAndDropButtonToRow"/>
705714
<waitForPageLoad stepKey="waitForPageLoad2"/>
@@ -709,10 +718,13 @@
709718
<seeElement selector="{{ButtonItemOnStage.buttonItemTextByButtonGroup('1', '2', PageBuilderButtonItemText_Second.value)}}" stepKey="seeButton2Stage2"/>
710719
<!-- Attempt To Move Button To Column -->
711720
<comment userInput="Attempt To Move Button To Column" stepKey="commentMoveButton2"/>
721+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu1">
722+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
723+
</actionGroup>
712724
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage3">
713725
<argument name="contentType" value="PageBuilderColumnContentType"/>
714726
</actionGroup>
715-
<click selector="{{ButtonItemOnStage.base('1')}}" stepKey="clickButton2"/>
727+
<click selector="{{ButtonItemOnStage.openOptionsMenu('2')}}" stepKey="clickButton2"/>
716728
<waitForPageLoad stepKey="waitForPageLoad3"/>
717729
<dragAndDrop selector1="{{ButtonItemOnStage.moveHandle('2')}}" selector2="{{PageBuilderStage.contentTypeContainer(PageBuilderColumnContentType.role, '2')}}" stepKey="dragAndDropButtonToColumn"/>
718730
<waitForPageLoad stepKey="waitForPageLoad4"/>
@@ -722,10 +734,13 @@
722734
<seeElement selector="{{ButtonItemOnStage.buttonItemTextByButtonGroup('1', '2', PageBuilderButtonItemText_Second.value)}}" stepKey="seeButton2Stage3"/>
723735
<!-- Attempt To Move Button To Tab -->
724736
<comment userInput="Attempt To Move Button To Tab" stepKey="commentMoveButton3"/>
737+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu2">
738+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
739+
</actionGroup>
725740
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage4">
726741
<argument name="contentType" value="PageBuilderTabsContentType"/>
727742
</actionGroup>
728-
<click selector="{{ButtonItemOnStage.base('1')}}" stepKey="clickButton3"/>
743+
<click selector="{{ButtonItemOnStage.openOptionsMenu('2')}}" stepKey="clickButton3"/>
729744
<waitForPageLoad stepKey="waitForPageLoad5"/>
730745
<dragAndDrop selector1="{{ButtonItemOnStage.moveHandle('2')}}" selector2="{{PageBuilderStage.contentTypeContainer(PageBuilderTabContentType.role, '1')}}" stepKey="dragAndDropButtonToTab"/>
731746
<waitForPageLoad stepKey="waitForPageLoad6"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderButtonItemTests.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,9 @@
235235
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
236236
<argument name="contentType" value="PageBuilderButtonsContentType"/>
237237
</actionGroup>
238+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
239+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
240+
</actionGroup>
238241
<!-- Add 2nd Button -->
239242
<comment userInput="Add 2nd Button" stepKey="commentAddButton"/>
240243
<actionGroup ref="addButton" stepKey="addButton1"/>
@@ -248,6 +251,9 @@
248251
<seeNumberOfElements selector="{{ButtonItemOnStage.all}}" userInput="1" stepKey="seeButtonsStage2"/>
249252
<!-- Add Button Again -->
250253
<comment userInput="Add Button Again" stepKey="commentAddButtonAgain"/>
254+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu1">
255+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
256+
</actionGroup>
251257
<actionGroup ref="addButton" stepKey="addButton2"/>
252258
<seeNumberOfElements selector="{{ButtonItemOnStage.all}}" userInput="2" stepKey="seeButtonsStage3"/>
253259
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderCommonTest.xml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1411,6 +1411,9 @@
14111411
<argument name="searchResult" value="$$createCMSPageA.title$$"/>
14121412
</actionGroup>
14131413
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings1"/>
1414+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
1415+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
1416+
</actionGroup>
14141417
<!--Add image into PageBuilder-->
14151418
<comment userInput="Add image into PageBuilder" stepKey="addImageIntoPageBuilder"/>
14161419
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
@@ -1540,7 +1543,7 @@
15401543
<argument name="property" value="PageBuilderImageProperty_StageJPG"/>
15411544
</actionGroup>
15421545
<waitForElementVisible selector="{{ImageOnStage.imageSourceByIndex('1', PageBuilderImageProperty_StageJPG.fileName)}}" stepKey="seeImage1SourceOnStage"/>
1543-
<actionGroup ref="dragContentTypeToStage" stepKey="dragButtonsOntoStage">
1546+
<actionGroup ref="dragContentTypeToStage" stepKey="dragTextOntoStage">
15441547
<argument name="contentType" value="PageBuilderTextContentType"/>
15451548
</actionGroup>
15461549
<actionGroup ref="clickOutsideTextInlineEditing" stepKey="closeLiveEdit"/>

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/button-item/preview.js

Lines changed: 13 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/button-item/default/preview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<div attr="data.main.attributes"
99
ko-style="data.main.style"
10-
css="Object.assign({focused: $parent.parent.preview.focusedButton() === $index()}, data.main.css)"
10+
css="Object.assign({focused: $parent.parent.preview.focusedButton() === $index()}, data.main.css())"
1111
class="pagebuilder-content-type pagebuilder-button-item no-system-border focus-options">
1212
<render args="getOptions().template" />
1313
<a attr="data.link.attributes"

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/button-item/preview.ts

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -54,23 +54,24 @@ export default class Preview extends BasePreview {
5454
public onFocusOut(index: number, event: JQueryEventObject): void {
5555
if (this.parent && this.parent.parent) {
5656
const parentPreview = this.parent.parent.preview as ButtonsPreview;
57-
if (!event.relatedTarget) {
58-
if (parentPreview.focusedButton() === index) {
59-
window.getSelection().removeAllRanges();
60-
parentPreview.focusedButton(null);
61-
}
62-
} else {
63-
// Have we moved the focus onto another button in the current group?
64-
if ($.contains(parentPreview.wrapperElement, event.relatedTarget)) {
57+
const unfocus = () => {
58+
window.getSelection().removeAllRanges();
59+
parentPreview.focusedButton(null);
60+
};
61+
if (event.relatedTarget && $.contains(parentPreview.wrapperElement, event.relatedTarget)) {
62+
// Verify the focus was not onto the options menu
63+
if ($(event.relatedTarget).closest(".pagebuilder-options").length > 0) {
64+
unfocus();
65+
} else {
66+
// Have we moved the focus onto another button in the current group?
6567
const buttonItem = ko.dataFor(event.relatedTarget) as Preview;
6668
if (buttonItem && buttonItem.parent && buttonItem.parent.parent) {
6769
const newIndex = buttonItem.parent.parent.children().indexOf(buttonItem.parent);
6870
parentPreview.focusedButton(newIndex);
6971
}
70-
} else {
71-
window.getSelection().removeAllRanges();
72-
parentPreview.focusedButton(null);
7372
}
73+
} else if (parentPreview.focusedButton() === index) {
74+
unfocus();
7475
}
7576
}
7677
}

0 commit comments

Comments
 (0)