Cleanup updatenotification

- Port away from jquery inside vue
- Use modern vue components when possible
- Fix some readability isssues particularly on dark theme
- Use IInitialState
- Use php7.4

Signed-off-by: Carl Schwan <[email protected]>

Author: CarlSchwan

apps/settings/css/settings.css

@@ -900,10 +900,6 @@ span.version {
 	}
 }
 
-#version.section {
-	border-bottom: none;
-}
-
 .section {
 	margin-bottom: 0;
 	/* section divider lines, none needed for last one */
@@ -926,7 +922,6 @@ span.version {
 .followupsection {
 	display: block;
 	padding: 0 30px 30px 30px;
-	color: #555;
 }
 
 .app-image {

apps/settings/css/settings.css.map

@@ -33,6 +33,7 @@
 use OCP\User\Backend\ICountUsersBackend;
 use OCA\UpdateNotification\UpdateChecker;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\IConfig;
 use OCP\IDateTimeFormatter;
 use OCP\IGroupManager;
@@ -44,22 +45,15 @@
 use Psr\Log\LoggerInterface;
 
 class Admin implements ISettings {
-	/** @var IConfig */
-	private $config;
-	/** @var UpdateChecker */
-	private $updateChecker;
-	/** @var IGroupManager */
-	private $groupManager;
-	/** @var IDateTimeFormatter */
-	private $dateTimeFormatter;
-	/** @var IFactory */
-	private $l10nFactory;
-	/** @var IRegistry */
-	private $subscriptionRegistry;
-	/** @var IUserManager */
-	private $userManager;
-	/** @var LoggerInterface */
-	private $logger;
+	private IConfig $config;
+	private UpdateChecker $updateChecker;
+	private IGroupManager $groupManager;
+	private IDateTimeFormatter $dateTimeFormatter;
+	private IFactory $l10nFactory;
+	private IRegistry $subscriptionRegistry;
+	private IUserManager $userManager;
+	private LoggerInterface $logger;
+	private IInitialState $initialState;
 
 	public function __construct(
 		IConfig $config,
@@ -69,7 +63,8 @@ public function __construct(
 		IFactory $l10nFactory,
 		IRegistry $subscriptionRegistry,
 		IUserManager $userManager,
-		LoggerInterface $logger
+		LoggerInterface $logger,
+		IInitialState $initialState 
 	) {
 		$this->config = $config;
 		$this->updateChecker = $updateChecker;
@@ -79,11 +74,9 @@ public function __construct(
 		$this->subscriptionRegistry = $subscriptionRegistry;
 		$this->userManager = $userManager;
 		$this->logger = $logger;
+		$this->initialState = $initialState;
 	}
 
-	/**
-	 * @return TemplateResponse
-	 */
 	public function getForm(): TemplateResponse {
 		$lastUpdateCheckTimestamp = $this->config->getAppValue('core', 'lastupdatedat');
 		$lastUpdateCheck = $this->dateTimeFormatter->formatDateTime($lastUpdateCheckTimestamp);
@@ -131,12 +124,9 @@ public function getForm(): TemplateResponse {
 			'notifyGroups' => $this->getSelectedGroups($notifyGroups),
 			'hasValidSubscription' => $hasValidSubscription,
 		];
+		$this->initialState->provideInitialState('data', $params);
 
-		$params = [
-			'json' => json_encode($params),
-		];
-
-		return new TemplateResponse('updatenotification', 'admin', $params, '');
+		return new TemplateResponse('updatenotification', 'admin', [], '');
 	}
 
 	protected function filterChanges(array $changes): array {
@@ -162,8 +152,8 @@ protected function filterChanges(array $changes): array {
 	}
 
 	/**
-	 * @param array $groupIds
-	 * @return array
+	 * @param list<string> $groupIds
+	 * @return array{id: string, displayname: string}
 	 */
 	protected function getSelectedGroups(array $groupIds): array {
 		$result = [];
@@ -174,26 +164,16 @@ protected function getSelectedGroups(array $groupIds): array {
 				continue;
 			}
 
-			$result[] = ['value' => $group->getGID(), 'label' => $group->getDisplayName()];
+			$result[] = ['id' => $group->getGID(), 'displayname' => $group->getDisplayName()];
 		}
 
 		return $result;
 	}
 
-	/**
-	 * @return string the section ID, e.g. 'sharing'
-	 */
 	public function getSection(): string {
 		return 'overview';
 	}
 
-	/**
-	 * @return int whether the form should be rather on the top or bottom of
-	 * the admin section. The forms are arranged in ascending order of the
-	 * priority values. It is required to return a value between 0 and 100.
-	 *
-	 * E.g.: 70
-	 */
 	public function getPriority(): int {
 		return 11;
 	}