fix: Serve icons sprite from Panel route

Author: distantnative

panel/src/components/Misc/Icon.test.ts

@@ -3,7 +3,7 @@ import { mount as vueMount } from "@vue/test-utils";
 import { hasEmoji } from "@/helpers/string.js";
 import Icon from "./Icon.vue";
 
-const sprite = "/media/panel/1234/img/icons.svg";
+const sprite = "/panel/assets/1234/icons.svg";
 
 /**
  * Custom mount which injects $helper and $panel stubs

src/Panel/Assets.php

@@ -185,20 +185,11 @@ public function favicons(): array
 	 */
 	public function icons(): string
 	{
-		$path = '/panel/' . $this->kirby->versionHash() . '/img/icons.svg';
+		$version = $this->isDev === true
+			? F::modified($this->iconsRoot())
+			: $this->kirby->versionHash();
 
-		if ($this->isDev === true) {
-			$source   = $this->iconsRoot();
-			$target   = $this->kirby->root('media') . $path;
-			$modified = F::modified($source);
-
-			if (F::modified($target) !== $modified) {
-				F::copy($source, $target, true);
-				touch($target, $modified);
-			}
-		}
-
-		return $this->kirby->url('media') . $path;
+		return $this->kirby->url('panel') . '/assets/' . $version . '/icons.svg';
 	}
 
 	/**
@@ -220,6 +211,15 @@ public function importMaps(): array
 		]);
 	}
 
+	/**
+	 * Whether the Panel is running in dev mode
+	 * @since 6.0.0
+	 */
+	public function isDev(): bool
+	{
+		return $this->isDev;
+	}
+
 	/**
 	 * Get all js files
 	 */

src/Panel/Router.php

@@ -112,6 +112,23 @@ protected function garbage(): void
 		}
 	}
 
+	/**
+	 * Response for the SVG icon sprite
+	 * @since 6.0.0
+	 */
+	public function icons(): Response
+	{
+		$assets = $this->panel->assets();
+		$cache  = $assets->isDev() === true
+			? 'no-store'
+			: 'public, max-age=31536000, immutable';
+
+		return Response::file(
+			$assets->iconsRoot(),
+			['headers' => ['Cache-Control' => $cache]]
+		);
+	}
+
 	/**
 	 * Creates a Response object from the result of
 	 * a Panel route call
@@ -155,11 +172,17 @@ public function routes(Areas|null $areas = null): array
 	{
 		$kirby   = $this->kirby;
 		$panel   = $this->panel;
+		$router  = $this;
 		$areas ??= $panel->areas();
 
-		// the browser incompatibility
-		// warning is always needed
+		// the icon sprite and the browser incompatibility
+		// warning are always needed, no matter the areas
 		$routes = [
+			[
+				'pattern' => 'assets/(:any)/icons.svg',
+				'auth'    => false,
+				'action'  => fn () => $router->icons(),
+			],
 			[
 				'pattern' => 'browser',
 				'auth'    => false,

tests/Panel/AssetsTest.php

@@ -307,7 +307,7 @@ public function testIcons(): void
 		$assets = new Assets();
 
 		$this->assertSame(
-			'/media/panel/' . $this->app->versionHash() . '/img/icons.svg',
+			'/panel/assets/' . $this->app->versionHash() . '/icons.svg',
 			$assets->icons()
 		);
 	}
@@ -316,55 +316,49 @@ public function testIconsInDevMode(): void
 	{
 		$this->setDevMode();
 
-		$assets = new Assets();
-		$target = $this->app->root('media') . '/panel/' . $this->app->versionHash() . '/img/icons.svg';
-
-		$this->assertFileDoesNotExist($target);
+		$assets   = new Assets();
+		$modified = F::modified($this->app->root('panel') . '/public/img/icons.svg');
 
-		// the sprite is not served by Vite, but synced to the media folder
 		$this->assertSame(
-			'/media/panel/' . $this->app->versionHash() . '/img/icons.svg',
+			'/panel/assets/' . $modified . '/icons.svg',
 			$assets->icons()
 		);
-
-		$this->assertFileEquals(
-			$this->app->root('panel') . '/public/img/icons.svg',
-			$target
-		);
 	}
 
-	public function testIconsInDevModeWithCurrentCopy(): void
+	public function testIconsWithCustomMediaUrl(): void
 	{
-		$this->setDevMode();
+		$this->app = $this->app->clone([
+			'urls' => [
+				'media' => 'https://cdn.getkirby.com/media'
+			]
+		]);
 
+		// the sprite must stay on the Panel origin, even if
+		// the media folder is served from a CDN
 		$assets = new Assets();
-		$source = $this->app->root('panel') . '/public/img/icons.svg';
-		$target = $this->app->root('media') . '/panel/' . $this->app->versionHash() . '/img/icons.svg';
-
-		F::write($target, 'current');
-		touch($target, F::modified($source));
 
-		$assets->icons();
-
-		// the copy is up to date and does not get repeated
-		$this->assertSame('current', F::read($target));
+		$this->assertSame(
+			'/panel/assets/' . $this->app->versionHash() . '/icons.svg',
+			$assets->icons()
+		);
 	}
 
-	public function testIconsInDevModeWithOutdatedCopy(): void
+	public function testIconsWithCustomPanelSlug(): void
 	{
-		$this->setDevMode();
+		$this->app = $this->app->clone([
+			'options' => [
+				'panel' => [
+					'slug' => 'admin'
+				]
+			]
+		]);
 
 		$assets = new Assets();
-		$source = $this->app->root('panel') . '/public/img/icons.svg';
-		$target = $this->app->root('media') . '/panel/' . $this->app->versionHash() . '/img/icons.svg';
-
-		F::write($target, 'outdated');
-		touch($target, 1);
-
-		$assets->icons();
 
-		$this->assertFileEquals($source, $target);
-		$this->assertSame(F::modified($source), F::modified($target));
+		$this->assertSame(
+			'/admin/assets/' . $this->app->versionHash() . '/icons.svg',
+			$assets->icons()
+		);
 	}
 
 	public function testIconsRoot(): void
@@ -397,6 +391,13 @@ public function testImportMaps(): void
 		$this->assertSame('/media/panel/' . $this->app->versionHash() . '/js/vue.esm-browser.prod.js', $importMaps['vue']);
 	}
 
+	public function testIsDev(): void
+	{
+		$this->assertFalse((new Assets())->isDev());
+		$this->setDevMode();
+		$this->assertTrue((new Assets())->isDev());
+	}
+
 	public function testJs(): void
 	{
 		// default asset setup

tests/Panel/StateTest.php

@@ -159,7 +159,7 @@ public function testFilterOnlyRequestWithGlobal(): void
 			'a' => 'A',
 			'urls' => [
 				'api'   => '/api',
-				'icons' => '/media/panel/' . $this->app->versionHash() . '/img/icons.svg',
+				'icons' => '/panel/assets/' . $this->app->versionHash() . '/icons.svg',
 				'panel' => '/panel',
 				'site'  => '/'
 			]