MM-45494: Edit message history

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 {getBrowserUtcOffset} from 'utils/timezone.jsx';
+import {TestHelper} from 'utils/test_helper';
+
 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

@@ -94,6 +94,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.root_id || 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/apps_form/apps_form_component.test.tsx

@@ -200,6 +200,9 @@ describe('AppsFormComponent', () => {
                     teams: {
                         teams: {},
                     },
+                    posts: {
+                        posts: {},
+                    },
                     users: {
                         profiles: {},
                     },

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: 4px;
+    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;
+}

components/info_toast/info_toast.test.tsx

@@ -0,0 +1,53 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {ComponentProps} from 'react';
+import {shallow} from 'enzyme';
+
+import {CheckIcon} from '@mattermost/compass-icons/components';
+
+import InfoToast from './info_toast';
+
+describe('components/InfoToast', () => {
+    const baseProps: ComponentProps<typeof InfoToast> = {
+        content: {
+            icon: <CheckIcon/>,
+            message: 'test',
+            undo: jest.fn(),
+        },
+        className: 'className',
+        onExited: jest.fn(),
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(
+            <InfoToast
+                {...baseProps}
+            />,
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should close the toast on undo', () => {
+        const wrapper = shallow(
+            <InfoToast
+                {...baseProps}
+            />,
+        );
+
+        wrapper.find('button').simulate('click');
+        expect(baseProps.onExited).toHaveBeenCalled();
+    });
+
+    test('should close the toast on close button click', () => {
+        const wrapper = shallow(
+            <InfoToast
+                {...baseProps}
+            />,
+        );
+
+        wrapper.find('.info-toast__icon_button').simulate('click');
+        expect(baseProps.onExited).toHaveBeenCalled();
+    });
+});

components/info_toast/info_toast.tsx

@@ -0,0 +1,77 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React, {useEffect, useCallback} from 'react';
+import classNames from 'classnames';
+import {CSSTransition} from 'react-transition-group';
+import {useIntl} from 'react-intl';
+
+import IconButton from '@mattermost/compass-components/components/icon-button';
+import './info_toast.scss';
+
+type Props = {
+    content: {
+        icon?: JSX.Element;
+        message: string;
+        undo?: () => void;
+    };
+    className?: string;
+    onExited: () => void;
+}
+
+function InfoToast({content, onExited, className}: Props): JSX.Element {
+    const {formatMessage} = useIntl();
+    const closeToast = useCallback(() => {
+        onExited();
+    }, [onExited]);
+
+    const undoTodo = useCallback(() => {
+        content.undo?.();
+        onExited();
+    }, [content.undo, onExited]);
+
+    const toastContainerClassname = classNames('info-toast', className);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            onExited();
+        }, 5000);
+
+        return () => clearTimeout(timer);
+    }, [onExited]);
+
+    return (
+        <CSSTransition
+            in={Boolean(content)}
+            classNames='toast'
+            mountOnEnter={true}
+            unmountOnExit={true}
+            timeout={300}
+            appear={true}
+        >
+            <div className={toastContainerClassname}>
+                {content.icon}
+                <span>{content.message}</span>
+                {content.undo && (
+                    <button
+                        onClick={undoTodo}
+                        className='info-toast__undo'
+                    >
+                        {formatMessage({
+                            id: 'post_info.edit.undo',
+                            defaultMessage: 'Undo',
+                        })}
+                    </button>
+                )}
+                <IconButton
+                    className='info-toast__icon_button'
+                    onClick={closeToast}
+                    icon='close'
+                    size='sm'
+                    inverted={true}
+                />
+            </div>
+        </CSSTransition>
+    );
+}
+
+export default React.memo(InfoToast);

components/markdown/index.ts

@@ -12,9 +12,9 @@ import {getBool} from 'mattermost-redux/selectors/entities/preferences';
 import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
 import {getAllUserMentionKeys} from 'mattermost-redux/selectors/entities/search';
 
-import {GlobalState} from '@mattermost/types/store';
-
+import {GlobalState} from 'types/store';
 import {getEmojiMap} from 'selectors/emojis';
+
 import {getSiteURL} from 'utils/url';
 import {ChannelNamesMap, MentionKey} from 'utils/text_formatting';