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>

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>

apps/updatenotification/lib/AppInfo/Application.php

@@ -50,7 +50,8 @@ public function boot(IBootContext $context): void {
 			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 @@ public function boot(IBootContext $context): void {
 				}
 
 				if ($updateChecker->getUpdateState() !== []) {
-					Util::addScript('updatenotification', 'legacy-notification');
-					\OC_Hook::connect('\OCP\Config', 'js', $updateChecker, 'populateJavaScriptVariables');
+					Util::addScript('updatenotification', 'update-notification-legacy');
+					$updateChecker->setInitialState();
 				}
 			}
 		});

apps/updatenotification/lib/UpdateChecker.php

@@ -10,19 +10,15 @@
 
 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 @@ public function getUpdateState(): array {
 	}
 
 	/**
-	 * @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'] ?? '',
 		]);
 	}
 }

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') })
+})

apps/updatenotification/tests/UpdateCheckerTest.php

@@ -11,22 +11,28 @@
 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 @@ public function testGetUpdateStateWithoutUpdate(): void {
 		$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();
+	}
 }

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'),