Fix quota links in files

lib/BeforeTemplateRenderedListener.php

@@ -25,6 +25,7 @@
 
 use OCA\Files\Event\LoadAdditionalScriptsEvent;
 use OCP\AppFramework\Http\Events\BeforeTemplateRenderedEvent;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\EventDispatcher\Event;
 use OCP\EventDispatcher\IEventListener;
 use OCP\INavigationManager;
@@ -42,12 +43,19 @@ class BeforeTemplateRenderedListener implements IEventListener {
 	/** @var IURLGenerator */
 	protected $urlGenerator;
 
-	public function __construct(SitesManager $sitesManager,
+	/** @var IInitialState */
+	private $initialState;
+
+	public function __construct(
+		SitesManager $sitesManager,
 		INavigationManager $navigationManager,
-		IURLGenerator $urlGenerator) {
+		IURLGenerator $urlGenerator,
+		IInitialState $initialState,
+	) {
 		$this->sitesManager = $sitesManager;
 		$this->navigationManager = $navigationManager;
 		$this->urlGenerator = $urlGenerator;
+		$this->initialState = $initialState;
 	}
 
 	public function handle(Event $event): void {
@@ -63,20 +71,36 @@ public function handle(Event $event): void {
 	protected function loadQuotaInformationOnFilesApp(LoadAdditionalScriptsEvent $event): void {
 		$sites = $this->sitesManager->getSitesToDisplay();
 
+		$data = [];
 		foreach ($sites as $site) {
 			if ($site['type'] === SitesManager::TYPE_QUOTA) {
-				$link = $site['url'];
-				if (!$site['redirect']) {
-					$link = $this->urlGenerator->linkToRoute('external.site.showPage', ['id' => $site['id']]);
-				}
-
-				$event->addHiddenField('external_quota_link', $link);
-				$event->addHiddenField('external_quota_name', $site['name']);
+				$image = $this->generateImageLink($site);
+				$href = $this->getHref($site);
 
-				Util::addScript('external', 'quota-files-sidebar');
-				return;
+				$data[] = ['name' => $site['name'], 'href' => $href, 'image' => $image];
 			}
 		}
+
+		if (count($data) > 0) {
+			$this->initialState->provideInitialState('external-quota-sites', $data);
+			Util::addScript('external', 'dist/quota-files-sidebar');
+		}
+	}
+
+	protected function generateImageLink(array $site): string {
+		if ($site['icon'] !== '') {
+			return $this->urlGenerator->linkToRoute('external.icon.showIcon', ['icon' => $site['icon']]);
+		}
+
+		return $this->urlGenerator->linkToRoute('external.icon.showIcon', ['icon' => 'external.svg']);
+	}
+
+	protected function getHref(array $site): string {
+		if (!$site['redirect']) {
+			return $this->urlGenerator->linkToRoute('external.site.showPage', ['id' => $site['id']]);
+		}
+
+		return $site['url'];
 	}
 
 	protected function generateNavigationLinks(): void {
@@ -88,16 +112,8 @@ protected function generateNavigationLinks(): void {
 			}
 
 			$this->navigationManager->add(function () use ($site) {
-				if ($site['icon'] !== '') {
-					$image = $this->urlGenerator->linkToRoute('external.icon.showIcon', ['icon' => $site['icon']]);
-				} else {
-					$image = $this->urlGenerator->linkToRoute('external.icon.showIcon', ['icon' => 'external.svg']);
-				}
-
-				$href = $site['url'];
-				if (!$site['redirect']) {
-					$href = $this->urlGenerator->linkToRoute('external.site.showPage', ['id' => $site['id']]);
-				}
+				$image = $this->generateImageLink($site);
+				$href = $this->getHref($site);
 
 				return [
 					'id' => 'external_index' . $site['id'],

package.json

@@ -13,6 +13,7 @@
     "watch": "NODE_ENV=development webpack --progress --watch --config webpack.config.js"
   },
   "dependencies": {
+    "@nextcloud/initial-state": "^2.1.0",
     "@nextcloud/router": "^2.1.2",
     "escape-html": "^1.0.3"
   },

src/quota-files-sidebar.js

@@ -0,0 +1,33 @@
+import {loadState} from '@nextcloud/initial-state'
+
+document.addEventListener('DOMContentLoaded', () => {
+	const state = loadState('external', 'external-quota-sites')
+
+	for (const site of state) {
+		const image = document.createElement('img')
+		image.src = site.image
+
+		const icon = document.createElement('div')
+		icon.classList.add('app-navigation-entry-icon')
+		icon.append(image)
+
+		const name = document.createElement('span')
+		name.classList.add('app-navigation-entry__name')
+		name.innerText = site.name
+
+		const a = document.createElement('a')
+		a.classList.add('app-navigation-entry-link')
+		a.href = site.href
+		a.append(icon)
+		a.append(name)
+
+		const div = document.createElement('div')
+		div.classList.add('app-navigation-entry')
+		div.append(a)
+
+		const li = document.createElement('li')
+		li.append(div)
+
+		document.getElementsByClassName('app-navigation-entry__settings')[0].prepend(li)
+	}
+})

webpack.config.js

@@ -3,6 +3,7 @@ const path = require('path')
 module.exports = {
 	entry: {
 		admin: path.join(__dirname, 'src', 'admin.js'),
+		'quota-files-sidebar': path.join(__dirname, 'src', 'quota-files-sidebar.js'),
 	},
 	output: {
 		path: path.join(__dirname, 'js', 'dist'),