Port admin settings to vue

.eslintrc.js

@@ -0,0 +1,7 @@
+// SPDX-FileCopyrightText: Carl Schwan <[email protected]>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+module.exports = {
+	extends: [
+		'@nextcloud',
+	]
+}

.github/workflows/lint-eslint.yml

@@ -0,0 +1,47 @@
+# This workflow is provided via the organization template repository
+#
+# https://github.com/nextcloud/.github
+# https://docs.github.com/en/actions/learn-github-actions/sharing-workflows-with-your-organization
+# SPDX-FileCopyrightText: Nextcloud contributors
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+name: Lint
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - master
+      - stable*
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    name: eslint
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Read package.json node and npm engines version
+        uses: skjnldsv/[email protected]
+        id: versions
+        with:
+          fallbackNode: '^12'
+          fallbackNpm: '^6'
+
+      - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ steps.versions.outputs.nodeVersion }}
+
+      - name: Set up npm ${{ steps.versions.outputs.npmVersion }}
+        run: npm i -g npm@"${{ steps.versions.outputs.npmVersion }}"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is mostly based on [Keep a Changelog](https://keepachangelog.com/en/1
 # Unreleased
 ## [18.x.x]
 ### Changed
+- Ported the admin settings to vue (#2353)
 
 ### Fixed
 - Fix PHP 8.1 deprecations (#1861)

Makefile

@@ -83,6 +83,8 @@ endif
 # Installs npm dependencies
 .PHONY: npm
 npm:
+	$(npm) ci
+	$(npm) run build
 ifneq (, $(npm))
 	cd js && $(npm) run build
 else
@@ -171,7 +173,7 @@ appstore:
 	# on macOS there is no option "--parents" for the "cp" command
 	mkdir -p $(appstore_sign_dir)/$(app_name)/js/build $(appstore_sign_dir)/$(app_name)/js/admin
 	cp js/build/app.min.js $(appstore_sign_dir)/$(app_name)/js/build
-	cp js/admin/Admin.js $(appstore_sign_dir)/$(app_name)/js/admin
+	cp js/build/news-admin-settings.js* $(appstore_sign_dir)/$(app_name)/js/build
 
 	# export the key and cert to a file
 	mkdir -p $(cert_dir)

babel.config.js

@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: Carl Schwan <[email protected]>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+const babelConfig = require('@nextcloud/babel-config')
+
+module.exports = babelConfig

css/mobile.scss → css/mobile.css

@@ -1,4 +1,4 @@
-@media only screen and (max-width: $breakpoint_mobile) {
+@media only screen and (max-width: 1024px) {
     #app-content .utils .date {
         display: none;
     }

js/gulpfile.js

@@ -39,7 +39,7 @@ const sources = [
     'directive/**/*.js'
 ];
 const testSources = ['tests/**/*.js'];
-const watchSources = sources.concat(testSources).concat(['*.js']);
+const watchSources = sources.concat(testSources).concat(['*.js', '!news-admin-settings.js']);
 const lintSources = watchSources;
 
 // tasks

lib/Settings/AdminSettings.php

@@ -6,6 +6,7 @@
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\IConfig;
 use OCP\Settings\ISettings;
+use OCP\AppFramework\Services\IInitialState;
 
 class AdminSettings implements ISettings
 {
@@ -14,25 +15,26 @@ class AdminSettings implements ISettings
      * @var IConfig
      */
     private $config;
+    /** @var IInitialState */
+    private $initialState;
 
-    public function __construct(IConfig $config)
+    public function __construct(IConfig $config, IInitialState $initialState)
     {
         $this->config = $config;
+        $this->initialState = $initialState;
     }
 
     public function getForm()
     {
-        $data = [];
-
         foreach (array_keys(Application::DEFAULT_SETTINGS) as $setting) {
-            $data[$setting] = $this->config->getAppValue(
+            $this->initialState->provideInitialState($setting, $this->config->getAppValue(
                 Application::NAME,
                 $setting,
-                Application::DEFAULT_SETTINGS[$setting]
-            );
+                (string)Application::DEFAULT_SETTINGS[$setting]
+            ));
         }
 
-        return new TemplateResponse(Application::NAME, 'admin', $data);
+        return new TemplateResponse(Application::NAME, 'admin', []);
     }
 
     public function getSection()