fix: Image gallery moves to older images when clicking on the right a…

…rrow button (#32106)

Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>

.changeset/tidy-apes-fry.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed inverted navigation direction in the image gallery

apps/meteor/client/components/ImageGallery/ImageGallery.tsx

@@ -112,6 +112,7 @@ export const ImageGallery = ({ images, onClose, loadMore }: { images: IUpload[];
 	const swiperRef = useRef<SwiperRef>(null);
 	const [, setSwiperInst] = useState<SwiperClass>();
 	const [zoomScale, setZoomScale] = useState(1);
+	const [gridSize, setGridSize] = useState(images.length);
 
 	const handleZoom = (ratio: number) => {
 		if (swiperRef.current?.swiper.zoom) {
@@ -174,9 +175,14 @@ export const ImageGallery = ({ images, onClose, loadMore }: { images: IUpload[];
 						onKeyPress={(_, keyCode) => String(keyCode) === '27' && onClose()}
 						modules={[Navigation, Zoom, Keyboard, A11y]}
 						onInit={(swiper) => setSwiperInst(swiper)}
-						onReachEnd={loadMore}
+						onSlidesGridLengthChange={(swiper) => {
+							swiper.slideTo(images.length - gridSize, 2000);
+							setGridSize(images.length);
+						}}
+						onReachBeginning={loadMore}
+						initialSlide={images.length - 1}
 					>
-						{images?.map(({ _id, url }) => (
+						{images.toReversed().map(({ _id, url }) => (
 							<SwiperSlide key={_id}>
 								<div className='swiper-zoom-container'>
 									{/* eslint-disable-next-line

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

@@ -7,31 +7,46 @@ import { expect, test } from './utils/test';
 test.describe.serial('Image Gallery', async () => {
 	let poHomeChannel: HomeChannel;
 	let targetChannel: string;
+	let targetChannelLargeImage: string;
 	const viewport = {
 		width: 1280,
 		height: 720,
 	};
+	// Using more than 5 images so that new images need to be loaded by the gallery
+	const imageNames = ['number1.png', 'number2.png', 'number3.png', 'number4.png', 'number5.png', 'number6.png'];
 
 	test.use({ viewport });
 
 	test.beforeAll(async ({ api, browser }) => {
 		targetChannel = await createTargetChannel(api);
+		targetChannelLargeImage = await createTargetChannel(api);
 		const { page } = await createAuxContext(browser, Users.user1);
 		poHomeChannel = new HomeChannel(page);
 
+		await poHomeChannel.sidenav.openChat(targetChannelLargeImage);
+		await poHomeChannel.content.btnJoinRoom.click();
+
 		await poHomeChannel.sidenav.openChat(targetChannel);
 		await poHomeChannel.content.btnJoinRoom.click();
 	});
 
 	test.afterAll(async ({ api }) => {
 		await deleteChannel(api, targetChannel);
+		await deleteChannel(api, targetChannelLargeImage);
 	});
 
 	test.describe('When sending an image as a file', () => {
 		test.beforeAll(async() => {
+			await poHomeChannel.sidenav.openChat(targetChannel);
+			for await (const imageName of imageNames) {
+				await poHomeChannel.content.sendFileMessage(imageName);
+				await poHomeChannel.content.btnModalConfirm.click();
+				await expect(poHomeChannel.content.lastUserMessage).toContainText(imageName);
+			}
+
+			await poHomeChannel.sidenav.openChat(targetChannelLargeImage);
 			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();
@@ -76,6 +91,28 @@ test.describe.serial('Image Gallery', async () => {
 
 			await expect(poHomeChannel.content.imageGalleryImage).not.toBeVisible();
 		});
+
+		test('expect successfully move to older images by using the left arrow button', async () => {
+			await poHomeChannel.sidenav.openChat(targetChannel);
+			await poHomeChannel.content.lastUserMessage.locator('img.gallery-item').click();
+			/* eslint-disable no-await-in-loop */
+			for (let i = 0; i < imageNames.length - 1; i++) {
+				await expect(poHomeChannel.content.previousSlideButton).toBeEnabled();
+				await expect(poHomeChannel.content.currentGalleryImage).toHaveAttribute('src', new RegExp(`${imageNames[imageNames.length - (i + 1)]}$`));
+				await poHomeChannel.content.previousSlideButton.click();
+			}
+			await expect(poHomeChannel.content.previousSlideButton).toBeDisabled();
+		});
+
+		test('expect successfully move to newer images by using the right arrow button', async () => {
+			for (let i = 0; i < imageNames.length - 1; i++) {
+				await expect(poHomeChannel.content.nextSlideButton).toBeEnabled();
+				await expect(poHomeChannel.content.currentGalleryImage).toHaveAttribute('src', new RegExp(`${imageNames[i]}$`));
+				await poHomeChannel.content.nextSlideButton.click();
+			}
+			await expect(poHomeChannel.content.nextSlideButton).toBeDisabled();
+			await (await poHomeChannel.content.getGalleryButtonByName('close')).click();
+		});
 	});
 
 	test.describe('When sending an image as a link', () => {

apps/meteor/tests/e2e/page-objects/fragments/home-content.ts

@@ -359,6 +359,18 @@ export class HomeContent {
 		return this.page.locator('role=button[name="Or talk as anonymous"]');
 	}
 
+	get nextSlideButton(): Locator {
+		return this.page.getByLabel('Next slide');
+	}
+
+	get previousSlideButton(): Locator {
+		return this.page.getByLabel('Previous slide');
+	}
+
+	get currentGalleryImage(): Locator {
+		return this.page.locator('div[class="swiper-slide swiper-slide-active"] img');
+	}
+
 	findSystemMessage(text: string): Locator {
 		return this.page.locator(`[data-qa-type="system-message-body"] >> text="${text}"`);
 	}