fix(cockpit/TextEditorToolbar): set active state on selected tabs

This commit ensures that the `activeTab` state for the Editor toolbar tabs
is properly passed down to `TextEditorToolbar` component, so it can be used
to set the active state accordingly.

embark-ui/src/components/TextEditorToolbar.js

@@ -1,37 +1,55 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {Button, Nav, NavLink} from 'reactstrap';
+import classnames from 'classnames';
 import FontAwesomeIcon from 'react-fontawesome';
 
-const TextEditorToolbar = (props) => (
+const TextEditorToolbarTabs = {
+  Overview: 'overview',
+  Detail: 'detail',
+  Logger: 'logger',
+  Debugger: 'debugger',
+  Browser: 'browser'
+};
+
+class TextEditorToolbar extends Component {
+
+  isActiveTab(tab) {
+    return this.props.activeTab === tab;
+  }
+
+  render() {
+    return (
       <ol className="breadcrumb mb-0">
         <li className="breadcrumb-item">
-      <Button color="success" size="sm" className="mr-1" onClick={props.save}>
+          <Button color="success" size="sm" className="mr-1" onClick={this.props.save}>
             <FontAwesomeIcon className="mr-2" name="save"/>
             Save
           </Button>
-      <Button color="danger" size="sm" onClick={props.remove}>
+          <Button color="danger" size="sm" onClick={this.props.remove}>
             <FontAwesomeIcon className="mr-2" name="trash"/>
             Delete
           </Button>
         </li>
         <li className="breadcrumb-menu">
           <Nav className="btn-group">
-        {props.isContract &&
+            {this.props.isContract &&
               <React.Fragment>
-            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('overview')}>
+                <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Overview)})} onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Overview)}>
                   <FontAwesomeIcon className="mr-2" name="info-circle" /> Overview
                 </NavLink>
-            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('detail')}>
+                <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Detail)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Detail)}>
                   <FontAwesomeIcon className="mr-2" name="file-text-o" /> Details
                 </NavLink>
-            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('logger')}>Logger</NavLink>
+                <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Logger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Logger)}>
-            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('debugger')}>
+                  <FontAwesomeIcon className="mr-2" name="file-text-o" /> Logger
+                </NavLink>
+                <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Debugger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Debugger)}>
                   <FontAwesomeIcon className="mr-2" name="bug" /> Debugger
                 </NavLink>
               </React.Fragment>
             }
-        <NavLink className="btn" href="#" onClick={() => props.openAsideTab('browser')}>
+            <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Browser)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Browser)}>
               <FontAwesomeIcon className="mr-2" name="compass" /> Browser
             </NavLink>
           </Nav>
@@ -39,13 +57,16 @@ const TextEditorToolbar = (props) => (
         </li>
       </ol>
     );
+  }
+}
 
 TextEditorToolbar.propTypes = {
   isContract: PropTypes.bool,
   save: PropTypes.func,
   remove: PropTypes.func,
   toggleShowHiddenFiles: PropTypes.func,
-  openAsideTab: PropTypes.func
+  openAsideTab: PropTypes.func,
+  activeTab: PropTypes.string
 };
 
 export default TextEditorToolbar;

embark-ui/src/containers/EditorContainer.js

@@ -62,7 +62,8 @@ class EditorContainer extends React.Component {
         <Col xs={12}>
           <TextEditorToolbarContainer openAsideTab={(newTab) => this.openAsideTab(newTab)}
                                       isContract={this.isContract()}
-                                      currentFile={this.props.currentFile} />
+                                      currentFile={this.props.currentFile}
+                                      activeTab={this.state.currentAsideTab}/>
         </Col>
         <Col xs={4} md={2} xl={2} lg={2} className="border-right">
           <FileExplorerContainer showHiddenFiles={this.state.showHiddenFiles} toggleShowHiddenFiles={() => this.toggleShowHiddenFiles()} />

embark-ui/src/containers/TextEditorToolbarContainer.js

@@ -22,7 +22,8 @@ class TextEditorToolbarContainer extends Component {
                               toggleShowHiddenFiles={this.props.toggleShowHiddenFiles}
                               openAsideTab={this.props.openAsideTab}
                               save={() => this.save()}
-                              remove={() => this.remove()} />;
+                              remove={() => this.remove()}
+                              activeTab={this.props.activeTab} />;
   }
 }
 
@@ -32,7 +33,8 @@ TextEditorToolbarContainer.propTypes = {
   saveFile: PropTypes.func,
   removeFile: PropTypes.func,
   toggleShowHiddenFiles: PropTypes.func,
-  openAsideTab: PropTypes.func
+  openAsideTab: PropTypes.func,
+  activeTab: PropTypes.string
 };
 
 export default connect(