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

Revert "[GH-5915] Clicking on @mention of a user in a post shows the profile popover (#6129)" (#6289)

Browse Source 
This reverts commit 83f819451a.
This commit is contained in:
Harrison Healey
2017-05-01 17:40:54 -04:00
committed by Joram Wilander
parent 935405f19d
commit 581bd8637f
20 changed files with 102 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/add_users_to_team/add_users_to_team.jsx
View File

@@ -2,7 +2,7 @@
// See License.txt for license information.
import MultiSelect from 'components/multiselect/multiselect.jsx';
import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
import ProfilePicture from 'components/profile_picture.jsx';
import {addUsersToTeam} from 'actions/team_actions.jsx';
import {searchUsersNotInTeam} from 'actions/user_actions.jsx';

2
webapp/components/more_direct_channels/more_direct_channels.jsx
View File

@@ -2,7 +2,7 @@
// See License.txt for license information.
import MultiSelect from 'components/multiselect/multiselect.jsx';
import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
import ProfilePicture from 'components/profile_picture.jsx';
import {searchUsers} from 'actions/user_actions.jsx';
import {openDirectChannelToUser, openGroupChannelToUsers} from 'actions/channel_actions.jsx';

2
webapp/components/popover_list_members/popover_list_members.jsx
View File

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
import ProfilePicture from 'components/profile_picture.jsx';
import TeamStore from 'stores/team_store.jsx';
import UserStore from 'stores/user_store.jsx';

2
webapp/components/post_view/components/post.jsx
View File

@@ -3,7 +3,7 @@
import PostHeader from './post_header.jsx';
import PostBody from './post_body.jsx';
import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
import ProfilePicture from 'components/profile_picture.jsx';
import Constants from 'utils/constants.jsx';
const ActionTypes = Constants.ActionTypes;

2
webapp/components/post_view/components/post_header.jsx
View File

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import UserProfile from 'components/profile_popover/username_profile_popover.jsx';
import UserProfile from 'components/user_profile.jsx';
import PostInfo from './post_info.jsx';
import {FormattedMessage} from 'react-intl';

40
webapp/components/post_view/components/post_message_view.jsx
View File

@@ -3,9 +3,6 @@
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {Parser, ProcessNodeDefinitions} from 'html-to-react';
import AtMentionProfile from 'components/profile_popover/atmention_profile_popover.jsx';
import Constants from 'utils/constants.jsx';
import * as PostUtils from 'utils/post_utils.jsx';
@@ -91,38 +88,6 @@ export default class PostMessageView extends React.Component {
);
}
postMessageHtmlToComponent(html) {
const parser = new Parser();
const attrib = 'data-mention';
const processNodeDefinitions = new ProcessNodeDefinitions(React);
function isValidNode() {
return true;
}
const processingInstructions = [
{
replaceChildren: true,
shouldProcessNode: (node) => node.attribs && node.attribs[attrib] && this.props.usernameMap.hasOwnProperty(node.attribs[attrib]),
processNode: (node) => {
const username = node.attribs[attrib];
return (
<AtMentionProfile
user={this.props.usernameMap[username]}
username={username}
/>
);
}
},
{
shouldProcessNode: () => true,
processNode: processNodeDefinitions.processDefaultNode
}
];
return parser.parseWithInstructions(html, isValidNode, processingInstructions);
}
render() {
if (this.props.post.state === Constants.POST_DELETED) {
return this.renderDeletedPost();
@@ -146,17 +111,14 @@ export default class PostMessageView extends React.Component {
return <div>{renderedSystemMessage}</div>;
}
const htmlFormattedText = TextFormatting.formatText(this.props.post.message, options);
const postMessageComponent = this.postMessageHtmlToComponent(htmlFormattedText);
return (
<div>
<span
id={this.props.isLastPost ? 'lastPostMessageText' : null}
className='post-message__text'
onClick={Utils.handleFormattedTextClick}
dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, options)}}
/>
{postMessageComponent}
{this.renderEditedIndicator()}
</div>
);

3
webapp/components/profile_popover/picture_profile_popover.jsx → webapp/components/profile_picture.jsx
View File

@@ -1,11 +1,10 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import ProfilePopover from './profile_popover.jsx';
import * as Utils from 'utils/utils.jsx';
import React from 'react';
import StatusIcon from 'components/status_icon.jsx';
import StatusIcon from './status_icon.jsx';
import {OverlayTrigger} from 'react-bootstrap';
export default class ProfilePicture extends React.Component {

150
webapp/components/profile_popover/profile_popover.jsx → webapp/components/profile_popover.jsx
View File

@@ -23,19 +23,11 @@ export default class ProfilePopover extends React.Component {
this.initWebrtc = this.initWebrtc.bind(this);
this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this);
this.generateImage = this.generateImage.bind(this);
this.generateFullname = this.generateFullname.bind(this);
this.generatePosition = this.generatePosition.bind(this);
this.generateWebrtc = this.generateWebrtc.bind(this);
this.generateEmail = this.generateEmail.bind(this);
this.generateDirectMessage = this.generateDirectMessage.bind(this);
this.state = {
currentUserId: UserStore.getCurrentId(),
loadingDMChannel: -1
};
}
shouldComponentUpdate(nextProps) {
if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
return true;
@@ -110,63 +102,19 @@ export default class ProfilePopover extends React.Component {
}
}
generateImage(src) {
return (
<img
className='user-popover__image'
src={src}
height='128'
width='128'
key='user-popover-image'
/>
);
}
render() {
const popoverProps = Object.assign({}, this.props);
delete popoverProps.user;
delete popoverProps.src;
delete popoverProps.status;
delete popoverProps.isBusy;
delete popoverProps.hide;
generateFullname() {
const fullname = Utils.getFullName(this.props.user);
if (fullname) {
return (
<OverlayTrigger
delayShow={Constants.WEBRTC_TIME_DELAY}
placement='top'
overlay={<Tooltip id='fullNameTooltip'>{fullname}</Tooltip>}
>
<div
className='overflow--ellipsis text-nowrap padding-bottom'
>
{fullname}
</div>
</OverlayTrigger>
);
}
return '';
}
generatePosition() {
if (this.props.user.hasOwnProperty('position')) {
const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH);
return (
<OverlayTrigger
delayShow={Constants.WEBRTC_TIME_DELAY}
placement='top'
overlay={<Tooltip id='positionTooltip'>{position}</Tooltip>}
>
<div
className='overflow--ellipsis text-nowrap padding-bottom'
>
{position}
</div>
</OverlayTrigger>
);
}
return '';
}
generateWebrtc() {
let webrtc;
const userMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
const webrtcEnabled = global.mm_config.EnableWebrtc === 'true' && userMedia && Utils.isFeatureEnabled(PreReleaseFeatures.WEBRTC_PREVIEW);
if (webrtcEnabled && this.props.user.id !== this.state.currentUserId) {
const isOnline = this.props.status !== UserStatuses.OFFLINE;
let webrtcMessage;
@@ -193,7 +141,7 @@ export default class ProfilePopover extends React.Component {
);
}
return (
webrtc = (
<div
data-toggle='tooltip'
key='makeCall'
@@ -212,15 +160,54 @@ export default class ProfilePopover extends React.Component {
);
}
return '';
}
var dataContent = [];
dataContent.push(
<img
className='user-popover__image'
src={this.props.src}
height='128'
width='128'
key='user-popover-image'
/>
);
generateEmail() {
const email = this.props.user.hasOwnProperty('email') ? this.props.user.email : '';
const showEmail = (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user === UserStore.getCurrentUser());
const fullname = Utils.getFullName(this.props.user);
if (fullname) {
dataContent.push(
<OverlayTrigger
delayShow={Constants.WEBRTC_TIME_DELAY}
placement='top'
overlay={<Tooltip id='fullNameTooltip'>{fullname}</Tooltip>}
>
<div
className='overflow--ellipsis text-nowrap padding-bottom'
>
{fullname}
</div>
</OverlayTrigger>
);
}
if (email !== '' && showEmail) {
return (
if (this.props.user.position) {
const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH);
dataContent.push(
<OverlayTrigger
delayShow={Constants.WEBRTC_TIME_DELAY}
placement='top'
overlay={<Tooltip id='positionTooltip'>{position}</Tooltip>}
>
<div
className='overflow--ellipsis text-nowrap padding-bottom'
>
{position}
</div>
</OverlayTrigger>
);
}
const email = this.props.user.email;
if (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user === UserStore.getCurrentUser()) {
dataContent.push(
<div
data-toggle='tooltip'
title={email}
@@ -236,12 +223,8 @@ export default class ProfilePopover extends React.Component {
);
}
return '';
}
generateDirectMessage() {
if (this.props.user.id !== UserStore.getCurrentId()) {
return (
dataContent.push(
<div
data-toggle='tooltip'
key='user-popover-dm'
@@ -260,27 +243,16 @@ export default class ProfilePopover extends React.Component {
</a>
</div>
);
dataContent.push(webrtc);
}
return '';
}
render() {
return (
<Popover
arrowOffsetLeft={this.props.arrowOffsetLeft}
arrowOffsetTop={this.props.arrowOffsetTop}
positionLeft={this.props.positionLeft}
positionTop={this.props.positionTop}
{...popoverProps}
title={'@' + this.props.user.username}
id='user-profile-popover'
>
{this.generateImage(this.props.src)}
{this.generateFullname()}
{this.generatePosition()}
{this.generateEmail()}
{this.generateDirectMessage()}
{this.generateWebrtc()}
{dataContent}
</Popover>
);
}

95
webapp/components/profile_popover/atmention_profile_popover.jsx
View File

@@ -1,95 +0,0 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import ProfilePopover from './profile_popover.jsx';
import * as Utils from 'utils/utils.jsx';
import Client from 'client/web_client.jsx';
import {OverlayTrigger} from 'react-bootstrap';
import React from 'react';
export default class AtMentionProfile extends React.Component {
constructor(props) {
super(props);
this.hideProfilePopover = this.hideProfilePopover.bind(this);
}
shouldComponentUpdate(nextProps) {
if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
return true;
}
if (nextProps.overwriteImage !== this.props.overwriteImage) {
return true;
}
if (nextProps.disablePopover !== this.props.disablePopover) {
return true;
}
if (nextProps.displayNameType !== this.props.displayNameType) {
return true;
}
if (nextProps.status !== this.props.status) {
return true;
}
if (nextProps.isBusy !== this.props.isBusy) {
return true;
}
return false;
}
hideProfilePopover() {
this.refs.overlay.hide();
}
render() {
let profileImg = '';
if (this.props.user) {
profileImg = Client.getUsersRoute() + '/' + this.props.user.id + '/image?time=' + this.props.user.last_picture_update;
}
if (this.props.disablePopover) {
return <a className='mention-link'>{'@' + this.props.username}</a>;
}
return (
<OverlayTrigger
ref='overlay'
trigger='click'
placement='right'
rootClose={true}
overlay={
<ProfilePopover
user={this.props.user}
src={profileImg}
status={this.props.status}
isBusy={this.props.isBusy}
hide={this.hideProfilePopover}
/>
}
>
<a className='mention-link'>{'@' + this.props.username}</a>
</OverlayTrigger>
);
}
}
AtMentionProfile.defaultProps = {
overwriteImage: '',
disablePopover: false
};
AtMentionProfile.propTypes = {
user: React.PropTypes.object.isRequired,
username: React.PropTypes.string.isRequired,
overwriteImage: React.PropTypes.string,
disablePopover: React.PropTypes.bool,
displayNameType: React.PropTypes.string,
status: React.PropTypes.string,
isBusy: React.PropTypes.bool
};

4
webapp/components/rhs_comment.jsx
View File

@@ -1,11 +1,11 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import UserProfile from './profile_popover/username_profile_popover.jsx';
import UserProfile from './user_profile.jsx';
import FileAttachmentListContainer from './file_attachment_list_container.jsx';
import PendingPostOptions from 'components/post_view/components/pending_post_options.jsx';
import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
import ProfilePicture from 'components/profile_picture.jsx';
import ReactionListContainer from 'components/post_view/components/reaction_list_container.jsx';
import RhsDropdown from 'components/rhs_dropdown.jsx';

4
webapp/components/rhs_root_post.jsx
View File

@@ -1,11 +1,11 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import UserProfile from './profile_popover/username_profile_popover.jsx';
import UserProfile from './user_profile.jsx';
import PostBodyAdditionalContent from 'components/post_view/components/post_body_additional_content.jsx';
import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
import FileAttachmentListContainer from './file_attachment_list_container.jsx';
import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
import ProfilePicture from 'components/profile_picture.jsx';
import ReactionListContainer from 'components/post_view/components/reaction_list_container.jsx';
import RhsDropdown from 'components/rhs_dropdown.jsx';

4
webapp/components/search_results_item.jsx
View File

@@ -3,9 +3,9 @@
import $ from 'jquery';
import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
import UserProfile from './profile_popover/username_profile_popover.jsx';
import UserProfile from './user_profile.jsx';
import FileAttachmentListContainer from './file_attachment_list_container.jsx';
import ProfilePicture from './profile_popover/picture_profile_popover.jsx';
import ProfilePicture from './profile_picture.jsx';
import TeamStore from 'stores/team_store.jsx';
import UserStore from 'stores/user_store.jsx';

2
webapp/components/user_list_row.jsx
View File

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
import ProfilePicture from 'components/profile_picture.jsx';
import UserStore from 'stores/user_store.jsx';
import PreferenceStore from 'stores/preference_store.jsx';

0
webapp/components/profile_popover/username_profile_popover.jsx → webapp/components/user_profile.jsx
View File

1
webapp/package.json
View File

@@ -15,7 +15,6 @@
"flux": "3.1.2",
"font-awesome": "4.7.0",
"highlight.js": "9.10.0",
"html-to-react": "1.2.7",
"inobounce": "0.1.4",
"intl": "1.2.5",
"jasny-bootstrap": "3.1.3",

38
webapp/tests/utils/formatting_at_mentions.test.jsx
View File

@@ -50,6 +50,21 @@ describe('TextFormatting.AtMentions', function() {
);
});
it('Implied at mentions', function() {
// PLT-4454 Assume users exist for things that look like at mentions until we support the new mention syntax
assert.equal(
TextFormatting.autolinkAtMentions('@user', new Map(), {}),
'$MM_ATMENTION0',
'should imply user exists and replace mention with token'
);
assert.equal(
TextFormatting.autolinkAtMentions('@user.', new Map(), {}),
'$MM_ATMENTION0.',
'should assume username doesn\'t end in punctuation'
);
});
it('Not at mentions', function() {
assert.equal(
TextFormatting.autolinkAtMentions('user@host', new Map(), {user: {}, host: {}}),
@@ -60,28 +75,5 @@ describe('TextFormatting.AtMentions', function() {
TextFormatting.autolinkAtMentions('user@email.com', new Map(), {user: {}, email: {}}),
'user@email.com'
);
assert.equal(
TextFormatting.autolinkAtMentions('@user', new Map(), {}),
'@user'
);
assert.equal(
TextFormatting.autolinkAtMentions('@user.', new Map(), {}),
'@user.',
'should assume username doesn\'t end in punctuation'
);
assert.equal(
TextFormatting.autolinkAtMentions('@will', new Map(), {william: {}}),
'@will',
'should return same text without token'
);
assert.equal(
TextFormatting.autolinkAtMentions('@william', new Map(), {will: {}}),
'@william',
'should return same text without token'
);
});
});

2
webapp/tests/utils/formatting_hashtags.test.jsx
View File

@@ -166,7 +166,7 @@ describe('TextFormatting.Hashtags', function() {
};
assert.equal(
TextFormatting.formatText('#@test', options).trim(),
"<p>#<span data-mention='test'><a class='mention-link' href='#'>@test</a></span></p>"
"<p>#<a class='mention-link' href='#' data-mention='test'>@test</a></p>"
);
assert.equal(

4
webapp/utils/channel_intro_messages.jsx
View File

@@ -5,14 +5,14 @@ import * as Utils from './utils.jsx';
import ChannelInviteModal from 'components/channel_invite_modal';
import EditChannelHeaderModal from 'components/edit_channel_header_modal.jsx';
import ToggleModalButton from 'components/toggle_modal_button.jsx';
import UserProfile from 'components/profile_popover/username_profile_popover.jsx';
import UserProfile from 'components/user_profile.jsx';
import ChannelStore from 'stores/channel_store.jsx';
import UserStore from 'stores/user_store.jsx';
import TeamStore from 'stores/team_store.jsx';
import Constants from 'utils/constants.jsx';
import * as GlobalActions from 'actions/global_actions.jsx';
import Client from 'client/web_client.jsx';
import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
import ProfilePicture from 'components/profile_picture.jsx';
import {showManagementOptions} from './channel_utils.jsx';

10
webapp/utils/text_formatting.jsx
View File

@@ -166,13 +166,8 @@ export function autolinkAtMentions(text, tokens, usernameMap) {
const index = tokens.size;
const alias = `$MM_ATMENTION${index}`;
let tokenValue = `<span data-mention='${username}'><a class='mention-link' href='#'>${mention}</a></span>`;
if (Constants.SPECIAL_MENTIONS.indexOf(username) >= 0) {
tokenValue = mention;
}
tokens.set(alias, {
value: tokenValue,
value: `<a class='mention-link' href='#' data-mention='${username}'>${mention}</a>`,
originalText: mention
});
return alias;
@@ -186,7 +181,8 @@ export function autolinkAtMentions(text, tokens, usernameMap) {
const truncated = usernameLower.substring(0, c);
const suffix = usernameLower.substring(c);
if (mentionExists(truncated) && (c === usernameLower.length || punctuation.test(usernameLower[c]))) {
// If we've found a username or run out of punctuation to trim off, render it as an at mention
if (mentionExists(truncated) || !punctuation.test(truncated[truncated.length - 1])) {
const alias = addToken(truncated, '@' + truncated);
return prefix + alias + suffix;
}

16
webapp/utils/utils.jsx
View File

@@ -989,16 +989,12 @@ export function changeOpacity(oldColor, opacity) {
}
export function getFullName(user) {
if (user !== null && typeof user !== 'undefined' && typeof user === 'object') {
const firstName = user.hasOwnProperty('first_name') ? user.first_name : '';
const lastName = user.hasOwnProperty('last_name') ? user.last_name : '';
if (firstName && lastName) {
return firstName + ' ' + lastName;
} else if (firstName) {
return firstName;
} else if (lastName) {
return lastName;
}
if (user.first_name && user.last_name) {
return user.first_name + ' ' + user.last_name;
} else if (user.first_name) {
return user.first_name;
} else if (user.last_name) {
return user.last_name;
}
return '';