fix(livechat): Storybook adjustments and TypeScript migration (Rocket…

…Chat#29631) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
sampaiodiego · Jun 27, 2023 · 33be8f1 · 33be8f1
1 parent e527f51
commit 33be8f1
Show file tree

Hide file tree

Showing 124 changed files with 2,972 additions and 3,335 deletions.
diff --git a/.changeset/strong-trains-enjoy.md b/.changeset/strong-trains-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/livechat': patch
+---
+
+Storybook adjustments, TypeScript migration, and minor fixes
diff --git a/.yarn/patches/preact-npm-10.15.1-bd458de913.patch b/.yarn/patches/preact-npm-10.15.1-bd458de913.patch
@@ -0,0 +1,13 @@
+diff --git a/src/index.d.ts b/src/index.d.ts
+index c57fcb6f6f3734d182313c324de9b28e6dcee68d..b7602c71e9f4b4254f4056fb598ef72ab157c921 100644
+--- a/src/index.d.ts
++++ b/src/index.d.ts
+@@ -110,7 +110,7 @@ export interface ComponentConstructor<P = {}, S = {}>
+ // Type alias for a component instance considered generally, whether stateless or stateful.
+ export type AnyComponent<P = {}, S = {}> =
+ 	| FunctionComponent<P>
+-	| Component<P, S>;
++	| ComponentConstructor<P, S>;
+
+ export interface Component<P = {}, S = {}> {
+ 	componentWillMount?(): void;
diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-onhold-chat-closing.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-onhold-chat-closing.spec.ts
@@ -36,7 +36,7 @@ test.describe('omnichannel-auto-onhold-chat-closing', () => {
 		await agent.page.close();
 	});
 
-	test.beforeEach(async ({ page }) => {
+	test.beforeEach(async ({ page, api }) => {
 		// make "user-1" online
 		await agent.poHomeChannel.sidenav.switchStatus('online');
 
@@ -45,9 +45,9 @@ test.describe('omnichannel-auto-onhold-chat-closing', () => {
 			name: faker.person.firstName(),
 			email: faker.internet.email(),
 		};
-		poLiveChat = new OmnichannelLiveChat(page);
+		poLiveChat = new OmnichannelLiveChat(page, api);
 		await page.goto('/livechat');
-		await poLiveChat.btnOpenLiveChat('R').click();
+		await poLiveChat.openLiveChat();
 		await poLiveChat.sendMessage(newVisitor, false);
 		await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_user');
 		await poLiveChat.btnSendMessageToOnlineAgent.click();

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-transfer-unanswered-chat.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-auto-transfer-unanswered-chat.spec.ts
@@ -42,7 +42,7 @@ test.describe('omnichannel-auto-transfer-unanswered-chat', () => {
 		await agent2.page.close();
 	});
 
-	test.beforeEach(async ({ page }) => {
+	test.beforeEach(async ({ page, api }) => {
 		// make "user-1" online
 		await agent1.poHomeChannel.sidenav.switchOmnichannelStatus('online');
 		await agent2.poHomeChannel.sidenav.switchOmnichannelStatus('offline');
@@ -52,9 +52,9 @@ test.describe('omnichannel-auto-transfer-unanswered-chat', () => {
 			name: faker.person.firstName(),
 			email: faker.internet.email(),
 		};
-		poLiveChat = new OmnichannelLiveChat(page);
+		poLiveChat = new OmnichannelLiveChat(page, api);
 		await page.goto('/livechat');
-		await poLiveChat.btnOpenLiveChat('R').click();
+		await poLiveChat.openLiveChat();
 		await poLiveChat.sendMessage(newVisitor, false);
 		await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_user');
 		await poLiveChat.btnSendMessageToOnlineAgent.click();

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-canned-responses-sidebar.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-canned-responses-sidebar.spec.ts
@@ -28,8 +28,8 @@ test.describe('Omnichannel Canned Responses Sidebar', () => {
 		const { page } = await createAuxContext(browser, Users.user1);
 		agent = { page, poHomeChannel: new HomeChannel(page) };
 	});
-	test.beforeEach(async ({ page }) => {
-		poLiveChat = new OmnichannelLiveChat(page);
+	test.beforeEach(async ({ page, api }) => {
+		poLiveChat = new OmnichannelLiveChat(page, api);
 	});
 
 	test.afterAll(async ({ api }) => {
@@ -41,7 +41,7 @@ test.describe('Omnichannel Canned Responses Sidebar', () => {
 	test('Receiving a message from visitor', async ({ page }) => {
 		await test.step('Expect send a message as a visitor', async () => {
 			await page.goto('/livechat');
-			await poLiveChat.btnOpenLiveChat('R').click();
+			await poLiveChat.openLiveChat();
 			await poLiveChat.sendMessage(newUser, false);
 			await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor');
 			await poLiveChat.btnSendMessageToOnlineAgent.click();

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-changing-room-priority-and-sla.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-changing-room-priority-and-sla.spec.ts
@@ -57,14 +57,14 @@ test.describe('omnichannel-changing-room-priority-and-sla', () => {
 		await agent.page.close();
 	});
 
-	test('expect to initiate a new livechat conversation', async ({ page }) => {
+	test('expect to initiate a new livechat conversation', async ({ page, api }) => {
 		newVisitor = {
 			name: faker.person.firstName(),
 			email: faker.internet.email(),
 		};
-		poLiveChat = new OmnichannelLiveChat(page);
+		poLiveChat = new OmnichannelLiveChat(page, api);
 		await page.goto('/livechat');
-		await poLiveChat.btnOpenLiveChat('R').click();
+		await poLiveChat.openLiveChat();
 		await poLiveChat.sendMessage(newVisitor, false);
 		await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_user');
 		await poLiveChat.btnSendMessageToOnlineAgent.click();

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-history.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-history.spec.ts
@@ -24,8 +24,8 @@ test.describe('Omnichannel chat histr', () => {
 		const { page } = await createAuxContext(browser, Users.user1);
 		agent = { page, poHomeOmnichannel: new HomeOmnichannel(page) };
 	});
-	test.beforeEach(async ({ page }) => {
-		poLiveChat = new OmnichannelLiveChat(page);
+	test.beforeEach(async ({ page, api }) => {
+		poLiveChat = new OmnichannelLiveChat(page, api);
 	});
 
 	test.afterAll(async ({ api }) => {
@@ -37,7 +37,7 @@ test.describe('Omnichannel chat histr', () => {
 	test('Receiving a message from visitor', async ({ page }) => {
 		await test.step('Expect send a message as a visitor', async () => {
 			await page.goto('/livechat');
-			await poLiveChat.btnOpenLiveChat('R').click();
+			await poLiveChat.openLiveChat();
 			await poLiveChat.sendMessage(newUser, false);
 			await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor');
 			await poLiveChat.btnSendMessageToOnlineAgent.click();
@@ -56,7 +56,7 @@ test.describe('Omnichannel chat histr', () => {
 
 		await test.step('Expect send a message as a visitor again to reopen chat', async () => {
 			await page.goto('/livechat');
-			await poLiveChat.btnOpenLiveChat('R').click();
+			await poLiveChat.openLiveChat();
 			await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor');
 			await poLiveChat.btnSendMessageToOnlineAgent.click();
 		});

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-close-chat.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-close-chat.spec.ts
@@ -25,8 +25,8 @@ test.describe('Omnichannel close chat', () => {
 		const { page } = await createAuxContext(browser, Users.user1);
 		agent = { page, poHomeOmnichannel: new HomeOmnichannel(page) };
 	});
-	test.beforeEach(async ({ page }) => {
-		poLiveChat = new OmnichannelLiveChat(page);
+	test.beforeEach(async ({ page, api }) => {
+		poLiveChat = new OmnichannelLiveChat(page, api);
 	});
 
 	test.afterAll(async ({ api }) => {
@@ -38,7 +38,7 @@ test.describe('Omnichannel close chat', () => {
 	test('Receiving a message from visitor', async ({ page }) => {
 		await test.step('Expect send a message as a visitor', async () => {
 			await page.goto('/livechat');
-			await poLiveChat.btnOpenLiveChat('R').click();
+			await poLiveChat.openLiveChat();
 			await poLiveChat.sendMessage(newUser, false);
 			await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor');
 			await poLiveChat.btnSendMessageToOnlineAgent.click();

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-close-inquiry.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-close-inquiry.spec.ts
@@ -18,17 +18,15 @@ test.describe('Omnichannel close inquiry', () => {
 			email: faker.internet.email(),
 		};
 
-		await Promise.all([
-			await api.post('/livechat/users/manager', { username: 'user1' }),
-			await api.post('/livechat/users/agent', { username: 'user1' }),
-			await api.post('/settings/Livechat_Routing_Method', { value: 'Manual_Selection' }).then((res) => expect(res.status()).toBe(200)),
-		]);
+		await api.post('/livechat/users/manager', { username: 'user1' });
+		await api.post('/livechat/users/agent', { username: 'user1' });
+		await api.post('/settings/Livechat_Routing_Method', { value: 'Manual_Selection' }).then((res) => expect(res.status()).toBe(200));
 
 		const { page } = await createAuxContext(browser, Users.user1);
 		agent = { page, poHomeOmnichannel: new HomeOmnichannel(page) };
 	});
-	test.beforeEach(async ({ page }) => {
-		poLiveChat = new OmnichannelLiveChat(page);
+	test.beforeEach(async ({ page, api }) => {
+		poLiveChat = new OmnichannelLiveChat(page, api);
 	});
 
 	test.afterAll(async ({ api }) => {
@@ -43,7 +41,7 @@ test.describe('Omnichannel close inquiry', () => {
 	test('Receiving a message from visitor', async ({ page }) => {
 		await test.step('Expect send a message as a visitor', async () => {
 			await page.goto('/livechat');
-			await poLiveChat.btnOpenLiveChat('R').click();
+			await poLiveChat.openLiveChat();
 			await poLiveChat.sendMessage(newUser, false);
 			await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor');
 			await poLiveChat.btnSendMessageToOnlineAgent.click();

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-contact-info.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-contact-info.spec.ts
@@ -25,8 +25,8 @@ test.describe('Omnichannel contact info', () => {
 		const { page } = await createAuxContext(browser, Users.user1);
 		agent = { page, poHomeChannel: new HomeChannel(page) };
 	});
-	test.beforeEach(async ({ page }) => {
-		poLiveChat = new OmnichannelLiveChat(page);
+	test.beforeEach(async ({ page, api }) => {
+		poLiveChat = new OmnichannelLiveChat(page, api);
 	});
 
 	test.afterAll(async ({ api }) => {
@@ -38,7 +38,7 @@ test.describe('Omnichannel contact info', () => {
 	test('Receiving a message from visitor, and seeing its information', async ({ page }) => {
 		await test.step('Expect send a message as a visitor', async () => {
 			await page.goto('/livechat');
-			await poLiveChat.btnOpenLiveChat('R').click();
+			await poLiveChat.openLiveChat();
 			await poLiveChat.sendMessage(newUser, false);
 			await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor');
 			await poLiveChat.btnSendMessageToOnlineAgent.click();

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat.spec.ts
@@ -21,7 +21,7 @@ test.describe('Livechat', () => {
 			await expect(statusCode).toBe(200);
 
 			page = await browser.newPage();
-			poLiveChat = new OmnichannelLiveChat(page);
+			poLiveChat = new OmnichannelLiveChat(page, api);
 
 			const { page: pageCtx } = await createAuxContext(browser, Users.user1);
 			poAuxContext = { page: pageCtx, poHomeOmnichannel: new HomeOmnichannel(pageCtx) };
@@ -36,7 +36,7 @@ test.describe('Livechat', () => {
 
 		test('Send message to online agent', async () => {
 			await test.step('Expect message to be sent by livechat', async () => {
-				await poLiveChat.btnOpenLiveChat('R').click();
+				await poLiveChat.openLiveChat();
 				await poLiveChat.sendMessage(newUser, false);
 
 				await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_user');
@@ -59,7 +59,7 @@ test.describe('Livechat', () => {
 			});
 
 			await test.step('Expect when user minimizes the livechat screen, the composer should be hidden', async () => {
-				await poLiveChat.btnOpenLiveChat('R').click();
+				await poLiveChat.openLiveChat();
 				await expect(page.locator('[contenteditable="true"]')).not.toBeVisible();
 			});
 

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-send-transcript.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-send-transcript.spec.ts
@@ -25,8 +25,8 @@ test.describe('omnichannel-transcript', () => {
 		const { page } = await createAuxContext(browser, Users.user1);
 		agent = { page, poHomeChannel: new HomeChannel(page) };
 	});
-	test.beforeEach(async ({ page }) => {
-		poLiveChat = new OmnichannelLiveChat(page);
+	test.beforeEach(async ({ page, api }) => {
+		poLiveChat = new OmnichannelLiveChat(page, api);
 	});
 
 	test.afterAll(async ({ api }) => {
@@ -38,7 +38,7 @@ test.describe('omnichannel-transcript', () => {
 	test('Receiving a message from visitor', async ({ page }) => {
 		await test.step('Expect send a message as a visitor', async () => {
 			await page.goto('/livechat');
-			await poLiveChat.btnOpenLiveChat('R').click();
+			await poLiveChat.openLiveChat();
 			await poLiveChat.sendMessage(newUser, false);
 			await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor');
 			await poLiveChat.btnSendMessageToOnlineAgent.click();

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-takeChat.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-takeChat.spec.ts
@@ -33,7 +33,7 @@ test.describe('omnichannel-takeChat', () => {
 		await agent.page.close();
 	});
 
-	test.beforeEach(async ({ page }) => {
+	test.beforeEach(async ({ page, api }) => {
 		// make "user-1" online
 		await agent.poHomeChannel.sidenav.switchStatus('online');
 
@@ -42,9 +42,9 @@ test.describe('omnichannel-takeChat', () => {
 			name: `${faker.person.firstName()} ${faker.string.uuid()}`,
 			email: faker.internet.email(),
 		};
-		poLiveChat = new OmnichannelLiveChat(page);
+		poLiveChat = new OmnichannelLiveChat(page, api);
 		await page.goto('/livechat');
-		await poLiveChat.btnOpenLiveChat('R').click();
+		await poLiveChat.openLiveChat();
 		await poLiveChat.sendMessage(newVisitor, false);
 		await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_user');
 		await poLiveChat.btnSendMessageToOnlineAgent.click();

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-transfer-to-another-agents.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-transfer-to-another-agents.spec.ts
@@ -38,7 +38,7 @@ test.describe('omnichannel-transfer-to-another-agent', () => {
 		await agent1.page.close();
 		await agent2.page.close();
 	});
-	test.beforeEach(async ({ page }) => {
+	test.beforeEach(async ({ page, api }) => {
 		// make "user-1" online & "user-2" offline so that chat can be automatically routed to "user-1"
 		await agent1.poHomeOmnichannel.sidenav.switchStatus('online');
 		await agent2.poHomeOmnichannel.sidenav.switchStatus('offline');
@@ -48,9 +48,9 @@ test.describe('omnichannel-transfer-to-another-agent', () => {
 			name: faker.person.firstName(),
 			email: faker.internet.email(),
 		};
-		poLiveChat = new OmnichannelLiveChat(page);
+		poLiveChat = new OmnichannelLiveChat(page, api);
 		await page.goto('/livechat');
-		await poLiveChat.btnOpenLiveChat('R').click();
+		await poLiveChat.openLiveChat();
 		await poLiveChat.sendMessage(newVisitor, false);
 		await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor');
 		await poLiveChat.btnSendMessageToOnlineAgent.click();

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-triggers.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-triggers.spec.ts
@@ -32,8 +32,8 @@ test.describe.serial('omnichannel-triggers', () => {
 		await page.locator('.main-content').waitFor();
 	});
 
-	test.beforeEach(async ({ page }) => {
-		poLiveChat = new OmnichannelLiveChat(page);
+	test.beforeEach(async ({ page, api }) => {
+		poLiveChat = new OmnichannelLiveChat(page, api);
 	});
 
 	test.afterAll(async ({ api }) => {
@@ -55,7 +55,7 @@ test.describe.serial('omnichannel-triggers', () => {
 		await test.step('expect triggers to be displaye on Livechat', async () => {
 			await test.step('Expect send a message as a visitor', async () => {
 				await page.goto('/livechat');
-				await poLiveChat.btnOpenLiveChat('R').click();
+				await poLiveChat.openLiveChat();
 				if (await page.locator('[type="button"] >> text="Chat now"').isVisible()) {
 					await page.locator('[type="button"] >> text="Chat now"').click();
 				}

diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-livechat.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-livechat.ts
@@ -1,16 +1,21 @@
-import type { Page, Locator } from '@playwright/test';
+import type { Page, Locator, APIResponse } from '@playwright/test';
 
 export class OmnichannelLiveChat {
 	private readonly page: Page;
 
-	constructor(page: Page) {
+	constructor(page: Page, private readonly api: { get(url: string): Promise<APIResponse> }) {
 		this.page = page;
 	}
 
 	btnOpenLiveChat(label: string): Locator {
 		return this.page.locator(`role=button[name="${label}"]`);
 	}
 
+	async openLiveChat(): Promise<void> {
+		const { value: siteName } = await (await this.api.get('/settings/Site_Name')).json();
+		await this.btnOpenLiveChat(siteName).click();
+	}
+
 	unreadMessagesBadge(count: number): Locator {
 		const name = count === 1 ? `${count} unread message` : `${count} unread messages`;
 

diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
 	},
 	"resolutions": {
 		"minimist": "1.2.6",
-		"adm-zip": "0.5.9"
+		"adm-zip": "0.5.9",
+		"preact@10.15.1": "patch:preact@npm:10.15.1#.yarn/patches/preact-npm-10.15.1-bd458de913.patch"
 	}
 }
diff --git a/packages/livechat/.storybook/main.js b/packages/livechat/.storybook/main.js
@@ -6,8 +6,7 @@ module.exports = {
 				backgrounds: false,
 			},
 		},
-		'@storybook/addon-knobs',
 		'@storybook/addon-postcss',
 	],
-	stories: ['../src/**/stories.js', '../src/**/story.js', '../src/**/*.stories.js', '../src/**/*.story.js'],
+	stories: ['../src/**/stories.{js,tsx}', '../src/**/story.{js,tsx}', '../src/**/*.stories.{js,tsx}', '../src/**/*.story.{js,tsx}'],
 };
diff --git a/packages/livechat/babel.config.js b/packages/livechat/babel.config.js
@@ -1,32 +1,15 @@
 module.exports = {
-	presets: [
-		[
-			'@babel/preset-env',
-			{
-				useBuiltIns: 'entry',
-				corejs: 3,
-				include: [
-					'@babel/plugin-proposal-class-properties',
-					'@babel/plugin-proposal-optional-chaining',
-					'@babel/plugin-proposal-nullish-coalescing-operator',
-				],
-			},
-		],
-		'@babel/preset-typescript',
-	],
+	presets: [['@babel/preset-env', { loose: true }], '@babel/preset-typescript'],
 	plugins: [
-		['@babel/plugin-transform-react-jsx', { pragma: 'h', pragmaFrag: 'Fragment' }],
+		['@babel/plugin-transform-class-properties', { loose: true }],
+		['@babel/plugin-transform-private-methods', { loose: true }],
+		['@babel/plugin-transform-private-property-in-object', { loose: true }],
 		[
-			'babel-plugin-jsx-pragmatic',
+			'@babel/plugin-transform-react-jsx',
 			{
-				module: 'preact',
-				import: 'h',
-				export: 'h',
+				runtime: 'automatic',
+				importSource: 'preact',
 			},
 		],
 	],
-	assumptions: {
-		setPublicClassFields: true,
-		privateFieldsAsProperties: true,
-	},
 };