[Improvement] Implement design theme grid on ui component

app/code/Magento/Theme/Controller/Adminhtml/System/Design/Theme/Index.php

@@ -21,6 +21,7 @@ public function execute()
     {
         $this->_view->loadLayout();
         $this->_setActiveMenu('Magento_Theme::system_design_theme');
+        $this->_view->getLayout()->getBlock('page.title')->setPageTitle('Themes');
         $this->_view->renderLayout();
     }
 }

app/code/Magento/Theme/Model/ResourceModel/Theme/Collection.php

@@ -17,6 +17,11 @@ class Collection extends \Magento\Framework\Model\ResourceModel\Db\Collection\Ab
      */
     const DEFAULT_PAGE_SIZE = 6;
 
+    /**
+     * @var string
+     */
+    protected $_idFieldName = 'theme_id';
+
     /**
      * Collection initialization
      *

app/code/Magento/Theme/Model/ResourceModel/Theme/Grid/Collection.php

@@ -7,13 +7,15 @@
 
 /**
  * Theme grid collection
+ * @deprecated
+ * @see \Magento\Theme\Ui\Component\Theme\DataProvider\SearchResult
  */
 class Collection extends \Magento\Theme\Model\ResourceModel\Theme\Collection
 {
     /**
      * Add area filter
      *
-     * @return \Magento\Theme\Model\ResourceModel\Theme\Collection
+     * @return $this
      */
     protected function _initSelect()
     {

app/code/Magento/Theme/Test/Unit/Controller/Adminhtml/System/Design/Theme/IndexTest.php

@@ -28,13 +28,18 @@ public function testIndexAction()
             ->method('getMenuModel')
             ->will($this->returnValue($menuModel));
 
+        $titleBlock = $this->createMock(\Magento\Theme\Block\Html\Title::class);
+        $titleBlock->expects($this->once())->method('setPageTitle');
+
         $layout = $this->createMock(\Magento\Framework\View\LayoutInterface::class);
         $layout->expects($this->any())
             ->method('getBlock')
-            ->with($this->equalTo('menu'))
-            ->will($this->returnValue($menuBlock));
+            ->willReturnMap([
+                ['menu', $menuBlock],
+                ['page.title', $titleBlock]
+            ]);
 
-        $this->view->expects($this->once())
+        $this->view->expects($this->any())
             ->method('getLayout')
             ->will($this->returnValue($layout));
 

app/code/Magento/Theme/Test/Unit/Ui/Component/Listing/Column/ViewActionTest.php

@@ -0,0 +1,121 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types=1);
+
+namespace Magento\Theme\Test\Unit\Ui\Component\Listing\Column;
+
+use Magento\Framework\TestFramework\Unit\Helper\ObjectManager;
+use Magento\Framework\UrlInterface;
+use Magento\Theme\Ui\Component\Listing\Column\ViewAction;
+
+/**
+ * Class ViewActionTest contains unit tests for \Magento\Theme\Ui\Component\Listing\Column\ViewAction class
+ *
+ * @SuppressWarnings(PHPMD.LongVariable)
+ */
+class ViewActionTest extends \PHPUnit\Framework\TestCase
+{
+    /**
+     * @var ViewAction
+     */
+    protected $model;
+
+    /**
+     * @var UrlInterface|\PHPUnit_Framework_MockObject_MockObject
+     */
+    protected $urlBuilder;
+
+    /**
+     * @var \Magento\Framework\TestFramework\Unit\Helper\ObjectManager
+     */
+    protected $objectManager;
+
+    /**
+     * SetUp method
+     *
+     * @return void
+     */
+    protected function setUp()
+    {
+        $this->objectManager = new ObjectManager($this);
+        $this->urlBuilder = $this->getMockForAbstractClass(\Magento\Framework\UrlInterface::class);
+    }
+
+    /**
+     * @param array $data
+     * @param array $dataSourceItems
+     * @param array $expectedDataSourceItems
+     * @param string $expectedUrlPath
+     * @param array $expectedUrlParam
+     *
+     * @dataProvider getPrepareDataSourceDataProvider
+     * @return void
+     */
+    public function testPrepareDataSource(
+        $data,
+        $dataSourceItems,
+        $expectedDataSourceItems,
+        $expectedUrlPath,
+        $expectedUrlParam
+    ) {
+        $contextMock = $this->getMockBuilder(\Magento\Framework\View\Element\UiComponent\ContextInterface::class)
+            ->getMockForAbstractClass();
+        $processor = $this->getMockBuilder(\Magento\Framework\View\Element\UiComponent\Processor::class)
+            ->disableOriginalConstructor()
+            ->getMock();
+        $contextMock->expects($this->never())->method('getProcessor')->willReturn($processor);
+        $this->model = $this->objectManager->getObject(
+            ViewAction::class,
+            [
+                'urlBuilder' => $this->urlBuilder,
+                'data' => $data,
+                'context' => $contextMock,
+            ]
+        );
+
+        $this->urlBuilder->expects($this->once())
+            ->method('getUrl')
+            ->with($expectedUrlPath, $expectedUrlParam)
+            ->willReturn('url');
+
+        $dataSource = [
+            'data' => [
+                'items' => $dataSourceItems
+            ]
+        ];
+        $dataSource = $this->model->prepareDataSource($dataSource);
+        $this->assertEquals($expectedDataSourceItems, $dataSource['data']['items']);
+    }
+
+    /**
+     * Data provider for testPrepareDataSource
+     * @return array
+     */
+    public function getPrepareDataSourceDataProvider()
+    {
+        return [
+            [
+                ['name' => 'itemName', 'config' => []],
+                [['itemName' => '', 'entity_id' => 1]],
+                [['itemName' => ['view' => ['href' => 'url', 'label' => __('View')]], 'entity_id' => 1]],
+                '#',
+                ['id' => 1]
+            ],
+            [
+                ['name' => 'itemName', 'config' => [
+                    'viewUrlPath' => 'url_path',
+                    'urlEntityParamName' => 'theme_id',
+                    'indexField' => 'theme_id']
+                ],
+                [['itemName' => '', 'theme_id' => 2]],
+                [['itemName' => ['view' => ['href' => 'url', 'label' => __('View')]], 'theme_id' => 2]],
+                'url_path',
+                ['theme_id' => 2]
+            ]
+        ];
+    }
+}

app/code/Magento/Theme/Ui/Component/Listing/Column/ViewAction.php

@@ -0,0 +1,77 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types=1);
+
+namespace Magento\Theme\Ui\Component\Listing\Column;
+
+use Magento\Framework\UrlInterface;
+use Magento\Framework\View\Element\UiComponent\ContextInterface;
+use Magento\Framework\View\Element\UiComponentFactory;
+use Magento\Ui\Component\Listing\Columns\Column;
+
+/**
+ * Class ViewAction
+ */
+class ViewAction extends Column
+{
+    /**
+     * @var UrlInterface
+     */
+    private $urlBuilder;
+
+    /**
+     * Constructor
+     *
+     * @param ContextInterface $context
+     * @param UiComponentFactory $uiComponentFactory
+     * @param UrlInterface $urlBuilder
+     * @param array $components
+     * @param array $data
+     */
+    public function __construct(
+        ContextInterface $context,
+        UiComponentFactory $uiComponentFactory,
+        UrlInterface $urlBuilder,
+        array $components = [],
+        array $data = []
+    ) {
+        $this->urlBuilder = $urlBuilder;
+        parent::__construct($context, $uiComponentFactory, $components, $data);
+    }
+
+    /**
+     * Prepare Theme Data Source
+     *
+     * @param array $dataSource
+     * @return array
+     */
+    public function prepareDataSource(array $dataSource) : array
+    {
+        if (isset($dataSource['data']['items'])) {
+            foreach ($dataSource['data']['items'] as & $item) {
+                $indexField = $this->getData('config/indexField') ?: 'entity_id';
+                if (isset($item[$indexField])) {
+                    $viewUrlPath = $this->getData('config/viewUrlPath') ?: '#';
+                    $urlEntityParamName = $this->getData('config/urlEntityParamName') ?: 'id';
+                    $item[$this->getData('name')] = [
+                        'view' => [
+                            'href' => $this->urlBuilder->getUrl(
+                                $viewUrlPath,
+                                [
+                                    $urlEntityParamName => $item[$indexField]
+                                ]
+                            ),
+                            'label' => __('View')
+                        ]
+                    ];
+                }
+            }
+        }
+
+        return $dataSource;
+    }
+}

app/code/Magento/Theme/Ui/Component/Theme/DataProvider/SearchResult.php

@@ -0,0 +1,53 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types=1);
+
+namespace Magento\Theme\Ui\Component\Theme\DataProvider;
+
+/**
+ * Theme search result
+ */
+class SearchResult extends \Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult
+{
+    /**
+     * {@inheritdoc}
+     */
+    protected $_map = [
+        'fields' => [
+            'theme_id' => 'main_table.theme_id',
+            'theme_title' => 'main_table.theme_title',
+            'theme_path' => 'main_table.theme_path',
+            'parent_theme_title' => 'parent.theme_title',
+        ],
+    ];
+
+    /**
+     * Add area and type filters
+     * Join parent theme title
+     *
+     * @return $this
+     */
+    protected function _initSelect()
+    {
+        parent::_initSelect();
+        $this
+            ->addFieldToFilter('main_table.area', \Magento\Framework\App\Area::AREA_FRONTEND)
+            ->addFieldToFilter('main_table.type', ['in' => [
+                \Magento\Framework\View\Design\ThemeInterface::TYPE_PHYSICAL,
+                \Magento\Framework\View\Design\ThemeInterface::TYPE_VIRTUAL,
+            ]])
+        ;
+
+        $this->getSelect()->joinLeft(
+            ['parent' => $this->getMainTable()],
+            'main_table.parent_id = parent.theme_id',
+            ['parent_theme_title' => 'parent.theme_title']
+        );
+
+        return $this;
+    }
+}

app/code/Magento/Theme/etc/di.xml

@@ -108,6 +108,7 @@
         <arguments>
              <argument name="collections" xsi:type="array">
                  <item name="design_config_listing_data_source" xsi:type="string">Magento\Theme\Model\ResourceModel\Design\Config\Grid\Collection</item>
+                 <item name="design_theme_listing_data_source" xsi:type="string">Magento\Theme\Ui\Component\Theme\DataProvider\SearchResult</item>
              </argument>
          </arguments>
      </type>
@@ -273,4 +274,11 @@
             <argument name="themeList" xsi:type="object">Magento\Theme\Model\ResourceModel\Theme\Collection</argument>
         </arguments>
     </type>
+    <type name="Magento\Theme\Ui\Component\Theme\DataProvider\SearchResult">
+        <arguments>
+            <argument name="mainTable" xsi:type="string">theme</argument>
+            <argument name="resourceModel" xsi:type="string">Magento\Theme\Model\ResourceModel\Theme</argument>
+            <argument name="identifierName" xsi:type="string">theme_id</argument>
+        </arguments>
+    </type>
 </config>

app/code/Magento/Theme/i18n/en_US.csv

@@ -185,3 +185,6 @@ Settings,Settings
 "2 columns with left bar","2 columns with left bar"
 "2 columns with right bar","2 columns with right bar"
 "3 columns","3 columns"
+ID,ID
+View,View
+Action,Action

app/code/Magento/Theme/view/adminhtml/layout/adminhtml_system_design_theme_index.xml

@@ -6,11 +6,9 @@
  */
 -->
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
-    <update handle="formkey"/>
-    <update handle="adminhtml_system_design_theme_block"/>
     <body>
         <referenceContainer name="content">
-            <block class="Magento\Theme\Block\Adminhtml\System\Design\Theme" name="design_theme"/>
+            <uiComponent name="design_theme_listing"/>
         </referenceContainer>
     </body>
 </page>