Disables text editor for DMs and GMs with remote users (#28861)

This change makes the text editor behave similarly to the case of read
only channels, in a disabled state and showing a placeholder that
indicates that DMs and GMs with remote users are currently not
supported.

There is no way to create this type of channels now, but chances are
that existing servers have some already, so this is intended to
explicitly indicate that those won't work.

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx

@@ -108,7 +108,10 @@ const AdvancedTextEditor = ({
     const isRHS = Boolean(postId && !isThreadView);
 
     const currentUserId = useSelector(getCurrentUserId);
-    const channelDisplayName = useSelector((state: GlobalState) => getChannelSelector(state, channelId)?.display_name || '');
+    const channel = useSelector((state: GlobalState) => getChannelSelector(state, channelId));
+    const channelDisplayName = channel?.display_name || '';
+    const channelType = channel?.type || '';
+    const isChannelShared = channel?.shared;
     const draftFromStore = useSelector((state: GlobalState) => getDraftSelector(state, channelId, postId));
     const badConnection = useSelector((state: GlobalState) => connectionErrorCount(state) > 1);
     const maxPostSize = useSelector((state: GlobalState) => parseInt(getConfig(state).MaxPostSize || '', 10) || Constants.DEFAULT_CHARACTER_LIMIT);
@@ -165,6 +168,8 @@ const AdvancedTextEditor = ({
 
     const readOnlyChannel = !canPost;
     const hasDraftMessage = Boolean(draft.message);
+    const isDMOrGMRemote = isChannelShared && (channelType === Constants.DM_CHANNEL || channelType === Constants.GM_CHANNEL);
+    const isDisabled = Boolean(readOnlyChannel || isDMOrGMRemote);
 
     const handleShowPreview = useCallback(() => {
         setShowPreview((prev) => !prev);
@@ -241,12 +246,12 @@ const AdvancedTextEditor = ({
     useOrientationHandler(textboxRef, postId);
     const pluginItems = usePluginItems(draft, textboxRef, handleDraftChange);
     const focusTextbox = useTextboxFocus(textboxRef, channelId, isRHS, canPost);
-    const [attachmentPreview, fileUploadJSX] = useUploadFiles(draft, postId, channelId, isThreadView, storedDrafts, readOnlyChannel, textboxRef, handleDraftChange, focusTextbox, setServerError);
+    const [attachmentPreview, fileUploadJSX] = useUploadFiles(draft, postId, channelId, isThreadView, storedDrafts, isDisabled, textboxRef, handleDraftChange, focusTextbox, setServerError);
     const {
         emojiPicker,
         enableEmojiPicker,
         toggleEmojiPicker,
-    } = useEmojiPicker(readOnlyChannel, draft, caretPosition, setCaretPosition, handleDraftChange, showPreview, focusTextbox);
+    } = useEmojiPicker(isDisabled, draft, caretPosition, setCaretPosition, handleDraftChange, showPreview, focusTextbox);
     const {
         labels,
         additionalControl: priorityAdditionalControl,
@@ -446,7 +451,7 @@ const AdvancedTextEditor = ({
         };
     }, [channelId, postId]);
 
-    const disableSendButton = Boolean(readOnlyChannel || (!draft.message.trim().length && !draft.fileInfos.length)) || !isValidPersistentNotifications;
+    const disableSendButton = Boolean(isDisabled || (!draft.message.trim().length && !draft.fileInfos.length)) || !isValidPersistentNotifications;
     const sendButton = readOnlyChannel ? null : (
         <SendButton
             disabled={disableSendButton}
@@ -464,7 +469,7 @@ const AdvancedTextEditor = ({
     let createMessage;
     if (placeholder) {
         createMessage = placeholder;
-    } else if (!postId && !readOnlyChannel) {
+    } else if (!postId && !isDisabled) {
         createMessage = formatMessage(
             {
                 id: 'create_post.write',
@@ -479,11 +484,18 @@ const AdvancedTextEditor = ({
                 defaultMessage: 'This channel is read-only. Only members with permission can post here.',
             },
         );
+    } else if (isDMOrGMRemote) {
+        createMessage = formatMessage(
+            {
+                id: 'create_post.dm_or_gm_remote',
+                defaultMessage: 'Direct Messagess and Group Messages with remote users are not supported.',
+            },
+        );
     } else {
         createMessage = formatMessage({id: 'create_comment.addComment', defaultMessage: 'Reply to this thread...'});
     }
 
-    const messageValue = readOnlyChannel ? '' : draft.message;
+    const messageValue = isDisabled ? '' : draft.message;
 
     let textboxId = 'textbox';
 
@@ -499,7 +511,7 @@ const AdvancedTextEditor = ({
         break;
     }
 
-    const showFormattingBar = !isFormattingBarHidden && !readOnlyChannel;
+    const showFormattingBar = !isFormattingBarHidden && !isDisabled;
 
     const wasNotifiedOfLogIn = LocalStorageStore.getWasNotifiedOfLogIn();
 
@@ -589,7 +601,7 @@ const AdvancedTextEditor = ({
                 )}
                 <div
                     className={'AdvancedTextEditor__body'}
-                    disabled={readOnlyChannel}
+                    disabled={isDisabled}
                 >
                     <div
                         ref={editorBodyRef}
@@ -620,7 +632,7 @@ const AdvancedTextEditor = ({
                             channelId={channelId}
                             id={textboxId}
                             ref={textboxRef!}
-                            disabled={readOnlyChannel}
+                            disabled={isDisabled}
                             characterLimit={maxPostSize}
                             preview={showPreview}
                             badConnection={badConnection}
@@ -629,7 +641,7 @@ const AdvancedTextEditor = ({
                             onWidthChange={handleWidthChange}
                         />
                         {attachmentPreview}
-                        {!readOnlyChannel && (showFormattingBar || showPreview) && (
+                        {!isDisabled && (showFormattingBar || showPreview) && (
                             <TexteditorActions
                                 placement='top'
                                 isScrollbarRendered={renderScrollbar}
@@ -642,7 +654,7 @@ const AdvancedTextEditor = ({
                                 {formattingBar}
                             </FormattingBarSpacer>
                         ) : formattingBar}
-                        {!readOnlyChannel && (
+                        {!isDisabled && (
                             <TexteditorActions
                                 ref={editorActionsRef}
                                 placement='bottom'

webapp/channels/src/components/advanced_text_editor/use_emoji_picker.tsx

@@ -25,7 +25,7 @@ import type {PostDraft} from 'types/store/draft';
 import {IconContainer} from './formatting_bar/formatting_icon';
 
 const useEmojiPicker = (
-    readOnlyChannel: boolean,
+    isDisabled: boolean,
     draft: PostDraft,
     caretPosition: number,
     setCaretPosition: (pos: number) => void,
@@ -116,7 +116,7 @@ const useEmojiPicker = (
 
     let emojiPicker = null;
 
-    if (enableEmojiPicker && !readOnlyChannel) {
+    if (enableEmojiPicker && !isDisabled) {
         emojiPicker = (
             <>
                 <EmojiPickerOverlay

webapp/channels/src/components/advanced_text_editor/use_upload_files.tsx

@@ -29,7 +29,7 @@ const useUploadFiles = (
     channelId: string,
     isThreadView: boolean,
     storedDrafts: React.MutableRefObject<Record<string, PostDraft | undefined>>,
-    readOnlyChannel: boolean,
+    isDisabled: boolean,
     textboxRef: React.RefObject<TextboxClass>,
     handleDraftChange: (draft: PostDraft, options?: {instant?: boolean; show?: boolean}) => void,
     focusTextbox: (forceFocust?: boolean) => void,
@@ -141,7 +141,7 @@ const useUploadFiles = (
     }, [draft, fileUploadRef, handleDraftChange, handleUploadError, handleFileUploadChange]);
 
     let attachmentPreview = null;
-    if (!readOnlyChannel && (draft.fileInfos.length > 0 || draft.uploadsInProgress.length > 0)) {
+    if (!isDisabled && (draft.fileInfos.length > 0 || draft.uploadsInProgress.length > 0)) {
         attachmentPreview = (
             <FilePreview
                 fileInfos={draft.fileInfos}
@@ -157,7 +157,7 @@ const useUploadFiles = (
         postType = isThreadView ? 'thread' : 'comment';
     }
 
-    const fileUploadJSX = readOnlyChannel ? null : (
+    const fileUploadJSX = isDisabled ? null : (
         <FileUpload
             ref={fileUploadRef}
             fileCount={getFileCount(draft)}

webapp/channels/src/i18n/en.json

@@ -3433,6 +3433,7 @@
   "create_group_memberships_modal.create": "Yes",
   "create_group_memberships_modal.desc": "You're about to add or re-add {username} to teams and channels based on their LDAP group membership. You can revert this change at any time.",
   "create_group_memberships_modal.title": "Re-add {username} to teams and channels",
+  "create_post.dm_or_gm_remote": "Direct Messagess and Group Messages with remote users are not supported.",
   "create_post.error_message": "Your message is too long. Character count: {length}/{limit}",
   "create_post.file_limit_sticky_banner.admin_message": "New uploads will automatically archive older files. To view them again, you can delete older files or <a>upgrade to a paid plan.</a>",
   "create_post.file_limit_sticky_banner.messageTitle": "Your free plan is limited to {storageGB} of files.",