[MM-48670] Fix persistence of placeholder text (#22820)

Co-authored-by: Mattermost Build <build@mattermost.com>
2023-04-18 10:56:41 +03:00
--- a/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.test.jsx
+++ b/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.test.jsx
@@ -40,6 +40,7 @@ describe('components/AdvancedCreateComment', () => {
            uploadsInProgress: [{}],
            fileInfos: [{}, {}, {}],
        },
+        isRemoteDraft: false,
        enableAddButton: true,
        ctrlSend: false,
        latestPostId,
@@ -84,9 +85,10 @@ describe('components/AdvancedCreateComment', () => {

    test('should match snapshot, empty comment', () => {
        const draft = emptyDraft;
+        const isRemoteDraft = false;
        const enableAddButton = false;
        const ctrlSend = true;
-        const props = {...baseProps, draft, enableAddButton, ctrlSend};
+        const props = {...baseProps, draft, isRemoteDraft, enableAddButton, ctrlSend};

        const wrapper = shallow(
            <AdvancedCreateComment {...props}/>,
@@ -104,8 +106,9 @@ describe('components/AdvancedCreateComment', () => {
            uploadsInProgress: [],
            fileInfos: [],
        };
+        const isRemoteDraft = false;
        const ctrlSend = true;
-        const props = {...baseProps, ctrlSend, draft, clearCommentDraftUploads, onResetHistoryIndex, getChannelMemberCountsByGroup};
+        const props = {...baseProps, ctrlSend, draft, isRemoteDraft, clearCommentDraftUploads, onResetHistoryIndex, getChannelMemberCountsByGroup};

        const wrapper = shallow(
            <AdvancedCreateComment {...props}/>,
--- a/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.tsx
+++ b/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.tsx
@@ -74,6 +74,9 @@ type Props = {
    // The current draft of the comment
    draft: PostDraft;

+    // Data used for knowing if the draft came from a WS event
+    isRemoteDraft: boolean;
+
    // Determines if the submit button should be rendered
    enableAddButton?: boolean;

@@ -233,8 +236,14 @@ class AdvancedCreateComment extends React.PureComponent<Props, State> {

        const rootChanged = props.rootId !== state.rootId;
        const messageInHistoryChanged = props.messageInHistory !== state.messageInHistory;
-        if (rootChanged || messageInHistoryChanged || props.draft.remote) {
-            updatedState = {...updatedState, draft: {...props.draft, uploadsInProgress: rootChanged ? [] : props.draft.uploadsInProgress}};
+        if (rootChanged || messageInHistoryChanged || (props.isRemoteDraft && props.draft.message !== state.draft?.message)) {
+            updatedState = {
+                ...updatedState,
+                draft: {
+                    ...props.draft,
+                    uploadsInProgress: rootChanged ? [] : props.draft.uploadsInProgress,
+                },
+            };
        }

        return updatedState;
@@ -252,6 +261,7 @@ class AdvancedCreateComment extends React.PureComponent<Props, State> {
            serverError: null,
            showFormat: false,
            isFormattingBarHidden: props.isFormattingBarHidden,
+            caretPosition: props.draft.caretPosition,
        };

        this.textboxRef = React.createRef();
@@ -343,7 +353,6 @@ class AdvancedCreateComment extends React.PureComponent<Props, State> {
        const updatedDraft = {
            ...this.state.draft,
            show: !isDraftEmpty(this.state.draft),
-            remote: false,
        } as PostDraft;

        this.props.onUpdateCommentDraft(updatedDraft, true);
@@ -356,7 +365,6 @@ class AdvancedCreateComment extends React.PureComponent<Props, State> {
                    draft: {
                        ...prev.draft,
                        show: !isDraftEmpty(prev.draft),
-                        remote: false,
                    } as PostDraft,
                };
            }
--- a/webapp/channels/src/components/advanced_create_comment/index.ts
+++ b/webapp/channels/src/components/advanced_create_comment/index.ts
@@ -64,6 +64,7 @@ function makeMapStateToProps() {
        const err = state.requests.posts.createPost.error || {};

        const draft = getPostDraft(state, StoragePrefixes.COMMENT_DRAFT, ownProps.rootId);
+        const isRemoteDraft = state.views.drafts.remotes[`${StoragePrefixes.COMMENT_DRAFT}${ownProps.rootId}`] || false;

        const channelMembersCount = getAllChannelStats(state)[ownProps.channelId] ? getAllChannelStats(state)[ownProps.channelId].member_count : 1;
        const messageInHistory = getMessageInHistoryItem(state);
@@ -91,6 +92,7 @@ function makeMapStateToProps() {
        return {
            currentTeamId,
            draft,
+            isRemoteDraft,
            messageInHistory,
            channelMembersCount,
            currentUserId,
@@ -121,11 +123,11 @@ function makeMapStateToProps() {
 }

 function makeOnUpdateCommentDraft(rootId: string, channelId: string) {
-    return (draft?: PostDraft, save = false) => updateCommentDraft(rootId, draft ? {...draft, channelId, remote: false} : draft, save);
+    return (draft?: PostDraft, save = false) => updateCommentDraft(rootId, draft ? {...draft, channelId} : draft, save);
 }

 function makeUpdateCommentDraftWithRootId(channelId: string) {
-    return (rootId: string, draft?: PostDraft, save = false) => updateCommentDraft(rootId, draft ? {...draft, channelId, remote: false} : draft, save);
+    return (rootId: string, draft?: PostDraft, save = false) => updateCommentDraft(rootId, draft ? {...draft, channelId} : draft, save);
 }

 type Actions = {
--- a/webapp/channels/src/components/advanced_create_post/advanced_create_post.test.jsx
+++ b/webapp/channels/src/components/advanced_create_post/advanced_create_post.test.jsx
@@ -115,6 +115,7 @@ function advancedCreatePost({
            fullWidthTextBox={fullWidthTextBox}
            currentChannelMembersCount={currentChannelMembersCount}
            draft={draft}
+            isRemoteDraft={false}
            recentPostIdInChannel={recentPostIdInChannel}
            latestReplyablePostId={latestReplyablePostId}
            locale={locale}
--- a/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx
+++ b/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx
@@ -124,6 +124,9 @@ type Props = {
    // Data used for populating message state from previous draft
    draft: PostDraft;

+    // Data used for knowing if the draft came from a WS event
+    isRemoteDraft: boolean;
+
    // Data used dispatching handleViewAction ex: edit post
    latestReplyablePostId?: string;
    locale: string;
@@ -279,7 +282,7 @@ class AdvancedCreatePost extends React.PureComponent<Props, State> {
        };
        if (
            props.currentChannel.id !== state.currentChannel.id ||
-            (props.draft.remote && props.draft.message !== state.message)
+            (props.isRemoteDraft && props.draft.message !== state.message)
        ) {
            updatedState = {
                ...updatedState,
@@ -294,8 +297,8 @@ class AdvancedCreatePost extends React.PureComponent<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
-            message: this.props.draft.message,
-            caretPosition: this.props.draft.message.length,
+            message: props.draft.message,
+            caretPosition: props.draft.message.length,
            submitting: false,
            showEmojiPicker: false,
            uploadsProgressPercent: {},
@@ -387,7 +390,6 @@ class AdvancedCreatePost extends React.PureComponent<Props, State> {
                this.draftsForChannel[channelId] = {
                    ...draft,
                    show: !isDraftEmpty(draft),
-                    remote: false,
                } as PostDraft;
            }
        }
--- a/webapp/channels/src/components/advanced_create_post/index.ts
+++ b/webapp/channels/src/components/advanced_create_post/index.ts
@@ -77,6 +77,7 @@ function makeMapStateToProps() {
        const currentChannel = getCurrentChannel(state) || {};
        const currentChannelTeammateUsername = getUser(state, currentChannel.teammate_id || '')?.username;
        const draft = getChannelDraft(state, currentChannel.id);
+        const isRemoteDraft = state.views.drafts.remotes[`${StoragePrefixes.DRAFT}${currentChannel.id}`] || false;
        const latestReplyablePostId = getLatestReplyablePostId(state);
        const currentChannelMembersCount = getCurrentChannelStats(state) ? getCurrentChannelStats(state).member_count : 1;
        const enableEmojiPicker = config.EnableEmojiPicker === 'true';
@@ -117,6 +118,7 @@ function makeMapStateToProps() {
            showSendTutorialTip,
            messageInHistoryItem: getMessageInHistoryItem(state),
            draft,
+            isRemoteDraft,
            latestReplyablePostId,
            locale: getCurrentLocale(state),
            currentUsersLatestPost: getCurrentUsersLatestPost(state, ''),
@@ -181,12 +183,7 @@ function setDraft(key: string, value: PostDraft, draftChannelId: string, save =
        const channelId = draftChannelId || getCurrentChannelId(getState());
        let updatedValue = null;
        if (value) {
-            updatedValue = {...value};
-            updatedValue = {
-                ...value,
-                channelId,
-                remote: false,
-            };
+            updatedValue = {...value, channelId};
        }
        if (updatedValue) {
            return dispatch(updateDraft(key, updatedValue, '', save));
--- a/webapp/channels/src/components/drafts/snapshots/draft_row.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/snapshots/draft_row.test.tsx.snap
@@ -39,6 +39,7 @@ exports[`components/drafts/drafts_row should match snapshot for channel draft 1`
        "type": "channel",
      }
    }
+    isRemote={false}
    status={Object {}}
    user={Object {}}
  />
@@ -84,6 +85,7 @@ exports[`components/drafts/drafts_row should match snapshot for thread draft 1`]
        "type": "thread",
      }
    }
+    isRemote={false}
    status={Object {}}
    user={Object {}}
  />
--- a/webapp/channels/src/components/drafts/snapshots/drafts.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/snapshots/drafts.test.tsx.snap
@@ -34,6 +34,7 @@ exports[`components/drafts/drafts should match snapshot 1`] = `
 >
  <Memo(Drafts)
    displayName="display_name"
+    draftRemotes={Object {}}
    drafts={Array []}
    localDraftsAreEnabled={true}
    status={Object {}}
@@ -76,6 +77,7 @@ exports[`components/drafts/drafts should match snapshot for local drafts disable
 >
  <Memo(Drafts)
    displayName="display_name"
+    draftRemotes={Object {}}
    drafts={Array []}
    localDraftsAreEnabled={false}
    status={Object {}}
--- a/webapp/channels/src/components/drafts/channel_draft/snapshots/channel_draft.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/channel_draft/snapshots/channel_draft.test.tsx.snap
@@ -42,6 +42,7 @@ exports[`components/drafts/drafts_row should match snapshot for channel draft 1`
    displayName=""
    draftId=""
    id={Object {}}
+    isRemote={false}
    status={Object {}}
    type="channel"
    user={Object {}}
@@ -88,6 +89,7 @@ exports[`components/drafts/drafts_row should match snapshot for undefined channe
    displayName=""
    draftId=""
    id={Object {}}
+    isRemote={false}
    status={Object {}}
    type="channel"
    user={Object {}}
--- a/webapp/channels/src/components/drafts/channel_draft/channel_draft.test.tsx
+++ b/webapp/channels/src/components/drafts/channel_draft/channel_draft.test.tsx
@@ -26,6 +26,7 @@ describe('components/drafts/drafts_row', () => {
        type: 'channel' as 'channel' | 'thread',
        user: {} as UserProfile,
        value: {} as PostDraft,
+        isRemote: false,
    };

    it('should match snapshot for channel draft', () => {
--- a/webapp/channels/src/components/drafts/channel_draft/channel_draft.tsx
+++ b/webapp/channels/src/components/drafts/channel_draft/channel_draft.tsx
@@ -29,6 +29,7 @@ type Props = {
    type: 'channel' | 'thread';
    user: UserProfile;
    value: PostDraft;
+    isRemote: boolean;
 }

 function ChannelDraft({
@@ -40,6 +41,7 @@ function ChannelDraft({
    type,
    user,
    value,
+    isRemote,
 }: Props) {
    const dispatch = useDispatch();
    const history = useHistory();
@@ -101,7 +103,7 @@ function ChannelDraft({
                            />
                        )}
                        timestamp={value.updateAt}
-                        remote={value.remote || false}
+                        remote={isRemote || false}
                    />
                    <PanelBody
                        channelId={channel.id}
--- a/webapp/channels/src/components/drafts/draft_row.test.tsx
+++ b/webapp/channels/src/components/drafts/draft_row.test.tsx
@@ -21,6 +21,7 @@ describe('components/drafts/drafts_row', () => {
        user: {} as UserProfile,
        status: {} as UserStatus['status'],
        displayName: 'test',
+        isRemote: false,
    };

    it('should match snapshot for channel draft', () => {
--- a/webapp/channels/src/components/drafts/draft_row.tsx
+++ b/webapp/channels/src/components/drafts/draft_row.tsx
@@ -14,9 +14,10 @@ type Props = {
    status: UserStatus['status'];
    displayName: string;
    draft: Draft;
+    isRemote: boolean;
 }

-function DraftRow({draft, user, status, displayName}: Props) {
+function DraftRow({draft, user, status, displayName, isRemote}: Props) {
    switch (draft.type) {
    case 'channel':
        return (
@@ -26,6 +27,7 @@ function DraftRow({draft, user, status, displayName}: Props) {
                user={user}
                status={status}
                displayName={displayName}
+                isRemote={isRemote}
            />
        );
    case 'thread':
@@ -37,6 +39,7 @@ function DraftRow({draft, user, status, displayName}: Props) {
                user={user}
                status={status}
                displayName={displayName}
+                isRemote={isRemote}
            />
        );
    default:
--- a/webapp/channels/src/components/drafts/drafts.test.tsx
+++ b/webapp/channels/src/components/drafts/drafts.test.tsx
@@ -20,6 +20,7 @@ describe('components/drafts/drafts', () => {
        displayName: 'display_name',
        status: {} as UserStatus['status'],
        localDraftsAreEnabled: true,
+        draftRemotes: {},
    };

    it('should match snapshot', () => {
--- a/webapp/channels/src/components/drafts/drafts.tsx
+++ b/webapp/channels/src/components/drafts/drafts.tsx
@@ -27,11 +27,13 @@ type Props = {
    displayName: string;
    status: UserStatus['status'];
    localDraftsAreEnabled: boolean;
+    draftRemotes: Record<string, boolean>;
 }

 function Drafts({
    displayName,
    drafts,
+    draftRemotes,
    status,
    user,
    localDraftsAreEnabled,
@@ -75,6 +77,7 @@ function Drafts({
                        key={d.key}
                        displayName={displayName}
                        draft={d}
+                        isRemote={draftRemotes[d.key]}
                        user={user}
                        status={status}
                    />
--- a/webapp/channels/src/components/drafts/index.ts
+++ b/webapp/channels/src/components/drafts/index.ts
@@ -22,6 +22,7 @@ function makeMapStateToProps() {
        return {
            displayName: displayUsername(user, getTeammateNameDisplaySetting(state)),
            drafts: getDrafts(state),
+            draftRemotes: state.views.drafts.remotes,
            status,
            user,
            localDraftsAreEnabled: localDraftsAreEnabled(state),
--- a/webapp/channels/src/components/drafts/thread_draft/snapshots/thread_draft.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/thread_draft/snapshots/thread_draft.test.tsx.snap
@@ -42,6 +42,7 @@ exports[`components/drafts/drafts_row should match snapshot for channel draft 1`
    displayName=""
    draftId=""
    id={Object {}}
+    isRemote={false}
    rootId=""
    status={Object {}}
    thread={
@@ -98,6 +99,7 @@ exports[`components/drafts/drafts_row should match snapshot for undefined thread
    displayName=""
    draftId=""
    id={Object {}}
+    isRemote={false}
    rootId=""
    status={Object {}}
    thread={null}
--- a/webapp/channels/src/components/drafts/thread_draft/thread_draft.test.tsx
+++ b/webapp/channels/src/components/drafts/thread_draft/thread_draft.test.tsx
@@ -31,6 +31,7 @@ describe('components/drafts/drafts_row', () => {
        type: 'thread' as 'channel' | 'thread',
        user: {} as UserProfile,
        value: {} as PostDraft,
+        isRemote: false,
    };

    it('should match snapshot for channel draft', () => {
--- a/webapp/channels/src/components/drafts/thread_draft/thread_draft.tsx
+++ b/webapp/channels/src/components/drafts/thread_draft/thread_draft.tsx
@@ -33,6 +33,7 @@ type Props = {
    type: 'channel' | 'thread';
    user: UserProfile;
    value: PostDraft;
+    isRemote: boolean;
 }

 function ThreadDraft({
@@ -45,6 +46,7 @@ function ThreadDraft({
    type,
    user,
    value,
+    isRemote,
 }: Props) {
    const dispatch = useDispatch();

@@ -107,7 +109,7 @@ function ThreadDraft({
                            />
                        )}
                        timestamp={value.updateAt}
-                        remote={value.remote || false}
+                        remote={isRemote || false}
                    />
                    <PanelBody
                        channelId={channel.id}