Merge pull request #282 from magento-obsessive-owls/MC-17658

MC-17658: Save Selected Block/Dynamic Block In Edit Form By Only Clicking Select Button

Author: cspruiell

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeBlockActionGroup.xml

@@ -23,9 +23,6 @@
         <waitForElementVisible selector="{{BlockOnGrid.selectBtn(block.identifier)}}" stepKey="waitForSearchResult"/>
         <click selector="{{BlockOnGrid.selectBtn(block.identifier)}}" stepKey="clickSelectBtn"/>
         <waitForPageLoad stepKey="waitForPageLoad3"/>
-        <waitForElementVisible selector="{{BlockOnGrid.addSelectedBtn}}" stepKey="waitForAddSelected"/>
-        <click selector="{{BlockOnGrid.addSelectedBtn}}" stepKey="clickAddSelected"/>
-        <waitForPageLoad stepKey="waitForPageLoad4"/>
         <waitForElementVisible selector="{{BlockOnForm.title(block.title)}}" stepKey="waitToSeeBlockTitle"/>
     </actionGroup>
     <actionGroup name="verifyBlockOnStage">

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBlockSection.xml

@@ -35,8 +35,7 @@
     <section name="BlockOnGrid">
         <element name="searchBox" type="text" selector="//input[contains(@class,'data-grid-search-control')]"/>
         <element name="searchBtn" type="text" selector=".action-submit"/>
-        <element name="selectBtn" type="text" selector="//div[text()='{{arg}}']/parent::td//preceding-sibling::td//button[text()='Select']" parameterized="true"/>
-        <element name="addSelectedBtn" type="text" selector="//aside[contains(@class, '_show')]//button/span[text()='Add Selected']"/>
+        <element name="selectBtn" type="text" selector="//div[text()='{{arg}}']/parent::td/parent::tr//button[text()='Select']" parameterized="true"/>
     </section>
     <section name="BlockOnForm">
         <element name="title" type="text" selector="(//div[contains(@class,'pagebuilder-block')]//div[contains(@class,'block-title') and text()='{{arg1}}'])" parameterized="true"/>

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_block_form.xml

@@ -94,7 +94,7 @@
             <settings>
                 <dataType>text</dataType>
                 <imports>
-                    <link name="value">${ $.ns }.${ $.ns }.modal.pagebuilder_block_select_grid:externalValue</link>
+                    <link name="value">${ $.ns }.${ $.ns }.modal.pagebuilder_block_select_grid.columns.ids:lastSelected</link>
                 </imports>
             </settings>
         </field>
@@ -127,27 +127,12 @@
     </fieldset>
     <modal name="modal" sortOrder="30">
         <settings>
+            <listens>
+                <link name="pagebuilder_block_select_grid.pagebuilder_block_select_grid.columns.ids:lastSelected">closeModal</link>
+            </listens>
+            <modalClass>pagebuilder-block-modal</modalClass>
             <options>
                 <option name="title" xsi:type="string" translate="true">Select Block</option>
-                <option name="buttons" xsi:type="array">
-                    <item name="0" xsi:type="array">
-                        <item name="text" xsi:type="string" translate="true">Cancel</item>
-                        <item name="actions" xsi:type="array">
-                            <item name="0" xsi:type="string">closeModal</item>
-                        </item>
-                    </item>
-                    <item name="1" xsi:type="array">
-                        <item name="text" xsi:type="string">Add Selected</item>
-                        <item name="class" xsi:type="string">action-primary</item>
-                        <item name="actions" xsi:type="array">
-                            <item name="0" xsi:type="array">
-                                <item name="targetName" xsi:type="string">${ $.name }.pagebuilder_block_select_grid</item>
-                                <item name="actionName" xsi:type="string">save</item>
-                            </item>
-                            <item name="1" xsi:type="string">closeModal</item>
-                        </item>
-                    </item>
-                </option>
             </options>
         </settings>
         <insertListing name="pagebuilder_block_select_grid" sortOrder="10">
@@ -163,6 +148,9 @@
                     <imports>false</imports>
                     <exports>true</exports>
                 </dataLinks>
+                <listens>
+                    <link name="pagebuilder_block_select_grid.pagebuilder_block_select_grid.columns.ids:lastSelected">save</link>
+                </listens>
             </settings>
         </insertListing>
     </modal>

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_block_select_grid.xml

@@ -49,11 +49,6 @@
                 <param name="controlVisibility" xsi:type="boolean">true</param>
             </childDefaults>
         </settings>
-        <selectionsColumn name="ids" component="Magento_PageBuilder/js/grid/cells/single-select">
-            <settings>
-                <indexField>block_id</indexField>
-            </settings>
-        </selectionsColumn>
         <column name="block_id" sortOrder="10">
             <settings>
                 <label translate="true">ID</label>
@@ -97,5 +92,10 @@
                 <visible>false</visible>
             </settings>
         </column>
+        <selectionsColumn name="ids" component="Magento_PageBuilder/js/grid/cells/single-select">
+            <settings>
+                <indexField>block_id</indexField>
+            </settings>
+        </selectionsColumn>
     </columns>
 </listing>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/block/_default.less

@@ -70,3 +70,7 @@
         }
     }
 }
+
+.pagebuilder-block-modal {
+    margin-top: 15px;
+}

app/code/Magento/PageBuilder/view/adminhtml/web/js/grid/cells/single-select.js

@@ -14,6 +14,7 @@ define([
             bodyTmpl: 'Magento_PageBuilder/grid/cells/single-select',
             label: '',
             extendedSelections: [],
+            lastSelected: null,
             listens: {
                 selected: 'onSelectedChange setExtendedSelections'
             }
@@ -22,7 +23,7 @@ define([
         /** @inheritdoc */
         initObservable: function () {
             this._super()
-                .observe('extendedSelections');
+                .observe('extendedSelections lastSelected');
 
             return this;
         },
@@ -60,6 +61,14 @@ define([
             return this.selected()[0] === id;
         },
 
+        /** @inheritdoc **/
+        select: function (id) {
+            this._super();
+            this.lastSelected(id);
+
+            return this;
+        },
+
         /** @inheritdoc */
         _setSelection: function (id, isIndex, select) {
             var selected = this.selected;