Feature/JS-5520: Read only chat form

src/json/text.json

@@ -689,6 +689,7 @@
 	"blockChatMessageEdited": "(edited)",
 	"blockChatEditing": "Editing message",
 	"blockChatReplying": "Replying to %s",
+	"blockChatFormReadonly": "Only editors can send messages. Contact the owner to request access.",
 
 	"popupSettingsTitle": "Settings",
 	"popupSettingsAccountPersonalInformationTitle": "Personal information",

src/scss/block/chat/form.scss

@@ -115,3 +115,9 @@
 
 	.icon.send { position: absolute; bottom: 10px; right: 16px; width: 20px; height: 20px; background: url('~img/icon/chat/buttons/send.svg'); }
 }
+
+.formWrapperReadonly {
+	display: flex; justify-content: center; align-items: center; gap: 0px 8px; height: 40px; border-radius: 8px; @include text-small;
+	border: 1px solid var(--color-shape-primary); background: var(--color-shape-tertiary);
+}
+.formWrapperReadonly::before { content: ''; display: block; width: 8px; height: 12px; background: url('~img/icon/lock.svg'); }

src/ts/component/block/chat/form.tsx

@@ -79,6 +79,14 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 		const { space } = S.Common;
 		const value = this.getTextValue();
 
+		if (readonly) {
+			return (
+				<div id="formWrapper" className="formWrapper">
+					<div className="formWrapperReadonly">{translate('blockChatFormReadonly')}</div>
+				</div>
+			);
+		};
+
 		let title = '';
 		let text = '';
 		let icon: any = null;
@@ -140,7 +148,6 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 					<Editable 
 						ref={ref => this.refEditable = ref}
 						id="messageBox"
-						readonly={readonly}
 						maxLength={J.Constant.limit.chat.text}
 						placeholder={translate('blockChatPlaceholder')}
 						onSelect={this.onSelect}
@@ -171,24 +178,22 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 						</div>
 					) : ''}
 
-					{!readonly ? (
-						<Buttons
-							ref={ref => this.refButtons = ref}
-							{...this.props}
-							value={value}
-							hasSelection={this.hasSelection}
-							getMarksAndRange={this.getMarksAndRange}
-							attachments={attachments}
-							caretMenuParam={this.caretMenuParam}
-							onMention={this.onMention}
-							onChatButtonSelect={this.onChatButtonSelect}
-							onTextButtonToggle={this.onTextButtonToggle}
-							getObjectFromPath={this.getObjectFromPath}
-							addAttachments={this.addAttachments}
-							onMenuClose={this.onMenuClose}
-							removeBookmark={this.removeBookmark}
-						/>
-					) : ''}
+					<Buttons
+						ref={ref => this.refButtons = ref}
+						{...this.props}
+						value={value}
+						hasSelection={this.hasSelection}
+						getMarksAndRange={this.getMarksAndRange}
+						attachments={attachments}
+						caretMenuParam={this.caretMenuParam}
+						onMention={this.onMention}
+						onChatButtonSelect={this.onChatButtonSelect}
+						onTextButtonToggle={this.onTextButtonToggle}
+						getObjectFromPath={this.getObjectFromPath}
+						addAttachments={this.addAttachments}
+						onMenuClose={this.onMenuClose}
+						removeBookmark={this.removeBookmark}
+					/>
 
 					<Icon id="send" className="send" onClick={this.onSend} />
 				</div>
@@ -197,6 +202,10 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 	};
 
 	componentDidMount () {
+		if (this.props.readonly) {
+			return;
+		};
+
 		this._isMounted = true;
 		this.checkSendButton();
 
@@ -219,6 +228,10 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 	};
 
 	componentDidUpdate () {
+		if (this.props.readonly) {
+			return;
+		};
+
 		this.renderMarkup();
 		this.checkSendButton();
 	};