fix: Link image preview not opening in gallery (#32391)

Co-authored-by: csuadev <72958726+csuadev@users.noreply.github.com>

.changeset/shy-oranges-provide.md

+---
+"@rocket.chat/meteor": patch
+---
+
+Fixes link image preview not opening in gallery mode

apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx

@@ -10,7 +10,7 @@ const UrlImagePreview = ({ url }: Pick<UrlPreviewMetadata, 'url'>): ReactElement
 
 	return (
 		<Box maxHeight={oembedMaxHeight} maxWidth='100%'>
-			<MessageGenericPreviewImage className='gallery-item' url={url || ''} />
+			<MessageGenericPreviewImage data-id={url} className='preview-image' url={url || ''} alt='' />
 		</Box>
 	);
 };

apps/meteor/client/providers/ImageGalleryProvider.tsx

@@ -10,14 +10,17 @@ type ImageGalleryProviderProps = {
 
 const ImageGalleryProvider = ({ children }: ImageGalleryProviderProps) => {
 	const [imageId, setImageId] = useState<string>();
-	const [quotedImageUrl, setQuotedImageUrl] = useState<string>();
+	const [singleImageUrl, setSingleImageUrl] = useState<string>();
 
 	useEffect(() => {
 		const handleImageClick = (event: Event) => {
 			const target = event?.target as HTMLElement | null;
 
 			if (target?.closest('.rcx-attachment__details')) {
-				return setQuotedImageUrl(target.dataset.id);
+				return setSingleImageUrl(target.dataset.id);
+			}
+			if (target?.classList.contains('preview-image')) {
+				return setSingleImageUrl(target.dataset.id);
 			}
 			if (target?.classList.contains('gallery-item')) {
 				const id = target.closest('.gallery-item-container')?.getAttribute('data-id') || undefined;
@@ -39,8 +42,8 @@ const ImageGalleryProvider = ({ children }: ImageGalleryProviderProps) => {
 	return (
 		<ImageGalleryContext.Provider value={{ imageId: imageId || '', isOpen: !!imageId, onClose: () => setImageId(undefined) }}>
 			{children}
-			{!!quotedImageUrl && (
-				<ImageGallery images={[{ _id: quotedImageUrl, url: quotedImageUrl }]} onClose={() => setQuotedImageUrl(undefined)} />
+			{!!singleImageUrl && (
+				<ImageGallery images={[{ _id: singleImageUrl, url: singleImageUrl }]} onClose={() => setSingleImageUrl(undefined)} />
 			)}
 			{!!imageId && <ImageGalleryData />}
 		</ImageGalleryContext.Provider>

apps/meteor/tests/e2e/image-gallery.spec.ts

@@ -21,56 +21,76 @@ test.describe.serial('Image Gallery', async () => {
 
 		await poHomeChannel.sidenav.openChat(targetChannel);
 		await poHomeChannel.content.btnJoinRoom.click();
-
-		await poHomeChannel.content.sendFileMessage('test-large-image.jpeg');
-		await poHomeChannel.content.btnModalConfirm.click();
-
-		await expect(poHomeChannel.content.lastUserMessage).toContainText('test-large-image.jpeg');
-
-		await poHomeChannel.content.lastUserMessage.locator('img.gallery-item').click();
 	});
 
 	test.afterAll(async ({ api }) => {
 		await deleteChannel(api, targetChannel);
 	});
 
-	test('expect to have a large image not out of viewport bounds', async () => {
-		expect(
-			await poHomeChannel.content.imageGalleryImage.evaluate((el) => parseInt(window.getComputedStyle(el).getPropertyValue('width'))),
-		).toBeLessThanOrEqual(viewport.width);
-
-		expect(
-			await poHomeChannel.content.imageGalleryImage.evaluate((el) => parseInt(window.getComputedStyle(el).getPropertyValue('height'))),
-		).toBeLessThanOrEqual(viewport.height);
-	});
-
-	test('expect to zoom in image', async () => {
-		await (await poHomeChannel.content.getGalleryButtonByName('zoom-in')).click();
-
-		expect(parseInt((await poHomeChannel.content.imageGalleryImage.getAttribute('data-qa-zoom-scale')) as string)).toBeGreaterThan(1);
+	test.describe('When sending an image as a file', () => {
+		test.beforeAll(async() => {
+			await poHomeChannel.content.sendFileMessage('test-large-image.jpeg');
+			await poHomeChannel.content.btnModalConfirm.click();
+	
+			await expect(poHomeChannel.content.lastUserMessage).toContainText('test-large-image.jpeg');
+	
+			await poHomeChannel.content.lastUserMessage.locator('img.gallery-item').click();
+		});
+
+		test('expect to have a large image not out of viewport bounds', async () => {
+			expect(
+				await poHomeChannel.content.imageGalleryImage.evaluate((el) => parseInt(window.getComputedStyle(el).getPropertyValue('width'))),
+			).toBeLessThanOrEqual(viewport.width);
+	
+			expect(
+				await poHomeChannel.content.imageGalleryImage.evaluate((el) => parseInt(window.getComputedStyle(el).getPropertyValue('height'))),
+			).toBeLessThanOrEqual(viewport.height);
+		});
+	
+		test('expect to zoom in image', async () => {
+			await (await poHomeChannel.content.getGalleryButtonByName('zoom-in')).click();
+	
+			expect(parseInt((await poHomeChannel.content.imageGalleryImage.getAttribute('data-qa-zoom-scale')) as string)).toBeGreaterThan(1);
+		});
+	
+		test('expect to zoom out image', async () => {
+			await (await poHomeChannel.content.getGalleryButtonByName('zoom-out')).click();
+	
+			expect(parseInt((await poHomeChannel.content.imageGalleryImage.getAttribute('data-qa-zoom-scale')) as string)).toEqual(1);
+		});
+	
+		test('expect to resize image to default ratio', async () => {
+			await expect(await poHomeChannel.content.getGalleryButtonByName('zoom-out')).toBeDisabled();
+	
+			await (await poHomeChannel.content.getGalleryButtonByName('zoom-in')).dblclick();
+	
+			await expect(await poHomeChannel.content.getGalleryButtonByName('zoom-out')).toBeEnabled();
+	
+			await (await poHomeChannel.content.getGalleryButtonByName('resize')).click();
+	
+			expect(parseInt((await poHomeChannel.content.imageGalleryImage.getAttribute('data-qa-zoom-scale')) as string)).toEqual(1);
+		});
+	
+		test('expect to close gallery', async () => {
+			await (await poHomeChannel.content.getGalleryButtonByName('close')).click();
+	
+			await expect(poHomeChannel.content.imageGalleryImage).not.toBeVisible();
+		});
 	});
 
-	test('expect to zoom out image', async () => {
-		await (await poHomeChannel.content.getGalleryButtonByName('zoom-out')).click();
-
-		expect(parseInt((await poHomeChannel.content.imageGalleryImage.getAttribute('data-qa-zoom-scale')) as string)).toEqual(1);
-	});
-
-	test('expect to resize image to default ratio', async () => {
-		await expect(await poHomeChannel.content.getGalleryButtonByName('zoom-out')).toBeDisabled();
-
-		await (await poHomeChannel.content.getGalleryButtonByName('zoom-in')).dblclick();
-
-		await expect(await poHomeChannel.content.getGalleryButtonByName('zoom-out')).toBeEnabled();
-
-		await (await poHomeChannel.content.getGalleryButtonByName('resize')).click();
-
-		expect(parseInt((await poHomeChannel.content.imageGalleryImage.getAttribute('data-qa-zoom-scale')) as string)).toEqual(1);
-	});
+	test.describe('When sending an image as a link', () => {
+		const imageLink = 'https://i0.wp.com/merithu.com.br/wp-content/uploads/2019/11/rocket-chat.png';
 
-	test('expect to close gallery', async () => {
-		await (await poHomeChannel.content.getGalleryButtonByName('close')).click();
+		test.beforeAll(async() => {
+			await poHomeChannel.content.sendMessage(imageLink);
+	
+			await expect(poHomeChannel.content.lastUserMessage).toContainText(imageLink);
+	
+			await poHomeChannel.content.lastUserMessage.locator('img.preview-image').click();
+		});
 
-		await expect(poHomeChannel.content.imageGalleryImage).not.toBeVisible();
+		test('expect to open the image inside the image gallery', async () => {
+			await expect(poHomeChannel.content.imageGalleryImage).toBeVisible();
+		});
 	});
 });