Merge pull request #8605 from nextcloud/fix/7254/display-tooltip-for-…

…long-names-in-conversation-list

Fix tooltip appearance for long names in ConversationList

package.json

@@ -80,6 +80,7 @@
 		"@vue/vue2-jest": "^29.2.1",
 		"babel-loader-exclude-node-modules-except": "^1.2.1",
 		"babel-plugin-add-module-exports": "^1.0.4",
+		"flush-promises": "^1.0.2",
 		"jest": "^29.2.2",
 		"jest-environment-jsdom": "^29.4.1",
 		"jest-localstorage-mock": "^2.4.26",

src/components/LeftSidebar/ConversationsList/Conversation.spec.js

@@ -9,6 +9,9 @@ import { showSuccess, showError } from '@nextcloud/dialogs'
 
 import Conversation from './Conversation.vue'
 
+// Update after migration to @vue/test-utils v2.0.0
+import flushPromises from 'flush-promises'
+
 jest.mock('@nextcloud/dialogs', () => ({
 	showSuccess: jest.fn(),
 	showError: jest.fn(),
@@ -367,7 +370,8 @@ describe('Conversation.vue', () => {
 				const action = shallowMountAndGetAction('Leave conversation')
 				expect(action.exists()).toBe(true)
 
-				await action.find('button').trigger('click')
+				action.find('button').trigger('click')
+				await flushPromises()
 
 				expect(actionHandler).toHaveBeenCalledWith(expect.anything(), { token: TOKEN })
 				expect(showError).toHaveBeenCalledWith(expect.stringContaining('promote'))

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -20,7 +20,8 @@
 -->
 
 <template>
-	<NcListItem :title="item.displayName"
+	<NcListItem ref="listItem"
+		:title="item.displayName"
 		:class="{'unread-mention-conversation': item.unreadMention}"
 		:anchor-id="`conversation_${item.token}`"
 		:actions-aria-label="t('spreed', 'Conversation actions')"
@@ -302,6 +303,23 @@ export default {
 			}
 		},
 	},
+
+	// TODO: move the implementation to @nextcloud-vue/NcListItem
+	watch: {
+		'item.displayName': {
+			immediate: true,
+			handler(value) {
+				this.$nextTick().then(() => {
+					const titleSpan = this.$refs.listItem?.$el?.querySelector('.line-one__title')
+
+					if (titleSpan && titleSpan.offsetWidth < titleSpan.scrollWidth) {
+						titleSpan.setAttribute('title', value)
+					}
+				})
+			},
+		},
+	},
+
 	methods: {
 		async copyLinkToConversation() {
 			try {