Merge branch 'develop' of github.com:RocketChat/Rocket.Chat into impr…

…ove/home * 'develop' of github.com:RocketChat/Rocket.Chat: Chore: Wait subscription to expose message composer (#26600)
RocketChat · Aug 17, 2022 · 9137e58 · 9137e58
2 parents 5f670eb + b513c5d
commit 9137e58
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 136 deletions.
diff --git a/apps/meteor/app/ui-utils/client/lib/RoomManager.js b/apps/meteor/app/ui-utils/client/lib/RoomManager.js
@@ -98,36 +98,40 @@ export const RoomManager = new (function () {
 
 						if (room != null) {
 							if (record.streamActive !== true) {
-								record.streamActive = true;
-								msgStream.on(record.rid, async (msg) => {
-									// Should not send message to room if room has not loaded all the current messages
-									if (RoomHistoryManager.hasMoreNext(record.rid) !== false) {
-										return;
-									}
-									// Do not load command messages into channel
-									if (msg.t !== 'command') {
-										const subscription = ChatSubscription.findOne({ rid: record.rid }, { reactive: false });
-										const isNew = !ChatMessage.findOne({ _id: msg._id, temp: { $ne: true } });
-										upsertMessage({ msg, subscription });
-
-										msg.room = {
-											type,
-											name,
-										};
-										if (isNew) {
-											callbacks.run('streamNewMessage', msg);
+								msgStream
+									.on(record.rid, async (msg) => {
+										// Should not send message to room if room has not loaded all the current messages
+										if (RoomHistoryManager.hasMoreNext(record.rid) !== false) {
+											return;
+										}
+										// Do not load command messages into channel
+										if (msg.t !== 'command') {
+											const subscription = ChatSubscription.findOne({ rid: record.rid }, { reactive: false });
+											const isNew = !ChatMessage.findOne({ _id: msg._id, temp: { $ne: true } });
+											upsertMessage({ msg, subscription });
+
+											msg.room = {
+												type,
+												name,
+											};
+											if (isNew) {
+												callbacks.run('streamNewMessage', msg);
+											}
 										}
-									}
 
-									msg.name = room.name;
-									Tracker.afterFlush(() => RoomManager.updateMentionsMarksOfRoom(typeName));
+										msg.name = room.name;
+										Tracker.afterFlush(() => RoomManager.updateMentionsMarksOfRoom(typeName));
 
-									handleTrackSettingsChange(msg);
+										handleTrackSettingsChange(msg);
 
-									callbacks.run('streamMessage', msg);
+										callbacks.run('streamMessage', msg);
 
-									return fireGlobalEvent('new-message', msg);
-								});
+										return fireGlobalEvent('new-message', msg);
+									})
+									.then(() => {
+										record.streamActive = true;
+										Dep.changed();
+									});
 								Notifications.onRoom(record.rid, 'deleteMessage', onDeleteMessageStream); // eslint-disable-line no-use-before-define
 								Notifications.onRoom(record.rid, 'deleteMessageBulk', onDeleteMessageBulkStream); // eslint-disable-line no-use-before-define
 							}
@@ -141,6 +145,7 @@ export const RoomManager = new (function () {
 		}
 
 		getOpenedRoomByRid(rid) {
+			Dep.depend();
 			return Object.keys(openedRooms)
 				.map((typeName) => openedRooms[typeName])
 				.find((openedRoom) => openedRoom.rid === rid);

diff --git a/apps/meteor/app/ui/client/views/app/room.html b/apps/meteor/app/ui/client/views/app/room.html
@@ -130,7 +130,11 @@
 						</div>
 					</div>
 					<footer class="footer border-component-color">
-						{{> messageBox messageboxData}}
+						{{#if subscriptionReady}}
+							{{> messageBox messageboxData}}
+						{{else}}
+							{{> ComposerSkeleton}}
+						{{/if}}
 					</footer>
 				</div>
 			</div>

diff --git a/apps/meteor/app/ui/client/views/app/room.js b/apps/meteor/app/ui/client/views/app/room.js
@@ -305,6 +305,9 @@ Template.roomOld.helpers({
 		return settings.get('Message_MaxAllowedSize');
 	},
 
+	subscriptionReady() {
+		return RoomManager.getOpenedRoomByRid(this._id).streamActive;
+	},
 	unreadData() {
 		const data = { count: Template.instance().state.get('count') };
 

diff --git a/apps/meteor/client/templates.ts b/apps/meteor/client/templates.ts
@@ -163,3 +163,5 @@ createTemplateForComponent('ComposerNotAvailablePhoneCalls', () => import('./com
 createTemplateForComponent('loggedOutBanner', () => import('../ee/client/components/deviceManagement/LoggedOutBanner'), {
 	renderContainerView: () => HTML.DIV({ style: 'max-width: 520px; margin: 0 auto;' }),
 });
+
+createTemplateForComponent('ComposerSkeleton', () => import('./views/room/Room/ComposerSkeleton'));
diff --git a/apps/meteor/client/views/room/Room/ComposerSkeleton.tsx b/apps/meteor/client/views/room/Room/ComposerSkeleton.tsx
@@ -0,0 +1,9 @@
+import { Box, InputBox } from '@rocket.chat/fuselage';
+import React, { FC, memo } from 'react';
+
+const ComposerSkeleton: FC = () => (
+	<Box pi='x24' pb='x16' display='flex'>
+		<InputBox.Skeleton />
+	</Box>
+);
+export default memo(ComposerSkeleton);
diff --git a/apps/meteor/client/views/room/Room/RoomSkeleton.tsx b/apps/meteor/client/views/room/Room/RoomSkeleton.tsx
@@ -1,9 +1,10 @@
-import { Skeleton, Box, InputBox } from '@rocket.chat/fuselage';
+import { Skeleton, Box } from '@rocket.chat/fuselage';
 import React, { FC, memo } from 'react';
 
 import Header from '../../../components/Header';
 import VerticalBarSkeleton from '../../../components/VerticalBar/VerticalBarSkeleton';
 import { RoomTemplate } from '../components/RoomTemplate/RoomTemplate';
+import ComposerSkeleton from './ComposerSkeleton';
 
 const RoomSkeleton: FC = () => (
 	<RoomTemplate>
@@ -43,9 +44,7 @@ const RoomSkeleton: FC = () => (
 					</Box>
 				</Box>
 			</Box>
-			<Box pi='x24' pb='x16' display='flex'>
-				<InputBox.Skeleton />
-			</Box>
+			<ComposerSkeleton />
 		</RoomTemplate.Body>
 		<RoomTemplate.Aside>
 			<VerticalBarSkeleton />

diff --git a/apps/meteor/tests/e2e/administration.spec.ts b/apps/meteor/tests/e2e/administration.spec.ts
@@ -66,33 +66,9 @@ test.describe.parallel('administration', () => {
 				await page.goto('/admin/settings/General');
 			});
 
-			test('expect be abble to reset a setting after a change', async () => {
+			test('expect be able to reset a setting after a change', async () => {
 				await poAdmin.inputSiteURL.type('any_text');
 				await poAdmin.btnResetSiteURL.click();
-
-				await poAdmin.inputSiteName.type('any_text');
-				await poAdmin.btnResetSiteName.click();
-
-				await poAdmin.btnAllowInvalidSelfSignedCerts.click();
-				await poAdmin.btnResetAllowInvalidSelfSignedCerts.click();
-
-				await poAdmin.btnEnableFavoriteRooms.click();
-				await poAdmin.btnResetEnableFavoriteRooms.click();
-
-				await poAdmin.btnUseCDNPrefix.click();
-				await poAdmin.btnResetUseCDNPrefix.click();
-
-				await poAdmin.btnForceSSL.click();
-				await poAdmin.btnResetForceSSL.click();
-
-				await poAdmin.inputGoogleTagManagerId.type('any_text');
-				await poAdmin.btnResetGoogleTagManagerId.click();
-
-				await poAdmin.inputBugsnagApiKey.type('any_text');
-				await poAdmin.inputResetBugsnagApiKey.click();
-
-				await poAdmin.inputRobotsFileContent.type('any_text');
-				await poAdmin.btnResetRobotsFileContent.click();
 			});
 		});
 	});

diff --git a/apps/meteor/tests/e2e/homepage.spec.ts b/apps/meteor/tests/e2e/homepage.spec.ts
@@ -11,104 +11,137 @@ const CardIds = {
 	Docs: 'homepage-documentation-card',
 };
 
-const expectCardsToExist = (page: Page, dataQaIds: string[]): void => {
-	dataQaIds.forEach((id) => {
-		expect(page.locator(`[data-qa-id="${id}"]`)).toBeVisible();
-	});
-};
-
-const EDIT_LAYOUT_PERMISSIONS = ['view-privileged-setting', 'edit-privileged-setting', 'manage-selected-settings'];
-
-const CARDS_PERMS = ['create-c', 'create-p', 'view-user-administration'];
-
 test.use({ storageState: 'admin-session.json' });
 
 test.describe.serial('homepage', () => {
 	let regularUserPage: Page;
+	let adminPage: Page;
 
-	test.beforeAll(async ({ browser }) => {
-		regularUserPage = await browser.newPage({ storageState: 'user2-session.json' });
-		await regularUserPage.goto('/home');
-		await regularUserPage.waitForSelector('[data-qa-id="home-header"]');
-	});
-
-	test('expect show customize button if permission granted', async ({ api }) => {
-		expect(
-			(
-				await api.post('/permissions.update', { permissions: EDIT_LAYOUT_PERMISSIONS.map((_id) => ({ _id, roles: ['admin', 'user'] })) })
-			).status(),
-		).toBe(200);
-
-		expect(regularUserPage.locator('[data-qa-id="home-header-customize-button"]')).toBeVisible();
-
-		expect(
-			(await api.post('/permissions.update', { permissions: EDIT_LAYOUT_PERMISSIONS.map((_id) => ({ _id, roles: ['admin'] })) })).status(),
-		).toBe(200);
-
-		expect(regularUserPage.locator('[data-qa-id="home-header-customize-button"]')).not.toBeVisible();
-	});
-
-	test('expect not show Cards that need special permissions', async ({ api }) => {
-		expect(
-			(await api.post('/permissions.update', { permissions: CARDS_PERMS.map((_id) => ({ _id, roles: ['admin', 'user'] })) })).status(),
-		).toBe(200);
-
-		expectCardsToExist(regularUserPage, Object.values(CardIds));
-
-		expect((await api.post('/permissions.update', { permissions: CARDS_PERMS.map((_id) => ({ _id, roles: ['admin'] })) })).status()).toBe(
-			200,
-		);
-
-		expectCardsToExist(regularUserPage, [CardIds.Desktop, CardIds.Docs, CardIds.Mobile, CardIds.Rooms]);
-
-		expect(regularUserPage.locator(`[data-qa-id="${CardIds.Users}"]`)).not.toBeVisible();
-
-		expect(regularUserPage.locator(`[data-qa-id="${CardIds.Chan}"]`)).not.toBeVisible();
-	});
-
-	test('expect welcome text to use Site Name setting', async ({ api }) => {
-		expect(regularUserPage.locator('[data-qa-id="homepage-welcome-text"]')).toContainText('Rocket.Chat');
-
-		expect((await api.post('/settings/Site_Name', { value: 'NewSiteName' })).status()).toBe(200);
-
-		expect(regularUserPage.locator('[data-qa-id="homepage-welcome-text"]')).toContainText('NewSiteName');
-	});
-
-	test('expect header text to use Home Title setting', async ({ api }) => {
-		expect(regularUserPage.locator('[data-qa-type="PageHeader-title"]')).toContainText('Home');
+	test.describe('layout for admins', () => {
+		test.beforeAll(async ({ browser }) => {
+			adminPage = await browser.newPage({ storageState: 'admin-session.json' });
+			await adminPage.goto('/home');
+			await adminPage.waitForSelector('[data-qa-id="home-header"]');
+		});
+		test('expect show customize button', async () => {
+			await expect(adminPage.locator('[data-qa-id="home-header-customize-button"]')).toBeVisible();
+		});
 
-		expect((await api.post('/settings/Layout_Home_Title', { value: 'NewTitle' })).status()).toBe(200);
+		test.describe('cards', () => {
+			for (const id of Object.values(CardIds)) {
+				// eslint-disable-next-line no-loop-func
+				test(`expect ${id} card to be visible`, async () => {
+					await expect(adminPage.locator(`[data-qa-id="${id}"]`)).toBeVisible();
+				});
+			}
+		});
 
-		expect(regularUserPage.locator('[data-qa-type="PageHeader-title"]')).toContainText('NewTitle');
+		test.afterAll(async () => {
+			await adminPage.close();
+		});
 	});
 
-	test.describe.serial('Custom Homepage Content', () => {
-		test('expect to show custom homepage text and default homepage', async ({ api }) => {
-			expect((await api.post('/settings/Layout_Home_Body', { value: '<span data-qa-id="custom-body-span">Hello</span>' })).status()).toBe(
-				200,
-			);
-
+	test.describe('layout for regular users', () => {
+		test.beforeAll(async ({ browser }) => {
+			regularUserPage = await browser.newPage({ storageState: 'user2-session.json' });
 			await regularUserPage.goto('/home');
-
-			expect(regularUserPage.locator('[data-qa-id="homepage-welcome-text"]')).toBeVisible();
-
-			expect(regularUserPage.locator('[data-qa-id="custom-body-span"]')).toContainText('Hello');
+			await regularUserPage.waitForSelector('[data-qa-id="home-header"]');
 		});
 
-		test('expect switch to custom homepage and display custom text', async ({ api }) => {
-			test.skip(/* !IS_EE */ true, 'Enterprise Only');
+		test('expect to not show customize button', async () => {
+			await expect(regularUserPage.locator('[data-qa-id="home-header-customize-button"]')).not.toBeVisible();
+		});
 
-			expect((await api.post('/settings/Layout_Home_Body', { value: '<span data-qa-id="custom-body-span">Hello2</span>' })).status()).toBe(
-				200,
-			);
+		test.describe('cards', () => {
+			for (const id of Object.values(CardIds)) {
+				if (id === CardIds.Users) {
+					// eslint-disable-next-line no-loop-func
+					test(`expect ${id} card to not be visible`, async () => {
+						await expect(regularUserPage.locator(`[data-qa-id="${id}"]`)).not.toBeVisible();
+					});
+				} else {
+					// eslint-disable-next-line no-loop-func
+					test(`expect ${id} card to be visible`, async () => {
+						await expect(regularUserPage.locator(`[data-qa-id="${id}"]`)).toBeVisible();
+					});
+				}
+			}
+		});
 
-			expect((await api.post('/settings/Layout_Custom_Body_Only', { value: true })).status()).toBe(200);
+		test.describe('default values', () => {
+			test('expect welcome text to use Site_Name default setting', async () => {
+				await expect(regularUserPage.locator('[data-qa-id="homepage-welcome-text"]')).toContainText('Rocket.Chat');
+			});
 
-			await regularUserPage.goto('/home');
+			test('expect header text to use Layout_Home_Title default setting', async () => {
+				await expect(regularUserPage.locator('[data-qa-type="PageHeader-title"]')).toContainText('Home');
+			});
+		});
 
-			expect(regularUserPage.locator('[data-qa-id="homepage-welcome-text"]')).not.toBeVisible();
+		test.describe('custom values', () => {
+			test.beforeAll(async ({ api }) => {
+				expect((await api.post('/settings/Site_Name', { value: 'NewSiteName' })).status()).toBe(200);
+				expect((await api.post('/settings/Layout_Home_Title', { value: 'NewTitle' })).status()).toBe(200);
+			});
+
+			test.beforeAll(async ({ browser }) => {
+				regularUserPage = await browser.newPage({ storageState: 'user2-session.json' });
+				await regularUserPage.goto('/home');
+				await regularUserPage.waitForSelector('[data-qa-id="home-header"]');
+			});
+
+			test('expect welcome text to be NewSiteName', async () => {
+				await expect(regularUserPage.locator('[data-qa-id="homepage-welcome-text"]')).toContainText('NewSiteName');
+			});
+
+			test('expect header text to be Layout_Home_Title setting', async () => {
+				await expect(regularUserPage.locator('[data-qa-type="PageHeader-title"]')).toContainText('NewTitle');
+			});
+
+			test.afterAll(async ({ api }) => {
+				expect((await api.post('/settings/Site_Name', { value: 'Rocket.Chat' })).status()).toBe(200);
+				expect((await api.post('/settings/Layout_Home_Title', { value: 'Home' })).status()).toBe(200);
+			});
+		});
 
-			expect(regularUserPage.locator('[data-qa-id="custom-body-span"]')).toContainText('Hello2');
+		test.describe('custom body', () => {
+			test.beforeAll(async ({ api }) => {
+				expect((await api.post('/settings/Layout_Custom_Body', { value: true })).status()).toBe(200);
+				expect((await api.post('/settings/Layout_Home_Body', { value: '<span data-qa-id="custom-body-span">Hello</span>' })).status()).toBe(
+					200,
+				);
+			});
+
+			test.beforeAll(async ({ browser }) => {
+				regularUserPage = await browser.newPage({ storageState: 'user2-session.json' });
+				await regularUserPage.goto('/home');
+				await regularUserPage.waitForSelector('[data-qa-id="home-header"]');
+			});
+
+			test('expect custom body to be visible', async () => {
+				await expect(regularUserPage.locator('[data-qa-id="custom-body-span"]')).toContainText('Hello');
+			});
+
+			test.describe('enterprise edition', () => {
+				test.skip(/* !IS_EE */ true, 'Enterprise Only');
+
+				test.beforeAll(async ({ api }) => {
+					expect((await api.post('/settings/Layout_Custom_Body_Only', { value: true })).status()).toBe(200);
+				});
+
+				test('expect default layout to not be visible', async () => {
+					await expect(regularUserPage.locator('[data-qa-id="homepage-welcome-text"]')).not.toBeVisible();
+				});
+
+				test.afterAll(async ({ api }) => {
+					expect((await api.post('/settings/Layout_Custom_Body_Only', { value: false })).status()).toBe(200);
+				});
+			});
+
+			test.afterAll(async ({ api }) => {
+				expect((await api.post('/settings/Layout_Custom_Body', { value: false })).status()).toBe(200);
+				expect((await api.post('/settings/Layout_Home_Body', { value: '' })).status()).toBe(200);
+			});
 		});
 	});
 });