IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

MM-50953 Post textbox cleanup (#23971)

Browse Source 
* Remove unused code around scrollbarWidth

* MM-50953 Remove unused code for popover at mentions

* Add tests for messageHtmlToComponent wrapper
This commit is contained in:
Harrison Healey 2023-08-10 15:22:48 -04:00 committed by GitHub
parent c4949a664d
commit 1f95a8f52b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 69 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap
View File

@ -16,10 +16,8 @@ exports[`components/TextBox should match snapshot with additional, optional prop
"render": [Function],
}
}
isRHS={true}
listComponent={[Function]}
listPosition="top"
listenForMentionKeyClick={true}
onBlur={[Function]}
onChange={[Function]}
onComposition={[Function]}
@ -109,7 +107,6 @@ exports[`components/TextBox should match snapshot with additional, optional prop
"hideUtilities": true,
}
}
isRHS={true}
mentionKeys={Array []}
message="some test text"
/>
@ -132,9 +129,7 @@ exports[`components/TextBox should match snapshot with required props 1`] = `
"render": [Function],
}
}
isRHS={false}
listComponent={[Function]}
listenForMentionKeyClick={false}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
@ -225,9 +220,7 @@ exports[`components/TextBox should throw error when new property is too long 1`]
"render": [Function],
}
}
isRHS={false}
listComponent={[Function]}
listenForMentionKeyClick={false}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}
@ -318,9 +311,7 @@ exports[`components/TextBox should throw error when value is too long 1`] = `
"render": [Function],
}
}
isRHS={false}
listComponent={[Function]}
listenForMentionKeyClick={false}
onBlur={[Function]}
onChange={[Function]}
onKeyDown={[Function]}

17
webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
View File

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {CSSProperties, useCallback, useEffect, useRef, useState} from 'react';
import React, {useCallback, useEffect, useRef, useState} from 'react';
import classNames from 'classnames';
import {FormattedMessage, useIntl} from 'react-intl';
import {EmoticonHappyOutlineIcon} from '@mattermost/compass-icons/components';
@ -167,7 +167,6 @@ const AdvanceTextEditor = ({
const editorActionsRef = useRef<HTMLDivElement>(null);
const editorBodyRef = useRef<HTMLDivElement>(null);
const [scrollbarWidth, setScrollbarWidth] = useState(0);
const [renderScrollbar, setRenderScrollbar] = useState(false);
const [showFormattingSpacer, setShowFormattingSpacer] = useState(shouldShowPreview);
const [keepEditorInFocus, setKeepEditorInFocus] = useState(false);
@ -176,13 +175,7 @@ const AdvanceTextEditor = ({
const handleHeightChange = useCallback((height: number, maxHeight: number) => {
setRenderScrollbar(height > maxHeight);
window.requestAnimationFrame(() => {
if (textboxRef.current) {
setScrollbarWidth(Utils.scrollbarWidth(textboxRef.current.getInputBox()));
}
});
}, [textboxRef]);
}, []);
const handleShowFormat = useCallback(() => {
setShowPreview(!shouldShowPreview);
@ -429,11 +422,6 @@ const AdvanceTextEditor = ({
'AdvancedTextEditor__attachment-disabled': !canUploadFiles,
scroll: renderScrollbar,
})}
style={
renderScrollbar && scrollbarWidth ? ({
'--detected-scrollbar-width': `${scrollbarWidth}px`,
} as CSSProperties) : undefined
}
>
<div
id={'speak-'}
@ -485,7 +473,6 @@ const AdvanceTextEditor = ({
characterLimit={maxPostSize}
preview={shouldShowPreview}
badConnection={badConnection}
listenForMentionKeyClick={true}
useChannelMentions={useChannelMentions}
rootId={postId}
onWidthChange={handleWidthChange}

7
webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
View File

@ -64,7 +64,6 @@ exports[`components/AtMention should match snapshot when mentioning current user
className="user-profile-popover"
hasMention={false}
hide={[Function]}
isRHS={false}
src="/api/v4/users/abc1/image"
userId="abc1"
/>
@ -97,7 +96,6 @@ exports[`components/AtMention should match snapshot when mentioning user 1`] = `
className="user-profile-popover"
hasMention={false}
hide={[Function]}
isRHS={false}
src="/api/v4/users/abc2/image"
userId="abc2"
/>
@ -130,7 +128,6 @@ exports[`components/AtMention should match snapshot when mentioning user contain
className="user-profile-popover"
hasMention={false}
hide={[Function]}
isRHS={false}
src="/api/v4/users/abc3/image"
userId="abc3"
/>
@ -164,7 +161,6 @@ exports[`components/AtMention should match snapshot when mentioning user contain
className="user-profile-popover"
hasMention={false}
hide={[Function]}
isRHS={false}
src="/api/v4/users/abc3/image"
userId="abc3"
/>
@ -197,7 +193,6 @@ exports[`components/AtMention should match snapshot when mentioning user followe
className="user-profile-popover"
hasMention={false}
hide={[Function]}
isRHS={false}
src="/api/v4/users/abc2/image"
userId="abc2"
/>
@ -231,7 +226,6 @@ exports[`components/AtMention should match snapshot when mentioning user with di
className="user-profile-popover"
hasMention={false}
hide={[Function]}
isRHS={false}
src="/api/v4/users/abc2/image"
userId="abc2"
/>
@ -264,7 +258,6 @@ exports[`components/AtMention should match snapshot when mentioning user with mi
className="user-profile-popover"
hasMention={false}
hide={[Function]}
isRHS={false}
src="/api/v4/users/abc2/image"
userId="abc2"
/>

3
webapp/channels/src/components/at_mention/at_mention.tsx
View File

@ -30,7 +30,6 @@ type Props = {
hasMention?: boolean;
disableHighlight?: boolean;
disableGroupHighlight?: boolean;
isRHS?: boolean;
}
type State = {
@ -43,7 +42,6 @@ export default class AtMention extends React.PureComponent<Props, State> {
buttonRef: React.RefObject<HTMLAnchorElement>;
static defaultProps: Partial<Props> = {
isRHS: false,
hasMention: false,
disableHighlight: false,
disableGroupHighlight: false,
@ -124,7 +122,6 @@ export default class AtMention extends React.PureComponent<Props, State> {
className='user-profile-popover'
userId={user.id}
src={Client4.getProfilePictureUrl(user.id, user.last_picture_update)}
isRHS={this.props.isRHS}
hasMention={this.props.hasMention}
hide={this.hideOverlay}
channelId={this.props.channelId}

6
webapp/channels/src/components/at_mention/at_mention_group.tsx
View File

@ -27,10 +27,6 @@ type Props = {
*/
group: Group;
/**
* Props to be passed through from AtMention to ProfilePopover
*/
isRHS?: boolean;
channelId?: string;
hasMention?: boolean;
}
@ -38,7 +34,6 @@ type Props = {
const AtMentionGroup = (props: Props) => {
const {
group,
isRHS,
channelId,
hasMention,
} = props;
@ -137,7 +132,6 @@ const AtMentionGroup = (props: Props) => {
className='user-profile-popover'
userId={showUser.id}
src={Client4.getProfilePictureUrl(showUser.id, showUser.last_picture_update)}
isRHS={isRHS}
channelId={channelId}
hasMention={hasMention}
hide={hideUserOverlay}

1
webapp/channels/src/components/channel_info_rhs/about_area_dm.tsx
View File

@ -94,7 +94,6 @@ const AboutAreaDM = ({channel, dmUser, actions}: Props) => {
src={Client4.getProfilePictureUrl(dmUser.user.id, dmUser.user.last_picture_update)}
isBot={dmUser.user.is_bot}
status={dmUser.status ? dmUser.status : undefined}
isRHS={true}
username={dmUser.display_name}
userId={dmUser.user.id}
channelId={channel.id}

1
webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
View File

@ -235,7 +235,6 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
<ProfilePicture
hasMention={false}
isEmoji={false}
isRHS={false}
popoverPlacement="right"
size="md"
src="/api/v4/users/user-1/image"

2
webapp/channels/src/components/channel_members_rhs/member.tsx
View File

@ -144,7 +144,6 @@ const Member = ({className, channel, member, index, totalUsers, editing, actions
userId={member.user.id}
src={profileSrc}
hide={hideProfilePopover}
isRHS={true}
hideStatus={member.user.is_bot}
/>
}
@ -152,7 +151,6 @@ const Member = ({className, channel, member, index, totalUsers, editing, actions
<span className='ProfileSpan'>
<Avatar>
<ProfilePicture
isRHS={true}
popoverPlacement='left'
size='sm'
status={member.status}

16
webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
View File

@ -33,7 +33,6 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
channelId="channel_id"
hasMention={false}
isEmoji={false}
isRHS={false}
popoverPlacement="right"
size="md"
src="/api/v4/users/user_id/image?_=0"
@ -50,7 +49,6 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
className="user-profile-popover"
hasMention={false}
hide={[Function]}
isRHS={false}
src="/api/v4/users/user_id/image?_=0"
userId="user_id"
/>
@ -110,7 +108,6 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
"wrapRichTextChunksInFragment": undefined,
}
}
isRHS={false}
src="/api/v4/users/user_id/image?_=0"
userId="user_id"
/>
@ -244,7 +241,6 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
enableFormatting={true}
hasImageProxy={false}
imagesMetadata={Object {}}
isRHS={false}
managedResourcePaths={Array []}
mentionKeys={Array []}
message="message"
@ -314,7 +310,6 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
channelId="channel_id"
hasMention={false}
isEmoji={false}
isRHS={false}
popoverPlacement="right"
size="md"
src="/api/v4/users/user_id/image?_=0"
@ -331,7 +326,6 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
className="user-profile-popover"
hasMention={false}
hide={[Function]}
isRHS={false}
src="/api/v4/users/user_id/image?_=0"
userId="user_id"
/>
@ -391,7 +385,6 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
"wrapRichTextChunksInFragment": undefined,
}
}
isRHS={false}
src="/api/v4/users/user_id/image?_=0"
userId="user_id"
/>
@ -525,7 +518,6 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
enableFormatting={true}
hasImageProxy={false}
imagesMetadata={Object {}}
isRHS={false}
managedResourcePaths={Array []}
mentionKeys={Array []}
message="message"
@ -601,7 +593,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
channelId="channel_id"
hasMention={false}
isEmoji={false}
isRHS={false}
popoverPlacement="right"
size="md"
src="/api/v4/users/user_id/image?_=0"
@ -618,7 +609,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
className="user-profile-popover"
hasMention={false}
hide={[Function]}
isRHS={false}
src="/api/v4/users/user_id/image?_=0"
userId="user_id"
/>
@ -678,7 +668,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
"wrapRichTextChunksInFragment": undefined,
}
}
isRHS={false}
src="/api/v4/users/user_id/image?_=0"
userId="user_id"
/>
@ -874,7 +863,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
enableFormatting={true}
hasImageProxy={false}
imagesMetadata={Object {}}
isRHS={false}
managedResourcePaths={Array []}
mentionKeys={Array []}
message="message"
@ -950,7 +938,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
channelId="channel_id"
hasMention={false}
isEmoji={false}
isRHS={false}
popoverPlacement="right"
size="md"
src="/api/v4/users/user_id/image?_=0"
@ -967,7 +954,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
className="user-profile-popover"
hasMention={false}
hide={[Function]}
isRHS={false}
src="/api/v4/users/user_id/image?_=0"
userId="user_id"
/>
@ -1027,7 +1013,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
"wrapRichTextChunksInFragment": undefined,
}
}
isRHS={false}
src="/api/v4/users/user_id/image?_=0"
userId="user_id"
/>
@ -1302,7 +1287,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
enableFormatting={true}
hasImageProxy={false}
imagesMetadata={Object {}}
isRHS={false}
managedResourcePaths={Array []}
mentionKeys={Array []}
message="message"

8
webapp/channels/src/components/markdown/markdown.tsx
View File

@ -29,11 +29,6 @@ type Props = {
*/
enableFormatting?: boolean;
/*
* Whether or not this text is part of the RHS
*/
isRHS?: boolean;
/*
* An array of paths on the server that are managed by another server
*/
@ -126,7 +121,6 @@ type Props = {
export default class Markdown extends React.PureComponent<Props> {
static defaultProps: Partial<Props> = {
options: {},
isRHS: false,
proxyImages: true,
imagesMetadata: {},
postId: '', // Needed to avoid proptypes console errors for cases like channel header, which doesn't have a proper value
@ -163,7 +157,7 @@ export default class Markdown extends React.PureComponent<Props> {
const htmlFormattedText = formatText(message, options, this.props.emojiMap);
return messageHtmlToComponent(htmlFormattedText, this.props.isRHS, {
return messageHtmlToComponent(htmlFormattedText, {
imageProps: this.props.imageProps,
imagesMetadata: this.props.imagesMetadata,
hasPluginTooltips: this.props.hasPluginTooltips,

1
webapp/channels/src/components/post_markdown/post_markdown.test.tsx
View File

@ -16,7 +16,6 @@ import PostMarkdown from './post_markdown';
describe('components/PostMarkdown', () => {
const baseProps = {
imageProps: {},
isRHS: false,
message: 'message',
post: TestHelper.getPostMock(),
mentionKeys: [{key: 'a'}, {key: 'b'}, {key: 'c'}],

7
webapp/channels/src/components/post_markdown/post_markdown.tsx
View File

@ -24,11 +24,6 @@ type Props = {
*/
imageProps?: Record<string, any>;
/*
* Whether or not this text is part of the RHS
*/
isRHS?: boolean;
/*
* The post text to be rendered
*/
@ -72,7 +67,6 @@ type Props = {
export default class PostMarkdown extends React.PureComponent<Props> {
static defaultProps = {
isRHS: false,
pluginHooks: [],
options: {},
showPostEditedIndicator: true,
@ -135,7 +129,6 @@ export default class PostMarkdown extends React.PureComponent<Props> {
return (
<Markdown
imageProps={this.props.imageProps}
isRHS={this.props.isRHS}
message={message}
proxyImages={proxyImages}
mentionKeys={mentionKeys}

3
webapp/channels/src/components/post_profile_picture/post_profile_picture.tsx
View File

@ -19,7 +19,6 @@ type Props = {
enablePostIconOverride: boolean;
hasImageProxy: boolean;
isBusy?: boolean;
isRHS?: boolean;
post: Post;
status?: string;
user: UserProfile;
@ -83,7 +82,6 @@ export default class PostProfilePicture extends React.PureComponent<Props> {
availabilityStatusOnPosts,
compactDisplay,
isBusy,
isRHS,
post,
user,
isBot,
@ -110,7 +108,6 @@ export default class PostProfilePicture extends React.PureComponent<Props> {
<ProfilePicture
hasMention={hasMention}
isBusy={isBusy}
isRHS={isRHS}
size='md'
src={src}
profileSrc={profileSrc}

5
webapp/channels/src/components/post_view/post_message_view/__snapshots__/post_message_view.test.tsx.snap
View File

@ -19,7 +19,6 @@ exports[`components/post_view/PostAttachment should match snapshot 1`] = `
"onImageLoaded": [Function],
}
}
isRHS={false}
mentionKeys={Array []}
message="post message"
options={Object {}}
@ -58,7 +57,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on Show Less
"onImageLoaded": [Function],
}
}
isRHS={false}
mentionKeys={Array []}
message="post message"
options={Object {}}
@ -97,7 +95,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on Show More
"onImageLoaded": [Function],
}
}
isRHS={false}
mentionKeys={Array []}
message="post message"
options={Object {}}
@ -154,7 +151,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on edited po
"onImageLoaded": [Function],
}
}
isRHS={false}
mentionKeys={Array []}
message="post message"
options={Object {}}
@ -194,7 +190,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on ephemeral
"onImageLoaded": [Function],
}
}
isRHS={false}
mentionKeys={Array []}
message="post message"
options={Object {}}

1
webapp/channels/src/components/post_view/post_message_view/post_message_view.tsx
View File

@ -154,7 +154,6 @@ export default class PostMessageView extends React.PureComponent<Props, State> {
<PostMarkdown
message={message}
imageProps={this.imageProps}
isRHS={isRHS}
options={options}
post={post}
channelId={post.channel_id}

1
webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap
View File

@ -49,7 +49,6 @@ exports[`components/ProfilePicture should match snapshot, profile and src, defau
hasMention={false}
hide={[Function]}
isBusy={true}
isRHS={false}
src="http://example.com/image.png"
userId="uid"
/>

2
webapp/channels/src/components/profile_picture/profile_picture.test.tsx
View File

@ -42,7 +42,6 @@ describe('components/ProfilePicture', () => {
const props: Props = {
...baseProps,
size: 'xl',
isRHS: true,
hasMention: true,
};
const wrapper = shallow(
@ -69,7 +68,6 @@ describe('components/ProfilePicture', () => {
...baseProps,
username: 'username',
size: 'xs',
isRHS: true,
hasMention: true,
};
const wrapper = shallow(

3
webapp/channels/src/components/profile_picture/profile_picture.tsx
View File

@ -20,7 +20,6 @@ type Props = {
hasMention?: boolean;
isBusy?: boolean;
isEmoji?: boolean;
isRHS?: boolean;
profileSrc?: string;
size?: ComponentProps<typeof Avatar>['size'];
src: string;
@ -42,7 +41,6 @@ type Props = {
export default class ProfilePicture extends React.PureComponent<Props> {
public static defaultProps = {
size: 'md',
isRHS: false,
isEmoji: false,
hasMention: false,
wrapperClass: '',
@ -81,7 +79,6 @@ export default class ProfilePicture extends React.PureComponent<Props> {
src={profileSrc}
isBusy={this.props.isBusy}
hide={this.hideProfilePopover}
isRHS={this.props.isRHS}
channelId={this.props.channelId}
hasMention={this.props.hasMention}
overwriteIcon={this.props.overwriteIcon}

1
webapp/channels/src/components/profile_popover/__snapshots__/profile_popover.test.tsx.snap
View File

@ -3566,7 +3566,6 @@ exports[`components/ProfilePopover should show the start call button when isCall
isCustomStatusExpired={false}
isInCurrentTeam={true}
isMobileView={false}
isRHS={false}
isTeamAdmin={false}
lastActivityTimestamp={1632146562846}
src="src"

8
webapp/channels/src/components/profile_popover/profile_popover.tsx
View File

@ -94,11 +94,6 @@ export interface ProfilePopoverProps extends Omit<React.ComponentProps<typeof Po
*/
returnFocus?: () => void;
/**
* Set to true if the popover was opened from the right-hand
* sidebar (comment thread, search results, etc.)
*/
isRHS?: boolean;
isBusy?: boolean;
isMobileView: boolean;
@ -211,7 +206,6 @@ class ProfilePopover extends React.PureComponent<ProfilePopoverProps, ProfilePop
return 'ProfilePopover';
}
static defaultProps = {
isRHS: false,
hasMention: false,
status: UserStatuses.OFFLINE,
customStatus: null,
@ -430,7 +424,7 @@ class ProfilePopover extends React.PureComponent<ProfilePopoverProps, ProfilePop
}
const keysToBeRemoved: Array<keyof ProfilePopoverProps> = ['user', 'userId', 'channelId', 'src', 'status', 'hideStatus', 'isBusy',
'hide', 'isRHS', 'hasMention', 'enableTimezone', 'currentUserId', 'currentTeamId', 'teamUrl', 'actions', 'isTeamAdmin',
'hide', 'hasMention', 'enableTimezone', 'currentUserId', 'currentTeamId', 'teamUrl', 'actions', 'isTeamAdmin',
'isChannelAdmin', 'canManageAnyChannelMembersInCurrentTeam', 'intl'];
const popoverProps: React.ComponentProps<typeof Popover> = Utils.deleteKeysFromObject({...this.props},
keysToBeRemoved);

3
webapp/channels/src/components/sidebar/sidebar_channel/sidebar_direct_channel/__snapshots__/sidebar_direct_channel.test.tsx.snap
View File

@ -26,7 +26,6 @@ exports[`components/sidebar/sidebar_channel/sidebar_direct_channel should match
<ProfilePicture
hasMention={false}
isEmoji={false}
isRHS={false}
newStatusIcon={true}
popoverPlacement="right"
size="xs"
@ -67,7 +66,6 @@ exports[`components/sidebar/sidebar_channel/sidebar_direct_channel should match
<ProfilePicture
hasMention={false}
isEmoji={false}
isRHS={false}
newStatusIcon={true}
popoverPlacement="right"
size="xs"
@ -109,7 +107,6 @@ exports[`components/sidebar/sidebar_channel/sidebar_direct_channel should match
<ProfilePicture
hasMention={false}
isEmoji={false}
isRHS={false}
newStatusIcon={true}
popoverPlacement="right"
size="xs"

38
webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx
View File

@ -4,8 +4,6 @@
import PropTypes from 'prop-types';
import React from 'react';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
import QuickInput from 'components/quick_input';
import Constants, {A11yCustomEventTypes} from 'utils/constants';
import * as Keyboard from 'utils/keyboard';
@ -104,11 +102,6 @@ export default class SuggestionBox extends React.PureComponent {
*/
onItemSelected: PropTypes.func,
/**
* Flags if the suggestion_box is for the RHS (Reply).
*/
isRHS: PropTypes.bool,
/**
* The number of characters required to show the suggestion list, defaults to 1
*/
@ -140,11 +133,6 @@ export default class SuggestionBox extends React.PureComponent {
*/
contextId: PropTypes.string,
/**
* If true, listen for clicks on a mention and populate the input with said mention, defaults to false
*/
listenForMentionKeyClick: PropTypes.bool,
/**
* Allows parent to access received suggestions
*/
@ -172,12 +160,10 @@ export default class SuggestionBox extends React.PureComponent {
renderNoResults: false,
shouldSearchCompleteText: false,
completeOnTab: true,
isRHS: false,
requiredCharacters: 1,
openOnFocus: false,
openWhenEmpty: false,
replaceAllInputOnSelect: false,
listenForMentionKeyClick: false,
forceSuggestionsWhenBlur: false,
alignWithTextbox: false,
};
@ -221,16 +207,9 @@ export default class SuggestionBox extends React.PureComponent {
}
componentDidMount() {
if (this.props.listenForMentionKeyClick) {
EventEmitter.addListener('mention_key_click', this.handleMentionKeyClick);
}
this.handlePretextChanged(this.pretext);
}
componentWillUnmount() {
EventEmitter.removeListener('mention_key_click', this.handleMentionKeyClick);
}
componentDidUpdate(prevProps) {
const {value} = this.props;
@ -248,21 +227,6 @@ export default class SuggestionBox extends React.PureComponent {
}
}
handleMentionKeyClick = (mentionKey, isRHS) => {
if (this.props.isRHS !== isRHS) {
return;
}
let insertText = '@' + mentionKey;
// if the current text does not end with a whitespace, then insert a space
if (this.props.value && (/[^\s]$/).test(this.props.value)) {
insertText = ' ' + insertText;
}
this.addTextAtCaret(insertText, '');
};
getTextbox = () => {
if (!this.inputRef.current) {
return null;
@ -792,7 +756,6 @@ export default class SuggestionBox extends React.PureComponent {
Reflect.deleteProperty(props, 'onComposition');
Reflect.deleteProperty(props, 'onItemSelected');
Reflect.deleteProperty(props, 'completeOnTab');
Reflect.deleteProperty(props, 'isRHS');
Reflect.deleteProperty(props, 'requiredCharacters');
Reflect.deleteProperty(props, 'openOnFocus');
Reflect.deleteProperty(props, 'openWhenEmpty');
@ -802,7 +765,6 @@ export default class SuggestionBox extends React.PureComponent {
Reflect.deleteProperty(props, 'replaceAllInputOnSelect');
Reflect.deleteProperty(props, 'renderDividers');
Reflect.deleteProperty(props, 'contextId');
Reflect.deleteProperty(props, 'listenForMentionKeyClick');
Reflect.deleteProperty(props, 'forceSuggestionsWhenBlur');
Reflect.deleteProperty(props, 'onSuggestionsReceived');
Reflect.deleteProperty(props, 'actions');

2
webapp/channels/src/components/terms_of_service/terms_of_service.tsx
View File

@ -188,7 +188,7 @@ export default class TermsOfService extends React.PureComponent<TermsOfServicePr
className='medium-center'
data-testid='termsOfService'
>
{messageHtmlToComponent(this.formattedText(this.state.customTermsOfServiceText), false, {mentions: false})}
{messageHtmlToComponent(this.formattedText(this.state.customTermsOfServiceText), {mentions: false})}
</div>
</div>
<div className='terms-of-service__footer medium-center'>

2
webapp/channels/src/components/textbox.test.tsx
View File

@ -71,10 +71,8 @@ describe('components/TextBox', () => {
handlePostError={() => {}}
suggestionListPosition='top'
emojiEnabled={true}
isRHS={true}
disabled={true}
badConnection={true}
listenForMentionKeyClick={true}
preview={true}
openWhenEmpty={true}
/>,

7
webapp/channels/src/components/textbox/textbox.tsx
View File

@ -51,11 +51,9 @@ export type Props = {
suggestionListPosition?: React.ComponentProps<typeof SuggestionList>['position'];
alignWithTextbox?: boolean;
emojiEnabled?: boolean;
isRHS?: boolean;
characterLimit: number;
disabled?: boolean;
badConnection?: boolean;
listenForMentionKeyClick?: boolean;
currentUserId: string;
currentTeamId: string;
preview?: boolean;
@ -84,8 +82,6 @@ export default class Textbox extends React.PureComponent<Props> {
static defaultProps = {
supportsCommands: true,
isRHS: false,
listenForMentionKeyClick: false,
inputComponent: AutosizeTextarea,
suggestionList: SuggestionList,
};
@ -292,7 +288,6 @@ export default class Textbox extends React.PureComponent<Props> {
onBlur={this.handleBlur}
>
<PostMarkdown
isRHS={this.props.isRHS}
message={this.props.value}
mentionKeys={[]}
channelId={this.props.channelId}
@ -332,10 +327,8 @@ export default class Textbox extends React.PureComponent<Props> {
channelId={this.props.channelId}
value={this.props.value}
renderDividers={ALL}
isRHS={this.props.isRHS}
disabled={this.props.disabled}
contextId={this.props.channelId}
listenForMentionKeyClick={this.props.listenForMentionKeyClick}
openWhenEmpty={this.props.openWhenEmpty}
alignWithTextbox={this.props.alignWithTextbox}
/>

4
webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap
View File

@ -11,7 +11,6 @@ exports[`components/UserProfile should match snapshot 1`] = `
hide={[Function]}
hideStatus={false}
isBusy={false}
isRHS={false}
overwriteName=""
src="/api/v4/users/undefined/image?_=0"
userId="user_id"
@ -46,7 +45,6 @@ exports[`components/UserProfile should match snapshot, when displayUsername is e
hide={[Function]}
hideStatus={false}
isBusy={false}
isRHS={false}
overwriteName=""
src="/api/v4/users/undefined/image?_=0"
userId="user_id"
@ -89,7 +87,6 @@ exports[`components/UserProfile should match snapshot, when user is shared 1`] =
hide={[Function]}
hideStatus={false}
isBusy={false}
isRHS={false}
overwriteName=""
src="/api/v4/users/undefined/image?_=0"
userId="user_id"
@ -128,7 +125,6 @@ exports[`components/UserProfile should match snapshot, with colorization 1`] = `
hide={[Function]}
hideStatus={false}
isBusy={false}
isRHS={false}
overwriteName=""
src="/api/v4/users/undefined/image?_=0"
userId="user_id"

1
webapp/channels/src/components/user_profile/user_profile.tsx
View File

@ -145,7 +145,6 @@ export default class UserProfile extends PureComponent<UserProfileProps> {
isBusy={isBusy}
hide={this.hideProfilePopover}
hideStatus={hideStatus}
isRHS={isRHS}
hasMention={hasMention}
overwriteName={overwriteName}
overwriteIcon={overwriteIcon}

17
webapp/channels/src/plugins/export.js
View File

@ -45,7 +45,22 @@ window.Luxon = require('luxon');
window.StyledComponents = require('styled-components');
// Functions exposed on window for plugins to use.
window.PostUtils = {formatText, messageHtmlToComponent};
window.PostUtils = {
formatText,
messageHtmlToComponent: (html, ...otherArgs) => {
// Previously, this function took an extra isRHS argument as the second parameter. For backwards compatibility,
// support calling this as either messageHtmlToComponent(html, options) or messageHtmlToComponent(html, isRhs, options)
let options;
if (otherArgs.length === 2) {
options = otherArgs[1];
} else if (otherArgs.length === 1 && typeof otherArgs[0] === 'object') {
options = otherArgs[0];
}
return messageHtmlToComponent(html, options);
},
};
window.openInteractiveDialog = openInteractiveDialog;
window.useNotifyAdmin = useNotifyAdmin;
window.WebappUtils = {

38
webapp/channels/src/plugins/export.test.js Normal file
View File

@ -0,0 +1,38 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import messageHtmlToComponent from 'utils/message_html_to_component';
import './export';
jest.mock('utils/message_html_to_component');
describe('messageHtmlToComponent wrapper', () => {
const message = 'test';
const options = {emoji: true, images: false};
const isRHS = false;
test('should call messageHtmlToComponent properly with only message', () => {
window.PostUtils.messageHtmlToComponent(message);
expect(messageHtmlToComponent).toHaveBeenCalledWith(message, undefined);
});
test('should call messageHtmlToComponent properly with message and options', () => {
window.PostUtils.messageHtmlToComponent(message, options);
expect(messageHtmlToComponent).toHaveBeenCalledWith(message, options);
});
test('should call messageHtmlToComponent properly with only message when deprecated isRHS parameter is passed', () => {
window.PostUtils.messageHtmlToComponent(message, isRHS);
expect(messageHtmlToComponent).toHaveBeenCalledWith(message, undefined);
});
test('should call messageHtmlToComponent properly with message and options when deprecated isRHS parameter is passed', () => {
window.PostUtils.messageHtmlToComponent(message, isRHS, options);
expect(messageHtmlToComponent).toHaveBeenCalledWith(message, options);
});
});

1
webapp/channels/src/plugins/test/__snapshots__/post_type.test.jsx.snap
View File

@ -84,7 +84,6 @@ exports[`plugins/PostMessageView should match snapshot with no extended post typ
"onImageLoaded": [Function],
}
}
isRHS={false}
mentionKeys={Array []}
message="this is some text"
options={Object {}}

4
webapp/channels/src/utils/__snapshots__/message_html_to_component.test.jsx.snap
View File

@ -12,7 +12,6 @@ exports[`messageHtmlToComponent At mention 1`] = `
disableGroupHighlight={false}
disableHighlight={false}
hasMention={true}
isRHS={false}
mentionName="joram"
>
@joram
@ -31,7 +30,6 @@ exports[`messageHtmlToComponent At mention 2`] = `
disableGroupHighlight={false}
disableHighlight={true}
hasMention={true}
isRHS={false}
mentionName="joram"
>
@joram
@ -49,7 +47,6 @@ exports[`messageHtmlToComponent At mention with group highlight disabled 1`] = `
disableGroupHighlight={false}
disableHighlight={false}
hasMention={true}
isRHS={false}
mentionName="developers"
>
@developers
@ -67,7 +64,6 @@ exports[`messageHtmlToComponent At mention with group highlight disabled 2`] = `
disableGroupHighlight={true}
disableHighlight={false}
hasMention={true}
isRHS={false}
mentionName="developers"
>
@developers

3
webapp/channels/src/utils/message_html_to_component.jsx
View File

@ -29,7 +29,7 @@ import AtPlanMention from 'components/at_plan_mention';
* - hasPluginTooltips - If specified, the LinkTooltip component is placed inside links. Defaults to false.
* - channelId = If specified, to be passed along to ProfilePopover via AtMention
*/
export function messageHtmlToComponent(html, isRHS, options = {}) {
export function messageHtmlToComponent(html, options = {}) {
if (!html) {
return null;
}
@ -101,7 +101,6 @@ export function messageHtmlToComponent(html, isRHS, options = {}) {
const callAtMention = (
<AtMention
mentionName={mentionName}
isRHS={isRHS}
hasMention={true}
disableHighlight={!mentionHighlight}
disableGroupHighlight={disableGroupHighlight}

18
webapp/channels/src/utils/message_html_to_component.test.jsx
View File

@ -43,7 +43,7 @@ const myFunction = () => {
`;
const html = TextFormatting.formatText(input);
expect(messageHtmlToComponent(html, false, {postId: 'randompostid'})).toMatchSnapshot();
expect(messageHtmlToComponent(html, {postId: 'randompostid'})).toMatchSnapshot();
});
test('html', () => {
@ -53,7 +53,7 @@ const myFunction = () => {
`;
const html = TextFormatting.formatText(input);
expect(messageHtmlToComponent(html, false, {postId: 'randompostid'})).toMatchSnapshot();
expect(messageHtmlToComponent(html, {postId: 'randompostid'})).toMatchSnapshot();
});
test('link without enabled tooltip plugins', () => {
@ -67,14 +67,14 @@ const myFunction = () => {
const input = 'lorem ipsum www.dolor.com sit amet';
const html = TextFormatting.formatText(input);
expect(messageHtmlToComponent(html, false, {hasPluginTooltips: true})).toMatchSnapshot();
expect(messageHtmlToComponent(html, {hasPluginTooltips: true})).toMatchSnapshot();
});
test('Inline markdown image', () => {
const options = {markdown: true};
const html = TextFormatting.formatText('![Mattermost](/images/icon.png) and a [link](link)', options);
const component = messageHtmlToComponent(html, false, {
const component = messageHtmlToComponent(html, {
hasPluginTooltips: false,
postId: 'post_id',
postType: Constants.PostTypes.HEADER_CHANGE,
@ -87,7 +87,7 @@ const myFunction = () => {
const options = {markdown: true};
const html = TextFormatting.formatText('[![Mattermost](images/icon.png)](images/icon.png)', options);
const component = messageHtmlToComponent(html, false, {
const component = messageHtmlToComponent(html, {
hasPluginTooltips: false,
postId: 'post_id',
postType: Constants.PostTypes.HEADER_CHANGE,
@ -100,7 +100,7 @@ const myFunction = () => {
const options = {mentionHighlight: true, atMentions: true, mentionKeys: [{key: '@joram'}]};
let html = TextFormatting.formatText('@joram', options);
let component = messageHtmlToComponent(html, false, {mentionHighlight: true});
let component = messageHtmlToComponent(html, {mentionHighlight: true});
expect(component).toMatchSnapshot();
expect(shallow(component).find(AtMention).prop('disableHighlight')).toBe(false);
@ -108,7 +108,7 @@ const myFunction = () => {
html = TextFormatting.formatText('@joram', options);
component = messageHtmlToComponent(html, false, {mentionHighlight: false});
component = messageHtmlToComponent(html, {mentionHighlight: false});
expect(component).toMatchSnapshot();
expect(shallow(component).find(AtMention).prop('disableHighlight')).toBe(true);
});
@ -117,7 +117,7 @@ const myFunction = () => {
const options = {mentionHighlight: true, atMentions: true, mentionKeys: [{key: '@joram'}]};
let html = TextFormatting.formatText('@developers', options);
let component = messageHtmlToComponent(html, false, {disableGroupHighlight: false});
let component = messageHtmlToComponent(html, {disableGroupHighlight: false});
expect(component).toMatchSnapshot();
expect(shallow(component).find(AtMention).prop('disableGroupHighlight')).toBe(false);
@ -125,7 +125,7 @@ const myFunction = () => {
html = TextFormatting.formatText('@developers', options);
component = messageHtmlToComponent(html, false, {disableGroupHighlight: true});
component = messageHtmlToComponent(html, {disableGroupHighlight: true});
expect(component).toMatchSnapshot();
expect(shallow(component).find(AtMention).prop('disableGroupHighlight')).toBe(true);
});