Add peer management to the Status tab (#5566)

* Add peer management to the Status tab

* Fix propTypes issue

js/src/ui/Container/Title/title.css

@@ -21,6 +21,12 @@ $bylineMaxHeight: 2.4rem;
 $titleLineHeight: 2rem;
 $smallFontSize: 0.75rem;
 
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
 .byline,
 .description {
   color: $bylineColor;

js/src/ui/Container/Title/title.js

@@ -22,22 +22,44 @@ import styles from './title.css';
 
 export default class Title extends Component {
   static propTypes = {
+    actions: PropTypes.array,
     byline: nodeOrStringProptype(),
     className: PropTypes.string,
     description: nodeOrStringProptype(),
     title: nodeOrStringProptype()
-  }
+  };
+
+  static defaultProps = {
+    actions: []
+  };
 
   render () {
     const { className, title } = this.props;
 
     return (
-      <div className={ className }>
-        <h3 className={ styles.title }>
-          { title }
-        </h3>
-        { this.renderByline() }
-        { this.renderDescription() }
+      <div className={ [ className, styles.container ].join(' ') }>
+        <div>
+          <h3 className={ styles.title }>
+            { title }
+          </h3>
+          { this.renderByline() }
+          { this.renderDescription() }
+        </div>
+        { this.renderActions() }
+      </div>
+    );
+  }
+
+  renderActions () {
+    const { actions } = this.props;
+
+    if (actions.length === 0) {
+      return null;
+    }
+
+    return (
+      <div>
+        { actions }
       </div>
     );
   }