From 39650dc31b8fa7f6eb91728c4ca25942da011161 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 19 Sep 2024 06:40:06 +0200
Subject: [PATCH] fix: remove container prop in NcPopover and related
 components

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/AdminSettings/BotsSettings.vue        |  2 +-
 src/components/AvatarWrapper/AvatarWrapper.spec.js   |  3 ---
 src/components/AvatarWrapper/AvatarWrapper.vue       |  5 +----
 src/components/ConversationIcon.vue                  |  7 -------
 src/components/MediaSettings/MediaSettings.vue       |  2 +-
 .../Message/MessageButtonsBar/MessageButtonsBar.vue  | 12 +-----------
 .../MessagesGroup/Message/MessagePart/Reactions.vue  |  1 -
 src/components/PollViewer/PollViewer.vue             |  5 +----
 src/components/PollViewer/PollVotersDetails.vue      |  7 +------
 .../RightSidebar/BreakoutRooms/BreakoutRoomItem.vue  |  5 -----
 .../BreakoutRooms/BreakoutRoomsActions.vue           |  4 +---
 src/components/TopBar/CallButton.vue                 |  4 ----
 src/components/TopBar/CallTime.vue                   |  7 +------
 src/components/TopBar/ReactionMenu.vue               |  5 -----
 src/components/TopBar/TopBarMediaControls.vue        |  5 -----
 src/components/TopBar/TopBarMenu.vue                 |  7 +------
 16 files changed, 9 insertions(+), 72 deletions(-)

diff --git a/src/components/AdminSettings/BotsSettings.vue b/src/components/AdminSettings/BotsSettings.vue
index bad1840b6f8..15b48368210 100644
--- a/src/components/AdminSettings/BotsSettings.vue
+++ b/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">
diff --git a/src/components/AvatarWrapper/AvatarWrapper.spec.js b/src/components/AvatarWrapper/AvatarWrapper.spec.js
index cf4f6c5702b..a446b23a9b0 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.spec.js
+++ b/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)
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 80909f1d10b..f098a1fcb36 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/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)
 		},
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index bd61da75aa1..aaf11831c17 100644
--- a/src/components/ConversationIcon.vue
+++ b/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
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index fa2ea4a8e90..e9117b74f3e 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/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
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index 4bf5b07e18e..1e11bb24ae1 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/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()
 		},
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
index 0178db10948..64e4c8f798b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
+++ b/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">
diff --git a/src/components/PollViewer/PollViewer.vue b/src/components/PollViewer/PollViewer.vue
index 885d0f1d8b9..e41b93c2618 100644
--- a/src/components/PollViewer/PollViewer.vue
+++ b/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>
diff --git a/src/components/PollViewer/PollVotersDetails.vue b/src/components/PollViewer/PollVotersDetails.vue
index 98d53029401..6dc27ff54fe 100644
--- a/src/components/PollViewer/PollVotersDetails.vue
+++ b/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() {
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index 31313ac1853..5142c19840c 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
+++ b/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
 		},
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
index 0eccd805fa8..a767d03de9b 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
+++ b/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">
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index a5d1d3bde02..74a0033521a 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/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
 		},
diff --git a/src/components/TopBar/CallTime.vue b/src/components/TopBar/CallTime.vue
index cd47b5d21fa..80fc35103cf 100644
--- a/src/components/TopBar/CallTime.vue
+++ b/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
 		 *
diff --git a/src/components/TopBar/ReactionMenu.vue b/src/components/TopBar/ReactionMenu.vue
index 85390239ec4..e37a1bc603c 100644
--- a/src/components/TopBar/ReactionMenu.vue
+++ b/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)
 		},
diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
index e9142886c0f..bb6dbc20ee6 100644
--- a/src/components/TopBar/TopBarMediaControls.vue
+++ b/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
 		},
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index b330099d595..ceaf587c0c0 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/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')