fix: remove container prop in NcPopover and related components

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

src/components/AdminSettings/BotsSettings.vue

@@ -48,7 +48,7 @@
 				</div>
 				<div :id="`last_error_bot_${bot.id}`" class="last-error">
 					<NcPopover v-if="bot.last_error_message"
-						:container="`#last_error_bot_${bot.id}`"
+						container="#bots_settings"
 						:focus-trap="false">
 						<template #trigger>
 							<NcButton type="error" :aria-label="bot.last_error_message">

src/components/AvatarWrapper/AvatarWrapper.spec.js

@@ -21,11 +21,9 @@ describe('AvatarWrapper.vue', () => {
 	const USER_ID = 'user-id'
 	const USER_NAME = 'John Doe'
 	const PRELOADED_USER_STATUS = { status: 'online', message: null, icon: null }
-	const MENU_CONTAINER = '#menu-container'
 
 	beforeEach(() => {
 		testStoreConfig = cloneDeep(storeConfig)
-		testStoreConfig.modules.uiModeStore.getters.getMainContainerSelector = jest.fn().mockReturnValue(() => MENU_CONTAINER)
 		store = new Vuex.Store(testStoreConfig)
 	})
 
@@ -86,7 +84,6 @@ describe('AvatarWrapper.vue', () => {
 
 			expect(avatar.props('user')).toBe(USER_ID)
 			expect(avatar.props('displayName')).toBe(USER_NAME)
-			expect(avatar.props('menuContainer')).toBe(MENU_CONTAINER)
 			expect(avatar.props('showUserStatus')).toBe(true)
 			expect(avatar.props('showUserStatusCompact')).toBe(false)
 			expect(avatar.props('preloadedUserStatus')).toBe(PRELOADED_USER_STATUS)

src/components/AvatarWrapper/AvatarWrapper.vue

@@ -23,7 +23,7 @@
 			:key="id + (isDarkTheme ? '-dark' : '-light')"
 			:user="id"
 			:display-name="name"
-			:menu-container="menuContainerWithFallback"
+			:menu-container="menuContainer"
 			:disable-tooltip="disableTooltip"
 			:disable-menu="disableMenu"
 			:show-user-status="showUserStatus"
@@ -201,9 +201,6 @@ export default {
 			const customName = this.name?.trim() && this.name !== t('spreed', 'Guest') ? this.name : '?'
 			return customName.charAt(0)
 		},
-		menuContainerWithFallback() {
-			return this.menuContainer ?? this.$store.getters.getMainContainerSelector()
-		},
 		avatarUrl() {
 			return getUserProxyAvatarOcsUrl(this.token, this.id, this.isDarkTheme, this.size > AVATAR.SIZE.MEDIUM ? 512 : 64)
 		},

src/components/ConversationIcon.vue

@@ -39,7 +39,6 @@
 			:preloaded-user-status="preloadedUserStatus"
 			:show-user-status="!hideUserStatus"
 			:show-user-status-compact="!showUserOnlineStatus"
-			:menu-container="menuContainer"
 			class="conversation-icon__avatar" />
 		<div v-if="showCall" class="overlap-icon">
 			<VideoIcon :size="20" :fill-color="'#E9322D'" />
@@ -159,12 +158,6 @@ export default {
 			return getPreloadedUserStatus(this.item)
 		},
 
-		menuContainer() {
-			// The store may not be defined in the RoomSelector if used from
-			// the Collaboration menu outside Talk.
-			return this.$store?.getters.getMainContainerSelector()
-		},
-
 		iconClass() {
 			if (this.item.isDummyConversation) {
 				// Prevent a 404 when trying to load an avatar before the conversation data is actually loaded

src/components/MediaSettings/MediaSettings.vue

@@ -137,7 +137,7 @@
 			<!-- buttons bar at the bottom -->
 			<div class="media-settings__call-buttons">
 				<!-- Silent call -->
-				<NcActions v-if="showSilentCallOption" :container="container" force-menu>
+				<NcActions v-if="showSilentCallOption" force-menu>
 					<NcActionButton v-if="!silentCall"
 						:name="t('spreed', 'Call without notification')"
 						close-after-click

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue

@@ -27,7 +27,6 @@
 			</NcButton>
 			<NcActions :force-menu="true"
 				placement="bottom-end"
-				:container="messageContainer"
 				:boundaries-element="boundariesElement"
 				@open="onMenuOpen"
 				@close="onMenuClose">
@@ -230,8 +229,7 @@
 				</template>
 			</NcButton>
 
-			<NcEmojiPicker :container="mainContainer"
-				:boundary="boundariesElement"
+			<NcEmojiPicker :boundary="boundariesElement"
 				placement="auto"
 				@select="handleReactionClick"
 				@after-show="onEmojiPickerOpen"
@@ -427,14 +425,6 @@ export default {
 			return this.$store.getters.conversation(this.message.token)
 		},
 
-		mainContainer() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
-		messageContainer() {
-			return `#message_${this.message.id}`
-		},
-
 		boundariesElement() {
 			return this.getMessagesListScroller()
 		},

src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue

@@ -52,7 +52,6 @@
 		<!-- More reactions picker -->
 		<NcEmojiPicker v-if="canReact && showControls"
 			:per-line="5"
-			:container="`#message_${id}`"
 			@select="handleReactionClick"
 			@after-show="emitEmojiPickerStatus"
 			@after-hide="emitEmojiPickerStatus">

src/components/PollViewer/PollViewer.vue

@@ -47,7 +47,6 @@
 						class="results__option__details">
 						<PollVotersDetails v-if="poll.details"
 							:token="token"
-							:container="container"
 							:details="getFilteredDetails(index)" />
 						<p v-if="selfHasVotedOption(index)" class="results__option-subtitle">
 							{{ t('spreed', 'You voted for this option') }}
@@ -74,9 +73,7 @@
 					{{ t('spreed', 'Change your vote') }}
 				</NcButton>
 				<!-- End poll button-->
-				<NcActions v-if="canEndPoll"
-					force-menu
-					:container="container">
+				<NcActions v-if="canEndPoll" force-menu>
 					<NcActionButton class="critical" @click="endPoll">
 						{{ t('spreed', 'End poll') }}
 						<template #icon>

src/components/PollViewer/PollVotersDetails.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcPopover class="poll-voters-details" trigger="hover" :container="container">
+	<NcPopover class="poll-voters-details" trigger="hover">
 		<template #trigger>
 			<NcButton type="tertiary-no-background"
 				:aria-label="t('spreed','Voted participants')"
@@ -71,11 +71,6 @@ export default {
 			type: Array,
 			required: true,
 		},
-
-		container: {
-			type: String,
-			required: true,
-		},
 	},
 
 	setup() {

src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue

@@ -28,7 +28,6 @@
 					{{ t('spreed', 'Join') }}
 				</NcButton>
 				<NcActions v-if="canModerate"
-					:container="container"
 					:inline="showAssistanceButton ? 1 : 0"
 					:force-menu="!showAssistanceButton">
 					<NcActionButton v-if="showAssistanceButton"
@@ -138,10 +137,6 @@ export default {
 	},
 
 	computed: {
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		participantType() {
 			return this.breakoutRoom?.participantType
 		},

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue

@@ -66,9 +66,7 @@
 				</template>
 				{{ backToBreakoutRoomLabel }}
 			</NcButton>
-			<NcActions v-if="canModerate"
-				class="right"
-				:container="container">
+			<NcActions v-if="canModerate" class="right">
 				<NcActionButton v-if="canModerate && isInBreakoutRoom"
 					:aria-label="sendMessageLabel"
 					@click="openSendMessageDialog">

src/components/TopBar/CallButton.vue

@@ -58,7 +58,6 @@
 			:aria-label="leaveCallCombinedLabel"
 			:menu-name="showButtonText ? leaveCallCombinedLabel : undefined"
 			force-name
-			:container="container"
 			:type="isScreensharing ? 'tertiary' : 'error'">
 			<template #icon>
 				<IconPhoneHangup v-if="!isBreakoutRoom" :size="20" />
@@ -217,9 +216,6 @@ export default {
 			return this.talkHashStore.isNextcloudTalkHashDirty
 				|| this.talkHashStore.isNextcloudTalkProxyHashDirty[this.token]
 		},
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
 		conversation() {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},

src/components/TopBar/CallTime.vue

@@ -7,8 +7,7 @@
 	<NcPopover class="call-time"
 		:shown.sync="showPopover"
 		:focus-trap="isShowRecordingControls"
-		:triggers="[]"
-		:container="container">
+		:triggers="[]">
 		<template #trigger>
 			<NcButton :disabled="isButtonDisabled"
 				:wide="true"
@@ -110,10 +109,6 @@ export default {
 	},
 
 	computed: {
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		/**
 		 * Create date object based on the unix time received from the API
 		 *

src/components/TopBar/ReactionMenu.vue

@@ -7,7 +7,6 @@
 	<NcActions v-tooltip="t('spreed', 'Send a reaction')"
 		type="tertiary"
 		:aria-label="t('spreed', 'Send a reaction')"
-		:container="container"
 		class="reaction">
 		<template #icon>
 			<EmoticonOutline :size="20" />
@@ -87,10 +86,6 @@ export default {
 	},
 
 	computed: {
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		reactionsInSingleRow() {
 			return Math.ceil(this.supportedReactions.length / 2)
 		},

src/components/TopBar/TopBarMediaControls.vue

@@ -72,7 +72,6 @@
 			:class="screenSharingButtonClass"
 			class="app-navigation-entry-utils-menu-button"
 			:boundaries-element="boundaryElement"
-			:container="container"
 			:disabled="!isScreensharingAllowed"
 			:open.sync="screenSharingMenuOpen">
 			<template #icon>
@@ -261,10 +260,6 @@ export default {
 				: t('spreed', 'Enable screensharing')
 		},
 
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		isQualityWarningTooltipDismissed() {
 			return this.$store.getters.isQualityWarningTooltipDismissed
 		},

src/components/TopBar/TopBarMenu.vue

@@ -21,8 +21,7 @@
 		<NcActions v-if="!isSidebar"
 			v-tooltip="t('spreed', 'Conversation actions')"
 			:aria-label="t('spreed', 'Conversation actions')"
-			type="tertiary"
-			:container="container">
+			type="tertiary">
 			<!-- Menu icon: white if in call -->
 			<template v-if="isInCall" #icon>
 				<DotsHorizontal :size="20" />
@@ -296,10 +295,6 @@ export default {
 				|| this.conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER
 		},
 
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		changeViewText() {
 			return this.isGrid
 				? t('spreed', 'Speaker view')