[stable32] fix(MessageButtonsBar): improve rendering performance

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js

@@ -91,21 +91,28 @@ describe('MessageButtonsBar.vue', () => {
 
 	const ComponentStub = {
 		template: '<div><slot /></div>',
+		provide: () => ({
+			[Symbol.for('NcActions:closeMenu')]: () => {},
+		}),
 	}
 
 	/**
 	 * Shared function to mount component
+	 * isActionMenuOpen is passed to render either NcActions (true) / NcButton (false)
 	 */
-	function mountMessageButtonsBar(props) {
+	function mountMessageButtonsBar(props, isActionMenuOpen = false) {
 		return mount(MessageButtonsBar, {
 			global: {
 				plugins: [router, store],
 				stubs: {
-					NcPopover: ComponentStub,
+					NcActions: ComponentStub,
 				},
 				provide: injected,
 			},
-			props,
+			props: {
+				...props,
+				isActionMenuOpen,
+			},
 		})
 	}
 
@@ -155,7 +162,7 @@ describe('MessageButtonsBar.vue', () => {
 
 				messageProps.message.actorId = 'another-user'
 
-				const wrapper = mountMessageButtonsBar(messageProps)
+				const wrapper = mountMessageButtonsBar(messageProps, true)
 
 				const actionButton = findNcActionButton(wrapper, 'Reply privately')
 				expect(actionButton.exists()).toBe(true)
@@ -224,7 +231,7 @@ describe('MessageButtonsBar.vue', () => {
 				useMessageInfoSpy.mockReturnValue({
 					isDeleteable: computed(() => true),
 				})
-				const wrapper = mountMessageButtonsBar(messageProps)
+				const wrapper = mountMessageButtonsBar(messageProps, true)
 
 				const actionButton = findNcActionButton(wrapper, 'Delete')
 				expect(actionButton.exists()).toBe(true)
@@ -240,7 +247,7 @@ describe('MessageButtonsBar.vue', () => {
 			 * @param {boolean} visible Whether or not the delete action is visible
 			 */
 			function testDeleteMessageVisible(visible) {
-				const wrapper = mountMessageButtonsBar(messageProps)
+				const wrapper = mountMessageButtonsBar(messageProps, true)
 
 				const actionButton = findNcActionButton(wrapper, 'Delete')
 				expect(actionButton.exists()).toBe(visible)
@@ -274,7 +281,7 @@ describe('MessageButtonsBar.vue', () => {
 			conversationProps.readOnly = CONVERSATION.STATE.READ_ONLY
 			messageProps.message.actorId = 'another-user'
 
-			const wrapper = mountMessageButtonsBar(messageProps)
+			const wrapper = mountMessageButtonsBar(messageProps, true)
 
 			const actionButton = findNcActionButton(wrapper, 'Mark as unread')
 			expect(actionButton.exists()).toBe(true)
@@ -298,7 +305,7 @@ describe('MessageButtonsBar.vue', () => {
 			conversationProps.readOnly = CONVERSATION.STATE.READ_ONLY
 			messageProps.message.actorId = 'another-user'
 
-			const wrapper = mountMessageButtonsBar(messageProps)
+			const wrapper = mountMessageButtonsBar(messageProps, true)
 
 			Object.assign(navigator, {
 				clipboard: {
@@ -325,7 +332,7 @@ describe('MessageButtonsBar.vue', () => {
 			actionsGetterMock.forEach((action) => integrationsStore.addMessageAction(action))
 			testStoreConfig.modules.messagesStore.getters.message = vi.fn(() => () => messageProps)
 			store = createStore(testStoreConfig)
-			const wrapper = mountMessageButtonsBar(messageProps)
+			const wrapper = mountMessageButtonsBar(messageProps, true)
 
 			const actionButton = findNcActionButton(wrapper, 'first action')
 			expect(actionButton.exists()).toBeTruthy()

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

@@ -26,11 +26,22 @@
 					<IconArrowLeftTop class="bidirectional-icon" :size="20" />
 				</template>
 			</NcButton>
+			<NcButton
+				v-if="!isActionMenuOpen"
+				variant="tertiary"
+				:aria-label="t('spreed', 'More actions')"
+				:title="t('spreed', 'More actions')"
+				@click="onMenuOpen">
+				<template #icon>
+					<IconDotsHorizontal :size="20" />
+				</template>
+			</NcButton>
 			<NcActions
-				:force-menu="true"
+				v-else
+				force-menu
+				open
 				placement="bottom-end"
 				:boundaries-element="boundariesElement"
-				@open="onMenuOpen"
 				@close="onMenuClose">
 				<template v-if="submenu === null">
 					<!-- Message timestamp -->
@@ -351,6 +362,7 @@ import IconClockEditOutline from 'vue-material-design-icons/ClockEditOutline.vue
 import IconClockOutline from 'vue-material-design-icons/ClockOutline.vue'
 import IconCloseCircleOutline from 'vue-material-design-icons/CloseCircleOutline.vue'
 import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import IconEmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 import IconEyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue'
 import IconFileOutline from 'vue-material-design-icons/FileOutline.vue'
@@ -401,6 +413,7 @@ export default {
 		IconClockEditOutline,
 		IconClockOutline,
 		IconContentCopy,
+		IconDotsHorizontal,
 		IconTrashCanOutline,
 		IconEmoticonOutline,
 		IconEyeOffOutline,

src/components/MessagesList/MessagesGroup/Message/MessageItem.spec.js

@@ -504,10 +504,15 @@ describe('MessageItem.vue', () => {
 			expect(wrapper.findComponent(MessageButtonsBar).exists()).toBe(true)
 
 			// Actions are rendered with MessageButtonsBar
+			const actionThumbnail = wrapper.findAllComponents(NcButton).at(-1)
+			expect(actionThumbnail.exists()).toBe(true)
+			await actionThumbnail.find('button').trigger('click')
 			expect(wrapper.findComponent(NcActions).exists()).toBe(true)
 
 			// Mouseleave
 			await wrapper.find('.message').trigger('mouseleave')
+			await wrapper.findComponent(NcActions).vm.$emit('close')
+
 			expect(wrapper.findComponent(MessageButtonsBar).exists()).toBe(false)
 		})
 	})