Merge pull request #9042 from nextcloud/fix/noid/refactor-messagebuttonsbar

Replace `NcActionButton` with `NcButton` in MessageButtonsBar

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

@@ -629,9 +629,8 @@ describe('Message.vue', () => {
 			await wrapper.find('.message').trigger('mouseover')
 			expect(wrapper.findComponent(MessageButtonsBar).exists()).toBe(true)
 
-			// actions are present and rendered when the MessageButtonsBar is rendered
-			const actions = wrapper.findAllComponents({ name: 'NcActions' })
-			expect(actions.length).toBe(2)
+			// Actions are rendered with MessageButtonsBar
+			expect(wrapper.findComponent({ name: 'NcActions' }).exists()).toBe(true)
 
 			// Mouseleave
 			await wrapper.find('.message').trigger('mouseleave')

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

@@ -4,12 +4,13 @@ import vOutsideEvents from 'vue-outside-events'
 import Vuex, { Store } from 'vuex'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import MessageButtonsBar from './../MessageButtonsBar/MessageButtonsBar.vue'
 
 import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../../../constants.js'
 import storeConfig from '../../../../../store/storeConfig.js'
-import { findNcActionButton } from '../../../../../test-helpers.js'
+import { findNcActionButton, findNcButton } from '../../../../../test-helpers.js'
 
 describe('MessageButtonsBar.vue', () => {
 	const TOKEN = 'XXTOKENXX'
@@ -70,6 +71,10 @@ describe('MessageButtonsBar.vue', () => {
 				actorType: ATTENDEE.ACTOR_TYPE.USERS,
 				participantType: PARTICIPANT.TYPE.USER,
 			},
+			showCommonReadIcon: true,
+			showSentIcon: true,
+			commonReadIconTooltip: '',
+			sentIconTooltip: '',
 		}
 	})
 
@@ -94,14 +99,15 @@ describe('MessageButtonsBar.vue', () => {
 					store,
 					stubs: {
 						NcActionButton,
+						NcButton,
 					},
 					propsData: messageProps,
 				})
 
-				const actionButton = findNcActionButton(wrapper, 'Reply')
-				expect(actionButton.exists()).toBe(true)
-				expect(actionButton.isVisible()).toBe(true)
-				await actionButton.find('button').trigger('click')
+				const replyButton = findNcButton(wrapper, 'Reply')
+				expect(replyButton.exists()).toBe(true)
+				expect(replyButton.isVisible()).toBe(true)
+				await replyButton.trigger('click')
 
 				expect(replyAction).toHaveBeenCalledWith(expect.anything(), {
 					id: 123,
@@ -127,12 +133,13 @@ describe('MessageButtonsBar.vue', () => {
 					store,
 					stubs: {
 						NcActionButton,
+						NcButton,
 					},
 					propsData: messageProps,
 				})
 
-				const actionButton = findNcActionButton(wrapper, 'Reply')
-				expect(actionButton.isVisible()).toBe(false)
+				const replyButton = findNcButton(wrapper, 'Reply')
+				expect(replyButton.isVisible()).toBe(false)
 			})
 		})
 

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

@@ -33,14 +33,15 @@
 					<EmoticonOutline :size="20" />
 				</template>
 			</NcButton>
-			<NcActions v-show="isReplyable">
-				<NcActionButton @click.stop="handleReply">
-					<template #icon>
-						<Reply :size="16" />
-					</template>
-					{{ t('spreed', 'Reply') }}
-				</NcActionButton>
-			</NcActions>
+			<NcButton v-show="isReplyable"
+				type="tertiary"
+				:aria-label="t('spreed', 'Reply')"
+				:title="t('spreed', 'Reply')"
+				@click="handleReply">
+				<template #icon>
+					<Reply :size="16" />
+				</template>
+			</NcButton>
 			<NcActions :force-menu="true"
 				:container="`#message_${id}`"
 				placement="bottom-end"
@@ -115,7 +116,7 @@
 			</NcActions>
 		</template>
 
-		<template v-if="isReactionsMenuOpen">
+		<template v-else>
 			<NcButton type="tertiary"
 				:aria-label="t('spreed', 'Close reactions menu')"
 				@click="closeReactionsMenu">

src/test-helpers.js

@@ -21,6 +21,7 @@
  */
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 // helpers
 const findNcActionButton = function(wrapper, text) {
@@ -34,6 +35,18 @@ const findNcActionButton = function(wrapper, text) {
 	return items.at(0)
 }
 
+const findNcButton = function(wrapper, text) {
+	const buttons = wrapper.findAllComponents(NcButton)
+	const items = buttons.filter(button => {
+		return button.text() === text || button.vm.ariaLabel === text
+	})
+	if (!items.exists()) {
+		return items
+	}
+	return items.at(0)
+}
+
 export {
 	findNcActionButton,
+	findNcButton,
 }