[FIX] Asset settings description not showing on admin

apps/meteor/app/theme/client/imports/general/base_old.css

@@ -827,6 +827,55 @@
 
 /* MAIN CONTENT + MAIN PAGES */
 
+.rc-old .page-settings {
+	& .settings-file-preview {
+		display: flex;
+		align-items: center;
+
+		& input[type='file'] {
+			position: absolute !important;
+			z-index: 10000;
+			top: 0;
+			left: 0;
+
+			width: 100%;
+			height: 100%;
+
+			cursor: pointer;
+
+			opacity: 0;
+
+			& * {
+				cursor: pointer;
+			}
+		}
+
+		& .preview {
+			overflow: hidden;
+
+			width: 100px;
+			height: 40px;
+
+			margin-right: 0.75rem;
+
+			border-width: var(--input-border-width);
+			border-color: var(--input-border-color);
+			border-radius: var(--input-border-radius);
+
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: contain;
+
+			&.no-file {
+				display: flex;
+
+				align-items: center;
+				justify-content: center;
+			}
+		}
+	}
+}
+
 .rc-old .page-list {
 	& .search {
 		margin-bottom: 12px;

apps/meteor/client/views/admin/settings/Setting.tsx

@@ -88,12 +88,13 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr
 
 	const { _id, disabled, readonly, type, packageValue, i18nLabel, i18nDescription, alert, invisible } = setting;
 
-	const label = (t.has(i18nLabel) && t(i18nLabel)) || (t.has(_id) && t(_id));
+	const label = (t.has(i18nLabel) && t(i18nLabel)) || (t.has(_id) && t(_id)) || i18nLabel || _id;
+
 	const hint = useMemo(
 		() => (t.has(i18nDescription) ? <MarkdownText variant='inline' preserveHtml content={t(i18nDescription)} /> : undefined),
 		[i18nDescription, t],
 	);
-	const callout = useMemo(() => (alert && t.has(alert) ? <span dangerouslySetInnerHTML={{ __html: t(alert) }} /> : undefined), [alert, t]);
+	const callout = useMemo(() => alert && <span dangerouslySetInnerHTML={{ __html: t.has(alert) ? t(alert) : alert }} />, [alert, t]);
 
 	const shouldDisableEnterprise = setting.enterprise && !isEnterprise;
 

apps/meteor/client/views/admin/settings/inputs/AssetSettingInput.tsx

@@ -63,7 +63,12 @@ function AssetSettingInput({ _id, label, value, asset, fileConstraints }: AssetS
 			<Field.Row>
 				<div className='settings-file-preview'>
 					{value?.url ? (
-						<div className='preview' style={{ backgroundImage: `url(${value.url}?_dc=${Random.id()})` }} />
+						<div
+							className='preview'
+							style={{ backgroundImage: `url(${value.url}?_dc=${Random.id()})` }}
+							role='img'
+							aria-label={t('Asset_preview')}
+						/>
 					) : (
 						<div className='preview no-file background-transparent-light secondary-font-color'>
 							<Icon name='upload' />

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -592,6 +592,7 @@
   "Are_you_sure_you_want_to_disable_Facebook_integration": "Are you sure you want to disable Facebook integration?",
   "Assets": "Assets",
   "Assets_Description": "Modify your workspace's logo, icon, favicon and more.",
+  "Asset_preview": "Asset preview",
   "Assign_admin": "Assigning admin",
   "Assign_new_conversations_to_bot_agent": "Assign new conversations to bot agent",
   "Assign_new_conversations_to_bot_agent_description": "The routing system will attempt to find a bot agent before addressing new conversations to a human agent.",

apps/meteor/tests/e2e/page-objects/admin.ts

@@ -95,4 +95,16 @@ export class Admin {
 	get btnResetRobotsFileContent(): Locator {
 		return this.page.locator('[data-qa-reset-setting-id="Robot_Instructions_File_Content"]');
 	}
+
+	get btnAssetsSettings(): Locator {
+		return this.page.locator('[data-qa-id="Assets"] >> role=button[name="Open"]');
+	}
+
+	get btnDeleteAssetsLogo(): Locator {
+		return this.page.locator('//label[@title="Assets_logo"]/following-sibling::span >> role=button[name="Delete"]');
+	}
+
+	get inputAssetsLogo(): Locator {
+		return this.page.locator('//label[@title="Assets_logo"]/following-sibling::span >> input[type="file"]');
+	}
 }

apps/meteor/tests/e2e/settings-assets.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from './utils/test';
+import { Admin } from './page-objects';
+
+test.use({ storageState: 'admin-session.json' });
+
+test.describe.serial('settings-assets', () => {
+	let poAdmin: Admin;
+
+	test.beforeEach(async ({ page }) => {
+		poAdmin = new Admin(page);
+		await page.goto('/admin/settings');
+
+		await poAdmin.btnAssetsSettings.click();
+
+		await expect(page.locator('[data-qa-type="PageHeader-title"]')).toHaveText('Assets');
+	});
+
+	test('expect upload and delete asset and label should be visible', async ({ page }) => {
+		await expect(page.locator('[title="Assets_logo"]')).toHaveText('logo (svg, png, jpg)');
+
+		await poAdmin.inputAssetsLogo.setInputFiles('./tests/e2e/fixtures/files/test-image.jpeg');
+
+		await expect(page.locator('role=img[name="Asset preview"]')).toBeVisible();
+
+		await poAdmin.btnDeleteAssetsLogo.click();
+
+		await expect(page.locator('role=img[name="Asset preview"]')).not.toBeVisible();
+	});
+});