From bd12520b445ecf00edad139c5e78df973b0c6b06 Mon Sep 17 00:00:00 2001
From: David Lu <david.lu@hotmail.com>
Date: Thu, 14 Jul 2016 15:57:49 -0400
Subject: [PATCH] added channel header to view channel info modal (#3584)

---
 webapp/components/channel_info_modal.jsx | 46 +++++++++++++++++++-----
 webapp/i18n/en.json                      |  1 +
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/webapp/components/channel_info_modal.jsx b/webapp/components/channel_info_modal.jsx
index 7bd004411579f..b0e2c63fa8b86 100644
--- a/webapp/components/channel_info_modal.jsx
+++ b/webapp/components/channel_info_modal.jsx
@@ -5,6 +5,7 @@ import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
 import {Modal} from 'react-bootstrap';
+import * as TextFormatting from 'utils/text_formatting.jsx';
 
 import React from 'react';
 
@@ -32,6 +33,7 @@ export default class ChannelInfoModal extends React.Component {
                 display_name: notFound,
                 name: notFound,
                 purpose: notFound,
+                header: notFound,
                 id: notFound
             };
         }
@@ -44,6 +46,39 @@ export default class ChannelInfoModal extends React.Component {
 
         const channelURL = Utils.getTeamURLFromAddressBar() + '/channels/' + channel.name;
 
+        let channelPurpose = null;
+        if (channel.purpose) {
+            channelPurpose = (
+                <div className='form-group'>
+                    <div className='info__label'>
+                        <FormattedMessage
+                            id='channel_info.purpose'
+                            defaultMessage='Purpose:'
+                        />
+                    </div>
+                    <div className='info__value'>{channel.purpose}</div>
+                </div>
+            );
+        }
+
+        let channelHeader = null;
+        if (channel.header) {
+            channelHeader = (
+                <div className='form-group'>
+                    <div className='info__label'>
+                        <FormattedMessage
+                            id='channel_info.header'
+                            defaultMessage='Header:'
+                        />
+                    </div>
+                    <div
+                        className='info__value'
+                        dangerouslySetInnerHTML={{__html: TextFormatting.formatText(channel.header, {singleline: false, mentionHighlight: false})}}
+                    />
+                </div>
+            );
+        }
+
         return (
             <Modal
                 dialogClassName='about-modal'
@@ -60,15 +95,8 @@ export default class ChannelInfoModal extends React.Component {
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body ref='modalBody'>
-                    <div className='form-group'>
-                        <div className='info__label'>
-                            <FormattedMessage
-                                id='channel_info.purpose'
-                                defaultMessage='Purpose:'
-                            />
-                        </div>
-                        <div className='info__value'>{channel.purpose}</div>
-                    </div>
+                    {channelPurpose}
+                    {channelHeader}
                     <div className='form-group'>
                         <div className='info__label'>
                             <FormattedMessage
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index ab3fdca207400..d93ce91505dbe 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -842,6 +842,7 @@
   "channel_header.viewInfo": "View Info",
   "channel_info.about": "About",
   "channel_info.close": "Close",
+  "channel_info.header": "Header:",
   "channel_info.id": "ID: ",
   "channel_info.name": "Name:",
   "channel_info.notFound": "No Channel Found",