refactor(cockpit/TextEditorToolbar): make toolbar tabs generation more generic

embark-ui/src/components/TextEditorToolbar.js

@@ -4,12 +4,12 @@ import {Button, Nav, NavLink} from 'reactstrap';
 import classnames from 'classnames';
 import FontAwesomeIcon from 'react-fontawesome';
 
-const TextEditorToolbarTabs = {
+export const TextEditorToolbarTabs = {
-  Overview: 'overview',
+  Interact: { label: 'Interact', icon: 'bolt' },
-  Detail: 'detail',
+  Ietails: { label: 'Details', icon: 'info-cicle' },
-  Transactions: 'transactions',
+  Debugger: { label: 'Debugger', icon: 'bug' },
-  Debugger: 'debugger',
+  Transactions: { label: 'Transactions', icon: 'list-alt' },
-  Browser: 'browser'
+  Browser: { label: 'Browser', icon: 'eye' }
 };
 
 class TextEditorToolbar extends Component {
@@ -18,6 +18,18 @@ class TextEditorToolbar extends Component {
     return this.props.activeTab === tab;
   }
 
+  isBrowserTab(tab) {
+    return tab === TextEditorToolbarTabs.Browser;
+  }
+
+  renderTab(tab) {
+    return (
+      <NavLink key={tab.label} className={classnames('btn', { active: this.isActiveTab(tab)})} onClick={() => this.props.openAsideTab(tab)}>
+        <FontAwesomeIcon className="mr-2" name={tab.icon} /> {tab.label}
+      </NavLink>
+    );
+  }
+
   render() {
     return (
       <ol className="breadcrumb mb-0">
@@ -33,27 +45,9 @@ class TextEditorToolbar extends Component {
         </li>
         <li className="breadcrumb-menu">
           <Nav className="btn-group">
-            {this.props.isContract &&
+            {this.props.isContract && Object.values(TextEditorToolbarTabs).map(tab => !this.isBrowserTab(tab) && this.renderTab(tab))}
-              <React.Fragment>
+            {this.renderTab(TextEditorToolbarTabs.Browser)}
-                <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Overview)})} onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Overview)}>
-                  <FontAwesomeIcon className="mr-2" name="bolt" />Interact
-                </NavLink>
-                <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Detail)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Detail)}>
-                  <FontAwesomeIcon className="mr-2" name="info-circle" />Details
-                </NavLink>
-                <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Transactions)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Transactions)}>
-                  <FontAwesomeIcon className="mr-2" name="list-alt" />Transactions
-                </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="eye" /> Preview
-            </NavLink>
           </Nav>
-
         </li>
       </ol>
     );
@@ -66,7 +60,7 @@ TextEditorToolbar.propTypes = {
   remove: PropTypes.func,
   toggleShowHiddenFiles: PropTypes.func,
   openAsideTab: PropTypes.func,
-  activeTab: PropTypes.string
+  activeTab: PropTypes.object
 };
 
 export default TextEditorToolbar;

embark-ui/src/containers/EditorContainer.js

@@ -15,7 +15,7 @@ import './EditorContainer.css';
 class EditorContainer extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {currentAsideTab: '', showHiddenFiles: false, currentFile: this.props.currentFile};
+    this.state = {currentAsideTab: {}, showHiddenFiles: false, currentFile: this.props.currentFile};
   }
 
   componentDidMount() {
@@ -43,19 +43,19 @@ class EditorContainer extends React.Component {
   }
 
   openAsideTab(newTab) {
-    if (newTab === this.state.currentAsideTab) {
+    if (newTab.label === this.state.currentAsideTab.label) {
-      return this.setState({currentAsideTab: ''});
+      return this.setState({currentAsideTab: {}});
     }
     this.setState({currentAsideTab: newTab});
   }
 
   textEditorMdSize() {
-    return this.state.currentAsideTab.length ? 7 : 10;
+    return this.state.currentAsideTab.label ? 7 : 10;
   }
 
   render() {
     return (
-      <Row noGutters className={classnames('h-100', 'editor--grid', {'aside-opened': this.state.currentAsideTab.length})}>
+      <Row noGutters className={classnames('h-100', 'editor--grid', {'aside-opened': this.state.currentAsideTab.label})}>
         <Col xs={12}>
           <TextEditorToolbarContainer openAsideTab={(newTab) => this.openAsideTab(newTab)}
                                       isContract={this.isContract()}

embark-ui/src/containers/TextEditorAsideContainer.js

@@ -10,6 +10,7 @@ import ContractDetail from '../components/ContractDetail';
 import ContractTransactionsContainer from './ContractTransactionsContainer';
 import ContractOverviewContainer from '../containers/ContractOverviewContainer';
 import ContractDebuggerContainer from '../containers/ContractDebuggerContainer';
+import { TextEditorToolbarTabs } from '../components/TextEditorToolbar';
 
 class TextEditorAsideContainer extends Component {
   componentDidMount() {
@@ -18,28 +19,28 @@ class TextEditorAsideContainer extends Component {
 
   renderContent(contract, index) {
     switch (this.props.currentAsideTab) {
-      case 'debugger':
+      case TextEditorToolbarTabs.Debugger:
         return (
           <React.Fragment>
             <h2>{contract.className} - Debugger</h2>
             <ContractDebuggerContainer key={index} contract={contract}/>
           </React.Fragment>
         );
-      case 'detail':
+      case TextEditorToolbarTabs.Details:
         return (
           <React.Fragment>
             <h2>{contract.className} - Details</h2>
             <ContractDetail key={index} contract={contract}/>
           </React.Fragment>
         );
-      case 'transactions':
+      case TextEditorToolbarTabs.Transactions:
         return (
           <React.Fragment>
             <h2>{contract.className} - Transactions</h2>
             <ContractTransactionsContainer key={index} contract={contract}/>
           </React.Fragment>
         );
-      case 'overview':
+      case TextEditorToolbarTabs.Interact:
         return (
           <React.Fragment>
             <h2>{contract.className} - Interact</h2>
@@ -52,7 +53,7 @@ class TextEditorAsideContainer extends Component {
   }
 
   render() {
-    if (this.props.currentAsideTab === 'browser') {
+    if (this.props.currentAsideTab === TextEditorToolbarTabs.Browser) {
       return <Preview/>;
     }
     return this.props.contracts.map((contract, index) => {
@@ -75,7 +76,7 @@ function mapStateToProps(state, props) {
 
 TextEditorAsideContainer.propTypes = {
   currentFile: PropTypes.object,
-  currentAsideTab: PropTypes.string,
+  currentAsideTab: PropTypes.object,
   contract: PropTypes.array,
   fetchContracts: PropTypes.func,
   contracts: PropTypes.array

embark-ui/src/containers/TextEditorToolbarContainer.js

@@ -34,7 +34,7 @@ TextEditorToolbarContainer.propTypes = {
   removeFile: PropTypes.func,
   toggleShowHiddenFiles: PropTypes.func,
   openAsideTab: PropTypes.func,
-  activeTab: PropTypes.string
+  activeTab: PropTypes.object
 };
 
 export default connect(