Skip to content

Commit 5fd03ff

Browse files
dhaeckerdhaecker
authored
Merge pull request #551 from magento/514_content-snapshot-category-admin-page
[Story] 514: User sees content snapshot on Category Page in Admin Panel
2 parents 5327b7e + 87cdbb0 commit 5fd03ff

File tree

29 files changed

+789
-78
lines changed

29 files changed

+789
-78
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/StageActionGroup/AdminOpenPageBuilderFromContentPreviewOverlayActionGroup.xml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
10+
<actionGroup name="AdminOpenPageBuilderFromContentPreviewOverlayActionGroup">
11+
<annotations>
12+
<description>Click Page Builder preview overlay to open Page Builder stage.</description>
13+
</annotations>
14+
<waitForElementVisible selector="{{PageBuilderStage.stageOverlay}}" stepKey="waitForStageOverlay"/>
15+
<click selector="{{PageBuilderStage.stageOverlay}}" stepKey="clickOnStageOverlayOnStage"/>
16+
<waitForPageLoad stepKey="waitForPageLoadPageBuilder"/>
17+
<waitForElementVisible selector="{{PageBuilderPanel.layoutMenuSection}}" stepKey="waitForPageBuilderLayoutMenu"/>
18+
<waitForElementVisible selector="{{PageBuilderStage.stageWrapperFullScreen}}" stepKey="waitForPageBuilderFullScreen"/>
19+
</actionGroup>
20+
</actionGroups>

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/StageActionGroup/ValidatePageBuilderPreviewActionGroup.xml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
10+
<actionGroup name="ValidatePageBuilderPreviewActionGroup">
11+
<annotations>
12+
<description>Verifies Page Builder preview has the 'Edit with Page Builder' button, has an overlay, does not have the Page Builder left panel, does not have the Page Builder template buttons, and does not open content type option menus.</description>
13+
</annotations>
14+
<arguments>
15+
<argument name="pageBuilderArea" defaultValue="" type="string"/>
16+
</arguments>
17+
<waitForElementVisible selector="{{pageBuilderArea}}{{PageBuilderStage.editWithPageBuilderButton}}" stepKey="waitForEditWithPageBuilderButton"/>
18+
<see userInput="Edit with Page Builder" selector="{{pageBuilderArea}}{{PageBuilderStage.editWithPageBuilderButton}}" stepKey="seeEditWithPageBuilderButton"/>
19+
<dontSeeElement selector="{{PageBuilderPanel.leftPanel}}" stepKey="dontSeePageBuilderContentTypePanel"/>
20+
<dontSeeElementInDOM selector="{{pageBuilderArea}}{{PageBuilderStage.applyTemplateButton}}" stepKey="dontSeePageBuilderApplyTemplateButton"/>
21+
<dontSeeElementInDOM selector="{{pageBuilderArea}}{{PageBuilderStage.saveAsTemplateButton}}" stepKey="dontSeePageBuilderSaveAsTemplateButton"/>
22+
<waitForElementVisible selector="{{PageBuilderStage.stageOverlay}}" stepKey="waitForStageOverlay"/>
23+
<moveMouseOver selector="{{PageBuilderStage.stageOverlay}}" stepKey="mouseOverStageOverlay"/>
24+
<waitForElementVisible selector="{{PageBuilderStage.stageOverlayOnHover}}" stepKey="waitForStageOverlayOnHover"/>
25+
<dontSeeElement selector="{{PageBuilderContentTypeOptionsMenu.contentTypeOptionsMenu(PageBuilderRowContentType.role)}}" stepKey="dontSeeRowOptionMenu"/>
26+
</actionGroup>
27+
</actionGroups>

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/StageActionGroup/VerifyEmptyStageActionGroup.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<waitForPageLoad stepKey="waitForStageLoad"/>
1919
<waitForElementVisible selector="{{RowOnStage.empty(rowIndex)}}" stepKey="waitForEmptyRow"/>
2020
<seeElement selector="{{RowOnStage.empty(rowIndex)}}" stepKey="seeEmptyRow"/>
21+
<see userInput="Drag content types or columns here" selector="{{RowOnStage.emptyPlaceholder(rowIndex)}}" stepKey="seeEmptyRowPlaceholderMessage"/>
2122
<seeNumberOfElements userInput="1" selector="{{pageBuilderArea}}{{RowOnStage.allRows}}" stepKey="seeOnlyOneRow"/>
2223
</actionGroup>
2324
</actionGroups>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderRowSection/RowOnStageSection.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<element name="notHidden" type="text" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
1616
<element name="baseCSS" type="text" selector="div.pagebuilder-content-type.pagebuilder-row"/>
1717
<element name="empty" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@class,'empty-container')]//div[contains(@class,'element-children') and contains(@class,'row-container')]" parameterized="true"/>
18+
<element name="emptyPlaceholder" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@class,'empty-container')]//div[contains(@class,'empty-placeholder')]" parameterized="true"/>
1819
<element name="displayLabel" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}]//div[contains(@class,'pagebuilder-display-label')]" parameterized="true"/>
1920
<element name="rowChildrenStyle" type="text" selector="(//div[contains(@class, 'pagebuilder-row')])[{{arg1}}]//div[contains(@class, 'element-children') and contains(@class, 'row-container')][contains(@style, '{{arg2}}')]" parameterized="true"/>
2021
<element name="rowWidthJS" type="text" selector="document.querySelectorAll('[data-content-type=row]')[{{arg1}} - 1].clientWidth" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderStageSection/PageBuilderStageSection.xml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,16 @@
1111
<element name="imageSource" type="text" selector="//img[contains(@src,'{{var1}}')]" parameterized="true"/>
1212
<element name="applyTemplateButton" type="button" selector="//button[contains(@data-bind,'toggleTemplateManger') and text()='Apply Template']"/>
1313
<element name="saveAsTemplateButton" type="button" selector="//button[contains(@data-bind,'saveAsTemplate') and text()='Save as Template']"/>
14+
<element name="editWithPageBuilderButton" type="button" selector="//button[contains(@data-bind,'pageBuilderEditButtonClick')]"/>
1415
<element name="openFullScreen" type="button" selector="//i[@class='icon-pagebuilder-fullscreen']"/>
1516
<element name="exitFullScreen" type="button" selector=".pagebuilder-header .icon-pagebuilder-fullscreen-exit"/>
1617
<element name="stageLoading" type="button" selector="div.pagebuilder-stage-loading"/>
1718
<element name="stageWrapper" type="button" selector="//div[@class='pagebuilder-stage-wrapper']"/>
1819
<element name="enabled" type="button" selector="//div[not(contains(@class, '_disabled'))]/div[contains(@class, 'pagebuilder-wysiwyg-wrapper')]/div[@class='pagebuilder-stage-wrapper']"/>
1920
<element name="disabled" type="button" selector="//div[contains(@class, '_disabled')]/div[contains(@class, 'pagebuilder-wysiwyg-wrapper')]/div[@class='pagebuilder-stage-wrapper']"/>
2021
<element name="stageWrapperFullScreen" type="button" selector="div.pagebuilder-stage-wrapper.stage-full-screen"/>
22+
<element name="stageOverlay" type="button" selector="div.pagebuilder-wysiwyg-overlay"/>
23+
<element name="stageOverlayOnHover" type="button" selector="div.pagebuilder-wysiwyg-overlay._hover"/>
2124
<element name="stageWidthJS" type="button" selector="document.querySelector('div[class~=\'root-container-container\']').clientWidth"/>
2225
<element name="modal" type="text" selector="aside.modal-popup._show"/>
2326
<element name="modalOk" type="button" selector="aside.modal-popup._show button.action-primary.action-accept"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminContentSnapshot/PageBuilderCatalogCategoryContentSnapshotTest.xml

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
10+
<test name="PageBuilderCatalogCategoryContentSnapshotTest">
11+
<annotations>
12+
<features value="PageBuilder"/>
13+
<stories value="Content Snapshot"/>
14+
<title value="Catalog Category - Verify PageBuilder Content Snapshot"/>
15+
<description value="This test is to ensure that the PageBuilder Content Snapshot appears on stage and PageBuilder works in full-screen mode."/>
16+
<severity value="MAJOR"/>
17+
<group value="pagebuilder"/>
18+
<group value="pagebuilder-contentSnapshot"/>
19+
<group value="pagebuilder-catalog-category"/>
20+
</annotations>
21+
<before>
22+
<createData entity="_defaultCategory" stepKey="createPreReqCategory"/>
23+
<actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
24+
<actionGroup ref="NavigateToCreatedCategoryActionGroup" stepKey="navigateToAPageWithPageBuilder">
25+
<argument name="Category" value="$$createPreReqCategory$$"/>
26+
</actionGroup>
27+
<actionGroup ref="expandAdminCategorySection" stepKey="expandContentSection"/>
28+
</before>
29+
<after>
30+
<deleteData createDataKey="createPreReqCategory" stepKey="deleteCreatedCategory"/>
31+
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
32+
</after>
33+
<!-- Verify Page Builder preview is ready -->
34+
<actionGroup ref="ValidatePageBuilderPreviewActionGroup" stepKey="verifyPageBuilderPreview"/>
35+
<!-- Verify Empty Row -->
36+
<actionGroup ref="verifyEmptyStage" stepKey="verifyPreviewEmptyRow"/>
37+
<!-- Open Page Builder Full Screen -->
38+
<actionGroup ref="AdminOpenPageBuilderFromContentPreviewOverlayActionGroup" stepKey="openPageBuilderFullScreen"/>
39+
<!-- Verify Empty Row -->
40+
<actionGroup ref="verifyEmptyStage" stepKey="verifyFullScreenEmptyRow"/>
41+
<!-- Add Button to Row -->
42+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection">
43+
<argument name="contentType" value="PageBuilderButtonsContentType"/>
44+
</actionGroup>
45+
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
46+
<argument name="contentType" value="PageBuilderButtonsContentType"/>
47+
</actionGroup>
48+
<actionGroup ref="inlineEditButton" stepKey="inlineEditButton">
49+
<argument name="text" value="PageBuilderButtonItemText_OneCharacter"/>
50+
</actionGroup>
51+
<!-- Exit full screen -->
52+
<actionGroup ref="exitPageBuilderFullScreen" stepKey="exitFullScreen"/>
53+
<!-- Verify PageBuilder Button Content Type is on Stage -->
54+
<waitForElementVisible selector="{{ButtonItemOnStorefrontEmptyLink.buttonItemText('1', PageBuilderButtonItemText_OneCharacter.value)}}" stepKey="seePageBuilderButtonText"/>
55+
<!-- Verify no Empty Preview Message on Stage -->
56+
<dontSeeElementInDOM selector="{{RowOnStage.empty('1')}}" stepKey="dontSeeEmptyRowOnPreview"/>
57+
<!-- Verify Page Builder preview is ready -->
58+
<actionGroup ref="ValidatePageBuilderPreviewActionGroup" stepKey="verifyPageBuilderPreviewAfterFullScreen"/>
59+
<!-- Verify Page Builder Full Screen -->
60+
<actionGroup ref="AdminOpenPageBuilderFromContentPreviewOverlayActionGroup" stepKey="openPageBuilderFullScreen2"/>
61+
</test>
62+
</tests>

‎app/code/Magento/PageBuilder/i18n/en_US.csv

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ Page,Page
1616
"Page with ID: %s doesn't exist","Page with ID: %s doesn't exist"
1717
"ID: %s","ID: %s"
1818
Condition,Condition
19+
"Photo upload is available in full screen mode","Photo upload is available in full screen mode"
1920
"This will change your Admin and storefront by:","This will change your Admin and storefront by:"
2021
"Removing PageBuilder's advanced content tools","Removing PageBuilder's advanced content tools"
2122
"from their assigned text fields and adding a basic text editor as replacement.","from their assigned text fields and adding a basic text editor as replacement."

‎app/code/Magento/PageBuilder/view/adminhtml/ui_component/category_form.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,16 @@
1212
<item name="config" xsi:type="array">
1313
<item name="wysiwygConfigData" xsi:type="array">
1414
<item name="is_pagebuilder_enabled" xsi:type="boolean">true</item>
15+
<item name="pagebuilder_content_snapshot" xsi:type="boolean">true</item>
1516
<item name="pagebuilder_button" xsi:type="boolean">true</item>
1617
</item>
1718
</item>
1819
</argument>
20+
<settings>
21+
<additionalClasses>
22+
<class name="admin__field-wide admin__field-page-builder">true</class>
23+
</additionalClasses>
24+
</settings>
1925
</field>
2026
</fieldset>
2127
</form>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_common.less

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,30 @@
4848
display: none !important;
4949
}
5050
}
51+
52+
//
53+
// Animations
54+
// _____________________________________________
55+
56+
.keyframes(
57+
@name;
58+
@arguments
59+
) {
60+
@-moz-keyframes @name {
61+
@arguments();
62+
}
63+
64+
@-webkit-keyframes @name {
65+
@arguments();
66+
}
67+
68+
@keyframes @name {
69+
@arguments();
70+
}
71+
}
72+
73+
.animation (@arguments) {
74+
-webkit-animation: @arguments;
75+
-moz-animation: @arguments;
76+
animation: @arguments;
77+
}

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_config.less

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,33 @@
4545
}
4646
}
4747
}
48+
49+
//
50+
// Page Builder full width field
51+
// _____________________________________________
52+
53+
.admin__fieldset {
54+
> .admin__field.admin__field-wide.admin__field-page-builder[class]:not(.admin__field-option) {
55+
> .admin__field-label {
56+
margin-bottom: @indent__xs;
57+
margin-top: @indent__xs;
58+
min-height: 32px;
59+
60+
span[data-config-scope] {
61+
&:before {
62+
left: 0;
63+
}
64+
}
65+
}
66+
}
67+
}
68+
69+
.admin__field-wide.admin__field-page-builder {
70+
margin-bottom: 32px;
71+
72+
button.action-default {
73+
position: absolute;
74+
right: 0;
75+
top: @indent__xs;
76+
}
77+
}

0 commit comments

Comments
 (0)