Skip to content

Commit aca4b1a

Browse files
omiroshnichenkoomiroshnichenko
committed
Merge branch '514_content-snapshot-category-admin-page' of github.com:magento/magento2-page-builder into 511_content-snapshot-product-admin-page
2 parents 67b73a4 + 2b2e664 commit aca4b1a

File tree

10 files changed

+201
-13
lines changed

10 files changed

+201
-13
lines changed

‎app/code/Magento/PageBuilder/Model/WidgetInitializerConfig.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ public function getConfig(): array
4747
{
4848
$resultConfig = [];
4949
foreach ($this->config as $contentTypeName => $config) {
50-
$selector = sprintf('[data-content-type="%s"]', $contentTypeName);
5150
foreach ($config as $item) {
51+
$selector = sprintf('[data-content-type="%s"]', $contentTypeName);
5252
if (!isset($item['component'])) {
5353
continue;
5454
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
<element name="enabled" type="button" selector="//div[not(contains(@class, '_disabled'))]/div[contains(@class, 'pagebuilder-wysiwyg-wrapper')]/div[@class='pagebuilder-stage-wrapper']"/>
1919
<element name="disabled" type="button" selector="//div[contains(@class, '_disabled')]/div[contains(@class, 'pagebuilder-wysiwyg-wrapper')]/div[@class='pagebuilder-stage-wrapper']"/>
2020
<element name="stageWrapperFullScreen" type="button" selector="div.pagebuilder-stage-wrapper.stage-full-screen"/>
21+
<element name="stageOverlay" type="button" selector="div.pagebuilder-wysiwyg-overlay"/>
22+
<element name="stageOverlayOnHover" type="button" selector="div.pagebuilder-wysiwyg-overlay._hover"/>
2123
<element name="stageWidthJS" type="button" selector="document.querySelector('div[class~=\'root-container-container\']').clientWidth"/>
2224
<element name="modal" type="text" selector="aside.modal-popup._show"/>
2325
<element name="modalOk" type="button" selector="aside.modal-popup._show button.action-primary.action-accept"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderFullScreenModeTest/PageBuilderContentSnapshotFullScreenTest.xml

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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="PageBuilderContentSnapshotFullScreenTest">
11+
<annotations>
12+
<features value="PageBuilder"/>
13+
<stories value="Content Snapshot"/>
14+
<title value="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="AVERAGE"/>
17+
<group value="pagebuilder"/>
18+
<group value="pagebuilder-contentSnapshot"/>
19+
</annotations>
20+
<before>
21+
<actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
22+
<createData entity="_defaultCategory" stepKey="createPreReqCategory"/>
23+
<actionGroup ref="NavigateToCreatedCategoryActionGroup" stepKey="navigateToAPageWithPageBuilder">
24+
<argument name="Category" value="$$createPreReqCategory$$"/>
25+
</actionGroup>
26+
<actionGroup ref="expandAdminCategorySection" stepKey="switchToPageBuilderStage"/>
27+
</before>
28+
<after>
29+
<deleteData createDataKey="createPreReqCategory" before="logout" stepKey="deleteCreatedCategory"/>
30+
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
31+
</after>
32+
<!-- See Edit with Page Builder button -->
33+
<waitForElementVisible selector="{{PageBuilderCategoryAttribute.PageBuilderArea('description')}}" stepKey="waitForEditWithPageBuilderButton"/>
34+
<!-- Verify Stage Empty -->
35+
<actionGroup ref="verifyEmptyStage" stepKey="verifyEmptyStage"/>
36+
<!-- Verify Empty Preview Message is on Stage-->
37+
<see selector="{{RowOnStage.base('1')}}" userInput="Drag content types or columns here" stepKey="seeEmptyPreviewMessageOnStage"/>
38+
<!-- Verify no PageBuilder Content Type Panel -->
39+
<dontSeeElementInDOM selector="{{PageBuilderPanel.leftPanel}}" stepKey="dontSeePageBuilderContentTypePanelOnStage"/>
40+
<!-- Verify no Apply Template and Save as Template buttons -->
41+
<actionGroup ref="verifyNoPageBuilderSaveOrApplyTemplateButtons" stepKey="verifyNoPageBuilderSaveOrApplyTemplateButtonsOnStage"/>
42+
<!-- Verify Overlay -->
43+
<moveMouseOver selector="{{PageBuilderStage.stageOverlay}}" stepKey="mouseOverWYSIWYGOverlayOnStage"/>
44+
<waitForElementVisible selector="{{PageBuilderStage.stageOverlayOnHover}}" stepKey="waitForWYSIWYGOverlayOnStageHover"/>
45+
<!-- Verify full screen mode -->
46+
<click selector="{{PageBuilderStage.stageOverlay}}" stepKey="clickOnWYSIWYGOverlayOnStage"/>
47+
<waitForPageLoad stepKey="waitForFullScreenAnimation"/>
48+
<waitForPageLoad stepKey="waitForPageLoadPageBuilder"/>
49+
<waitForElementVisible selector="{{PageBuilderPanel.layoutMenuSection}}" stepKey="waitForPageBuilderVisible"/>
50+
<waitForElementVisible selector="{{PageBuilderStage.stageWrapperFullScreen}}" stepKey="seePageBuilderFullSizeScreen"/>
51+
<!-- Verify Empty Row -->
52+
<actionGroup ref="verifyEmptyStage" stepKey="verifyFullScreenEmptyRow"/>
53+
<!-- Add Button to Row -->
54+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection">
55+
<argument name="contentType" value="PageBuilderButtonsContentType"/>
56+
</actionGroup>
57+
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
58+
<argument name="contentType" value="PageBuilderButtonsContentType"/>
59+
</actionGroup>
60+
<!-- Exit full screen -->
61+
<actionGroup ref="exitPageBuilderFullScreen" stepKey="exitFullScreen"/>
62+
<!-- Verify PageBuilder Button Content Type is on Stage -->
63+
<seeElementInDOM selector="{{ButtonItemOnStage.emptyButtonItemElement('1')}}" stepKey="seePageBuilderButtonsContentTypeEmpty"/>
64+
<!-- Verify no Empty Preview Message on Stage -->
65+
<dontSeeElementInDOM selector="{{RowOnStage.empty('1')}}" stepKey="dontSeeEmptyPreviewMessageOnStage"/>
66+
<!-- Verify no PageBuilder Content Type Panel -->
67+
<dontSeeElementInDOM selector="{{PageBuilderPanel.leftPanel}}" stepKey="dontSeePageBuilderContentTypePanel"/>
68+
<!-- Verify no Apply Template and Save as Template buttons -->
69+
<actionGroup ref="verifyNoPageBuilderSaveOrApplyTemplateButtons" stepKey="verifyNoPageBuilderSaveOrApplyTemplateButtons"/>
70+
<!-- Verify Overlay after hover over preview outside of button -->
71+
<moveMouseOver selector="{{PageBuilderStage.stageOverlay}}" stepKey="mouseOverWYSIWYGOverlay"/>
72+
<waitForElementVisible selector="{{PageBuilderStage.stageOverlayOnHover}}" stepKey="waitForWYSIWYGOverlayHover"/>
73+
<!-- Verify Overlay after hover over button in preview -->
74+
<moveMouseOver selector="{{PageBuilderStage.contentTypeInStage(PageBuilderButtonsContentType.role)}}" stepKey="mouseOverPageBuilderButtonsContentTypeEmpty"/>
75+
<waitForElementVisible selector="{{PageBuilderStage.stageOverlayOnHover}}" stepKey="waitForWYSIWYGOverlayHoverVisible"/>
76+
<!-- Verify PageBuilder Button has no option menu -->
77+
<actionGroup ref="validateOnHoverNoOptionMenu" stepKey="verifyPageBuilderButtonsHasNoOptionMenu">
78+
<argument name="contentType" value="PageBuilderButtonsContentType"/>
79+
</actionGroup>
80+
<!-- Verify full screen mode -->
81+
<click selector="{{PageBuilderStage.stageOverlay}}" stepKey="clickOnWYSIWYGOverlay"/>
82+
<waitForPageLoad stepKey="waitForFullScreenAnimation2"/>
83+
<waitForPageLoad stepKey="waitForPageLoadPageBuilder2"/>
84+
<waitForElementVisible selector="{{PageBuilderPanel.layoutMenuSection}}" stepKey="waitForPageBuilderVisible2"/>
85+
<waitForElementVisible selector="{{PageBuilderStage.stageWrapperFullScreen}}" stepKey="seePageBuilderFullSizeScreen2"/>
86+
</test>
87+
</tests>

‎app/code/Magento/PageBuilder/Test/Unit/Model/WidgetInitializerConfigTest.php

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
declare(strict_types=1);
7+
8+
namespace Magento\PageBuilder\Test\Unit\Model;
9+
10+
use Magento\PageBuilder\Model\WidgetInitializerConfig;
11+
use PHPUnit\Framework\TestCase;
12+
13+
/**
14+
* Test for WidgetInitializerConfig
15+
*/
16+
class WidgetInitializerConfigTest extends TestCase
17+
{
18+
/**
19+
* Test different config variation.
20+
*
21+
* @dataProvider configProvider
22+
* @param array $config
23+
* @param array $expectedConfig
24+
*/
25+
public function testGetConfig(array $config, array $expectedConfig): void
26+
{
27+
$model = new WidgetInitializerConfig(
28+
$config
29+
);
30+
31+
$actualConfig = $model->getConfig();
32+
$this->assertEquals($expectedConfig, $actualConfig);
33+
}
34+
35+
/**
36+
* @return array
37+
*/
38+
public function configProvider(): array
39+
{
40+
return [
41+
[
42+
[
43+
'products' => [
44+
'default' => [
45+
'component' => 'test',
46+
'appearance' => 'default',
47+
'config' => [
48+
'a' => true
49+
]
50+
]
51+
]
52+
],
53+
[
54+
'[data-content-type="products"][data-appearance="default"]' => [
55+
'test' => [
56+
'a' => true
57+
]
58+
]
59+
]
60+
],
61+
[
62+
[
63+
'products' => [
64+
'default' => [
65+
'component' => 'test-component',
66+
'appearance' => 'default',
67+
'config' => [
68+
'a' => true
69+
]
70+
],
71+
'another' => [
72+
'component' => 'another-test-component',
73+
'appearance' => 'not_default',
74+
'config' => [
75+
'b' => false
76+
]
77+
]
78+
]
79+
],
80+
[
81+
'[data-content-type="products"][data-appearance="default"]' => [
82+
'test-component' => [
83+
'a' => true
84+
]
85+
],
86+
'[data-content-type="products"][data-appearance="not_default"]' => [
87+
'another-test-component' => [
88+
'b' => false
89+
]
90+
]
91+
]
92+
]
93+
];
94+
}
95+
}

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
// * See COPYING.txt for license details.
44
// */
55

6-
@border-size: 2px;
7-
@wysiwyg-overlay-background: #0078f9;
8-
@wysiwyg-overlay-border: #4181e4;
9-
106
.pagebuilder-header {
117
opacity: 0;
128
text-align: right;
@@ -193,8 +189,8 @@
193189
}
194190

195191
&._hover {
196-
background-color: fade(@wysiwyg-overlay-background, 8%);
197-
border-color: @wysiwyg-overlay-border;
192+
background-color: fade(@color-pagebuilder-blue, 10%);
193+
border-color: @color-pagebuilder-blue;
198194
transform: translateY(0);
199195
}
200196

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
@color-pagebuilder-light-gray: #f8f3eb;
3535
@color-pagebuilder-darker-gray: #2b2625;
3636
@color-pagebuilder-darkest-gray: #1c1918;
37+
@color-pagebuilder-blue: #1473E6;
3738
@color-pagebuilder-light-blue: #bfe2f0;
3839
@placeholder-background: #dff7ff;
3940
@placeholder-outline: #c0dffa;

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/master-format/render.js

Lines changed: 2 additions & 2 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/js/master-format/render/frame.js

Lines changed: 6 additions & 1 deletion
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/ts/js/master-format/render.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,13 @@ export default class MasterFormatRenderer {
8080
this.channel = new MessageChannel();
8181
const frame = this.getRenderFrame();
8282
window.addEventListener("message", (event) => {
83-
if (!this.ready && event.data === "PB_RENDER_READY") {
83+
if (!this.ready && event.data.name === "PB_RENDER_READY" && this.stageId === event.data.stageId) {
8484
frame.contentWindow.postMessage("PB_RENDER_PORT", "*", [this.channel.port2]);
8585
this.ready = true;
8686
this.readyDeferred.resolve();
8787
}
8888
});
89-
frame.src = Config.getConfig("render_url");
89+
frame.src = Config.getConfig("render_url") + "?stageId=" + this.stageId;
9090
}
9191

9292
/**

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/master-format/render/frame.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ const debounceRender = _.debounce((message: {stageId: string, tree: TreeItem}, r
4141
* Listen for requests from the parent window for a render
4242
*/
4343
export default function listen(config: ConfigInterface) {
44+
const stageId = window.location.href.split("?")[1].split("=")[1];
45+
4446
Config.setConfig(config);
4547
Config.setMode("Master");
4648

@@ -74,7 +76,7 @@ export default function listen(config: ConfigInterface) {
7476
);
7577

7678
// Inform the parent iframe that we're ready to receive the port
77-
window.parent.postMessage("PB_RENDER_READY", "*");
79+
window.parent.postMessage({name: "PB_RENDER_READY", stageId}, "*");
7880
}
7981

8082
/**

0 commit comments

Comments
 (0)