From 2e4e6a3381abb5a49d3d195543726584c1723fbd Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Sun, 28 Oct 2018 16:07:41 +0100
Subject: [PATCH] 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 | 95 +++++++++++--------
 embark-ui/src/containers/EditorContainer.js   |  3 +-
 .../containers/TextEditorToolbarContainer.js  |  6 +-
 3 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/embark-ui/src/components/TextEditorToolbar.js b/embark-ui/src/components/TextEditorToolbar.js
index c0c9f537..57fc711f 100644
--- a/embark-ui/src/components/TextEditorToolbar.js
+++ b/embark-ui/src/components/TextEditorToolbar.js
@@ -1,51 +1,72 @@
-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) => (
-  <ol className="breadcrumb mb-0">
-    <li className="breadcrumb-item">
-      <Button color="success" size="sm" className="mr-1" onClick={props.save}>
-        <FontAwesomeIcon className="mr-2" name="save"/>
-        Save
-      </Button>
-      <Button color="danger" size="sm" onClick={props.remove}>
-        <FontAwesomeIcon className="mr-2" name="trash"/>
-        Delete
-      </Button>
-    </li>
-    <li className="breadcrumb-menu">
-      <Nav className="btn-group">
-        {props.isContract &&
-          <React.Fragment>
-            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('overview')}>
-              <FontAwesomeIcon className="mr-2" name="info-circle" /> Overview
-            </NavLink>
-            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('detail')}>
-              <FontAwesomeIcon className="mr-2" name="file-text-o" /> Details
-            </NavLink>
-            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('logger')}>Logger</NavLink>
-            <NavLink className="btn" href="#" onClick={() => props.openAsideTab('debugger')}>
-              <FontAwesomeIcon className="mr-2" name="bug" /> Debugger
-            </NavLink>
-          </React.Fragment>
-        }
-        <NavLink className="btn" href="#" onClick={() => props.openAsideTab('browser')}>
-          <FontAwesomeIcon className="mr-2" name="compass" /> Browser
-        </NavLink>
-      </Nav>
+const TextEditorToolbarTabs = {
+  Overview: 'overview',
+  Detail: 'detail',
+  Logger: 'logger',
+  Debugger: 'debugger',
+  Browser: 'browser'
+};
 
-    </li>
-  </ol>
-);
+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={this.props.save}>
+            <FontAwesomeIcon className="mr-2" name="save"/>
+            Save
+          </Button>
+          <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">
+            {this.props.isContract &&
+              <React.Fragment>
+                <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={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={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Logger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Logger)}>
+                  <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={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Browser)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Browser)}>
+              <FontAwesomeIcon className="mr-2" name="compass" /> Browser
+            </NavLink>
+          </Nav>
+
+        </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;
diff --git a/embark-ui/src/containers/EditorContainer.js b/embark-ui/src/containers/EditorContainer.js
index c1afb9ba..cec5950a 100644
--- a/embark-ui/src/containers/EditorContainer.js
+++ b/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()} />
diff --git a/embark-ui/src/containers/TextEditorToolbarContainer.js b/embark-ui/src/containers/TextEditorToolbarContainer.js
index ffce2b65..0c229c21 100644
--- a/embark-ui/src/containers/TextEditorToolbarContainer.js
+++ b/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(