Replace themes preview popup with a modal

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>

6 files changed, 49 insertions, 81 deletions

diff --git a/libraries/classes/Controllers/HomeController.php b/libraries/classes/Controllers/HomeController.php
index 5d9415ee56..3714a19b84 100644
--- a/libraries/classes/Controllers/HomeController.php
+++ b/libraries/classes/Controllers/HomeController.php
@@ -21,7 +21,6 @@ use PhpMyAdmin\Server\Select;
 use PhpMyAdmin\Template;
 use PhpMyAdmin\ThemeManager;
 use PhpMyAdmin\Url;
-use PhpMyAdmin\UserPreferences;
 use PhpMyAdmin\Util;
 use const E_USER_NOTICE;
 use const E_USER_WARNING;
@@ -68,6 +67,8 @@ class HomeController extends AbstractController
             return;
         }
 
+        $this->addScriptFiles(['home.js']);
+
         // This is for $cfg['ShowDatabasesNavigationAsTree'] = false;
         // See: https://github.com/phpmyadmin/phpmyadmin/issues/16520
         // The DB is defined here and sent to the JS front-end to refresh the DB tree
@@ -237,25 +238,13 @@ class HomeController extends AbstractController
             'show_php_info' => $cfg['ShowPhpInfo'],
             'is_version_checked' => $cfg['VersionCheck'],
             'phpmyadmin_version' => PMA_VERSION,
+            'phpmyadmin_major_version' => PMA_MAJOR_VERSION,
             'config_storage_message' => $configStorageMessage ?? '',
             'has_theme_manager' => $cfg['ThemeManager'],
             'themes' => $this->themeManager->getThemesArray(),
         ]);
     }
 
-    public function setTheme(): void
-    {
-        $this->themeManager->setActiveTheme($_POST['set_theme']);
-        $this->themeManager->setThemeCookie();
-
-        $userPreferences = new UserPreferences();
-        $preferences = $userPreferences->load();
-        $preferences['config_data']['ThemeDefault'] = $_POST['set_theme'];
-        $userPreferences->save($preferences['config_data']);
-
-        $this->response->header('Location: index.php?route=/' . Url::getCommonRaw([], '&'));
-    }
-
     public function setCollationConnection(): void
     {
         $this->config->setUserValue(
diff --git a/libraries/classes/Controllers/ThemesController.php b/libraries/classes/Controllers/ThemesController.php
index 47b7e45ef8..2a76d95d4f 100644
--- a/libraries/classes/Controllers/ThemesController.php
+++ b/libraries/classes/Controllers/ThemesController.php
@@ -4,29 +4,52 @@ declare(strict_types=1);
 
 namespace PhpMyAdmin\Controllers;
 
+use PhpMyAdmin\Response;
+use PhpMyAdmin\Template;
 use PhpMyAdmin\ThemeManager;
-use function preg_replace;
+use PhpMyAdmin\Url;
+use PhpMyAdmin\UserPreferences;
 
-/**
- * Displays list of themes.
- */
 class ThemesController extends AbstractController
 {
+    /** @var ThemeManager */
+    private $themeManager;
+
+    /**
+     * @param Response $response
+     */
+    public function __construct($response, Template $template, ThemeManager $themeManager)
+    {
+        parent::__construct($response, $template);
+        $this->themeManager = $themeManager;
+    }
+
     public function index(): void
     {
-        $this->response->getFooter()->setMinimal();
-        $header = $this->response->getHeader();
-        $header->setBodyId('bodythemes');
-        $header->setTitle('phpMyAdmin - ' . __('Theme'));
-        $header->disableMenuAndConsole();
-
-        $this->render('themes', [
-            'version' => preg_replace(
-                '/([0-9]*)\.([0-9]*)\..*/',
-                '\1_\2',
-                PMA_VERSION
-            ),
-            'previews' => ThemeManager::getInstance()->getPrintPreviews(),
-        ]);
+        $themes = $this->themeManager->getThemesArray();
+        $themesList = $this->template->render('home/themes', ['themes' => $themes]);
+        $this->response->setAjax(true);
+        $this->response->addJSON('themes', $themesList);
+    }
+
+    public function setTheme(): void
+    {
+        global $cfg;
+
+        if (! $cfg['ThemeManager'] || ! isset($_POST['set_theme'])) {
+            $this->response->header('Location: index.php?route=/' . Url::getCommonRaw([], '&'));
+
+            return;
+        }
+
+        $this->themeManager->setActiveTheme($_POST['set_theme']);
+        $this->themeManager->setThemeCookie();
+
+        $userPreferences = new UserPreferences();
+        $preferences = $userPreferences->load();
+        $preferences['config_data']['ThemeDefault'] = $_POST['set_theme'];
+        $userPreferences->save($preferences['config_data']);
+
+        $this->response->header('Location: index.php?route=/' . Url::getCommonRaw([], '&'));
     }
 }
diff --git a/libraries/classes/Theme.php b/libraries/classes/Theme.php
index df6a41f44e..04d688cf5c 100644
--- a/libraries/classes/Theme.php
+++ b/libraries/classes/Theme.php
@@ -93,14 +93,6 @@ class Theme
         'icons',
     ];
 
-    /** @var Template */
-    public $template;
-
-    public function __construct()
-    {
-        $this->template = new Template();
-    }
-
     /**
      * Loads theme information
      *
@@ -391,28 +383,4 @@ class Theme
 
         return './themes/' . ThemeManager::FALLBACK_THEME . '/img/' . $file;
     }
-
-    /**
-     * Renders the preview for this theme
-     *
-     * @return string
-     *
-     * @access public
-     */
-    public function getPrintPreview()
-    {
-        $url_params = ['set_theme' => $this->getId()];
-        $screen = null;
-        if (@file_exists($this->getFsPath() . 'screen.png')) {
-            $screen = $this->getPath() . '/screen.png';
-        }
-
-        return $this->template->render('theme_preview', [
-            'url_params' => $url_params,
-            'name' => $this->getName(),
-            'version' => $this->getVersion(),
-            'id' => $this->getId(),
-            'screen' => $screen,
-        ]);
-    }
 }
diff --git a/libraries/classes/ThemeManager.php b/libraries/classes/ThemeManager.php
index 2c77f2c084..4eb0374115 100644
--- a/libraries/classes/ThemeManager.php
+++ b/libraries/classes/ThemeManager.php
@@ -269,21 +269,6 @@ class ThemeManager
         return $themes;
     }
 
-    /**
-     * Renders the previews for all themes
-     *
-     * @access public
-     */
-    public function getPrintPreviews(): string
-    {
-        $retval = '';
-        foreach ($this->themes as $each_theme) {
-            $retval .= $each_theme->getPrintPreview();
-        }
-
-        return $retval;
-    }
-
     public static function initializeTheme(): ?Theme
     {
         $themeManager = self::getInstance();
diff --git a/libraries/routes.php b/libraries/routes.php
index cfc582b25b..38e085d703 100644
--- a/libraries/routes.php
+++ b/libraries/routes.php
@@ -106,7 +106,6 @@ if (! defined('PHPMYADMIN')) {
 return static function (RouteCollector $routes): void {
     $routes->addGroup('', static function (RouteCollector $routes): void {
         $routes->addRoute(['GET', 'POST'], '[/]', [HomeController::class, 'index']);
-        $routes->post('/set-theme', [HomeController::class, 'setTheme']);
         $routes->post('/collation-connection', [HomeController::class, 'setCollationConnection']);
         $routes->addRoute(['GET', 'POST'], '/recent-table', [HomeController::class, 'reloadRecentTablesList']);
         $routes->addRoute(['GET', 'POST'], '/git-revision', [HomeController::class, 'gitRevision']);
@@ -331,7 +330,10 @@ return static function (RouteCollector $routes): void {
         $routes->addRoute(['GET', 'POST'], '/zoom-search', [ZoomSearchController::class, 'index']);
     });
     $routes->post('/tables', [TableController::class, 'all']);
-    $routes->get('/themes', [ThemesController::class, 'index']);
+    $routes->addGroup('/themes', static function (RouteCollector $routes): void {
+        $routes->get('', [ThemesController::class, 'index']);
+        $routes->post('/set', [ThemesController::class, 'setTheme']);
+    });
     $routes->addGroup('/transformation', static function (RouteCollector $routes): void {
         $routes->addRoute(['GET', 'POST'], '/overview', [TransformationOverviewController::class, 'index']);
         $routes->addRoute(['GET', 'POST'], '/wrapper', [TransformationWrapperController::class, 'index']);
diff --git a/libraries/services_controllers.php b/libraries/services_controllers.php
index d391ccf896..f66989fff6 100644
--- a/libraries/services_controllers.php
+++ b/libraries/services_controllers.php
@@ -854,6 +854,7 @@ return [
             'arguments' => [
                 '$response' => '@response',
                 '$template' => '@template',
+                '$themeManager' => '@theme_manager',
             ],
         ],
         PhpMyAdmin\Controllers\TransformationOverviewController::class => [