mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

MM-50382 Shows an error if post edit history fails to load (#22828)

Просмотр исходного кода
Этот коммит содержится в:
Nathan
2023-07-21 08:58:05 -06:00
коммит произвёл GitHub
родитель feeb0cd2ef
Коммит ab38a8fbd7
10 изменённых файлов: 525 добавлений и 154 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
webapp/channels/src/components/edit_post/edit_post.tsx
Просмотреть файл

@@ -42,7 +42,6 @@ export type Actions = {
unsetEditingPost: () => void;
openModal: (input: ModalData<DialogProps>) => 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();
};

3
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),
};
}

500
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`] = `
<div
className="sidebar-right__body"
id="rhsContainer"
>
<Scrollbars
autoHeight={false}
autoHeightMax={200}
autoHeightMin={0}
autoHide={true}
autoHideDuration={500}
autoHideTimeout={500}
hideTracksWhenNotNeeded={false}
renderThumbHorizontal={[Function]}
renderThumbVertical={[Function]}
renderTrackHorizontal={[Function]}
renderTrackVertical={[Function]}
renderView={[Function]}
tagName="div"
thumbMinSize={30}
universal={false}
exports[`components/post_edit_history should display error screen if errors are present 1`] = `
<div>
<div
class="sidebar-right__body"
id="rhsContainer"
>
<Connect(SearchResultsHeader)>
Edit History
<div
style="position: relative; overflow: hidden; width: 100%; height: 100%;"
>
<div
className="sidebar--right__title__channel"
class="scrollbar--view"
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;"
>
channel_display_name
<div
class="sidebar--right__header"
>
<span
class="sidebar--right__title"
>
Edit History
<div
class="sidebar--right__title__channel"
>
channel_display_name
</div>
</span>
<div
class="pull-right"
>
<button
class="sidebar--right__expand btn-icon"
type="button"
>
<i
aria-label="Expand Sidebar Icon"
class="icon icon-arrow-expand"
/>
<i
aria-label="Collapse Sidebar Icon"
class="icon icon-arrow-collapse"
/>
</button>
<button
aria-label="Close"
class="sidebar--right__close btn-icon"
id="searchResultsCloseButton"
type="button"
>
<i
aria-label="Close Sidebar Icon"
class="icon icon-close"
/>
</button>
</div>
</div>
<div
class="edit-post-history__error_container"
>
<div
class="edit-post-history__error_item"
>
<svg
fill="none"
height="127"
viewBox="0 0 110 100"
width="127"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M26.4736 81.0278C23.2554 81.0278 21.7973 78.708 23.2333 75.8728L49.2438 24.7796C50.7166 21.9517 53.0364 21.9517 54.4798 24.7796L80.483 75.8728C81.9558 78.7006 80.483 81.0278 77.2427 81.0278H26.4736Z"
fill="#FFBC1F"
/>
<path
d="M47.7783 43.6764L50.4515 61.6378C50.4773 61.9942 50.6371 62.3276 50.8988 62.571C51.1604 62.8144 51.5045 62.9497 51.8618 62.9497C52.2192 62.9497 52.5632 62.8144 52.8249 62.571C53.0865 62.3276 53.2463 61.9942 53.2721 61.6378L55.9453 43.6764C56.4314 36.673 47.2849 36.673 47.7783 43.6764Z"
fill="#2D3039"
/>
<path
d="M51.8582 64.8853C52.6677 64.8867 53.4586 65.1281 54.1309 65.5789C54.8033 66.0297 55.327 66.6697 55.6358 67.418C55.9446 68.1663 56.0246 68.9893 55.8657 69.7831C55.7069 70.5769 55.3164 71.3058 54.7435 71.8777C54.1706 72.4496 53.441 72.8388 52.6469 72.9962C51.8529 73.1536 51.03 73.0721 50.2822 72.7619C49.5345 72.4518 48.8954 71.927 48.4458 71.2538C47.9963 70.5806 47.7563 69.7893 47.7563 68.9798C47.7563 68.4415 47.8624 67.9084 48.0686 67.4112C48.2749 66.9139 48.5772 66.4622 48.9582 66.0819C49.3392 65.7016 49.7914 65.4002 50.2891 65.1948C50.7867 64.9895 51.3199 64.8843 51.8582 64.8853Z"
fill="#2D3039"
/>
</svg>
<p
class="edit-post-history__error_heading"
>
Unable to load edit history
</p>
<p
class="edit-post-history__error_subheading"
>
There was an error loading the history for this message. Check your network connection or try again later.
</p>
</div>
</div>
</div>
</Connect(SearchResultsHeader)>
<Connect(Component)
isCurrent={true}
post={
Object {
"channel_id": "",
"create_at": 0,
"delete_at": 0,
"edit_at": 0,
"hashtags": "",
"id": "post_id",
"is_pinned": false,
"message": "post message",
"metadata": Object {
"embeds": Array [],
"emojis": Array [],
"files": Array [],
"images": Object {},
"reactions": Array [],
},
"original_id": "",
"pending_post_id": "",
"props": Object {},
"reply_count": 0,
"root_id": "",
"type": "system_add_remove",
"update_at": 0,
"user_id": "user_id",
}
}
/>
<Connect(Component)
key="post_id_1"
post={
Object {
"channel_id": "",
"create_at": 0,
"delete_at": 0,
"edit_at": 0,
"hashtags": "",
"id": "post_id_1",
"is_pinned": false,
"message": "post message version 1",
"metadata": Object {
"embeds": Array [],
"emojis": Array [],
"files": Array [],
"images": Object {},
"reactions": Array [],
},
"original_id": "",
"pending_post_id": "",
"props": Object {},
"reply_count": 0,
"root_id": "",
"type": "system_add_remove",
"update_at": 0,
"user_id": "user_id",
}
}
/>
<Connect(Component)
key="post_id_2"
post={
Object {
"channel_id": "",
"create_at": 0,
"delete_at": 0,
"edit_at": 0,
"hashtags": "",
"id": "post_id_2",
"is_pinned": false,
"message": "post message version 2",
"metadata": Object {
"embeds": Array [],
"emojis": Array [],
"files": Array [],
"images": Object {},
"reactions": Array [],
},
"original_id": "",
"pending_post_id": "",
"props": Object {},
"reply_count": 0,
"root_id": "",
"type": "system_add_remove",
"update_at": 0,
"user_id": "user_id",
}
}
/>
</Scrollbars>
<div
style="position: absolute; height: 6px; transition: opacity 500ms; opacity: 0; display: none; right: 2px; bottom: 2px; left: 2px; border-radius: 3px;"
>
<div
class="scrollbar--horizontal"
style="position: relative; display: block; height: 100%;"
/>
</div>
<div
style="position: absolute; width: 6px; transition: opacity 500ms; opacity: 0; display: none; right: 2px; bottom: 2px; top: 2px; border-radius: 3px;"
>
<div
class="scrollbar--vertical"
style="position: relative; display: block; width: 100%;"
/>
</div>
</div>
</div>
</div>
`;
exports[`components/post_edit_history should match snapshot 1`] = `
<div>
<div
class="sidebar-right__body"
id="rhsContainer"
>
<div
style="position: relative; overflow: hidden; width: 100%; height: 100%;"
>
<div
class="scrollbar--view"
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;"
>
<div
class="sidebar--right__header"
>
<span
class="sidebar--right__title"
>
Edit History
<div
class="sidebar--right__title__channel"
>
channel_display_name
</div>
</span>
<div
class="pull-right"
>
<button
class="sidebar--right__expand btn-icon"
type="button"
>
<i
aria-label="Expand Sidebar Icon"
class="icon icon-arrow-expand"
/>
<i
aria-label="Collapse Sidebar Icon"
class="icon icon-arrow-collapse"
/>
</button>
<button
aria-label="Close"
class="sidebar--right__close btn-icon"
id="searchResultsCloseButton"
type="button"
>
<i
aria-label="Close Sidebar Icon"
class="icon icon-close"
/>
</button>
</div>
</div>
<div
class="edit-post-history__container edit-post-history__container__background"
>
<div
aria-label="At 12:00 AM Thursday, January 1, Someone wrote, post message"
class="a11y__section post"
id="searchResult_post_id"
>
<div
aria-hidden="true"
class="edit-post-history__title__container"
>
<div
class="edit-post-history__date__badge__container"
>
<button
aria-label="Toggle to see an old message."
class="IconButtonRoot-hOPlUx gmplBN edit-post-history__icon__button"
disabled=""
>
<i
class="IconRoot-jSSaqj bQHSub icon-chevron-down"
color="inherit"
size="16"
/>
</button>
<span
class="edit-post-history__date"
>
<time
datetime="1970-01-01T00:00:00.000"
>
January 01, 1970 at 12:00 AM
</time>
</span>
<div
class="edit-post-history__current__indicator"
>
Current Version
</div>
</div>
</div>
<div
class="edit-post-history__content_container"
>
<div
class="edit-post-history__header"
>
<span
class="profile-icon"
>
<img
alt="user profile image"
class="Avatar Avatar-sm avatar-post-preview"
loading="lazy"
src="/api/v4/users/user_id/image?_=0"
tabindex="0"
/>
</span>
<div
class="edit-post-history__header__username"
>
<div
class="user-popover"
>
Someone
</div>
</div>
</div>
<div
class="post__content"
>
<div
class="search-item-snippet post__body"
>
<div
class="post-message post-message--collapsed"
>
<div
class="post-message__text-container"
style="max-height: 600px;"
>
<div
aria-readonly="true"
class="post-message__text"
dir="auto"
id="rhsPostMessageText_post_id"
tabindex="0"
>
<p>
post message
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="edit-post-history__container"
>
<div
aria-label="At 12:00 AM Thursday, January 1, Someone wrote, post message version 1"
class="a11y__section post"
id="searchResult_post_id_1"
>
<div
aria-hidden="true"
class="edit-post-history__title__container"
>
<div
class="edit-post-history__date__badge__container"
>
<button
aria-label="Toggle to see an old message."
class="IconButtonRoot-hOPlUx gmplBN edit-post-history__icon__button"
disabled=""
>
<i
class="IconRoot-jSSaqj bQHSub icon-chevron-right"
color="inherit"
size="16"
/>
</button>
<span
class="edit-post-history__date"
>
<time
datetime="1970-01-01T00:00:00.000"
>
January 01, 1970 at 12:00 AM
</time>
</span>
</div>
<button
aria-label="Select to restore an old message."
class="IconButtonRoot-hOPlUx gBoGLw edit-post-history__icon__button restore-icon"
>
<i
class="IconRoot-jSSaqj bQHSub icon-restore"
color="inherit"
size="16"
/>
</button>
</div>
</div>
</div>
<div
class="edit-post-history__container"
>
<div
aria-label="At 12:00 AM Thursday, January 1, Someone wrote, post message version 2"
class="a11y__section post"
id="searchResult_post_id_2"
>
<div
aria-hidden="true"
class="edit-post-history__title__container"
>
<div
class="edit-post-history__date__badge__container"
>
<button
aria-label="Toggle to see an old message."
class="IconButtonRoot-hOPlUx gmplBN edit-post-history__icon__button"
disabled=""
>
<i
class="IconRoot-jSSaqj bQHSub icon-chevron-right"
color="inherit"
size="16"
/>
</button>
<span
class="edit-post-history__date"
>
<time
datetime="1970-01-01T00:00:00.000"
>
January 01, 1970 at 12:00 AM
</time>
</span>
</div>
<button
aria-label="Select to restore an old message."
class="IconButtonRoot-hOPlUx gBoGLw edit-post-history__icon__button restore-icon"
>
<i
class="IconRoot-jSSaqj bQHSub icon-restore"
color="inherit"
size="16"
/>
</button>
</div>
</div>
</div>
</div>
<div
style="position: absolute; height: 6px; transition: opacity 500ms; opacity: 0; display: none; right: 2px; bottom: 2px; left: 2px; border-radius: 3px;"
>
<div
class="scrollbar--horizontal"
style="position: relative; display: block; height: 100%;"
/>
</div>
<div
style="position: absolute; width: 6px; transition: opacity 500ms; opacity: 0; display: none; right: 2px; bottom: 2px; top: 2px; border-radius: 3px;"
>
<div
class="scrollbar--vertical"
style="position: relative; display: block; width: 100%;"
/>
</div>
</div>
</div>
</div>
`;

2
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),
};
}

34
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;
}
}

44
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(<PostEditHistory {...baseProps}/>);
let wrapper: HTMLElement;
expect(wrapper).toMatchSnapshot();
await act(async () => {
const {container} = renderWithIntlAndStore(<PostEditHistory {...baseProps}/>, {});
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(<PostEditHistory {...baseProps}/>, {});
wrapper = container;
});
await act(async () => {
expect(wrapper).toMatchSnapshot();
expect(mock).toBeCalledWith(baseProps.originalPost.id);
});
});
});

86
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<string, unknown>): JSX.Element => (
<div
@@ -37,25 +43,67 @@ const renderThumbVertical = (props: Record<string, unknown>): JSX.Element => (
const PostEditHistory = ({
channelDisplayName,
originalPost,
postEditHistory,
}: PropsFromRedux) => {
const [postEditHistory, setPostEditHistory] = useState<Post[]>([]);
const [hasError, setHasError] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(false);
const dispatch = useDispatch<DispatchFunc>();
const scrollbars = useRef<Scrollbars | null>(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 = (
<div className='edit-post-history__error_container'>
<div className='edit-post-history__error_item'>
<AlertIcon
width={127}
height={127}
/>
<p className='edit-post-history__error_heading'>
{retrieveErrorHeading}
</p>
<p className='edit-post-history__error_subheading'>
{retrieveErrorSubheading}
</p>
</div>
</div>
);
if (postEditHistory.length === 0) {
if (isLoading && postEditHistory.length === 0) {
return (
<div
id='rhsContainer'
@@ -72,12 +120,20 @@ const PostEditHistory = ({
);
}
const postEditItems = postEditHistory.map((postEdited) => (
const currentItem = (
<EditedPostItem
post={originalPost}
key={originalPost.id}
isCurrent={true}
/>
);
const postEditItems = [currentItem, ...postEditHistory.map((postEdited) => (
<EditedPostItem
key={postEdited.id}
post={postEdited}
/>
));
))];
return (
<div
@@ -97,11 +153,7 @@ const PostEditHistory = ({
{title}
<div className='sidebar--right__title__channel'>{channelDisplayName}</div>
</SearchResultsHeader>
<EditedPostItem
post={originalPost}
isCurrent={true}
/>
{postEditItems}
{hasError ? errorContainer : postEditItems}
</Scrollbars>
</div>
);

3
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),
};
}

1
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<HTMLButtonElement>) => {
e.preventDefault();
if (post?.id) {
actions.getPostEditHistory(post.id);
actions.openShowEditHistory(post);
}
};

2
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",