Merge pull request #13156 from nextcloud/fix/noid/message-author-creds

fix(MessagesGroup): concat actor information
nextcloud · Sep 3, 2024 · 7974c5c · 7974c5c
2 parents ab3393e + 75bc1d3
commit 7974c5c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 28 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.spec.js b/src/components/MessagesList/MessagesGroup/MessagesGroup.spec.js
@@ -40,6 +40,8 @@ describe('MessagesGroup.vue', () => {
 	test('renders grouped messages', () => {
 		useMessageInfoSpy.mockReturnValue({
 			actorDisplayName: computed(() => 'actor one'),
+			remoteServer: computed(() => ''),
+			lastEditor: computed(() => ''),
 		})
 		const wrapper = shallowMount(MessagesGroup, {
 			localVue,
@@ -131,6 +133,8 @@ describe('MessagesGroup.vue', () => {
 		// Arrange
 		useMessageInfoSpy.mockReturnValue({
 			actorDisplayName: computed(() => 'guest-one-display-name'),
+			remoteServer: computed(() => ''),
+			lastEditor: computed(() => ''),
 		})
 
 		const wrapper = shallowMount(MessagesGroup, {
@@ -196,6 +200,8 @@ describe('MessagesGroup.vue', () => {
 		// Arrange
 		useMessageInfoSpy.mockReturnValue({
 			actorDisplayName: computed(() => 'Deleted user'),
+			remoteServer: computed(() => ''),
+			lastEditor: computed(() => ''),
 	   })
 
 		const wrapper = shallowMount(MessagesGroup, {

diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -15,11 +15,7 @@
 				disable-tooltip />
 		</div>
 		<ul class="messages">
-			<li class="messages__author" aria-level="4">
-				<span class="messages__author-name">{{ actorDisplayName }}</span>
-				<span v-if="remoteServer" class="messages__author-server">{{ remoteServer }}</span>
-				<span v-if="lastEditor" class="messages__author-edit">{{ lastEditor }}</span>
-			</li>
+			<li class="messages__author" aria-level="4">{{ actorInfo }}</li>
 			<Message v-for="(message, index) of messages"
 				:key="message.id"
 				:message="message"
@@ -86,12 +82,17 @@ export default {
 			lastEditor,
 			actorDisplayName,
 		} = useMessageInfo(firstMessage)
+
+		const actorInfo = computed(() => {
+			return [actorDisplayName.value, remoteServer.value, lastEditor.value]
+				.filter(value => value).join(' ')
+		})
+
 		return {
 			AVATAR,
 			guestNameStore: useGuestNameStore(),
-			remoteServer,
-			lastEditor,
 			actorDisplayName,
+			actorInfo,
 		}
 	},
 
@@ -147,22 +148,13 @@ export default {
 	}
 
 	&__author {
-		display: flex;
-		gap: 4px;
 		max-width: $messages-text-max-width;
 		padding-left: var(--default-grid-baseline);
 		color: var(--color-text-maxcontrast);
-
-		&-name {
-			flex-shrink: 0;
-		}
-
-		&-edit,
-		&-server {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
+		flex-shrink: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 }
 </style>
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
@@ -25,9 +25,7 @@ components.
 					:source="message.actorType"
 					:size="AVATAR.SIZE.EXTRA_SMALL"
 					disable-menu />
-				{{ actorDisplayName }}
-				<span v-if="remoteServer" class="quote__main__author-server">{{ remoteServer }}</span>
-				<span v-if="lastEditor" class="quote__main__author-edit">{{ lastEditor }}</span>
+				<span class="quote__main__author-info">{{ actorInfo }}</span>
 				<div v-if="editMessage" class="quote__main__edit-hint">
 					<PencilIcon :size="20" />
 					{{ t('spreed', '(editing)') }}
@@ -57,7 +55,7 @@ components.
 </template>
 
 <script>
-import { toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 
 import Close from 'vue-material-design-icons/Close.vue'
 import PencilIcon from 'vue-material-design-icons/Pencil.vue'
@@ -117,14 +115,18 @@ export default {
 			actorDisplayName,
 		} = useMessageInfo(message)
 
+		const actorInfo = computed(() => {
+			return [actorDisplayName.value, remoteServer.value, lastEditor.value]
+				.filter(value => value).join(' ')
+		})
+
 		return {
 			AVATAR,
 			chatExtrasStore,
 			isFileShare,
 			isFileShareWithoutCaption,
-			remoteServer,
-			lastEditor,
 			actorDisplayName,
+			actorInfo,
 		}
 	},
 
@@ -277,8 +279,7 @@ export default {
 			gap: 4px;
 			color: var(--color-text-maxcontrast);
 
-			&-edit,
-			&-server {
+			&-info {
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;