refactor(updatenotification): Migrate legacy code

1. Remove hook usage and just provide an initial state
2. Replace jQuery code with modern non-deprecated frontend code

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

7 files changed, 86 insertions, 45 deletions

diff --git a/apps/updatenotification/appinfo/info.xml b/apps/updatenotification/appinfo/info.xml
index 86fae6033d9..fbe9ff9f7e1 100644
--- a/apps/updatenotification/appinfo/info.xml
+++ b/apps/updatenotification/appinfo/info.xml
@@ -24,11 +24,11 @@
 		<job>OCA\UpdateNotification\BackgroundJob\UpdateAvailableNotifications</job>
 	</background-jobs>
 
-	<settings>
-		<admin>OCA\UpdateNotification\Settings\Admin</admin>
-	</settings>
-
 	<commands>
 		<command>OCA\UpdateNotification\Command\Check</command>
 	</commands>
+
+	<settings>
+		<admin>OCA\UpdateNotification\Settings\Admin</admin>
+	</settings>
 </info>
diff --git a/apps/updatenotification/js/legacy-notification.js b/apps/updatenotification/js/legacy-notification.js
deleted file mode 100644
index 7ae258c651b..00000000000
--- a/apps/updatenotification/js/legacy-notification.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2016-2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-FileCopyrightText: 2015-2016 ownCloud, Inc.
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-/**
- * This only gets loaded if an update is available and the notifications app is not enabled for the user.
- */
-window.addEventListener('DOMContentLoaded', function(){
-	var text = t('core', '{version} is available. Get more information on how to update.', {version: oc_updateState.updateVersion}),
-		element = $('<a>').attr('href', oc_updateState.updateLink).attr('target','_blank').text(text);
-
-	OC.Notification.showHtml(element.prop('outerHTML'), { type: 'error' });
-});
diff --git a/apps/updatenotification/lib/AppInfo/Application.php b/apps/updatenotification/lib/AppInfo/Application.php
index bd48a0646cd..d34429e9e73 100644
--- a/apps/updatenotification/lib/AppInfo/Application.php
+++ b/apps/updatenotification/lib/AppInfo/Application.php
@@ -50,7 +50,8 @@ class Application extends App implements IBootstrap {
 			IAppManager $appManager,
 			IGroupManager $groupManager,
 			ContainerInterface $container,
-			LoggerInterface $logger): void {
+			LoggerInterface $logger,
+		): void {
 			if ($config->getSystemValue('updatechecker', true) !== true) {
 				// Updater check is disabled
 				return;
@@ -72,8 +73,8 @@ class Application extends App implements IBootstrap {
 				}
 
 				if ($updateChecker->getUpdateState() !== []) {
-					Util::addScript('updatenotification', 'legacy-notification');
-					\OC_Hook::connect('\OCP\Config', 'js', $updateChecker, 'populateJavaScriptVariables');
+					Util::addScript('updatenotification', 'update-notification-legacy');
+					$updateChecker->setInitialState();
 				}
 			}
 		});
diff --git a/apps/updatenotification/lib/UpdateChecker.php b/apps/updatenotification/lib/UpdateChecker.php
index f15974a0318..76afc8f6a54 100644
--- a/apps/updatenotification/lib/UpdateChecker.php
+++ b/apps/updatenotification/lib/UpdateChecker.php
@@ -10,19 +10,15 @@ namespace OCA\UpdateNotification;
 
 use OC\Updater\ChangesCheck;
 use OC\Updater\VersionCheck;
+use OCP\AppFramework\Services\IInitialState;
 
 class UpdateChecker {
-	/** @var VersionCheck */
-	private $updater;
-	/** @var ChangesCheck */
-	private $changesCheck;
 
-	/**
-	 * @param VersionCheck $updater
-	 */
-	public function __construct(VersionCheck $updater, ChangesCheck $changesCheck) {
-		$this->updater = $updater;
-		$this->changesCheck = $changesCheck;
+	public function __construct(
+		private VersionCheck $updater,
+		private ChangesCheck $changesCheck,
+		private IInitialState $initialState,
+	) {
 	}
 
 	/**
@@ -59,13 +55,17 @@ class UpdateChecker {
 	}
 
 	/**
-	 * @param array $data
+	 * Provide update information as initial state
 	 */
-	public function populateJavaScriptVariables(array $data) {
-		$data['array']['oc_updateState'] = json_encode([
-			'updateAvailable' => true,
-			'updateVersion' => $this->getUpdateState()['updateVersionString'],
-			'updateLink' => $this->getUpdateState()['updateLink'] ?? '',
+	public function setInitialState(): void {
+		$updateState = $this->getUpdateState();
+		if (empty($updateState)) {
+			return;
+		}
+
+		$this->initialState->provideInitialState('updateState', [
+			'updateVersion' => $updateState['updateVersionString'],
+			'updateLink' => $updateState['updateLink'] ?? '',
 		]);
 	}
 }
diff --git a/apps/updatenotification/src/update-notification-legacy.ts b/apps/updatenotification/src/update-notification-legacy.ts
new file mode 100644
index 00000000000..5809c1761dc
--- /dev/null
+++ b/apps/updatenotification/src/update-notification-legacy.ts
@@ -0,0 +1,24 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { showInfo } from '@nextcloud/dialogs'
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+
+interface IUpdateNotificationState {
+	updateLink: string
+	updateVersion: string
+}
+
+/**
+ * This only gets loaded if an update is available and the notifications app is not enabled for the user.
+ */
+window.addEventListener('DOMContentLoaded', function() {
+	const { updateLink, updateVersion } = loadState<IUpdateNotificationState>('updatenotification', 'updateState')
+	const text = t('core', '{version} is available. Get more information on how to update.', { version: updateVersion })
+
+	// On click open the update link in a new tab
+	showInfo(text, { onClick: () => window.open(updateLink, '_blank') })
+})
diff --git a/apps/updatenotification/tests/UpdateCheckerTest.php b/apps/updatenotification/tests/UpdateCheckerTest.php
index 0497a992669..af6f2c06d09 100644
--- a/apps/updatenotification/tests/UpdateCheckerTest.php
+++ b/apps/updatenotification/tests/UpdateCheckerTest.php
@@ -11,22 +11,28 @@ namespace OCA\UpdateNotification\Tests;
 use OC\Updater\ChangesCheck;
 use OC\Updater\VersionCheck;
 use OCA\UpdateNotification\UpdateChecker;
+use OCP\AppFramework\Services\IInitialState;
+use PHPUnit\Framework\MockObject\MockObject;
 use Test\TestCase;
 
 class UpdateCheckerTest extends TestCase {
-	/** @var ChangesCheck|\PHPUnit\Framework\MockObject\MockObject */
-	protected $changesChecker;
-	/** @var VersionCheck|\PHPUnit\Framework\MockObject\MockObject */
-	private $updater;
-	/** @var UpdateChecker */
-	private $updateChecker;
+	
+	private ChangesCheck&MockObject $changesChecker;
+	private VersionCheck&MockObject $updater;
+	private IInitialState&MockObject $initialState;
+	private UpdateChecker $updateChecker;
 
 	protected function setUp(): void {
 		parent::setUp();
 
 		$this->updater = $this->createMock(VersionCheck::class);
 		$this->changesChecker = $this->createMock(ChangesCheck::class);
-		$this->updateChecker = new UpdateChecker($this->updater, $this->changesChecker);
+		$this->initialState = $this->createMock(IInitialState::class);
+		$this->updateChecker = new UpdateChecker(
+			$this->updater,
+			$this->changesChecker,
+			$this->initialState,
+		);
 	}
 
 	public function testGetUpdateStateWithUpdateAndInvalidLink(): void {
@@ -110,4 +116,28 @@ class UpdateCheckerTest extends TestCase {
 		$expected = [];
 		$this->assertSame($expected, $this->updateChecker->getUpdateState());
 	}
+
+	public function testSetInitialState(): void {
+		$this->updater
+			->expects($this->once())
+			->method('check')
+			->willReturn([
+				'version' => '1.2.3',
+				'versionstring' => 'Nextcloud 1.2.3',
+				'web' => 'https://docs.nextcloud.com/myUrl',
+				'url' => 'https://downloads.nextcloud.org/server',
+				'changes' => 'https://updates.nextcloud.com/changelog_server/?version=123.0.0',
+				'autoupdater' => '1',
+				'eol' => '0',
+			]);
+
+		$this->initialState->expects(self::once())
+			->method('provideInitialState')
+			->with('updateState', [
+				'updateVersion' => 'Nextcloud 1.2.3',
+				'updateLink' => 'https://docs.nextcloud.com/myUrl',
+			]);
+
+		$this->updateChecker->setInitialState();
+	}
 }
diff --git a/webpack.modules.js b/webpack.modules.js
index c7a0e35e3cd..f788e6f6e84 100644
--- a/webpack.modules.js
+++ b/webpack.modules.js
@@ -107,6 +107,7 @@ module.exports = {
 		init: path.join(__dirname, 'apps/updatenotification/src', 'init.ts'),
 		'view-changelog-page': path.join(__dirname, 'apps/updatenotification/src', 'view-changelog-page.ts'),
 		updatenotification: path.join(__dirname, 'apps/updatenotification/src', 'updatenotification.js'),
+		'update-notification-legacy': path.join(__dirname, 'apps/updatenotification/src', 'update-notification-legacy.ts'),
 	},
 	user_status: {
 		menu: path.join(__dirname, 'apps/user_status/src', 'menu.js'),