1 files changed, 43 insertions, 6 deletions

diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index f26105c7a..66cd61245 100644
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -26,20 +26,19 @@ import PreferenceStore from 'stores/preference_store.jsx';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
 import Client from 'client/web_client.jsx';
+import * as AsyncClient from 'utils/async_client.jsx';
+import {getFlaggedPosts} from 'actions/post_actions.jsx';
+
 import Constants from 'utils/constants.jsx';
 const UserStatuses = Constants.UserStatuses;
+const ActionTypes = Constants.ActionTypes;
 
+import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {browserHistory} from 'react-router/es6';
-
-const ActionTypes = Constants.ActionTypes;
-
 import {Tooltip, OverlayTrigger, Popover} from 'react-bootstrap';
 
-import React from 'react';
-
 export default class ChannelHeader extends React.Component {
     constructor(props) {
         super(props);
@@ -50,6 +49,7 @@ export default class ChannelHeader extends React.Component {
         this.showRenameChannelModal = this.showRenameChannelModal.bind(this);
         this.hideRenameChannelModal = this.hideRenameChannelModal.bind(this);
         this.openRecentMentions = this.openRecentMentions.bind(this);
+        this.getFlagged = this.getFlagged.bind(this);
 
         const state = this.getStateFromStores();
         state.showEditChannelPurposeModal = false;
@@ -159,6 +159,11 @@ export default class ChannelHeader extends React.Component {
         });
     }
 
+    getFlagged(e) {
+        e.preventDefault();
+        getFlaggedPosts();
+    }
+
     openRecentMentions(e) {
         if (Utils.cmdOrCtrlPressed(e) && e.shiftKey && e.keyCode === Constants.KeyCodes.M) {
             e.preventDefault();
@@ -220,6 +225,8 @@ export default class ChannelHeader extends React.Component {
     }
 
     render() {
+        const flagIcon = Constants.FLAG_ICON_OUTLINE_SVG;
+
         if (!this.validState()) {
             return null;
         }
@@ -233,6 +240,16 @@ export default class ChannelHeader extends React.Component {
                 />
             </Tooltip>
         );
+
+        const flaggedTooltip = (
+            <Tooltip id='flaggedTooltip'>
+                <FormattedMessage
+                    id='channel_header.flagged'
+                    defaultMessage='Flagged Posts'
+                />
+            </Tooltip>
+        );
+
         const popoverContent = (
             <Popover
                 id='header-popover'
@@ -592,6 +609,26 @@ export default class ChannelHeader extends React.Component {
                                     </OverlayTrigger>
                                 </div>
                             </th>
+                            <th>
+                                <div className='dropdown channel-header__links'>
+                                    <OverlayTrigger
+                                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                                        placement='bottom'
+                                        overlay={flaggedTooltip}
+                                    >
+                                        <a
+                                            href='#'
+                                            type='button'
+                                            onClick={this.getFlagged}
+                                        >
+                                            <span
+                                                className='icon icon__flag'
+                                                dangerouslySetInnerHTML={{__html: flagIcon}}
+                                            />
+                                        </a>
+                                    </OverlayTrigger>
+                                </div>
+                            </th>
                         </tr>
                     </tbody>
                 </table>