PLT-3506 Added flagged posts functionality (#3679)

* Added flagged posts functionality

* UI Improvements to flags (#3697)

* Added flag functionality for mobile

* Updating flagged text (#3699)

* Add back button to RHS thread when coming from flagged posts

* Updating position of flags (#3708)

* Plt 3506 - Reverting flag position (#3724)

* Revert "Updating position of flags (#3708)"

This reverts commit aaa05632c5d9eda35a048300a5bd7e99584c5b58.

* Fixing the icon in search

* Help text and white space improvements (#3730)

* Updatng help text and some white spacing.

* Updating help text

webapp/components/channel_header.jsx

@@ -26,19 +26,18 @@ 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;
-
-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';
+import {FormattedMessage} from 'react-intl';
+import {browserHistory} from 'react-router/es6';
+import {Tooltip, OverlayTrigger, Popover} from 'react-bootstrap';
 
 export default class ChannelHeader extends React.Component {
     constructor(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>