Cleanup admin delegation setting page

- Simplify code a bit
- Add link to doc
- Use Nextcloud vue component a bit more

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

apps/settings/lib/Settings/Admin/Delegation.php

@@ -31,30 +31,27 @@ use OCP\IGroupManager;
 use OCP\Settings\IDelegatedSettings;
 use OCP\Settings\IManager;
 use OCP\Settings\ISettings;
+use OCP\IURLGenerator;
 
 class Delegation implements ISettings {
-	/** @var IManager */
-	private $settingManager;
-
-	/** @var IInitialState $initialStateService */
-	private $initialStateService;
-
-	/** @var IGroupManager $groupManager */
-	private $groupManager;
-
-	/** @var AuthorizedGroupService $authorizedGroupService */
-	private $authorizedGroupService;
+	private IManager $settingManager;
+	private IInitialState $initialStateService;
+	private IGroupManager $groupManager;
+	private AuthorizedGroupService $authorizedGroupService;
+	private IURLGenerator $urlGenerator;
 
 	public function __construct(
 		IManager $settingManager,
 		IInitialState $initialStateService,
 		IGroupManager $groupManager,
-		AuthorizedGroupService $authorizedGroupService
+		AuthorizedGroupService $authorizedGroupService,
+		IURLGenerator $urlGenerator
 	) {
 		$this->settingManager = $settingManager;
 		$this->initialStateService = $initialStateService;
 		$this->groupManager = $groupManager;
 		$this->authorizedGroupService = $authorizedGroupService;
+		$this->urlGenerator = $urlGenerator;
 	}
 
 	/**
@@ -128,6 +125,7 @@ class Delegation implements ISettings {
 		$this->initSettingState();
 		$this->initAvailableGroupState();
 		$this->initAuthorizedGroupState();
+		$this->initialStateService->provideInitialState('authorized-settings-doc-link', $this->urlGenerator->linkToDocs('admin-delegation'));
 
 		return new TemplateResponse(Application::APP_ID, 'settings/admin/delegation', [], '');
 	}

apps/settings/src/components/AdminDelegating.vue

@@ -1,36 +1,33 @@
 <template>
-	<div id="admin-right-sub-granting" class="section">
-		<h2>{{ t('settings', 'Administration privileges') }}</h2>
-		<p class="settings-hint">
-			{{ t('settings', 'Here you can decide which group can access certain sections of the administration settings.') }}
-		</p>
-
+	<SettingsSection :title="t('settings', 'Administration privileges')"
+		:description="t('settings', 'Here you can decide which group can access certain sections of the administration settings.')"
+		:doc-url="authorizedSettingsDocLink">
 		<div class="setting-list">
 			<div v-for="setting in availableSettings" :key="setting.class">
 				<h3>{{ setting.sectionName }}</h3>
 				<GroupSelect :available-groups="availableGroups" :authorized-groups="authorizedGroups" :setting="setting" />
 			</div>
 		</div>
-	</div>
+	</SettingsSection>
 </template>
 
 <script>
 import GroupSelect from './AdminDelegation/GroupSelect'
+import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
 import { loadState } from '@nextcloud/initial-state'
 
 export default {
 	name: 'AdminDelegating',
 	components: {
 		GroupSelect,
+		SettingsSection,
 	},
 	data() {
-		const availableSettings = loadState('settings', 'available-settings')
-		const availableGroups = loadState('settings', 'available-groups')
-		const authorizedGroups = loadState('settings', 'authorized-groups')
 		return {
-			availableSettings,
-			availableGroups,
-			authorizedGroups,
+			availableSettings: loadState('settings', 'available-settings'),
+			availableGroups: loadState('settings', 'available-groups'),
+			authorizedGroups: loadState('settings', 'authorized-groups'),
+			authorizedSettingsDocLink: loadState('settings', 'authorized-settings-doc-link'),
 		}
 	},
 }