From 9d07076937d8f4ab92e6c4cb4bf78e39b35b8db2 Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Date: Thu, 9 May 2024 01:19:43 -0300 Subject: [PATCH 1/5] fix image preview not opening in gallery --- .../message/content/urlPreviews/UrlImagePreview.tsx | 2 +- apps/meteor/client/providers/ImageGalleryProvider.tsx | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx b/apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx index f56adef8f12d..8106a01004e0 100644 --- a/apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx +++ b/apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx @@ -10,7 +10,7 @@ const UrlImagePreview = ({ url }: Pick): ReactElement return ( - + ); }; diff --git a/apps/meteor/client/providers/ImageGalleryProvider.tsx b/apps/meteor/client/providers/ImageGalleryProvider.tsx index 1cd07f29882c..ca26dd1e9597 100644 --- a/apps/meteor/client/providers/ImageGalleryProvider.tsx +++ b/apps/meteor/client/providers/ImageGalleryProvider.tsx @@ -10,14 +10,17 @@ type ImageGalleryProviderProps = { const ImageGalleryProvider = ({ children }: ImageGalleryProviderProps) => { const [imageId, setImageId] = useState(); - const [quotedImageUrl, setQuotedImageUrl] = useState(); + const [imageUrl, setImageUrl] = useState(); useEffect(() => { const handleImageClick = (event: Event) => { const target = event?.target as HTMLElement | null; if (target?.closest('.rcx-attachment__details')) { - return setQuotedImageUrl(target.dataset.id); + return setImageUrl(target.dataset.id); + } + if (target?.classList.contains('preview-image')) { + return setImageUrl(target.dataset.id); } if (target?.classList.contains('gallery-item')) { const id = target.closest('.gallery-item-container')?.getAttribute('data-id') || undefined; @@ -39,9 +42,7 @@ const ImageGalleryProvider = ({ children }: ImageGalleryProviderProps) => { return ( setImageId(undefined) }}> {children} - {!!quotedImageUrl && ( - setQuotedImageUrl(undefined)} /> - )} + {!!imageUrl && setImageUrl(undefined)} />} {!!imageId && } ); From 4c2187b505f62c5c628bdd8643d6e640ce2b5106 Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Thu, 9 May 2024 01:55:03 -0300 Subject: [PATCH 2/5] Create shy-oranges-provide.md --- .changeset/shy-oranges-provide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/shy-oranges-provide.md diff --git a/.changeset/shy-oranges-provide.md b/.changeset/shy-oranges-provide.md new file mode 100644 index 000000000000..7141a58da575 --- /dev/null +++ b/.changeset/shy-oranges-provide.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/meteor": patch +--- + +Fixes link image preview not opening in gallery mode From 88597a466e620738220e91a3342da6983982148c Mon Sep 17 00:00:00 2001 From: csuarez Date: Mon, 13 May 2024 12:20:29 +0200 Subject: [PATCH 3/5] Add test when sending image as a link --- apps/meteor/tests/e2e/image-gallery.spec.ts | 102 ++++++++++++-------- 1 file changed, 61 insertions(+), 41 deletions(-) diff --git a/apps/meteor/tests/e2e/image-gallery.spec.ts b/apps/meteor/tests/e2e/image-gallery.spec.ts index 0c19bc65bcac..e3a52d79f6bc 100644 --- a/apps/meteor/tests/e2e/image-gallery.spec.ts +++ b/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(); + }); }); }); From 879941eb819283b3d07e7c0973e74eefca224c3e Mon Sep 17 00:00:00 2001 From: csuarez Date: Fri, 17 May 2024 18:35:16 +0200 Subject: [PATCH 4/5] fix review prop name --- apps/meteor/client/providers/ImageGalleryProvider.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/meteor/client/providers/ImageGalleryProvider.tsx b/apps/meteor/client/providers/ImageGalleryProvider.tsx index ca26dd1e9597..71681c8a3c67 100644 --- a/apps/meteor/client/providers/ImageGalleryProvider.tsx +++ b/apps/meteor/client/providers/ImageGalleryProvider.tsx @@ -10,17 +10,17 @@ type ImageGalleryProviderProps = { const ImageGalleryProvider = ({ children }: ImageGalleryProviderProps) => { const [imageId, setImageId] = useState(); - const [imageUrl, setImageUrl] = useState(); + const [singleImageUrl, setSingleImageUrl] = useState(); useEffect(() => { const handleImageClick = (event: Event) => { const target = event?.target as HTMLElement | null; if (target?.closest('.rcx-attachment__details')) { - return setImageUrl(target.dataset.id); + return setSingleImageUrl(target.dataset.id); } if (target?.classList.contains('preview-image')) { - return setImageUrl(target.dataset.id); + return setSingleImageUrl(target.dataset.id); } if (target?.classList.contains('gallery-item')) { const id = target.closest('.gallery-item-container')?.getAttribute('data-id') || undefined; @@ -42,7 +42,7 @@ const ImageGalleryProvider = ({ children }: ImageGalleryProviderProps) => { return ( setImageId(undefined) }}> {children} - {!!imageUrl && setImageUrl(undefined)} />} + {!!singleImageUrl && setSingleImageUrl(undefined)} />} {!!imageId && } ); From 69c9937fd1c28eb4fc3a4c22e0f7677bd0e8e0c3 Mon Sep 17 00:00:00 2001 From: csuarez Date: Fri, 17 May 2024 18:54:00 +0200 Subject: [PATCH 5/5] fix lint --- apps/meteor/client/providers/ImageGalleryProvider.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/meteor/client/providers/ImageGalleryProvider.tsx b/apps/meteor/client/providers/ImageGalleryProvider.tsx index 71681c8a3c67..e2365e534ca3 100644 --- a/apps/meteor/client/providers/ImageGalleryProvider.tsx +++ b/apps/meteor/client/providers/ImageGalleryProvider.tsx @@ -42,7 +42,9 @@ const ImageGalleryProvider = ({ children }: ImageGalleryProviderProps) => { return ( setImageId(undefined) }}> {children} - {!!singleImageUrl && setSingleImageUrl(undefined)} />} + {!!singleImageUrl && ( + setSingleImageUrl(undefined)} /> + )} {!!imageId && } );