fix(AdminSettings): migrate to NcSettingsSection

Signed-off-by: Grigorii K. Shartsev <[email protected]>
nextcloud · Jul 29, 2024 · 702f3b7 · 702f3b7
1 parent 534fb29
commit 702f3b7
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 76 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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://github.com/nextcloud/nextcloud-talk-recording/blob/main/docs/installation.md">
 		<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
@@ -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
@@ -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,