From 8c1381f00a27472574d22fe1857a51bf3c56da9a Mon Sep 17 00:00:00 2001
From: Miguel de la Cruz <miguel@mcrx.me>
Date: Fri, 18 Oct 2024 23:34:42 +0200
Subject: [PATCH] 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.
---
 .../advanced_text_editor.tsx                  | 34 +++++++++++++------
 .../advanced_text_editor/use_emoji_picker.tsx |  4 +--
 .../advanced_text_editor/use_upload_files.tsx |  6 ++--
 webapp/channels/src/i18n/en.json              |  1 +
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
index 6c3979c321..fb042d5149 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/advanced_text_editor/use_emoji_picker.tsx b/webapp/channels/src/components/advanced_text_editor/use_emoji_picker.tsx
index faa17ee8ca..a6494a6c9f 100644
--- a/webapp/channels/src/components/advanced_text_editor/use_emoji_picker.tsx
+++ b/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
diff --git a/webapp/channels/src/components/advanced_text_editor/use_upload_files.tsx b/webapp/channels/src/components/advanced_text_editor/use_upload_files.tsx
index 83542aa5ed..2aa139b50e 100644
--- a/webapp/channels/src/components/advanced_text_editor/use_upload_files.tsx
+++ b/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)}
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 369e491ca4..4d59e468a3 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/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.",