From 7de8cce46d907d782c39cb468944d9ec31800ca7 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Thu, 8 Feb 2024 13:08:27 +0100
Subject: [PATCH] fixup! Adjust tests

---
 .../Message/MessagePart/Reactions.vue         |  7 +--
 .../Message/MessagePart/ReactionsList.vue     | 62 ++++++++++---------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
index 228281bf69c..9fe2e460ce3 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
@@ -24,8 +24,7 @@
 	<!-- reactions buttons and popover with details -->
 	<div class="reactions-wrapper">
 		<!-- all reactions button -->
-		<NcButton v-if="reactionsSorted.length > 1"
-			class="reaction-button"
+		<NcButton class="reaction-button"
 			@click="showAllReactions = true">
 			{{ t('spreed', 'All') }}
 		</NcButton>
@@ -142,10 +141,6 @@ export default {
 	},
 
 	computed: {
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		hasReactions() {
 			return Object.keys(Object(this.detailedReactions)).length !== 0
 		},
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue
index 99f53c7a256..34fd400b39e 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue
@@ -28,29 +28,27 @@
 			<h2>
 				{{ t('spreed', 'Reactions') }}
 			</h2>
-			<template v-if="Object.keys(detailedReactions).length > 0">
+			<template v-if="Object.keys(reactionsOverview).length > 0">
 				<div class="reactions-list__navigation">
-					<NcButton :class="{'active' : reactionFilter === ''}"
-						type="tertiary"
-						@click="handleTabClick('')">
-						{{ t('spreed', 'All ({count})', { count: flatReactions.length }) }}
-					</NcButton>
-					<NcButton v-for="reaction in reactionsSorted"
+					<NcButton v-for="reaction in reactionsMenu"
 						:key="reaction"
 						:class="{'active' : reactionFilter === reaction}"
 						type="tertiary"
 						@click="handleTabClick(reaction)">
-						{{ reaction }} {{ detailedReactions[reaction].length }}
+						{{ reaction }}
+						<span v-if="reaction === 'All'">({{ reactionsOverview[reaction].length }})</span>
+						<span v-else>{{ reactionsOverview[reaction].length }}</span>
 					</NcButton>
 				</div>
-
-				<NcListItemIcon v-for="item in filteredReactions ?? flatReactions"
-					:key="item.actorDisplayName"
-					:name="getDisplayNameForReaction(item)">
-					<span>
-						{{ reactionFilter === '' ? item.reaction.join('') : reactionFilter }}
-					</span>
-				</NcListItemIcon>
+				<div class="scrollable">
+					<NcListItemIcon v-for="item in reactionsOverview[reactionFilter]"
+						:key="item.actorId + item.actorType"
+						:name="item.actorDisplayName">
+						<span>
+							{{ item.reaction?.join('') ?? reactionFilter }}
+						</span>
+					</NcListItemIcon>
+				</div>
 			</template>
 			<NcLoadingIcon v-else :size="64" />
 		</div>
@@ -104,7 +102,7 @@ export default {
 
 	data() {
 		return {
-			reactionFilter: '',
+			reactionFilter: 'All',
 		}
 	},
 
@@ -113,36 +111,38 @@ export default {
 			return this.$store.getters.getMainContainerSelector()
 		},
 
-		flatReactions() {
+		reactionsOverview() {
 			const mergedReactionsMap = {}
+			const modifiedDetailedReactions = {}
 
 			Object.entries(this.detailedReactions).forEach(([reaction, actors]) => {
+				modifiedDetailedReactions[reaction] = []
 				actors.forEach(actor => {
 					const key = `${actor.actorId}-${actor.actorType}`
 					if (mergedReactionsMap[key]) {
 						mergedReactionsMap[key].reaction.push(reaction)
 					} else {
 						mergedReactionsMap[key] = {
-							actorDisplayName: actor.actorDisplayName,
+							actorDisplayName: this.getDisplayNameForReaction(actor),
 							actorId: actor.actorId,
 							actorType: actor.actorType,
 							reaction: [reaction]
 						}
 					}
+
+					modifiedDetailedReactions[reaction].push({
+						...actor,
+						actorDisplayName: this.getDisplayNameForReaction(actor)
+					})
 				})
 			})
 
-			return Object.values(mergedReactionsMap)
+			return { All: Object.values(mergedReactionsMap), ...modifiedDetailedReactions }
 		},
 
-		filteredReactions() {
-			if (!this.reactionFilter) {
-				return this.flatReactions
-			} else {
-				return this.flatReactions.filter(reaction => reaction.reaction.includes(this.reactionFilter))
-			}
+		reactionsMenu() {
+			return ['All', ...this.reactionsSorted]
 		},
-
 	},
 
 	methods: {
@@ -171,7 +171,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .reactions__modal{
-	min-height: 50vh;
+	min-height: 450px;
 	padding: 18px;
 }
 .reactions-list__navigation {
@@ -181,6 +181,12 @@ export default {
     border-bottom: 1px solid var(--color-background-darker);
 }
 
+.scrollable {
+	overflow-y: auto;
+	overflow-x: hidden;
+	height: calc(450px - 123px); // 123px is the height of the header 105px and the footer 18px
+}
+
 :deep(.button-vue) {
 	border-radius: var(--border-radius-large);