[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

@@ -5,11 +5,62 @@
  */
 namespace Magento\Theme\Model\ResourceModel\Theme\Grid;
 
+use Magento\Theme\Model\ResourceModel\Theme\Collection as ThemeCollection;
+use Magento\Framework\Api\Search\SearchResultInterface;
+use Magento\Framework\Api\Search\AggregationInterface;
+
 /**
  * Theme grid collection
  */
-class Collection extends \Magento\Theme\Model\ResourceModel\Theme\Collection
+class Collection extends ThemeCollection implements SearchResultInterface
 {
+    /**
+     * @var AggregationInterface
+     */
+    protected $aggregations;
+
+    /**
+     * @param \Magento\Framework\Data\Collection\EntityFactoryInterface $entityFactory
+     * @param \Psr\Log\LoggerInterface $logger
+     * @param \Magento\Framework\Data\Collection\Db\FetchStrategyInterface $fetchStrategy
+     * @param \Magento\Framework\Event\ManagerInterface $eventManager
+     * @param string $mainTable
+     * @param string $eventPrefix
+     * @param string $eventObject
+     * @param string $resourceModel
+     * @param string $model
+     * @param \Magento\Framework\DB\Adapter\AdapterInterface|string|null $connection
+     * @param \Magento\Framework\Model\ResourceModel\Db\AbstractDb $resource
+     *
+     * @SuppressWarnings(PHPMD.ExcessiveParameterList)
+     */
+    public function __construct(
+        \Magento\Framework\Data\Collection\EntityFactoryInterface $entityFactory,
+        \Psr\Log\LoggerInterface $logger,
+        \Magento\Framework\Data\Collection\Db\FetchStrategyInterface $fetchStrategy,
+        \Magento\Framework\Event\ManagerInterface $eventManager,
+        $mainTable,
+        $eventPrefix,
+        $eventObject,
+        $resourceModel,
+        $model = \Magento\Framework\View\Element\UiComponent\DataProvider\Document::class,
+        $connection = null,
+        \Magento\Framework\Model\ResourceModel\Db\AbstractDb $resource = null
+    ) {
+        parent::__construct(
+            $entityFactory,
+            $logger,
+            $fetchStrategy,
+            $eventManager,
+            $connection,
+            $resource
+        );
+        $this->_eventPrefix = $eventPrefix;
+        $this->_eventObject = $eventObject;
+        $this->_init($model, $resourceModel);
+        $this->setMainTable($mainTable);
+    }
+
     /**
      * Add area filter
      *
@@ -19,6 +70,86 @@ protected function _initSelect()
     {
         \Magento\Theme\Model\ResourceModel\Theme\Collection::_initSelect();
         $this->filterVisibleThemes()->addAreaFilter(\Magento\Framework\App\Area::AREA_FRONTEND)->addParentTitle();
+        $this
+            ->addFilterToMap('theme_id', 'main_table.theme_id')
+            ->addFilterToMap('theme_title', 'main_table.theme_title')
+            ->addFilterToMap('theme_path', 'main_table.theme_path')
+            ->addFilterToMap('parent_theme_title', 'parent.theme_title')
+        ;
+        return $this;
+    }
+
+    /**
+     * @return AggregationInterface
+     */
+    public function getAggregations()
+    {
+        return $this->aggregations;
+    }
+
+    /**
+     * @param AggregationInterface $aggregations
+     * @return $this
+     */
+    public function setAggregations($aggregations)
+    {
+        $this->aggregations = $aggregations;
+        return $this;
+    }
+
+    /**
+     * Get search criteria.
+     *
+     * @return \Magento\Framework\Api\SearchCriteriaInterface|null
+     */
+    public function getSearchCriteria()
+    {
+        return null;
+    }
+
+    /**
+     * Set search criteria.
+     *
+     * @param \Magento\Framework\Api\SearchCriteriaInterface $searchCriteria
+     * @return $this
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function setSearchCriteria(\Magento\Framework\Api\SearchCriteriaInterface $searchCriteria = null)
+    {
+        return $this;
+    }
+
+    /**
+     * Get total count.
+     *
+     * @return int
+     */
+    public function getTotalCount()
+    {
+        return $this->getSize();
+    }
+
+    /**
+     * Set total count.
+     *
+     * @param int $totalCount
+     * @return $this
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function setTotalCount($totalCount)
+    {
+        return $this;
+    }
+
+    /**
+     * Set items list.
+     *
+     * @param \Magento\Framework\Api\ExtensibleDataInterface[] $items
+     * @return $this
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function setItems(array $items = null)
+    {
         return $this;
     }
 }

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/Model/ResourceModel/Theme/Grid/CollectionTest.php

@@ -0,0 +1,136 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types=1);
+
+namespace Magento\Theme\Test\Unit\Model\ResourceModel\Theme\Grid;
+
+use Magento\Theme\Model\ResourceModel\Theme\Grid\Collection;
+use Magento\Framework\Api\Search\AggregationInterface;
+use Magento\Framework\Data\Collection\Db\FetchStrategyInterface;
+use Magento\Framework\Data\Collection\EntityFactoryInterface;
+use Magento\Framework\DB\Adapter\AdapterInterface;
+use Magento\Framework\Event\ManagerInterface;
+use Magento\Framework\Model\ResourceModel\Db\AbstractDb;
+use Magento\Framework\TestFramework\Unit\Helper\ObjectManager;
+use Psr\Log\LoggerInterface;
+use Magento\Framework\DB\Select;
+
+/**
+ * CollectionTest contains unit tests for \Magento\Theme\Model\ResourceModel\Theme\Grid\Collection class
+ * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
+ */
+class CollectionTest extends \PHPUnit\Framework\TestCase
+{
+    /**
+     * @var EntityFactoryInterface|\PHPUnit_Framework_MockObject_MockObject
+     */
+    protected $entityFactoryMock;
+
+    /**
+     * @var LoggerInterface|\PHPUnit_Framework_MockObject_MockObject
+     */
+    protected $loggerMock;
+
+    /**
+     * @var FetchStrategyInterface|\PHPUnit_Framework_MockObject_MockObject
+     */
+    protected $fetchStrategyMock;
+
+    /**
+     * @var ManagerInterface|\PHPUnit_Framework_MockObject_MockObject
+     */
+    protected $eventManagerMock;
+
+    /**
+     * @var AdapterInterface|\PHPUnit_Framework_MockObject_MockObject
+     */
+    protected $connectionMock;
+
+    /**
+     * @var AbstractDb|\PHPUnit_Framework_MockObject_MockObject
+     */
+    protected $resourceMock;
+
+    /**
+     * @var AggregationInterface|\PHPUnit_Framework_MockObject_MockObject
+     */
+    protected $aggregationsMock;
+
+    /**
+     * @var Select
+     */
+    protected $selectMock;
+
+    /**
+     * @var Collection
+     */
+    protected $model;
+
+    /**
+     * SetUp method
+     *
+     * @return void
+     */
+    protected function setUp()
+    {
+        $this->entityFactoryMock = $this->getMockBuilder(EntityFactoryInterface::class)
+            ->getMockForAbstractClass();
+        $this->loggerMock = $this->getMockBuilder(LoggerInterface::class)
+            ->getMockForAbstractClass();
+        $this->fetchStrategyMock = $this->getMockBuilder(FetchStrategyInterface::class)
+            ->getMockForAbstractClass();
+        $this->eventManagerMock = $this->getMockBuilder(ManagerInterface::class)
+            ->getMockForAbstractClass();
+        $this->resourceMock = $this->getMockBuilder(AbstractDb::class)
+            ->disableOriginalConstructor()
+            ->getMock();
+        $this->aggregationsMock = $this->getMockBuilder(AggregationInterface::class)
+            ->getMockForAbstractClass();
+        $this->connectionMock = $this->getMockBuilder(AdapterInterface::class)
+            ->getMockForAbstractClass();
+        $this->selectMock = $this->getMockBuilder(Select::class)
+            ->disableOriginalConstructor()
+            ->getMock();
+
+        $this->resourceMock->expects($this->any())
+            ->method('getConnection')
+            ->willReturn($this->connectionMock);
+        $this->connectionMock->expects($this->once())
+            ->method('select')
+            ->willReturn($this->selectMock);
+
+        $this->model = (new ObjectManager($this))->getObject(Collection::class, [
+            'entityFactory' => $this->entityFactoryMock,
+            'logger' => $this->loggerMock,
+            'fetchStrategy' => $this->fetchStrategyMock,
+            'eventManager' => $this->eventManagerMock,
+            'mainTable' => null,
+            'eventPrefix' => 'test_event_prefix',
+            'eventObject' => 'test_event_object',
+            'resourceModel' => null,
+            'resource' => $this->resourceMock,
+        ]);
+    }
+
+    /**
+     * @covers \Magento\Theme\Model\ResourceModel\Theme\Grid\Collection::setSearchCriteria
+     * @covers \Magento\Theme\Model\ResourceModel\Theme\Grid\Collection::getAggregations
+     */
+    public function testSetGetAggregations()
+    {
+        $this->model->setAggregations($this->aggregationsMock);
+        $this->assertInstanceOf(AggregationInterface::class, $this->model->getAggregations());
+    }
+
+    /**
+     * @covers \Magento\Theme\Model\ResourceModel\Theme\Grid\Collection::setSearchCriteria
+     */
+    public function testSetSearchCriteria()
+    {
+        $this->assertEquals($this->model, $this->model->setSearchCriteria());
+    }
+}

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\Model\ResourceModel\Theme\Grid\Collection</item>
              </argument>
          </arguments>
      </type>
@@ -273,4 +274,12 @@
             <argument name="themeList" xsi:type="object">Magento\Theme\Model\ResourceModel\Theme\Collection</argument>
         </arguments>
     </type>
+    <type name="Magento\Theme\Model\ResourceModel\Theme\Grid\Collection">
+        <arguments>
+            <argument name="mainTable" xsi:type="string">theme</argument>
+            <argument name="eventPrefix" xsi:type="string">theme_grid_collection</argument>
+            <argument name="eventObject" xsi:type="string">theme_collection</argument>
+            <argument name="resourceModel" xsi:type="string">Magento\Theme\Model\ResourceModel\Theme</argument>
+        </arguments>
+    </type>
 </config>

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

@@ -185,3 +185,4 @@ 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

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>