fix(SignalingServers): move signaling state to AdminSettings

Signed-off-by: Maksim Sukharev <[email protected]>

src/components/AdminSettings/SignalingServers.vue

@@ -5,7 +5,7 @@
 
 <template>
 	<section id="signaling_server" class="signaling-servers section">
-		<NcNoteCard v-if="!servers.length"
+		<NcNoteCard v-if="!serversProxy.length"
 			type="error"
 			:heading="t('spreed', 'Nextcloud Talk setup not complete')"
 			:text="t('spreed', 'Install the High-performance backend to ensure calls with multiple participants work seamlessly.')" />
@@ -18,26 +18,21 @@
 			{{ t('spreed', 'The High-performance backend is required for calls and conversations with multiple participants. Without the backend, all participants have to upload their own video individually for each other participant, which will most likely cause connectivity issues and a high load on participating devices.') }}
 		</p>
 
-		<NcNoteCard v-if="servers.length && !isCacheConfigured"
+		<NcNoteCard v-if="serversProxy.length && !isCacheConfigured"
 			type="warning"
 			:text="t('spreed', 'It is highly recommended to set up a distributed cache when using Nextcloud Talk with a High-performance backend.')" />
 
-		<TransitionWrapper v-if="servers.length"
-			name="fade"
-			tag="ul"
-			group>
-			<SignalingServer v-for="(server, index) in servers"
-				:key="`server${index}`"
-				:server.sync="servers[index].server"
-				:verify.sync="servers[index].verify"
-				:index="index"
-				:loading="loading"
-				@remove-server="removeServer"
-				@update:server="debounceUpdateServers"
-				@update:verify="debounceUpdateServers" />
-		</TransitionWrapper>
-
-		<NcButton v-if="!servers.length || isClusteredMode"
+		<SignalingServer v-for="(server, index) in serversProxy"
+			:key="`server${index}`"
+			:server.sync="server.server"
+			:verify.sync="server.verify"
+			:index="index"
+			:loading="loading"
+			@remove-server="removeServer"
+			@update:server="debounceUpdateServers"
+			@update:verify="debounceUpdateServers" />
+
+		<NcButton v-if="!serversProxy.length || isClusteredMode"
 			class="additional-top-margin"
 			:disabled="loading"
 			@click="newServer">
@@ -48,24 +43,21 @@
 			{{ t('spreed', 'Add High-performance backend server') }}
 		</NcButton>
 
-		<NcPasswordField v-if="servers.length"
-			v-model="secret"
+		<NcPasswordField v-if="serversProxy.length"
+			v-model="secretProxy"
 			class="form__textfield additional-top-margin"
 			name="signaling_secret"
 			as-text
 			:disabled="loading"
 			:placeholder="t('spreed', 'Shared secret')"
 			:label="t('spreed', 'Shared secret')"
-			label-visible
-			@update:model-value="debounceUpdateServers" />
+			label-visible />
 
-		<template v-if="!servers.length">
+		<template v-if="!serversProxy.length">
 			<NcNoteCard type="warning"
 				class="additional-top-margin"
 				:text="t('spreed', 'Please note that in calls with more than 2 participants without the High-performance backend, participants will most likely experience connectivity issues and cause high load on participating devices.')" />
-			<NcCheckboxRadioSwitch v-model="hideWarning"
-				:disabled="loading"
-				@update:model-value="updateHideWarning">
+			<NcCheckboxRadioSwitch v-model="hideWarningProxy" :disabled="loading">
 				{{ t('spreed', 'Don\'t warn about connectivity issues in calls with more than 2 participants') }}
 			</NcCheckboxRadioSwitch>
 		</template>
@@ -74,7 +66,7 @@
 
 <script setup lang="ts">
 import debounce from 'debounce'
-import { ref, onBeforeUnmount } from 'vue'
+import { computed, ref, onBeforeUnmount } from 'vue'
 
 import Plus from 'vue-material-design-icons/Plus.vue'
 
@@ -88,7 +80,6 @@ import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 
 import SignalingServer from '../../components/AdminSettings/SignalingServer.vue'
-import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
 
 import { SIGNALING } from '../../constants.js'
 import { EventBus } from '../../services/EventBus.ts'
@@ -97,13 +88,48 @@ import { InitialState } from '../../types/index.ts'
 const isCacheConfigured = loadState('spreed', 'has_cache_configured')
 const isClusteredMode = loadState('spreed', 'signaling_mode') === SIGNALING.MODE.CLUSTER_CONVERSATION
 
-const state = loadState<InitialState['spreed']['signaling_servers']>('spreed', 'signaling_servers')
-const servers = ref(state.servers ?? [])
-const secret = ref(state.secret ?? '')
-const hideWarning = ref(state.hideWarning ?? false)
+const props = defineProps<{
+	hideWarning: boolean,
+	secret: string,
+	servers: { server: string, verify: boolean }[],
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:servers', value: InitialState['spreed']['signaling_servers']['servers']): void
+	(e: 'update:secret', value: InitialState['spreed']['signaling_servers']['secret']): void
+	(e: 'update:hideWarning', value: InitialState['spreed']['signaling_servers']['hideWarning']): void
+}>()
 
 const loading = ref(false)
 
+const serversProxy = computed({
+	get() {
+		return props.servers
+	},
+	set(value) {
+		emit('update:servers', value)
+		debounceUpdateServers()
+	}
+})
+const secretProxy = computed({
+	get() {
+		return props.secret
+	},
+	set(value) {
+		emit('update:secret', value)
+		debounceUpdateServers()
+	}
+})
+const hideWarningProxy = computed({
+	get() {
+		return props.hideWarning
+	},
+	set(value) {
+		emit('update:hideWarning', value)
+		updateHideWarning(value)
+	}
+})
+
 const debounceUpdateServers = debounce(updateServers, 1000)
 
 onBeforeUnmount(() => {
@@ -115,24 +141,23 @@ onBeforeUnmount(() => {
  * @param index index of server (remnant from clustered setup, should be always 0)
  */
 function removeServer(index: number) {
-	servers.value.splice(index, 1)
-	debounceUpdateServers()
+	serversProxy.value = serversProxy.value.filter((_item, idx) => idx !== index)
 }
 
 /**
  * Adds HPB server to the list
  */
 function newServer() {
-	servers.value.push({ server: '', verify: true })
+	serversProxy.value.push({ server: '', verify: true })
 }
 
 /**
  * Update hideWarning value on server
+ * @param value new value
  */
-function updateHideWarning() {
+function updateHideWarning(value: boolean) {
 	loading.value = true
-
-	OCP.AppConfig.setValue('spreed', 'hide_signaling_warning', hideWarning.value ? 'yes' : 'no', {
+	OCP.AppConfig.setValue('spreed', 'hide_signaling_warning', value ? 'yes' : 'no', {
 		success: () => {
 			showSuccess(t('spreed', 'Missing High-performance backend warning hidden'))
 			loading.value = false
@@ -146,15 +171,13 @@ function updateHideWarning() {
 function updateServers() {
 	loading.value = true
 
-	servers.value = servers.value.filter(server => server.server.trim() !== '')
-
 	OCP.AppConfig.setValue('spreed', 'signaling_servers', JSON.stringify({
-		servers: servers.value,
-		secret: secret.value,
+		servers: serversProxy.value.filter(server => server.server.trim() !== ''),
+		secret: secretProxy.value,
 	}), {
 		success: () => {
 			showSuccess(t('spreed', 'High-performance backend settings saved'))
-			EventBus.emit('signaling-servers-updated', servers.value)
+			EventBus.emit('signaling-servers-updated', serversProxy.value)
 			loading.value = false
 		},
 	})

src/views/AdminSettings.vue

@@ -4,6 +4,10 @@
 -->
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
+import { loadState } from '@nextcloud/initial-state'
+
 import AllowedGroups from '../components/AdminSettings/AllowedGroups.vue'
 import BotsSettings from '../components/AdminSettings/BotsSettings.vue'
 import Federation from '../components/AdminSettings/Federation.vue'
@@ -18,13 +22,22 @@ import TurnServers from '../components/AdminSettings/TurnServers.vue'
 import WebServerSetupChecks from '../components/AdminSettings/WebServerSetupChecks.vue'
 
 import { hasTalkFeature } from '../services/CapabilitiesManager.ts'
+import { InitialState } from '../types/index.ts'
 
 const supportFederation = hasTalkFeature('local', 'federation-v1')
+
+const signalingServers = ref<InitialState['spreed']['signaling_servers']>(loadState('spreed', 'signaling_servers', {
+	hideWarning: false,
+	secret: '',
+	servers: [],
+}))
 </script>
 
 <template>
 	<div>
-		<SignalingServers />
+		<SignalingServers :servers.sync="signalingServers.servers"
+			:secret.sync="signalingServers.secret"
+			:hide-warning.sync="signalingServers.hideWarning" />
 		<HostedSignalingServer />
 		<GeneralSettings />
 		<AllowedGroups />