hunk.code_window:             windowHeight: Utils.windowHeight()
           });
       }
       onPreferenceChange() {
           this.setState({
               compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
  
hunk.labels: keep keep keep keep replace keep keep
hunk.after_edit:     onPreferenceChange(category) {
           let previewSuffix = '';
           if (category === Preferences.CATEGORY_DISPLAY_SETTINGS) {
               previewSuffix = '_' + Utils.generateId();
           }
  
hunk.file_path: webapp/components/rhs_thread.jsx
hunk.type: replace
file: // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
  // See License.txt for license information.
  
  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_picture.jsx';
  import ReactionListContainer from 'components/post_view/components/reaction_list_container.jsx';
  import RhsDropdown from 'components/rhs_dropdown.jsx';
  
  import ChannelStore from 'stores/channel_store.jsx';
  import UserStore from 'stores/user_store.jsx';
  import TeamStore from 'stores/team_store.jsx';
  
  import * as GlobalActions from 'actions/global_actions.jsx';
  import {flagPost, unflagPost} from 'actions/post_actions.jsx';
  
  import * as Utils from 'utils/utils.jsx';
  import * as PostUtils from 'utils/post_utils.jsx';
  
  import Constants from 'utils/constants.jsx';
  import {Tooltip, OverlayTrigger} from 'react-bootstrap';
  
  import {FormattedMessage} from 'react-intl';
  
  import React from 'react';
  
  export default class RhsRootPost extends React.Component {
      constructor(props) {
          super(props);
  
          this.handlePermalink = this.handlePermalink.bind(this);
          this.flagPost = this.flagPost.bind(this);
          this.unflagPost = this.unflagPost.bind(this);
  
          this.state = {};
      }
  
      handlePermalink(e) {
          e.preventDefault();
          GlobalActions.showGetPostLinkModal(this.props.post);
      }
  
      shouldComponentUpdate(nextProps) {
          if (nextProps.status !== this.props.status) {
              return true;
          }
  
          if (nextProps.compactDisplay !== this.props.compactDisplay) {
              return true;
          }
  
          if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) {
              return true;
          }
  
          if (nextProps.isFlagged !== this.props.isFlagged) {
              return true;
          }
  
          if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
              return true;
          }
  
          if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
              return true;
          }
  
          if (!Utils.areObjectsEqual(nextProps.currentUser, this.props.currentUser)) {
              return true;
          }
  
          return false;
      }
  
      flagPost(e) {
          e.preventDefault();
          flagPost(this.props.post.id);
      }
  
      unflagPost(e) {
          e.preventDefault();
          unflagPost(this.props.post.id);
      }
  
      render() {
          const post = this.props.post;
          const user = this.props.user;
          const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
          var isOwner = this.props.currentUser.id === post.user_id;
          var isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
          const isSystemMessage = post.type && post.type.startsWith(Constants.SYSTEM_MESSAGE_PREFIX);
          var timestamp = user ? user.update_at : 0;
          var channel = ChannelStore.get(post.channel_id);
          const flagIcon = Constants.FLAG_ICON_SVG;
  
          var type = 'Post';
          if (post.root_id.length > 0) {
              type = 'Comment';
          }
  
          var userCss = '';
          if (UserStore.getCurrentId() === post.user_id) {
              userCss = 'current--user';
          }
  
          var systemMessageClass = '';
          if (PostUtils.isSystemMessage(post)) {
              systemMessageClass = 'post--system';
          }
  
          var channelName;
          if (channel) {
              if (channel.type === 'D') {
                  channelName = (
                      <FormattedMessage
                          id='rhs_root.direct'
                          defaultMessage='Direct Message'
                      />
                  );
              } else {
                  channelName = channel.display_name;
              }
          }
  
          var dropdownContents = [];
  
          if (Utils.isMobile()) {
              if (this.props.isFlagged) {
                  dropdownContents.push(
                      <li
                          key='mobileFlag'
                          role='presentation'
                      >
                          <a
                              href='#'
                              onClick={this.unflagPost}
                          >
                              <FormattedMessage
                                  id='rhs_root.mobile.unflag'
                                  defaultMessage='Unflag'
                              />
                          </a>
                      </li>
                  );
              } else {
                  dropdownContents.push(
                      <li
                          key='mobileFlag'
                          role='presentation'
                      >
                          <a
                              href='#'
                              onClick={this.flagPost}
                          >
                              <FormattedMessage
                                  id='rhs_root.mobile.flag'
                                  defaultMessage='Flag'
                              />
                          </a>
                      </li>
                  );
              }
          }
  
          dropdownContents.push(
              <li
                  key='rhs-root-permalink'
                  role='presentation'
              >
                  <a
                      href='#'
                      onClick={this.handlePermalink}
                  >
                      <FormattedMessage
                          id='rhs_root.permalink'
                          defaultMessage='Permalink'
                      />
                  </a>
              </li>
          );
  
          if (isOwner && !isSystemMessage) {
              dropdownContents.push(
                  <li
                      key='rhs-root-edit'
                      role='presentation'
                  >
                      <a
                          href='#'
                          role='menuitem'
                          data-toggle='modal'
                          data-target='#edit_post'
                          data-refocusid='#reply_textbox'
                          data-title={type}
                          data-message={post.message}
                          data-postid={post.id}
                          data-channelid={post.channel_id}
                      >
                          <FormattedMessage
                              id='rhs_root.edit'
                              defaultMessage='Edit'
                          />
                      </a>
                  </li>
              );
          }
  
          if (isOwner || isAdmin) {
              dropdownContents.push(
                  <li
                      key='rhs-root-delete'
                      role='presentation'
                  >
                      <a
                          href='#'
                          role='menuitem'
                          onClick={() => GlobalActions.showDeletePostModal(post, this.props.commentCount)}
                      >
                          <FormattedMessage
                              id='rhs_root.del'
                              defaultMessage='Delete'
                          />
                      </a>
                  </li>
              );
          }
  
          var rootOptions = '';
          if (dropdownContents.length > 0) {
              rootOptions = (
                  <RhsDropdown dropdownContents={dropdownContents}/>
              );
          }
  
          let fileAttachment = null;
          if (post.file_ids && post.file_ids.length > 0) {
              fileAttachment = (
                  <FileAttachmentListContainer
                      post={post}
                      compactDisplay={this.props.compactDisplay}
                  />
              );
          }
  
          let userProfile = <UserProfile user={user}/>;
          let botIndicator;
  
          if (post.props && post.props.from_webhook) {
              if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') {
                  userProfile = (
                      <UserProfile
                          user={user}
                          overwriteName={post.props.override_username}
                          disablePopover={true}
                      />
                  );
              }
  
              botIndicator = <li className='col col__name bot-indicator'>{'BOT'}</li>;
          } else if (PostUtils.isSystemMessage(post)) {
              userProfile = (
                  <UserProfile
                      user={{}}
                      overwriteName={Constants.SYSTEM_MESSAGE_PROFILE_NAME}
                      overwriteImage={Constants.SYSTEM_MESSAGE_PROFILE_IMAGE}
                      disablePopover={true}
                  />
              );
          }
  
          let profilePic = (
              <ProfilePicture
                  src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
                  status={this.props.status}
                  width='36'
                  height='36'
                  user={this.props.user}
              />
          );
  
          if (PostUtils.isSystemMessage(post)) {
              profilePic = (
                  <span
                      className='icon'
                      dangerouslySetInnerHTML={{__html: mattermostLogo}}
                  />
              );
          }
  
          let compactClass = '';
          if (this.props.compactDisplay) {
              compactClass = 'post--compact';
  
              profilePic = (
                  <ProfilePicture
                      src=''
                      status={this.props.status}
                      user={this.props.user}
                  />
              );
          }
  
          const profilePicContainer = (<div className='post__img'>{profilePic}</div>);
          const messageWrapper = <PostMessageContainer post={post}/>;
  
          let flag;
          let flagFunc;
          let flagVisible = '';
          let flagTooltip = (
              <Tooltip id='flagTooltip'>
                  <FormattedMessage
                      id='flag_post.flag'
                      defaultMessage='Flag for follow up'
                  />
              </Tooltip>
          );
          if (this.props.isFlagged) {
              flagVisible = 'visible';
              flag = (
                  <span
                      className='icon'
                      dangerouslySetInnerHTML={{__html: flagIcon}}
                  />
              );
              flagFunc = this.unflagPost;
              flagTooltip = (
                  <Tooltip id='flagTooltip'>
                      <FormattedMessage
                          id='flag_post.unflag'
                          defaultMessage='Unflag'
                      />
                  </Tooltip>
              );
          } else {
              flag = (
                  <span
                      className='icon'
                      dangerouslySetInnerHTML={{__html: flagIcon}}
                  />
              );
              flagFunc = this.flagPost;
          }
  
          const timeOptions = {
              day: 'numeric',
              month: 'short',
              year: 'numeric',
              hour: '2-digit',
              minute: '2-digit',
              hour12: !this.props.useMilitaryTime
          };
  
          return (
              <div className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}>
                  <div className='post-right-channel__name'>{channelName}</div>
                  <div className='post__content'>
                      {profilePicContainer}
                      <div>
                          <ul className='post__header'>
                              <li className='col__name'>{userProfile}</li>
                              {botIndicator}
                              <li className='col'>
                                  <time className='post__time'>
                                      {Utils.getDateForUnixTicks(post.create_at).toLocaleString('en', timeOptions)}
                                  </time>
                                  <OverlayTrigger
                                      key={'rootpostflagtooltipkey' + flagVisible}
                                      delayShow={Constants.OVERLAY_TIME_DELAY}
                                      placement='top'
                                      overlay={flagTooltip}
                                  >
                                      <a
                                          href='#'
                                          className={'flag-icon__container ' + flagVisible}
                                          onClick={flagFunc}
                                      >
                                          {flag}
                                      </a>
                                  </OverlayTrigger>
                              </li>
                              <li className='col col__reply'>
                                  {rootOptions}
                              </li>
                          </ul>
                          <div className='post__body'>
                              <PostBodyAdditionalContent
                                  post={post}
                                  message={messageWrapper}
                              />
                              {fileAttachment}
                              <ReactionListContainer
                                  post={post}
                                  currentUserId={this.props.currentUser.id}
                              />
                          </div>
                      </div>
                  </div>
              </div>
          );
      }
  }
  
  RhsRootPost.defaultProps = {
      commentCount: 0
  };
  RhsRootPost.propTypes = {
      post: React.PropTypes.object.isRequired,
      user: React.PropTypes.object.isRequired,
      currentUser: React.PropTypes.object.isRequired,
      commentCount: React.PropTypes.number,
      compactDisplay: React.PropTypes.bool,
      useMilitaryTime: React.PropTypes.bool.isRequired,
      isFlagged: React.PropTypes.bool,
      status: React.PropTypes.string
  };
  