clean up the ModerationHeader component

client/coral-admin/src/routes/Moderation/components/Moderation.js

@@ -32,6 +32,10 @@ export default class Moderation extends Component {
     this.toggleModal(false);
   }
 
+  openSearch = () => {
+
+  }
+
   moderate = (accept) => () => {
     const {acceptComment, rejectComment} = this.props;
     const {selectedIndex} = this.state;
@@ -128,7 +132,7 @@ export default class Moderation extends Component {
 
     return (
       <div>
-        <ModerationHeader asset={asset} />
+        <ModerationHeader openSearch={this.openSearch} asset={asset} />
         <ModerationMenu
           asset={asset}
           allCount={root.allCount}

client/coral-admin/src/routes/Moderation/components/ModerationHeader.js

@@ -1,30 +1,38 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 import {Icon} from 'coral-ui';
 import styles from './styles.css';
 import t from 'coral-framework/services/i18n';
 
-const ModerationHeader = (props) => (
+const ModerationHeader = (props) => {
+
+  const allStreams = props.asset
+    ? <Link className="mdl-tabs__tab" to="/admin/moderate">{t('modqueue.all_streams')}</Link>
+    : <a className="mdl-tabs__tab" />;
+
+  const title = props.asset
+    ? (
+      <Link className="mdl-tabs__tab" to={`/admin/moderate/${props.asset.id}`}>
+        {props.asset.title} <Icon className={styles.searchTrigger} name="keyboard_arrow_down" />
+      </Link>
+    )
+    : <a className="mdl-tabs__tab">{t('modqueue.all_streams')} <Icon className={styles.searchTrigger} name="keyboard_arrow_down" /></a>;
+
+  return (
     <div className=''>
       <div className={`mdl-tabs ${styles.header}`}>
-        {
-          props.asset ?
-            <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
-              <Link className="mdl-tabs__tab" to="/admin/moderate">{t('modqueue.all_streams')}</Link>
-              <a className="mdl-tabs__tab" href={props.asset.url} target="_blank">
-                <span>{props.asset.title}</span>
-                <Icon className={styles.settingsButton} name="open_in_new"/>
-              </a>
-              <Link className="mdl-tabs__tab" to="/admin/stories">Select Stream</Link>
-            </div>
-            :
-            <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
-              <a className="mdl-tabs__tab" />
-              <a className="mdl-tabs__tab">{t('modqueue.all_streams')}</a>
-              <Link className="mdl-tabs__tab" to="/admin/stories">{t('modqueue.select_stream')}</Link>
-            </div>
-        }
+        <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
+          {allStreams}
+          {title}
+          <Link className="mdl-tabs__tab" to="/admin/stories">{t('modqueue.select_stream')}</Link>
+        </div>
       </div>
     </div>
-);
+  );
+};
+
+ModerationHeader.propTypes = {
+  openSearch: PropTypes.func.isRequired
+};
+
 export default ModerationHeader;

client/coral-admin/src/routes/Moderation/components/styles.css

@@ -467,3 +467,8 @@ span {
 .bulkSelectInput {
   cursor: pointer;
 }
+
+.searchTrigger {
+  position: relative;
+  top: .3em;
+}