feat(teams): add confirmation popup when enabling federation for a team

src/components/CircleDetails.vue

@@ -73,7 +73,11 @@
 										</template>
 									</NcButton>
 								</template>
-								<CircleSettings :circle="circle" @leave="onLeave" @delete="onDelete" />
+								<CircleSettings
+									:circle="circle"
+									@leave="onLeave"
+									@delete="onDelete"
+									@close-settings-popover="onCloseSettingsPopover" />
 							</NcPopover>
 						</template>
 						<template v-else>
@@ -649,6 +653,10 @@ export default {
 			this.confirmDeleteCircle()
 		},
 
+		onCloseSettingsPopover() {
+			this.isSettingsPopoverShown = false
+		},
+
 		startEditing() {
 			this.originalDisplayName = this.circle.displayName
 			this.originalDescription = this.circle.description

src/components/CircleDetails/CircleSettings.vue

@@ -19,7 +19,7 @@
 						:loading="loading === config"
 						:disabled="loading !== false"
 						wrapper-element="li"
-						@update:model-value="onChange(config, $event)">
+						@update:model-value="onChange(Number(config), $event)">
 						{{ label }}
 					</NcCheckboxRadioSwitch>
 				</ul>
@@ -63,7 +63,8 @@ import IconLogout from 'vue-material-design-icons/Logout.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
 import CirclePasswordSettings from './CirclePasswordSettings.vue'
 import ContentHeading from './ContentHeading.vue'
-import { PUBLIC_CIRCLE_CONFIG } from '../../models/constants.ts'
+import CircleActionsMixin from '../../mixins/CircleActionsMixin.js'
+import { CircleConfigs, PUBLIC_CIRCLE_CONFIG } from '../../models/constants.ts'
 import { CircleEdit, editCircle } from '../../services/circles.ts'
 
 export default defineComponent({
@@ -77,14 +78,16 @@ export default defineComponent({
 		NcCheckboxRadioSwitch,
 	},
 
+	mixins: [CircleActionsMixin],
+
 	props: {
 		circle: {
 			type: Object,
 			required: true,
 		},
 	},
 
-	emits: ['leave', 'delete'],
+	emits: ['leave', 'delete', 'close-settings-popover'],
 	setup() {
 		return { t }
 	},
@@ -110,6 +113,14 @@ export default defineComponent({
 		async onChange(config: number, checked: boolean) {
 			this.logger.debug(`Circle config ${config} is set to ${checked}`)
 
+			if (checked && config === CircleConfigs.FEDERATED) {
+				this.$emit('close-settings-popover')
+				const confirmed = await this.confirmEnableFederationForCircle()
+				if (!confirmed) {
+					return
+				}
+			}
+
 			this.loading = config
 			const prevConfig = this.circle.config
 			if (checked) {

src/mixins/CircleActionsMixin.js

@@ -1,4 +1,4 @@
-import { showError } from '@nextcloud/dialogs'
+import { showConfirmation, showError, showSuccess } from '@nextcloud/dialogs'
 /**
  * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
@@ -134,6 +134,23 @@ export default {
 			}
 		},
 
+		async confirmEnableFederationForCircle() {
+			const confirmed = await showConfirmation({
+				name: t('contacts', 'Confirm enabling federation'),
+				text: t('contacts', 'Enabling this will prevent {circle} from being a member of other teams.\nAre you sure?', {
+					circle: this.circle.displayName,
+				}),
+				labelConfirm: t('contacts', 'Enable federation'),
+				labelReject: t('contacts', 'Cancel'),
+				severity: 'warning',
+			})
+			if (!confirmed) {
+				this.logger.debug('Enable federation cancelled')
+				return false
+			}
+			return true
+		},
+
 		/**
 		 * Trigger the entity picker view
 		 */