[WIP] Show error message in the grid's body

AdobeStockAsset/Model/GetAssetList.php

@@ -74,7 +74,7 @@ public function execute(SearchCriteriaInterface $searchCriteria): SearchResultIn
         } catch (AuthenticationException $exception) {
             throw new LocalizedException(
                 __(
-                    'Failed to authenticate to Adobe Stock API. Please correct the API credentials in '
+                    'Failed to authenticate to Adobe Stock API. <br> Please correct the API credentials in '
                     . '<a href="%1">Configuration → System → Adobe Stock Integration.</a>',
                     $this->url->getUrl('adminhtml/system_config/edit/section/system')
                 )

AdobeStockImageAdminUi/Model/Listing/DataProvider.php

@@ -28,16 +28,16 @@ class DataProvider extends \Magento\Framework\View\Element\UiComponent\DataProvi
 
     /**
      * DataProvider constructor.
-     * @param string                $name
-     * @param string                $primaryFieldName
-     * @param string                $requestFieldName
-     * @param ReportingInterface    $reporting
+     * @param string $name
+     * @param string $primaryFieldName
+     * @param string $requestFieldName
+     * @param ReportingInterface $reporting
      * @param SearchCriteriaBuilder $searchCriteriaBuilder
-     * @param RequestInterface      $request
-     * @param FilterBuilder         $filterBuilder
+     * @param RequestInterface $request
+     * @param FilterBuilder $filterBuilder
      * @param GetImageListInterface $getImageList
-     * @param array                 $meta
-     * @param array                 $data
+     * @param array $meta
+     * @param array $data
      */
     public function __construct(
         string $name,
@@ -67,8 +67,22 @@ public function __construct(
 
     /**
      * @inheritdoc
-     *
-     * @throws LocalizedException
+     */
+    public function getData()
+    {
+        try {
+            return $this->searchResultToOutput($this->getSearchResult());
+        } catch (LocalizedException $exception) {
+            return [
+                'items' => [],
+                'totalRecords' => 0,
+                'errorMessage' => $exception->getMessage()
+            ];
+        }
+    }
+
+    /**
+     * @inheritdoc
      */
     public function getSearchResult(): SearchResultInterface
     {

AdobeStockImageAdminUi/Test/Mftf/ActionGroup/AdminOpenMediaGalleryForPageNoEditorActionGroup.xml

@@ -14,7 +14,7 @@
         <click selector="{{CmsPagesPageActionsSection.addNewPageButton}}" stepKey="clickAddNewPage"/>
         <click selector="{{CmsNewPagePageContentSection.header}}" stepKey="clickExpandContent"/>
         <waitForElementVisible selector="{{CmsWYSIWYGSection.ShowHideBtn}}" stepKey="waitForShowHideButton" />
-        <click selector="{{CmsWYSIWYGSection.ShowHideBtn}}" stepKey="HideEditor" />
+        <conditionalClick selector="{{CmsWYSIWYGSection.ShowHideBtn}}" dependentSelector="{{CmsWYSIWYGSection.InsertImageBtn}}" visible="false" stepKey="HideEditor" />
         <waitForElementVisible selector="{{CmsWYSIWYGSection.InsertImageBtn}}" stepKey="waitForInsertImageButton" />
         <click selector="{{CmsWYSIWYGSection.InsertImageBtn}}" stepKey="clickInsertImage" />
         <waitForPageLoad stepKey="waitForMediaGallery"/>

AdobeStockImageAdminUi/Test/Unit/Model/Listing/DataProviderTest.php

@@ -14,6 +14,7 @@
 use Magento\Framework\Api\Search\SearchCriteria;
 use Magento\Framework\Api\Search\SearchCriteriaBuilder;
 use Magento\Framework\Api\Search\SearchResultInterface;
+use Magento\Framework\Exception\LocalizedException;
 use Magento\Framework\TestFramework\Unit\Helper\ObjectManager;
 use PHPUnit\Framework\MockObject\MockObject;
 use PHPUnit\Framework\TestCase;
@@ -113,6 +114,33 @@ public function testGetData(array $itemsData): void
         $this->assertEquals($data, $this->dataProvider->getData());
     }
 
+    /**
+     * Verify LocalizedExceptions messages are returned in errorMessage data node
+     */
+    public function testGetDataException(): void
+    {
+        $searchCriteria = $this->createMock(SearchCriteria::class);
+        $searchCriteria->expects($this->once())
+            ->method('setRequestName')
+            ->with('adobe_stock_images_listing_data_source');
+
+        $this->searchCriteriaBuilder->expects($this->once())
+            ->method('create')
+            ->willReturn($searchCriteria);
+
+        $this->getImageListMock->expects($this->once())
+            ->method('execute')
+            ->willThrowException(new LocalizedException(__('Localized error')));
+
+        $data = [
+            'items' => [],
+            'totalRecords' => 0,
+            'errorMessage' => 'Localized error'
+        ];
+
+        $this->assertEquals($data, $this->dataProvider->getData());
+    }
+
     /**
      * @param array $itemsData
      * @return SearchResultInterface|MockObject

AdobeUi/view/adminhtml/web/css/source/_module.less

@@ -12,7 +12,8 @@
             margin: @admin__masonry_grid_image__space/2 -(@admin__masonry_grid_image__space/2);
             overflow: hidden;
 
-            .no-data-message-container {
+            .no-data-message-container,
+            .error-message-container {
                 font-size: @data-grid__no-records__font-size;
                 padding: @data-grid__no-records__padding;
                 text-align: center;

AdobeUi/view/adminhtml/web/js/components/grid/masonry.js

@@ -13,7 +13,8 @@ define([
         defaults: {
             template: 'Magento_AdobeUi/grid/masonry',
             imports: {
-                rows: '${ $.provider }:data.items'
+                rows: '${ $.provider }:data.items',
+                errorMessage: '${ $.provider }:data.errorMessage'
             },
             listens: {
                 'rows': 'initComponent'
@@ -57,7 +58,8 @@ define([
         initObservable: function () {
             this._super()
                 .observe([
-                    'rows'
+                    'rows',
+                    'errorMessage'
                 ]);
 
             return this;
@@ -245,6 +247,15 @@ define([
          */
         hasData: function () {
             return !!this.rows() && !!this.rows().length;
+        },
+
+        /**
+         * Returns error message returned by the data provider
+         *
+         * @returns {String|null}
+         */
+        getErrorMessage: function () {
+            return this.errorMessage();
         }
     });
 });

AdobeUi/view/adminhtml/web/template/grid/masonry.html

@@ -8,7 +8,10 @@
     <div class="masonry-image-column" repeat="foreach: rows, item: '$row'">
         <div outerfasteach="data: getVisible(), as: '$col'" template="getBody()"/>
     </div>
-    <div ifnot="hasData()" class="no-data-message-container">
+    <div if="!hasData() && !getErrorMessage()" class="no-data-message-container">
         <span translate="'We couldn\'t find any records.'"/>
     </div>
+    <div if="getErrorMessage()" class="error-message-container">
+        <span data-bind="html: getErrorMessage()"/>
+    </div>
 </div>