From ab38a8fbd7b305028527751c4f1fb3f5dcc97d53 Mon Sep 17 00:00:00 2001 From: Nathan Date: Fri, 21 Jul 2023 08:58:05 -0600 Subject: [PATCH] MM-50382 Shows an error if post edit history fails to load (#22828) --- .../src/components/edit_post/edit_post.tsx | 4 - .../src/components/edit_post/index.ts | 3 +- .../post_edit_history.test.tsx.snap | 500 ++++++++++++++---- .../src/components/post_edit_history/index.ts | 2 - .../post_edit_history/post_edit_history.scss | 34 ++ .../post_edit_history.test.tsx | 44 +- .../post_edit_history/post_edit_history.tsx | 86 ++- .../post_view/post_edited_indicator/index.ts | 3 - .../post_edited_indicator.tsx | 1 - webapp/channels/src/i18n/en.json | 2 + 10 files changed, 525 insertions(+), 154 deletions(-) create mode 100644 webapp/channels/src/components/post_edit_history/post_edit_history.scss diff --git a/webapp/channels/src/components/edit_post/edit_post.tsx b/webapp/channels/src/components/edit_post/edit_post.tsx index e4a5a92f00..81e6e570b3 100644 --- a/webapp/channels/src/components/edit_post/edit_post.tsx +++ b/webapp/channels/src/components/edit_post/edit_post.tsx @@ -42,7 +42,6 @@ export type Actions = { unsetEditingPost: () => void; openModal: (input: ModalData) => void; scrollPostListToBottom: () => void; - getPostEditHistory: (postId: string) => void; } export type Props = { @@ -271,9 +270,6 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft, } await actions.editPost(updatedPost as Post); - if (rest.isRHSOpened && rest.isEditHistoryShowing) { - actions.getPostEditHistory(editingPost.postId || ''); - } handleAutomatedRefocusAndExit(); }; diff --git a/webapp/channels/src/components/edit_post/index.ts b/webapp/channels/src/components/edit_post/index.ts index 16310d9a12..78e7a7aac3 100644 --- a/webapp/channels/src/components/edit_post/index.ts +++ b/webapp/channels/src/components/edit_post/index.ts @@ -4,7 +4,7 @@ import {connect} from 'react-redux'; import {ActionCreatorsMapObject, bindActionCreators, Dispatch} from 'redux'; -import {addMessageIntoHistory, getPostEditHistory} from 'mattermost-redux/actions/posts'; +import {addMessageIntoHistory} 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'; @@ -67,7 +67,6 @@ function mapDispatchToProps(dispatch: Dispatch) { setDraft: setGlobalItem, unsetEditingPost, openModal, - getPostEditHistory, }, dispatch), }; } diff --git a/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap b/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap index fd443bcf0d..8855c71414 100644 --- a/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap +++ b/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap @@ -1,125 +1,391 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/post_edit_history should match snapshot 1`] = ` -
- +
- - Edit History +
- channel_display_name +
+ + Edit History +
+ channel_display_name +
+ +
+ + +
+
+
+
+ + + + + +

+ Unable to load edit history +

+

+ There was an error loading the history for this message. Check your network connection or try again later. +

+
+
- - - - - +
+
+
+
+
+
+
+
+
+`; + +exports[`components/post_edit_history should match snapshot 1`] = ` +
+
+
+
+
+ + Edit History +
+ channel_display_name +
+ +
+ + +
+
+
+
+ +
+
+ + user profile image + +
+
+ Someone +
+
+
+
+
+
+
+
+

+ post message +

+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
`; diff --git a/webapp/channels/src/components/post_edit_history/index.ts b/webapp/channels/src/components/post_edit_history/index.ts index 172923e0e7..9517b6a9af 100644 --- a/webapp/channels/src/components/post_edit_history/index.ts +++ b/webapp/channels/src/components/post_edit_history/index.ts @@ -8,7 +8,6 @@ import {getChannel, getCurrentChannel} from 'mattermost-redux/selectors/entities import {GlobalState} from 'types/store'; import {getSelectedPostId} from 'selectors/rhs'; -import {getPostEditHistory} from 'selectors/posts'; import PostEditHistory from './post_edit_history'; @@ -20,7 +19,6 @@ function mapStateToProps(state: GlobalState) { return { channelDisplayName, originalPost, - postEditHistory: getPostEditHistory(state), }; } diff --git a/webapp/channels/src/components/post_edit_history/post_edit_history.scss b/webapp/channels/src/components/post_edit_history/post_edit_history.scss new file mode 100644 index 0000000000..eab6fc19a0 --- /dev/null +++ b/webapp/channels/src/components/post_edit_history/post_edit_history.scss @@ -0,0 +1,34 @@ +.scrollbar--view { + display: flex; + flex-direction: column; +} + +.edit-post-history { + &__error_container { + display: flex; + flex: 1; + align-items: center; + justify-content: center; + } + + &__error_item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 56px; + text-align: center; + } + + &__error_heading { + color: var(--center-channel-color); + font-size: 20px; + font-weight: 600; + line-height: 28px; + } + + &__error_subheading { + color: rgba(var(--center-channel-color-rgb), 0.72); + font-weight: 400; + } +} diff --git a/webapp/channels/src/components/post_edit_history/post_edit_history.test.tsx b/webapp/channels/src/components/post_edit_history/post_edit_history.test.tsx index ede8f42a26..78130e270e 100644 --- a/webapp/channels/src/components/post_edit_history/post_edit_history.test.tsx +++ b/webapp/channels/src/components/post_edit_history/post_edit_history.test.tsx @@ -2,7 +2,9 @@ // See LICENSE.txt for license information. import React, {ComponentProps} from 'react'; -import {shallow} from 'enzyme'; +import {Client4} from 'mattermost-redux/client'; + +import {act, renderWithIntlAndStore} from 'tests/react_testing_utils'; import {TestHelper} from 'utils/test_helper'; @@ -15,7 +17,12 @@ describe('components/post_edit_history', () => { id: 'post_id', message: 'post message', }), - postEditHistory: [ + dispatch: jest.fn(), + }; + const mock = jest.spyOn(Client4, 'getPostEditHistory'); + + test('should match snapshot', async () => { + const data = [ TestHelper.getPostMock({ id: 'post_id_1', message: 'post message version 1', @@ -24,13 +31,34 @@ describe('components/post_edit_history', () => { id: 'post_id_2', message: 'post message version 2', }), - ], - dispatch: jest.fn(), - }; + ]; + mock.mockResolvedValue(data); - test('should match snapshot', () => { - const wrapper = shallow(); + let wrapper: HTMLElement; - expect(wrapper).toMatchSnapshot(); + await act(async () => { + const {container} = renderWithIntlAndStore(, {}); + wrapper = container; + }); + await act(async () => { + expect(wrapper).toMatchSnapshot(); + expect(mock).toBeCalledWith(baseProps.originalPost.id); + }); + }); + + test('should display error screen if errors are present', async () => { + const error = new Error('An example error'); + mock.mockRejectedValue(error); + + let wrapper: HTMLElement; + + await act(async () => { + const {container} = renderWithIntlAndStore(, {}); + wrapper = container; + }); + await act(async () => { + expect(wrapper).toMatchSnapshot(); + expect(mock).toBeCalledWith(baseProps.originalPost.id); + }); }); }); diff --git a/webapp/channels/src/components/post_edit_history/post_edit_history.tsx b/webapp/channels/src/components/post_edit_history/post_edit_history.tsx index 8e24926b3f..924d97c644 100644 --- a/webapp/channels/src/components/post_edit_history/post_edit_history.tsx +++ b/webapp/channels/src/components/post_edit_history/post_edit_history.tsx @@ -1,17 +1,23 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {memo, useEffect, useRef} from 'react'; +import React, {memo, useEffect, useRef, useState} from 'react'; +import {useDispatch} from 'react-redux'; import {useIntl} from 'react-intl'; import Scrollbars from 'react-custom-scrollbars'; +import {Post} from '@mattermost/types/posts'; + +import {DispatchFunc} from 'mattermost-redux/types/actions'; +import {getPostEditHistory} from 'mattermost-redux/actions/posts'; + import SearchResultsHeader from 'components/search_results_header'; - import LoadingScreen from 'components/loading_screen'; - -import EditedPostItem from './edited_post_item'; +import AlertIcon from 'components/common/svg_images_components/alert_svg'; import type {PropsFromRedux} from './index'; +import EditedPostItem from './edited_post_item'; +import './post_edit_history.scss'; const renderView = (props: Record): JSX.Element => (
): JSX.Element => ( const PostEditHistory = ({ channelDisplayName, originalPost, - postEditHistory, }: PropsFromRedux) => { + const [postEditHistory, setPostEditHistory] = useState([]); + const [hasError, setHasError] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const dispatch = useDispatch(); const scrollbars = useRef(null); const {formatMessage} = useIntl(); + const retrieveErrorHeading = formatMessage({ + id: 'post_info.edit.history.retrieveError', + defaultMessage: 'Unable to load edit history', + }); + const retrieveErrorSubheading = formatMessage({ + id: 'post_info.edit.history.retrieveErrorVerbose', + defaultMessage: 'There was an error loading the history for this message. Check your network connection or try again later.', + }); useEffect(() => { + const fetchPostEditHistory = async () => { + setIsLoading(true); + const result = await dispatch(getPostEditHistory(originalPost.id)); + if (result.data) { + setPostEditHistory(result.data); + setHasError(false); + } else { + setHasError(true); + setPostEditHistory([]); + } + setIsLoading(false); + }; + fetchPostEditHistory(); scrollbars.current?.scrollToTop(); - }, [originalPost, postEditHistory]); + }, [originalPost, dispatch]); + + useEffect(() => { + setPostEditHistory([]); + setHasError(false); + }, [originalPost.id]); const title = formatMessage({ id: 'search_header.title_edit.history', defaultMessage: 'Edit History', }); - if (!postEditHistory) { - return null; - } + const errorContainer: JSX.Element = ( +
+
+ +

+ {retrieveErrorHeading} +

+

+ {retrieveErrorSubheading} +

+
+
+ ); - if (postEditHistory.length === 0) { + if (isLoading && postEditHistory.length === 0) { return (
( + const currentItem = ( + + ); + + const postEditItems = [currentItem, ...postEditHistory.map((postEdited) => ( - )); + ))]; return (
{channelDisplayName}
- - {postEditItems} + {hasError ? errorContainer : postEditItems}
); diff --git a/webapp/channels/src/components/post_view/post_edited_indicator/index.ts b/webapp/channels/src/components/post_view/post_edited_indicator/index.ts index a5613ece53..cd1a54f616 100644 --- a/webapp/channels/src/components/post_view/post_edited_indicator/index.ts +++ b/webapp/channels/src/components/post_view/post_edited_indicator/index.ts @@ -8,7 +8,6 @@ import {bindActionCreators, Dispatch} from 'redux'; import {getCurrentUserId} from 'mattermost-redux/selectors/entities/common'; import {getBool} from 'mattermost-redux/selectors/entities/preferences'; import {getPost} from 'mattermost-redux/selectors/entities/posts'; -import {getPostEditHistory} from 'mattermost-redux/actions/posts'; import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general'; import {getChannel} from 'mattermost-redux/selectors/entities/channels'; import {getCurrentTimezone, isTimezoneEnabled} from 'mattermost-redux/selectors/entities/timezone'; @@ -41,7 +40,6 @@ type StateProps = { type DispatchProps = { actions: { openShowEditHistory: (post: Post) => void; - getPostEditHistory: (postId: string) => void; }; } @@ -70,7 +68,6 @@ function mapDispatchToProps(dispatch: Dispatch) { return { actions: bindActionCreators({ openShowEditHistory, - getPostEditHistory, }, dispatch), }; } diff --git a/webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx b/webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx index 8d6f52bcc4..505994de80 100644 --- a/webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx +++ b/webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx @@ -76,7 +76,6 @@ const PostEditedIndicator = ({postId, isMilitaryTime, timeZone, editedAt = 0, po const showPostEditHistory = (e: MouseEvent) => { e.preventDefault(); if (post?.id) { - actions.getPostEditHistory(post.id); actions.openShowEditHistory(post); } }; diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index 1bd8246f71..fb807afd81 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -4401,6 +4401,8 @@ "post_info.edit": "Edit", "post_info.edit.aria_label": "Select to restore an old message.", "post_info.edit.current_version": "Current Version", + "post_info.edit.history.retrieveError": "Unable to load edit history", + "post_info.edit.history.retrieveErrorVerbose": "There was an error loading the history for this message. Check your network connection or try again later.", "post_info.edit.restore": "Restore this version", "post_info.edit.restore_question": "Restore this version?", "post_info.edit.undo": "Undo",