From 125a5341588a6da6fa743a23c1a54f75a85ce3b6 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 29 Jul 2024 11:01:00 +0200
Subject: [PATCH] fix(AdminSettings): migrate to NcSettingsSection

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 .../AdminSettings/AllowedGroups.vue           |  7 ++++---
 src/components/AdminSettings/BotsSettings.vue | 11 +++++++----
 src/components/AdminSettings/Federation.vue   | 14 ++++++++------
 .../AdminSettings/GeneralSettings.vue         |  8 ++++----
 .../AdminSettings/HostedSignalingServer.vue   | 19 ++++++++-----------
 .../AdminSettings/MatterbridgeIntegration.vue | 14 ++++++++------
 .../AdminSettings/RecordingServers.vue        | 13 +++++++------
 src/components/AdminSettings/SIPBridge.vue    |  8 ++++----
 .../AdminSettings/SignalingServers.vue        | 18 ++++++++----------
 src/components/AdminSettings/StunServers.vue  | 17 +++++++----------
 src/components/AdminSettings/TurnServers.vue  | 10 ++++------
 .../AdminSettings/WebServerSetupChecks.vue    | 10 ++++------
 12 files changed, 73 insertions(+), 76 deletions(-)

diff --git a/src/components/AdminSettings/AllowedGroups.vue b/src/components/AdminSettings/AllowedGroups.vue
index 6972bd27fd91..f445233cc53c 100644
--- a/src/components/AdminSettings/AllowedGroups.vue
+++ b/src/components/AdminSettings/AllowedGroups.vue
@@ -4,8 +4,7 @@
 -->
 
 <template>
-	<section id="allowed_groups" class="videocalls section">
-		<h2>{{ t('spreed', 'Limit to groups') }}</h2>
+	<NcSettingsSection id="allowed_groups" :name="t('spreed', 'Limit to groups')">
 		<p class="settings-hint">
 			{{ t('spreed', 'When at least one group is selected, only people of the listed groups can be part of conversations.') }}
 		</p>
@@ -82,7 +81,7 @@
 		<p>
 			<em>{{ t('spreed', 'When a call has started, everyone with access to the conversation can join the call.') }}</em>
 		</p>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -95,6 +94,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 const startCallOptions = [
 	{ value: 0, label: t('spreed', 'Everyone') },
@@ -109,6 +109,7 @@ export default {
 	components: {
 		NcButton,
 		NcSelect,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/BotsSettings.vue b/src/components/AdminSettings/BotsSettings.vue
index bad1840b6f87..0c585b91cdeb 100644
--- a/src/components/AdminSettings/BotsSettings.vue
+++ b/src/components/AdminSettings/BotsSettings.vue
@@ -4,9 +4,10 @@
 -->
 
 <template>
-	<section id="bots_settings" class="bots-settings section">
-		<h2>{{ t('spreed', 'Bots settings') }}</h2>
-
+	<NcSettingsSection id="bots_settings"
+		class="bots-settings"
+		:name="t('spreed', 'Bots settings')"
+		doc-url="https://nextcloud-talk.readthedocs.io/en/latest/bot-list/">
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<p class="settings-hint" v-html="botsSettingsDescription" />
 
@@ -74,7 +75,7 @@
 			rel="noreferrer nofollow">
 			{{ t('spreed', 'Find more bots') }} ↗
 		</NcButton>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -88,6 +89,7 @@ import moment from '@nextcloud/moment'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import { BOT } from '../../constants.js'
 import { getAllBots } from '../../services/botsService.ts'
@@ -99,6 +101,7 @@ export default {
 		NcPopover,
 		NcButton,
 		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/Federation.vue b/src/components/AdminSettings/Federation.vue
index cf1ddfcee548..b6fb73989967 100644
--- a/src/components/AdminSettings/Federation.vue
+++ b/src/components/AdminSettings/Federation.vue
@@ -4,11 +4,11 @@
 -->
 
 <template>
-	<section id="federation_settings" class="federation section">
-		<h2>
-			{{ t('spreed', 'Federation') }}
-			<small>{{ t('spreed', 'Beta') }}</small>
-		</h2>
+	<NcSettingsSection id="federation_settings"
+		class="federation"
+		:name="t('spreed', 'Federation')"
+		doc-url="https://docs.nextcloud.com/server/latest/user_manual/en/talk/advanced_features.html#federated-conversation">
+		<!-- <small>{{ t('spreed', 'Beta') }}</small> -->
 
 		<NcCheckboxRadioSwitch :checked="isFederationEnabled"
 			:disabled="loading"
@@ -76,7 +76,7 @@
 				</NcButton>
 			</div>
 		</template>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -90,6 +90,7 @@ import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 const FEDERATION_ENABLED = loadState('spreed', 'federation_enabled', false)
 const FEDERATION_INCOMING_ENABLED = loadState('spreed', 'federation_incoming_enabled', true)
@@ -104,6 +105,7 @@ export default {
 		NcButton,
 		NcCheckboxRadioSwitch,
 		NcSelect,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/GeneralSettings.vue b/src/components/AdminSettings/GeneralSettings.vue
index 751185fa0200..2041871208f4 100644
--- a/src/components/AdminSettings/GeneralSettings.vue
+++ b/src/components/AdminSettings/GeneralSettings.vue
@@ -4,9 +4,7 @@
 -->
 
 <template>
-	<section id="general_settings" class="videocalls section">
-		<h2>{{ t('spreed', 'General settings') }}</h2>
-
+	<NcSettingsSection id="general_settings" :name="t('spreed', 'General settings')">
 		<h3>{{ t('spreed', 'Default notification settings') }}</h3>
 
 		<NcSelect v-model="defaultGroupNotification"
@@ -36,7 +34,7 @@
 			@update:checked="saveConversationsFilesPublicShares">
 			{{ t('spreed', 'Allow conversations on public shares for files') }}
 		</NcCheckboxRadioSwitch>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -45,6 +43,7 @@ import { t } from '@nextcloud/l10n'
 
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 const defaultGroupNotificationOptions = [
 	{ value: 1, label: t('spreed', 'All messages') },
@@ -57,6 +56,7 @@ export default {
 	components: {
 		NcCheckboxRadioSwitch,
 		NcSelect,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/HostedSignalingServer.vue b/src/components/AdminSettings/HostedSignalingServer.vue
index 56a25216931c..93b4f3f2a1dc 100644
--- a/src/components/AdminSettings/HostedSignalingServer.vue
+++ b/src/components/AdminSettings/HostedSignalingServer.vue
@@ -4,17 +4,12 @@
 -->
 
 <template>
-	<section v-if="showForm"
+	<NcSettingsSection v-if="showForm"
 		id="hosted_signaling_server"
-		class="hosted-signaling section">
-		<h2>
-			{{ t('spreed', 'Hosted high-performance backend') }}
-		</h2>
-
-		<p class="settings-hint">
-			{{ t('spreed', 'Our partner Struktur AG provides a service where a hosted signaling server can be requested. For this you only need to fill out the form below and your Nextcloud will request it. Once the server is set up for you the credentials will be filled automatically. This will overwrite the existing signaling server settings.') }}
-		</p>
-
+		class="hosted-signaling"
+		:name="t('spreed', 'Hosted high-performance backend')"
+		:description="t('spreed', 'Our partner Struktur AG provides a service where a hosted signaling server can be requested. For this you only need to fill out the form below and your Nextcloud will request it. Once the server is set up for you the credentials will be filled automatically. This will overwrite the existing signaling server settings.')"
+		doc-url="https://www.spreed.eu/nextcloud-talk-high-performance-backend/">
 		<template v-if="!trialAccount.status">
 			<NcTextField :value.sync="hostedHPBNextcloudUrl"
 				class="form__textfield"
@@ -115,7 +110,7 @@
 				{{ t('spreed', 'Delete the signaling server account') }}
 			</NcButton>
 		</template>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -127,6 +122,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import { EventBus } from '../../services/EventBus.js'
@@ -138,6 +134,7 @@ export default {
 		NcButton,
 		NcSelect,
 		NcTextField,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/MatterbridgeIntegration.vue b/src/components/AdminSettings/MatterbridgeIntegration.vue
index 8533e61e0758..3483f66de12d 100644
--- a/src/components/AdminSettings/MatterbridgeIntegration.vue
+++ b/src/components/AdminSettings/MatterbridgeIntegration.vue
@@ -4,11 +4,11 @@
 -->
 
 <template>
-	<section id="matterbridge_settings" class="matterbridge section">
-		<h2>
-			{{ t('spreed', 'Matterbridge integration') }}
-			<small>{{ t('spreed', 'Beta') }}</small>
-		</h2>
+	<NcSettingsSection id="matterbridge_settings"
+		class="matterbridge"
+		:name="t('spreed', 'Matterbridge integration')"
+		doc-url="https://nextcloud-talk.readthedocs.io/en/latest/matterbridge/">
+		<!-- <small>{{ t('spreed', 'Beta') }}</small> -->
 
 		<template v-if="matterbridgeVersion">
 			<p class="settings-hint">
@@ -40,7 +40,7 @@
 				{{ installButtonText }}
 			</NcButton>
 		</template>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -50,6 +50,7 @@ import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import {
 	enableMatterbridgeApp,
@@ -63,6 +64,7 @@ export default {
 	components: {
 		NcButton,
 		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/RecordingServers.vue b/src/components/AdminSettings/RecordingServers.vue
index 9649d38d9c1f..5ff434b66454 100644
--- a/src/components/AdminSettings/RecordingServers.vue
+++ b/src/components/AdminSettings/RecordingServers.vue
@@ -5,11 +5,10 @@
 -->
 
 <template>
-	<section id="recording_server" class="recording-servers section">
-		<h2>
-			{{ t('spreed', 'Recording backend') }}
-		</h2>
-
+	<NcSettingsSection id="recording_server"
+		class="recording-servers"
+		:name="t('spreed', 'Recording backend')"
+		doc-url="https://docs.nextcloud.com/server/latest/user_manual/en/talk/advanced_features.html#call-recording">
 		<NcNoteCard v-if="!showForm" type="warning">
 			{{ t('spreed', 'Recording backend configuration is only possible with a high-performance backend.') }}
 		</NcNoteCard>
@@ -75,7 +74,7 @@
 				</template>
 			</template>
 		</template>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -92,6 +91,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import RecordingServer from '../../components/AdminSettings/RecordingServer.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
@@ -115,6 +115,7 @@ export default {
 		NcCheckboxRadioSwitch,
 		NcNoteCard,
 		NcPasswordField,
+		NcSettingsSection,
 		Plus,
 		RecordingServer,
 		TransitionWrapper,
diff --git a/src/components/AdminSettings/SIPBridge.vue b/src/components/AdminSettings/SIPBridge.vue
index f6c0dfc48a10..79a660d9886c 100644
--- a/src/components/AdminSettings/SIPBridge.vue
+++ b/src/components/AdminSettings/SIPBridge.vue
@@ -4,9 +4,7 @@
 -->
 
 <template>
-	<div id="sip-bridge" class="sip-bridge section">
-		<h2>{{ t('spreed', 'SIP configuration') }}</h2>
-
+	<NcSettingsSection id="sip-bridge" class="sip-bridge" :name="t('spreed', 'SIP configuration')">
 		<NcNoteCard v-if="!showForm" type="warning">
 			{{ t('spreed', 'SIP configuration is only possible with a high-performance backend.') }}
 		</NcNoteCard>
@@ -75,7 +73,7 @@
 				{{ t('spreed', 'Save changes') }}
 			</NcButton>
 		</template>
-	</div>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -92,6 +90,7 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadi
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
 
 import { EventBus } from '../../services/EventBus.js'
@@ -108,6 +107,7 @@ export default {
 		NcSelect,
 		NcTextArea,
 		NcPasswordField,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/SignalingServers.vue b/src/components/AdminSettings/SignalingServers.vue
index fa4a5ce66b87..42157f22c271 100644
--- a/src/components/AdminSettings/SignalingServers.vue
+++ b/src/components/AdminSettings/SignalingServers.vue
@@ -4,15 +4,11 @@
 -->
 
 <template>
-	<section id="signaling_server" class="signaling-servers section">
-		<h2>
-			{{ t('spreed', 'High-performance backend') }}
-		</h2>
-
-		<p class="settings-hint">
-			{{ t('spreed', 'An external signaling server should optionally be used for larger installations. Leave empty to use the internal signaling server.') }}
-		</p>
-
+	<NcSettingsSection id="signaling_server"
+		class="signaling-servers"
+		:name="t('spreed', 'High-performance backend')"
+		:description="t('spreed', 'An external signaling server should optionally be used for larger installations. Leave empty to use the internal signaling server.')"
+		doc-url="https://nextcloud.com/talk/">
 		<NcNoteCard v-if="!isCacheConfigured" type="warning">
 			{{ t('spreed', 'It is highly recommended to set up a distributed cache when using Nextcloud Talk together with a High Performance Back-end.') }}
 		</NcNoteCard>
@@ -63,7 +59,7 @@
 			:label="t('spreed', 'Shared secret')"
 			label-visible
 			@update:value="updateSecret" />
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -79,6 +75,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import SignalingServer from '../../components/AdminSettings/SignalingServer.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
@@ -94,6 +91,7 @@ export default {
 		NcCheckboxRadioSwitch,
 		NcNoteCard,
 		NcPasswordField,
+		NcSettingsSection,
 		Plus,
 		SignalingServer,
 		TransitionWrapper,
diff --git a/src/components/AdminSettings/StunServers.vue b/src/components/AdminSettings/StunServers.vue
index 872b49e93686..64121cf76ecf 100644
--- a/src/components/AdminSettings/StunServers.vue
+++ b/src/components/AdminSettings/StunServers.vue
@@ -4,15 +4,10 @@
 -->
 
 <template>
-	<section id="stun_server" class="videocalls section">
-		<h2>
-			{{ t('spreed', 'STUN servers') }}
-		</h2>
-
-		<p class="settings-hint">
-			{{ t('spreed', 'A STUN server is used to determine the public IP address of participants behind a router.') }}
-		</p>
-
+	<NcSettingsSection id="stun_server"
+		:name="t('spreed', 'STUN servers')"
+		:description="t('spreed', 'A STUN server is used to determine the public IP address of participants behind a router.')"
+		doc-url="https://nextcloud-talk.readthedocs.io/en/latest/TURN/">
 		<TransitionWrapper name="fade"
 			class="stun-servers"
 			tag="ul"
@@ -35,7 +30,7 @@
 			</template>
 			{{ t('spreed', 'Add a new STUN server') }}
 		</NcButton>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -48,6 +43,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import StunServer from '../../components/AdminSettings/StunServer.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
@@ -60,6 +56,7 @@ export default {
 		StunServer,
 		Plus,
 		TransitionWrapper,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/TurnServers.vue b/src/components/AdminSettings/TurnServers.vue
index 4fd090678884..c2c3c36f5196 100644
--- a/src/components/AdminSettings/TurnServers.vue
+++ b/src/components/AdminSettings/TurnServers.vue
@@ -4,11 +4,7 @@
 -->
 
 <template>
-	<section id="turn_server" class="videocalls section">
-		<h2>
-			{{ t('spreed', 'TURN servers') }}
-		</h2>
-
+	<NcSettingsSection id="turn_server" :name="t('spreed', 'TURN servers')" doc-url="https://nextcloud-talk.readthedocs.io/en/latest/TURN/">
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<p class="settings-hint" v-html="documentationHint" />
 
@@ -40,7 +36,7 @@
 			</template>
 			{{ t('spreed', 'Add a new TURN server') }}
 		</NcButton>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -53,6 +49,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import TurnServer from '../../components/AdminSettings/TurnServer.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
@@ -62,6 +59,7 @@ export default {
 
 	components: {
 		NcButton,
+		NcSettingsSection,
 		TurnServer,
 		Plus,
 		TransitionWrapper,
diff --git a/src/components/AdminSettings/WebServerSetupChecks.vue b/src/components/AdminSettings/WebServerSetupChecks.vue
index d80adcedb689..b74953507250 100644
--- a/src/components/AdminSettings/WebServerSetupChecks.vue
+++ b/src/components/AdminSettings/WebServerSetupChecks.vue
@@ -4,11 +4,7 @@
 -->
 
 <template>
-	<div id="web_server_setup_checks" class="section">
-		<h2>
-			{{ t('spreed', 'Web server setup checks') }}
-		</h2>
-
+	<NcSettingsSection id="web_server_setup_checks" :name="t('spreed', 'Web server setup checks')" doc-url="https://nextcloud-talk.readthedocs.io/en/latest/system-requirements/">
 		<NcNoteCard v-if="apacheWarning"
 			:type="apacheWarningType">
 			{{ apacheWarning }}
@@ -31,7 +27,7 @@
 				</NcButton>
 			</li>
 		</ul>
-	</div>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -44,6 +40,7 @@ import { generateFilePath } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { VIRTUAL_BACKGROUND } from '../../constants.js'
@@ -61,6 +58,7 @@ export default {
 		AlertCircle,
 		NcButton,
 		NcNoteCard,
+		NcSettingsSection,
 		Check,
 	},