Merge pull request #10552 from nextcloud/backport/10537/stable27

[stable27] techdebt(SharedItemsTab) - refactoring of shared items tab

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

@@ -324,7 +324,7 @@ describe('Message.vue', () => {
 
 				const messageEl = wrapper.findComponent({ name: 'NcRichText' })
 				// note: indices as object keys are on purpose
-				expect(messageEl.props('arguments')).toStrictEqual(expectedRichParameters)
+				expect(messageEl.props('arguments')).toMatchObject(expectedRichParameters)
 			}
 
 			test('renders mentions', () => {

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

@@ -281,6 +281,7 @@ import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js'
 import participant from '../../../../mixins/participant.js'
 import { EventBus } from '../../../../services/EventBus.js'
 import { useGuestNameStore } from '../../../../stores/guestName.js'
+import { getItemTypeFromMessage } from '../../../../utils/getItemTypeFromMessage.js'
 
 const isTranslationAvailable = getCapabilities()?.spreed?.config?.chat?.translations?.length > 0
 
@@ -581,17 +582,19 @@ export default {
 			Object.keys(this.messageParameters).forEach(function(p) {
 				const type = this.messageParameters[p].type
 				const mimetype = this.messageParameters[p].mimetype
+				const itemType = getItemTypeFromMessage(this.messageObject)
 				if (type === 'user' || type === 'call' || type === 'guest' || type === 'user-group' || type === 'group') {
 					richParameters[p] = {
 						component: Mention,
 						props: this.messageParameters[p],
 					}
 				} else if (type === 'file' && mimetype !== 'text/vcard') {
-					const parameters = this.messageParameters[p]
-					parameters['is-voice-message'] = this.messageType === 'voice-message'
 					richParameters[p] = {
 						component: FilePreview,
-						props: parameters,
+						props: Object.assign({
+							token: this.token,
+							itemType,
+						}, this.messageParameters[p]),
 					}
 				} else if (type === 'deck-card') {
 					richParameters[p] = {

src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue

@@ -98,21 +98,23 @@ export default {
 <style lang="scss" scoped>
 .deck-card {
 	display: flex;
-	transition: box-shadow 0.1s ease-in-out;
-	border: 1px solid var(--color-border);
-	box-shadow: 0 0 2px 0 var(--color-box-shadow);
+	border: 2px solid var(--color-border);
 	border-radius: var(--border-radius-large);
 	font-size: 100%;
 	background-color: var(--color-main-background);
-	margin: 4px 0;
 	max-width: 300px;
 	padding: 8px 16px;
 	flex-direction: column;
 	white-space: nowrap;
+	transition: border-color 0.1s ease-in-out;
+
 	&:hover,
-	&:focus{
-		box-shadow: 0 0 5px 0 var(--color-box-shadow);
+	&:focus,
+	&:focus-visible {
+		border-color: var(--color-primary-element);
+		outline: none;
 	}
+
 	&__lineone {
 		height: 30px;
 		display: flex;
@@ -126,6 +128,7 @@ export default {
 			margin-left: 8px;
 		}
 	}
+
 	&__linetwo {
 		height: 30px;
 		color: var(--color-text-lighter);
@@ -141,7 +144,7 @@ export default {
 
 .wide {
 	max-width: 400px;
-	margin: 4px auto;
+	width: 100%;
 }
 
 </style>

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

@@ -48,6 +48,7 @@ describe('FilePreview.vue', () => {
 			})
 
 		propsData = {
+			token: 'TOKEN',
 			id: '123',
 			name: 'test.jpg',
 			path: 'path/to/test.jpg',
@@ -196,6 +197,7 @@ describe('FilePreview.vue', () => {
 		})
 
 		test('renders default mime icon on load error', async () => {
+			OC.MimeType.getIconUrl.mockReturnValueOnce(imagePath('core', 'image/jpeg'))
 			const wrapper = shallowMount(FilePreview, {
 				localVue,
 				store,
@@ -206,7 +208,7 @@ describe('FilePreview.vue', () => {
 
 			expect(wrapper.element.tagName).toBe('A')
 			const imageUrl = wrapper.find('img').attributes('src')
-			expect(imageUrl).toBe(imagePath('core', 'filetypes/file'))
+			expect(imageUrl).toBe(imagePath('core', 'image/jpeg'))
 		})
 
 		test('renders generic mime type icon for unknown mime types', async () => {

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -28,7 +28,7 @@
 		class="file-preview"
 		:class="{ 'file-preview--viewer-available': isViewerAvailable,
 			'file-preview--upload-editor': isUploadEditor,
-			'file-preview--shared-items-grid': isSharedItemsTab && !rowLayout,
+			'file-preview--shared-items-grid': isSharedItems && !rowLayout,
 			'file-preview--row-layout': rowLayout }"
 		@click.exact="handleClick"
 		@keydown.enter="handleClick">
@@ -109,6 +109,10 @@ export default {
 	},
 
 	props: {
+		token: {
+			type: String,
+			required: true,
+		},
 		/**
 		 * File id
 		 */
@@ -220,22 +224,17 @@ export default {
 			default: '',
 		},
 
-		isVoiceMessage: {
-			type: Boolean,
-			default: false,
-		},
-
 		rowLayout: {
 			type: Boolean,
 			default: false,
 		},
 
-		isSharedItemsTab: {
+		isSharedItems: {
 			type: Boolean,
 			default: false,
 		},
 
-		sharedItemsType: {
+		itemType: {
 			type: String,
 			default: '',
 		},
@@ -260,7 +259,7 @@ export default {
 	},
 	computed: {
 		shouldShowFileDetail() {
-			if (this.isSharedItemsTab && !this.rowLayout) {
+			if (this.isSharedItems && !this.rowLayout) {
 				return false
 			}
 			// display the file detail below the preview if the preview
@@ -300,7 +299,7 @@ export default {
 				return {
 					is: 'div',
 				}
-			} else if (this.isVoiceMessage) {
+			} else if (this.isVoiceMessage && !this.isSharedItems) {
 				return {
 					is: AudioPlayer,
 					name: this.name,
@@ -317,7 +316,7 @@ export default {
 		},
 
 		defaultIconUrl() {
-			return imagePath('core', 'filetypes/file')
+			return OC.MimeType.getIconUrl(this.mimetype) || imagePath('core', 'filetypes/file')
 		},
 
 		previewImageClass() {
@@ -332,7 +331,10 @@ export default {
 
 			if (this.failed || this.previewType === PREVIEW_TYPE.MIME_ICON || this.rowLayout) {
 				classes += 'mimeicon'
+			} else if (this.previewAvailable === 'yes') {
+				classes += 'media'
 			}
+
 			return classes
 		},
 
@@ -410,6 +412,10 @@ export default {
 			return false
 		},
 
+		isVoiceMessage() {
+			return this.itemType === SHARED_ITEM.TYPES.VOICE
+		},
+
 		isPlayable() {
 			// don't show play button for direct renders
 			if (this.failed || !this.isViewerAvailable || this.previewType !== PREVIEW_TYPE.PREVIEW) {
@@ -480,17 +486,16 @@ export default {
 
 			const fileInfo = this.generateViewerObject(this)
 
-			if (this.isSharedItemsTab && this.sharedItemsType === SHARED_ITEM.TYPES.MEDIA) {
-				const token = this.$store.getters.getToken()
+			if (this.itemType === SHARED_ITEM.TYPES.MEDIA) {
 				const getRevertedList = (items) => Object.values(items).reverse()
 					.map(item => this.generateViewerObject(item.messageParameters.file))
 
 				// Get available media files from store and put them to the list to navigate through slides
-				const mediaFiles = this.$store.getters.sharedItems(token).media
+				const mediaFiles = this.$store.getters.sharedItems(this.token).media
 				const list = getRevertedList(mediaFiles)
 				const loadMore = async () => {
 					const { messages } = await this.$store.dispatch('getSharedItems',
-						{ token, type: SHARED_ITEM.TYPES.MEDIA })
+						{ token: this.token, type: SHARED_ITEM.TYPES.MEDIA })
 					return getRevertedList(messages)
 				}
 
@@ -518,15 +523,23 @@ export default {
 
 	box-sizing: content-box !important;
 	&:hover,
-	&:focus {
+	&:focus,
+	&:focus-visible {
 		background-color: var(--color-background-hover);
+		outline: none;
+
 		.remove-file {
 			visibility: visible;
 		}
+
+		.file-preview__image.media {
+			outline: 2px solid var(--color-primary-element);
+		}
 	}
 
 	&__image {
 		object-fit: cover;
+		transition: outline 0.1s ease-in-out;
 	}
 
 	.loading {
@@ -549,12 +562,14 @@ export default {
 		max-width: 100%;
 		max-height: 384px;
 	}
+
 	.preview-medium {
 		display: inline-block;
 		border-radius: var(--border-radius);
 		max-width: 100%;
 		max-height: 192px;
 	}
+
 	.preview-small {
 		display: inline-block;
 		border-radius: var(--border-radius);
@@ -607,6 +622,7 @@ export default {
 			content: ' ↗';
 		}
 	}
+
 	&--upload-editor {
 		max-width: 140px;
 		max-height: 140px;
@@ -618,6 +634,7 @@ export default {
 			width: 128px;
 			height: 128px;
 		}
+
 		.loading {
 			width: 100%;
 		}
@@ -646,6 +663,7 @@ export default {
 
 	&--shared-items-grid {
 		aspect-ratio: 1;
+
 		.preview {
 			width: 100%;
 			min-height: unset;

src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue

@@ -142,6 +142,13 @@ export default {
 	height: 300px;
 	max-height: 30vh;
 	margin: 4px;
+	transition: outline 0.1s ease-in-out;
+
+	&:hover,
+	&:focus,
+	&:focus-visible {
+		outline: 2px solid var(--color-primary-element);
+	}
 
 	&.wide {
 		width: 100%;

src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue

@@ -455,16 +455,21 @@ export default {
 
 .poll {
 	display: flex;
-	transition: box-shadow 0.1s ease-in-out;
-	border: 1px solid var(--color-border);
-	box-shadow: 0 0 2px 0 var(--color-box-shadow);
-	margin: 4px 0;
+	border: 2px solid var(--color-border);
 	max-width: 300px;
 	padding: 0 16px 16px 16px;
 	flex-direction: column;
 	background: var(--color-main-background);
 	border-radius: var(--border-radius-large);
 	justify-content: space-between;
+	transition: border-color 0.1s ease-in-out;
+
+	&:hover,
+	&:focus,
+	&:focus-visible {
+		border-color: var(--color-primary-element);
+		outline: none;
+	}
 
 	&__header {
 		display: flex;

src/components/NewMessage/NewMessageUploadEditor.vue

@@ -40,6 +40,7 @@
 					group>
 					<template v-for="file in files">
 						<FilePreview :key="file.temporaryMessage.id"
+							:token="token"
 							v-bind="file.temporaryMessage.messageParameters.file"
 							:is-upload-editor="true"
 							@remove-file="handleRemoveFileFromSelection" />

src/components/Quote.vue

@@ -178,9 +178,9 @@ export default {
 					richParameters[p] = {
 						component: FilePreview,
 						props: Object.assign({
+							token: this.token,
 							smallPreview: true,
-						}, this.messageParameters[p]
-						),
+						}, this.messageParameters[p]),
 					}
 				} else {
 					richParameters[p] = {