MM-45494: Edit message history (#11069)

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
Fixes mattermost/mattermost#20864

actions/views/rhs.test.ts

@@ -34,12 +34,16 @@ import {
     updateSearchType,
     suppressRHS,
     unsuppressRHS,
-    goBack, showChannelMembers,
+    goBack,
+    showChannelMembers,
+    openShowEditHistory,
 } from 'actions/views/rhs';
 import {trackEvent} from 'actions/telemetry_actions.jsx';
 import mockStore from 'tests/test_store';
 import {ActionTypes, RHSStates, Constants} from 'utils/constants';
+import {TestHelper} from 'utils/test_helper';
 import {getBrowserUtcOffset} from 'utils/timezone';
+
 import {GlobalState} from 'types/store';
 import {ViewsState} from 'types/store/views';
 import {RhsState} from 'types/store/rhs';
@@ -420,6 +424,23 @@ describe('rhs view actions', () => {
         });
     });
 
+    describe('openShowEditHistory', () => {
+        test('it dispatches the right actions', async () => {
+            const post = TestHelper.getPostMock();
+            await store.dispatch(openShowEditHistory(post));
+
+            expect(store.getActions()).toEqual([
+                {
+                    type: ActionTypes.UPDATE_RHS_STATE,
+                    state: RHSStates.EDIT_HISTORY,
+                    postId: post.root_id || post.id,
+                    channelId: post.channel_id,
+                    timestamp: POST_CREATED_TIME,
+                },
+            ]);
+        });
+    });
+
     describe('showMentions', () => {
         test('it dispatches the right actions', () => {
             store.dispatch(showMentions());

actions/views/rhs.ts

@@ -93,6 +93,16 @@ export function updateRhsState(rhsState: string, channelId?: string, previousRhs
     };
 }
 
+export function openShowEditHistory(post: Post) {
+    return {
+        type: ActionTypes.UPDATE_RHS_STATE,
+        state: RHSStates.EDIT_HISTORY,
+        postId: post.id,
+        channelId: post.channel_id,
+        timestamp: Date.now(),
+    };
+}
+
 export function goBack() {
     return async (dispatch: DispatchFunc, getState: GetStateFunc) => {
         const prevState = getPreviousRhsState(getState() as GlobalState);

components/activity_and_insights/activity_and_insights_link/activity_and_insights_link.tsx

@@ -4,21 +4,29 @@
 import React, {useCallback} from 'react';
 import {Link, useRouteMatch, useLocation, matchPath} from 'react-router-dom';
 import {useIntl} from 'react-intl';
-import {useSelector} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import classNames from 'classnames';
 import Icon from '@mattermost/compass-components/foundations/icon';
 
 import {insightsAreEnabled} from 'mattermost-redux/selectors/entities/preferences';
+import {getIsRhsOpen, getRhsState} from 'selectors/rhs';
+
 import {t} from 'utils/i18n';
+import {RHSStates} from 'utils/constants';
+
 import {trackEvent} from 'actions/telemetry_actions';
+import {closeRightHandSide} from 'actions/views/rhs';
 
 import InsightsTourTip from './insights_tour_tip/insights_tour_tip';
 
 import './activity_and_insights_link.scss';
 
 const ActivityAndInsightsLink = () => {
     const {formatMessage} = useIntl();
+    const dispatch = useDispatch();
     const insightsEnabled = useSelector(insightsAreEnabled);
+    const rhsOpen = useSelector(getIsRhsOpen);
+    const rhsState = useSelector(getRhsState);
 
     const {url} = useRouteMatch();
     const {pathname} = useLocation();
@@ -27,7 +35,10 @@ const ActivityAndInsightsLink = () => {
     const openInsights = useCallback((e) => {
         e.stopPropagation();
         trackEvent('insights', 'sidebar_open_insights');
-    }, []);
+        if (rhsOpen && rhsState === RHSStates.EDIT_HISTORY) {
+            dispatch(closeRightHandSide());
+        }
+    }, [rhsOpen, rhsState]);
 
     if (!insightsEnabled) {
         return null;

components/apps_form/apps_form_component.test.tsx

@@ -195,11 +195,18 @@ describe('AppsFormComponent', () => {
                 entities: {
                     general: {
                         config: {},
+                        license: {},
+                    },
+                    channels: {
+                        channels: {},
+                        roles: {},
                     },
-                    channels: {},
                     teams: {
                         teams: {},
                     },
+                    posts: {
+                        posts: {},
+                    },
                     users: {
                         profiles: {},
                     },

components/drafts/drafts_link/drafts_link.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {memo, useEffect} from 'react';
+import React, {memo, useCallback, useEffect} from 'react';
 import {useSelector, useDispatch} from 'react-redux';
 import {NavLink, useRouteMatch} from 'react-router-dom';
 import {useIntl} from 'react-intl';
@@ -10,15 +10,19 @@ import {localDraftsAreEnabled, syncedDraftsAreAllowedAndEnabled} from 'mattermos
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 
 import {getDrafts} from 'actions/views/drafts';
+import {closeRightHandSide} from 'actions/views/rhs';
 
 import {makeGetDraftsCount} from 'selectors/drafts';
+import {getIsRhsOpen, getRhsState} from 'selectors/rhs';
 
-import ChannelMentionBadge from 'components/sidebar/sidebar_channel/channel_mention_badge';
+import {RHSStates} from 'utils/constants';
 
-import DraftsTourTip from './drafts_tour_tip/drafts_tour_tip';
+import ChannelMentionBadge from 'components/sidebar/sidebar_channel/channel_mention_badge';
 
 import './drafts_link.scss';
 
+import DraftsTourTip from './drafts_tour_tip/drafts_tour_tip';
+
 const getDraftsCount = makeGetDraftsCount();
 
 function DraftsLink() {
@@ -30,13 +34,22 @@ function DraftsLink() {
     const match = useRouteMatch('/:team/drafts');
     const count = useSelector(getDraftsCount);
     const teamId = useSelector(getCurrentTeamId);
+    const rhsOpen = useSelector(getIsRhsOpen);
+    const rhsState = useSelector(getRhsState);
 
     useEffect(() => {
         if (syncedDraftsAllowedAndEnabled) {
             dispatch(getDrafts(teamId));
         }
     }, [teamId, dispatch, syncedDraftsAllowedAndEnabled]);
 
+    const openDrafts = useCallback((e) => {
+        e.stopPropagation();
+        if (rhsOpen && rhsState === RHSStates.EDIT_HISTORY) {
+            dispatch(closeRightHandSide());
+        }
+    }, [rhsOpen, rhsState]);
+
     if (!localDraftsEnabled || (!count && !match)) {
         return null;
     }
@@ -49,6 +62,7 @@ function DraftsLink() {
                 id={'sidebar-drafts-button'}
             >
                 <NavLink
+                    onClick={openDrafts}
                     to={`${url}/drafts`}
                     id='sidebarItem_drafts'
                     activeClassName='active'

components/edit_post/edit_post.tsx

@@ -41,6 +41,7 @@ export type Actions = {
     unsetEditingPost: () => void;
     openModal: (input: ModalData<DialogProps>) => void;
     scrollPostListToBottom: () => void;
+    getPostEditHistory: (postId: string) => void;
 }
 
 export type Props = {
@@ -65,6 +66,8 @@ export type Props = {
         title?: string;
         isRHS?: boolean;
     };
+    isRHSOpened: boolean;
+    isEditHistoryShowing: boolean;
     actions: Actions;
 };
 
@@ -261,6 +264,9 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft,
         }
 
         await actions.editPost(updatedPost as Post);
+        if (rest.isRHSOpened && rest.isEditHistoryShowing) {
+            actions.getPostEditHistory(editingPost.postId || '');
+        }
 
         handleAutomatedRefocusAndExit();
     };

components/edit_post/index.ts

@@ -4,7 +4,7 @@
 import {connect} from 'react-redux';
 import {ActionCreatorsMapObject, bindActionCreators, Dispatch} from 'redux';
 
-import {addMessageIntoHistory} from 'mattermost-redux/actions/posts';
+import {addMessageIntoHistory, getPostEditHistory} from 'mattermost-redux/actions/posts';
 import {Preferences, Permissions} from 'mattermost-redux/constants';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getChannel} from 'mattermost-redux/selectors/entities/channels';
@@ -19,9 +19,9 @@ import {scrollPostListToBottom} from 'actions/views/channel';
 import {editPost} from 'actions/views/posts';
 import {getEditingPost} from 'selectors/posts';
 import {GlobalState} from 'types/store';
-import Constants, {StoragePrefixes} from 'utils/constants';
+import Constants, {RHSStates, StoragePrefixes} from 'utils/constants';
 import {setGlobalItem} from '../../actions/storage';
-import {getPostDraft} from '../../selectors/rhs';
+import {getIsRhsOpen, getPostDraft, getRhsState} from '../../selectors/rhs';
 
 import EditPost, {Actions} from './edit_post';
 
@@ -53,6 +53,8 @@ function mapStateToProps(state: GlobalState) {
         maxPostSize: parseInt(config.MaxPostSize || '0', 10) || Constants.DEFAULT_CHARACTER_LIMIT,
         readOnlyChannel: !isCurrentUserSystemAdmin(state) && channel.name === Constants.DEFAULT_CHANNEL,
         useChannelMentions,
+        isRHSOpened: getIsRhsOpen(state),
+        isEditHistoryShowing: getRhsState(state) === RHSStates.EDIT_HISTORY,
     };
 }
 
@@ -65,6 +67,7 @@ function mapDispatchToProps(dispatch: Dispatch) {
             setDraft: setGlobalItem,
             unsetEditingPost,
             openModal,
+            getPostEditHistory,
         }, dispatch),
     };
 }

components/info_toast/__snapshots__/info_toast.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/InfoToast should match snapshot 1`] = `
+<CSSTransition
+  appear={true}
+  classNames="toast"
+  in={true}
+  mountOnEnter={true}
+  timeout={300}
+  unmountOnExit={true}
+>
+  <div
+    className="info-toast className"
+  >
+    <CheckIcon />
+    <span>
+      test
+    </span>
+    <button
+      className="info-toast__undo"
+      onClick={[Function]}
+    >
+      Undo
+    </button>
+    <ForwardRef
+      className="info-toast__icon_button"
+      icon="close"
+      inverted={true}
+      onClick={[Function]}
+      size="sm"
+    />
+  </div>
+</CSSTransition>
+`;

components/info_toast/info_toast.scss

@@ -0,0 +1,65 @@
+@charset 'UTF-8';
+
+.info-toast {
+    position: fixed;
+    z-index: 99;
+    right: 16px;
+    bottom: 16px;
+    display: grid;
+    width: fit-content;
+    min-height: 40px;
+    align-items: center;
+    padding: 8px;
+    background: var(--center-channel-text);
+    border-radius: 4px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
+    color: var(--sidebar-text);
+    font-weight: 600;
+    grid-template-columns: min-content auto min-content auto;
+    line-height: 20px;
+
+    .info-toast__icon_button {
+        color: inherit;
+    }
+
+    span {
+        padding-left: 4px;
+    }
+
+    > div {
+        display: flex;
+        align-items: center;
+
+        .Icon {
+            font-size: 16px;
+        }
+    }
+}
+
+.info-toast__undo {
+    display: flex;
+    height: 24px;
+    align-items: center;
+    padding: 6px 10px;
+    border: none;
+    margin-right: 16px;
+    margin-left: 8px;
+    background: var(--button-bg);
+    border-radius: 4px;
+    color: var(--sidebar-text);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 10px;
+}
+
+// Animations
+.toast-appear {
+    opacity: 0;
+    transform: translateY(150px);
+}
+
+.toast-appear-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: all 500ms ease;
+}