fix: breaks the avatar if you hit the button adding an invalid link (#…

…31467) Co-authored-by: dougfabris <[email protected]> Co-authored-by: Guilherme Gazzo <[email protected]>
RocketChat · Jan 26, 2024 · 61a655f · 61a655f
1 parent e7d3cde
commit 61a655f
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 21 deletions.
diff --git a/.changeset/tough-candles-argue.md b/.changeset/tough-candles-argue.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fix an issue that breaks the avatar if you hit the button adding an invalid link
diff --git a/apps/meteor/client/components/avatar/BaseAvatar.tsx b/apps/meteor/client/components/avatar/BaseAvatar.tsx
@@ -5,14 +5,23 @@ import React, { useState } from 'react';
 
 export type BaseAvatarProps = Omit<AvatarProps, 'is'>;
 
-const BaseAvatar: FC<BaseAvatarProps> = ({ size, ...props }) => {
-	const [error, setError] = useState<unknown>(false);
+const BaseAvatar: FC<BaseAvatarProps> = ({ onError, ...props }) => {
+	const [isLoading, setIsLoading] = useState<unknown>(false);
 
-	if (error) {
-		return <Skeleton aria-hidden variant='rect' {...props} />;
+	if (isLoading) {
+		return <Skeleton aria-hidden variant='rect' onError={onError} {...props} />;
 	}
 
-	return <Avatar aria-hidden onError={setError} size={size} {...props} />;
+	return (
+		<Avatar
+			aria-hidden
+			onError={(event) => {
+				setIsLoading(true);
+				onError?.(event);
+			}}
+			{...props}
+		/>
+	);
 };
 
 export default BaseAvatar;
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
@@ -1,5 +1,6 @@
 import type { IUser, AvatarObject } from '@rocket.chat/core-typings';
-import { Box, Button, TextInput, Avatar, IconButton } from '@rocket.chat/fuselage';
+import { Box, Button, TextInput, Avatar, IconButton, Label } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ChangeEvent } from 'react';
 import React, { useState, useCallback } from 'react';
@@ -24,6 +25,7 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, e
 	const rotateImages = useSetting('FileUpload_RotateImages');
 	const [avatarFromUrl, setAvatarFromUrl] = useState('');
 	const [newAvatarSource, setNewAvatarSource] = useState<string>();
+	const imageUrlField = useUniqueId();
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const setUploadedPreview = useCallback(
@@ -44,7 +46,7 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, e
 
 	const [clickUpload] = useSingleFileInput(setUploadedPreview);
 
-	const clickUrl = (): void => {
+	const handleAddUrl = (): void => {
 		setNewAvatarSource(avatarFromUrl);
 		setAvatarObj({ avatarUrl: avatarFromUrl });
 	};
@@ -75,8 +77,11 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, e
 				<UserAvatar
 					size='x124'
 					url={url}
+					key={url}
+					data-qa-id='UserAvatarEditor'
 					username={currentUsername || ''}
 					etag={etag}
+					onError={() => dispatchToastMessage({ type: 'error', message: t('error-invalid-image-url') })}
 					style={{
 						objectFit: 'contain',
 						imageOrientation: rotateImages ? 'from-image' : 'none',
@@ -94,14 +99,17 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, e
 							disabled={disabled || !avatarFromUrl}
 							title={t('Add_URL')}
 							mi={4}
-							onClick={clickUrl}
+							onClick={handleAddUrl}
 							data-qa-id='UserAvatarEditorSetAvatarLink'
 						/>
 						<UserAvatarSuggestions disabled={disabled} onSelectOne={handleSelectSuggestion} />
 					</Box>
-					<Box mis={4}>{t('Use_url_for_avatar')}</Box>
+					<Label htmlFor={imageUrlField} mis={4}>
+						{t('Use_url_for_avatar')}
+					</Label>
 					<TextInput
 						data-qa-id='UserAvatarEditorLink'
+						id={imageUrlField}
 						flexGrow={0}
 						placeholder={t('Use_url_for_avatar')}
 						value={avatarFromUrl}

diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -2036,6 +2036,7 @@
   "error-invalid-file-width": "Invalid file width",
   "error-invalid-from-address": "You informed an invalid FROM address.",
   "error-invalid-inquiry": "Invalid inquiry",
+  "error-invalid-image-url": "Invalid image URL",
   "error-invalid-integration": "Invalid integration",
   "error-invalid-message": "Invalid message",
   "error-invalid-method": "Invalid method",

diff --git a/apps/meteor/tests/e2e/account-profile.spec.ts b/apps/meteor/tests/e2e/account-profile.spec.ts
@@ -41,27 +41,31 @@ test.describe.serial('settings-account-profile', () => {
 
 			await expect(poHomeChannel.tabs.userInfoUsername).toHaveText(newUsername);
 		})
-		
-		test('change avatar', async ({ page }) => {	
-			await test.step('expect change avatar image by upload', async () => {
+
+		test.describe('Avatar', () => {
+			test('should change avatar image by uploading file', async () => {	
 				await poAccountProfile.inputImageFile.setInputFiles('./tests/e2e/fixtures/files/test-image.jpeg');
-
 				await poAccountProfile.btnSubmit.click();
-				await expect(page.locator('.rcx-toastbar.rcx-toastbar--success').first()).toBeVisible();
+
+				await expect(poAccountProfile.userAvatarEditor).toHaveAttribute('src');
 			});
+
+			test('should change avatar image from url', async () => {	
+				await poAccountProfile.inputAvatarLink.fill('https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50');
+				await poAccountProfile.btnSetAvatarLink.click();
 
-			await test.step('expect to close toastbar', async () => {
-				await page.locator('.rcx-toastbar.rcx-toastbar--success').first().click();
+				await poAccountProfile.btnSubmit.click();
+				await expect(poAccountProfile.userAvatarEditor).toHaveAttribute('src');
 			});
-	
-			await test.step('expect set image from url', async () => {
-				await poAccountProfile.inputAvatarLink.fill('https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50');
+
+			test('should display a skeleton if the image url is not valid', async () => {	
+				await poAccountProfile.inputAvatarLink.fill('https://invalidUrl');
 				await poAccountProfile.btnSetAvatarLink.click();
 
 				await poAccountProfile.btnSubmit.click();
-				await expect(page.locator('.rcx-toastbar.rcx-toastbar--success').first()).toBeVisible();
+				await expect(poAccountProfile.userAvatarEditor).not.toHaveAttribute('src');
 			});
-		});
+		})
 	});
 
 	test.describe('Security', () => {

diff --git a/apps/meteor/tests/e2e/page-objects/account-profile.ts b/apps/meteor/tests/e2e/page-objects/account-profile.ts
@@ -36,6 +36,10 @@ export class AccountProfile {
 		return this.page.locator('.avatar-file-input');
 	}
 
+	get userAvatarEditor(): Locator {
+		return this.page.locator('[data-qa-id="UserAvatarEditor"]');
+	}
+
 	get emailTextInput(): Locator {
 		return this.page.locator('//label[contains(text(), "Email")]/..//input');
 	}