fix: restore ITK admin styling and hide the zero-count badge

Author: turegjorup

CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [#94](https://github.com/itk-dev/devops_itksites/pull/94)
+  Use EasyAdmin's own components in the admin templates
+  - Replace hand-rolled badge and icon markup with `<twig:ea:Badge>` and
+    `<twig:ea:Icon>`, so the admin follows EasyAdmin's theming
+  - Drop the unused `AutoBadgeMenuItem`/`AutoBadgeCrudMenuItem` pair: EasyAdmin
+    hides a badge whose content is null
+  - Set the ITK blue with the theme API instead of overriding EasyAdmin's
+    colour variables one by one
+  - Load the admin stylesheet again: it was added as `css/admin.css`, a file
+    deleted in #81, so every admin page carried a 404 and no ITK styling
 - [#93](https://github.com/itk-dev/devops_itksites/pull/93)
   Update composer dependencies, clearing 15 security advisories
   - `api-platform/core` 4.3.7 → 4.3.17, `easycorp/easyadmin-bundle` 5.0.11 → 5.5.1,

assets/styles/app.css

@@ -1,17 +1,15 @@
+/* EasyAdmin overrides. The ITK blue is set with the theme API in
+   DashboardController; what is left here is what that API cannot express. */
 :root {
     --body-max-width: 100%;
     --sidebar-bg: #fff;
-    /* make the base font size smaller */
-    --button-primary-bg: rgb(0, 123, 166);
-    --pagination-active-bg: rgb(0, 123, 166);
-    --link-color: rgb(0, 123, 166);
-    --sidebar-menu-active-item-color: rgb(0, 123, 166);
-    --badge-boolean-true-bg: rgb(0, 123, 166);
+    /* ITK red, for a false boolean badge and for danger states */
     --badge-boolean-false-bg: rgb(228, 73, 48);
     --badge-boolean-false-color: var(--white);
+    --bs-danger-rgb: 228, 73, 48;
+    /* the theme API only takes named gray ramps, not an arbitrary gray */
     --sidebar-menu-color: rgb(66, 66, 66);
     --text-color-dark: rgb(66, 66, 66);
-    --bs-danger-rgb: 228, 73, 48;
 }
 
 /* Grouped dropdown group styling for index pages */

src/Controller/Admin/DashboardController.php

@@ -10,6 +10,7 @@
 use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;
 use EasyCorp\Bundle\EasyAdminBundle\Config\Dashboard;
 use EasyCorp\Bundle\EasyAdminBundle\Config\MenuItem;
+use EasyCorp\Bundle\EasyAdminBundle\Config\Theme;
 use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractDashboardController;
 use EasyCorp\Bundle\EasyAdminBundle\Router\AdminUrlGenerator;
 use Symfony\Component\HttpFoundation\Response;
@@ -39,7 +40,12 @@ public function configureDashboard(): Dashboard
         return Dashboard::new()
             ->setTitle('<img src="/img/itk-sites-logo.png" width="170px" alt="ITK sites logo">')
             ->setFaviconPath('img/favicon.ico')
-            ->renderContentMaximized();
+            ->renderContentMaximized()
+            // ITK blue. Since EasyAdmin 5.4 one primary colour drives buttons,
+            // links, the active sidebar item and boolean badges, and the theme
+            // computes the text colour that sits on top of it — which the
+            // stylesheet used to approximate variable by variable.
+            ->setTheme(Theme::new()->primaryColor('#007ba6'));
     }
 
     #[\Override]
@@ -56,7 +62,9 @@ public function configureMenuItems(): iterable
         yield MenuItem::section('Dependencies');
         yield MenuItem::linkTo(PackageCrudController::class, 'Packages', 'fas fa-cube');
         yield MenuItem::linkTo(PackageVersionCrudController::class, 'Package Versions', 'fas fa-cubes');
-        yield MenuItem::linkTo(AdvisoryCrudController::class, 'Advisories', 'fas fa-skull-crossbones')->setBadge($this->advisoryRepository->count([]), 'dark');
+        // `?: null` because EasyAdmin hides a badge whose content is null but
+        // renders a literal "0" for a zero count, which is noise on a menu item.
+        yield MenuItem::linkTo(AdvisoryCrudController::class, 'Advisories', 'fas fa-skull-crossbones')->setBadge($this->advisoryRepository->count([]) ?: null, 'dark');
         yield MenuItem::linkTo(ModuleCrudController::class, 'Modules', 'fas fa-cube');
         yield MenuItem::linkTo(ModuleVersionCrudController::class, 'Modules Versions', 'fas fa-cubes');
         yield MenuItem::linkTo(DockerImageCrudController::class, 'Docker Images', 'fas fa-cube');
@@ -67,6 +75,20 @@ public function configureMenuItems(): iterable
         yield MenuItem::linkTo(DetectionResultCrudController::class, 'Detection Results', 'fas fa-upload');
     }
 
+    /**
+     * The admin styles reach admin pages only from here.
+     *
+     * EasyAdmin renders its own layout rather than templates/base.html.twig, so
+     * neither `importmap()` nor that template's Encore tags apply to it. Until
+     * now this method added `css/admin.css`, a file deleted in #81, so every
+     * admin page carried a 404 and none of the ITK styling below it.
+     */
+    #[\Override]
+    public function configureAssets(): Assets
+    {
+        return Assets::new()->addWebpackEncoreEntry('admin');
+    }
+
     #[\Override]
     public function configureCrud(): Crud
     {
@@ -77,10 +99,4 @@ public function configureCrud(): Crud
             ->setPageTitle('detail', '%entity_label_singular%: %entity_as_string%')
         ;
     }
-
-    #[\Override]
-    public function configureAssets(): Assets
-    {
-        return Assets::new()->addCssFile('css/admin.css');
-    }
 }

webpack.config.js

@@ -22,6 +22,10 @@ Encore
    */
   .addEntry("easyadmin", "./assets/easyadmin.js")
 
+  // CSS-only entry, loaded by DashboardController for every admin page. The
+  // stylesheet is EasyAdmin-specific despite living at styles/app.css.
+  .addStyleEntry("admin", "./assets/styles/app.css")
+
   // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
   .splitEntryChunks()