[FIX] Option to Join Read-Only Channels

.gitignore

@@ -44,4 +44,4 @@ yarn-error.log*
 .nvmrc
 .idea/
 .exrc
-.envrc
+.envrc

apps/meteor/client/views/room/components/body/composer/ComposerContainer.tsx

@@ -55,11 +55,7 @@ const ComposerContainer = (props: ComposerMessageProps): ReactElement => {
 	}
 
 	if (isReadOnly) {
-		return (
-			<footer className='rc-message-box footer'>
-				<ComposerReadOnly />
-			</footer>
-		);
+		return <ComposerReadOnly />;
 	}
 
 	if (isBlockedOrBlocker) {

apps/meteor/client/views/room/components/body/composer/ComposerReadOnly.tsx

@@ -1,9 +1,43 @@
-import { MessageFooterCallout } from '@rocket.chat/ui-composer';
-import { useTranslation } from '@rocket.chat/ui-contexts';
+import { Button } from '@rocket.chat/fuselage';
+import { MessageFooterCallout, MessageFooterCalloutContent } from '@rocket.chat/ui-composer';
+import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useCallback, useRef, useEffect } from 'react';
+
+import { useRoom, useUserIsSubscribed } from '../../../contexts/RoomContext';
 
 export const ComposerReadOnly = (): ReactElement => {
 	const t = useTranslation();
-	return <MessageFooterCallout>{t('room_is_read_only')}</MessageFooterCallout>;
+	const room = useRoom();
+	const isSubscribed = useUserIsSubscribed();
+	const calloutRef = useRef() as React.MutableRefObject<HTMLButtonElement>;
+	const joinEndpoint = useEndpoint('POST', '/v1/channels.join');
+
+	useEffect(() => {
+		calloutRef.current.style.flex = !isSubscribed ? '4' : 'none';
+	}, [isSubscribed]);
+
+	const join = useCallback(
+		async (_e) => {
+			try {
+				await joinEndpoint({ roomId: room._id });
+			} catch (error: any) {
+				console.log(error);
+			}
+		},
+		[joinEndpoint, room._id],
+	);
+
+	return (
+		<footer className='rc-message-box footer'>
+			<MessageFooterCallout>
+				<MessageFooterCalloutContent ref={calloutRef}>{t('room_is_read_only')}</MessageFooterCalloutContent>
+				{!isSubscribed && (
+					<Button primary onClick={join}>
+						{t('Join')}
+					</Button>
+				)}
+			</MessageFooterCallout>
+		</footer>
+	);
 };

apps/meteor/tests/e2e/channel-management.spec.ts

@@ -1,3 +1,6 @@
+import type { Page } from '@playwright/test';
+import faker from '@faker-js/faker';
+
 import { test, expect } from './utils/test';
 import { HomeChannel } from './page-objects';
 import { createTargetChannel } from './utils';
@@ -7,9 +10,13 @@ test.use({ storageState: 'admin-session.json' });
 test.describe.serial('channel-management', () => {
 	let poHomeChannel: HomeChannel;
 	let targetChannel: string;
+	let regularUserPage: Page;
 
-	test.beforeAll(async ({ api }) => {
+	test.beforeAll(async ({ api, browser }) => {
 		targetChannel = await createTargetChannel(api);
+		regularUserPage = await browser.newPage({ storageState: 'user2-session.json' });
+		await regularUserPage.goto('/home');
+		await regularUserPage.waitForSelector('[data-qa-id="home-header"]');
 	});
 
 	test.beforeEach(async ({ page }) => {
@@ -101,6 +108,19 @@ test.describe.serial('channel-management', () => {
 		await expect(poHomeChannel.toastSuccess).toBeVisible();
 	});
 
+	test('expect "readOnlyChannel" to show join button', async () => {
+		const channelName = faker.datatype.uuid();
+
+		await poHomeChannel.sidenav.openNewByLabel('Channel');
+		await poHomeChannel.sidenav.inputChannelName.type(channelName);
+		await poHomeChannel.sidenav.checkboxPrivateChannel.click();
+		await poHomeChannel.sidenav.checkboxReadOnly.click();
+		await poHomeChannel.sidenav.btnCreate.click();
+
+		await regularUserPage.goto(`/channel/${channelName}`);
+		await expect(regularUserPage.locator('button', { hasText: 'Join' })).toBeVisible();
+	});
+
 	test.skip('expect all notification preferences of "targetChannel" to be "Mentions"', async () => {
 		await poHomeChannel.sidenav.openChat(targetChannel);
 		await poHomeChannel.tabs.kebab.click({ force: true });

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

@@ -15,6 +15,12 @@ export class HomeSidenav {
 		);
 	}
 
+	get checkboxReadOnly(): Locator {
+		return this.page.locator(
+			'//*[@id="modal-root"]//*[contains(@class, "rcx-field") and contains(text(), "Read Only")]/../following-sibling::label/i',
+		);
+	}
+
 	get inputChannelName(): Locator {
 		return this.page.locator('#modal-root [data-qa="create-channel-modal"] [data-qa-type="channel-name-input"]');
 	}