feat(federatedfilesharing): improve admin docs and settings

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

apps/federatedfilesharing/src/components/AdminSettings.vue

@@ -44,11 +44,17 @@
 			{{ t('federatedfilesharing', 'Allow people to publish their data to a global and public address book') }}
 		</NcCheckboxRadioSwitch>
 
-		<NcCheckboxRadioSwitch type="switch"
-			:checked.sync="federatedTrustedShareAutoAccept"
-			@update:checked="update('federatedTrustedShareAutoAccept', federatedTrustedShareAutoAccept)">
-			{{ t('federatedfilesharing', 'Automatically accept shares from federated accounts and groups by default') }}
-		</NcCheckboxRadioSwitch>
+		<!-- Trusted server handling -->
+		<div class="settings-subsection">
+			<h3 class="settings-subsection__name">
+				{{ t('federatedfilesharing', 'Trusted federation') }}
+			</h3>
+			<NcCheckboxRadioSwitch type="switch"
+				:checked.sync="federatedTrustedShareAutoAccept"
+				@update:checked="update('federatedTrustedShareAutoAccept', federatedTrustedShareAutoAccept)">
+				{{ t('federatedfilesharing', 'Automatically accept shares from trusted federated accounts and groups by default') }}
+			</NcCheckboxRadioSwitch>
+		</div>
 	</NcSettingsSection>
 </template>
 
@@ -118,3 +124,18 @@ export default {
 	},
 }
 </script>
+<style scoped>
+.settings-subsection {
+	margin-top: 20px;
+}
+
+.settings-subsection__name {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 16px;
+	font-weight: bold;
+	max-width: 900px;
+	margin-top: 0;
+}
+</style>

apps/federation/templates/settings-admin.php

@@ -1,20 +1,34 @@
 <?php
-
 /**
  * SPDX-FileCopyrightText: 2016-2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-FileCopyrightText: 2015-2016 ownCloud, Inc.
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-/** @var array $_ */
+
 use OCA\Federation\TrustedServers;
+use OCP\IL10N;
+use OCP\IURLGenerator;
+use OCP\Server;
+use OCP\Util;
+
+/** @var IL10N $l */
+
+Util::addScript('federation', 'settings-admin');
+Util::addStyle('federation', 'settings-admin');
 
-/** @var \OCP\IL10N $l */
-script('federation', 'settings-admin');
-style('federation', 'settings-admin')
+$urlGenerator = Server::get(IURLGenerator::class);
+$documentationLink = $urlGenerator->linkToDocs('admin-sharing-federated') . '#configuring-trusted-nextcloud-servers';
+$documentationLabel = $l->t('External documentation for Federated Cloud Sharing');
 ?>
 <div id="ocFederationSettings" class="section">
-	<h2><?php p($l->t('Trusted servers')); ?></h2>
+	<h2>
+		<?php p($l->t('Trusted servers')); ?>
+		<a target="_blank" rel="noreferrer noopener" class="icon-info"
+			title="<?php p($documentationLabel);?>"
+			href="<?php p($documentationLink); ?>"></a>
+	</h2>
 	<p class="settings-hint"><?php p($l->t('Federation allows you to connect with other trusted servers to exchange the account directory. For example this will be used to auto-complete external accounts for federated sharing. It is not necessary to add a server as trusted server in order to create a federated share.')); ?></p>
+	<p class="settings-hint"><?php p($l->t('Each server must validate the other. This process may require a few cron cycles.')); ?></p>
 
 	<ul id="listOfTrustedServers">
 		<?php foreach ($_['trustedServers'] as $trustedServer) { ?>

apps/settings/css/settings.css

@@ -568,6 +568,7 @@ span.usersLastLoginTooltip {
 }
 
 /* SETTINGS SECTIONS */
+// to match with NcSettingsSection component
 .section {
 	margin-bottom: 0;
 	/* section divider lines, none needed for last one */
@@ -577,13 +578,32 @@ span.usersLastLoginTooltip {
 
 	/* correctly display help icons next to headings */
 	h2 {
-		margin-bottom: 22px;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 20px;
+		font-weight: bold;
+		max-width: 900px;
+		margin-top: 0;
 
-		.icon-info {
-			padding: 6px 20px;
-			vertical-align: text-bottom;
-			display: inline-block;
+		.icon-info  {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
+			margin: calc((var(--default-clickable-area) - 16px) / 2 * -1);
+			margin-inline-start: 0;
+			color: var(--color-text-maxcontrast);
 		}
+
+	}
+
+	p {
+		margin-top: -0.2em;
+		margin-bottom: 1em;
+		color: var(--color-text-maxcontrast);
+		max-width: 900px;
 	}
 }