only show footer when embark tab

embark-ui/src/components/Console.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
-import {Grid, Card, Form, Tabs, Tab} from 'tabler-react';
+import {Grid, Card, Form, Tabs, Tab, TabbedHeader, TabbedContainer} from 'tabler-react';
 import Logs from "./Logs";
 import Convert from 'ansi-to-html';
 
@@ -17,7 +17,10 @@ CommandResult.propTypes = {
 class Console extends Component {
   constructor(props) {
     super(props);
-    this.state = {value: ''};
+    this.state = {
+      value: '',
+      selectedProcess: 'Embark'
+    };
   }
 
   handleSubmit(event) {
@@ -31,46 +34,56 @@ class Console extends Component {
     this.setState({value: event.target.value});
   }
 
+  renderTabs() {
+    const {processLogs, processes, commands} = this.props;
+    return [
+      (<Tab title="Embark" key="Embark">
+        <Logs>
+          {commands.map((command, index) => <CommandResult key={index} result={command.result}/>)}
+        </Logs>
+      </Tab>)
+    ].concat(processes.map(process => (
+      <Tab title={process.name} key={process.name} onClick={(e, x) => this.clickTab(e, x)}>
+        <Logs>
+          {
+            processLogs.filter((item) => item.name === process.name)
+              .map((item, i) => <p key={i} className={item.logLevel}
+                                   dangerouslySetInnerHTML={{__html: convert.toHtml(item.msg)}}></p>)
+          }
+        </Logs>
+      </Tab>
+    )));
+  }
+
   render() {
-    const {processLogs, processes, commands}= this.props;
+    const tabs = this.renderTabs();
+    const {selectedProcess, value} = this.state;
+
     return (
       <Grid.Row cards className="console">
         <Grid.Col>
           <Card>
-            <Card.Header>
-              <Card.Title>Embark console</Card.Title>
-            </Card.Header>
-            <Card.Body >
-              <Tabs initialTab="Embark">
-                <Tab title="Embark">
-                  <Logs>
-                    {commands.map((command, index) => <CommandResult key={index} result={command.result}/>)}
-                  </Logs>
-                </Tab>
-                {processes.map(process => {
-                  return (
-                    <Tab title={process.name} key={process.name}>
-                      <Logs>
-                        {
-                          processLogs.filter((item) => item.name === process.name)
-                            .map((item, i) => <p key={i} className={item.logLevel}
-                                                          dangerouslySetInnerHTML={{__html: convert.toHtml(item.msg)}}></p>)
-                        }
-                      </Logs>
-                    </Tab>
-                  );
-                })}
-              </Tabs>
-
+            <Card.Body className="console-container">
+              <React.Fragment>
+                <TabbedHeader
+                  selectedTitle={selectedProcess}
+                  stateCallback={newProcess => this.setState({selectedProcess: newProcess})}
+                >
+                  {tabs}
+                </TabbedHeader>
+                <TabbedContainer selectedTitle={selectedProcess}>
+                  {tabs}
+                </TabbedContainer>
+              </React.Fragment>
             </Card.Body>
-            <Card.Footer>
+            {selectedProcess === 'Embark' && <Card.Footer>
               <form onSubmit={(event) => this.handleSubmit(event)} autoComplete="off">
-                <Form.Input value={this.state.value}
+                <Form.Input value={value}
                             onChange={(event) => this.handleChange(event)}
                             name="command"
-                            placeholder="Type a command (e.g help)" />
+                            placeholder="Type a command (e.g help)"/>
               </form>
-            </Card.Footer>
+            </Card.Footer>}
           </Card>
         </Grid.Col>
       </Grid.Row>

embark-ui/src/general.css

@@ -6,7 +6,7 @@
   color: white;
   padding: 10px;
   border-radius: 8px;
-  max-height: 400px;
+  max-height: 350px;
   overflow: auto;
 }
 
@@ -26,6 +26,15 @@
   color: #8f98a2;
 }
 
+.console-container {
+  padding-top: 5px;
+  padding-bottom: 15px;
+}
+
+.console-container .nav-link {
+  text-transform: capitalize;
+}
+
 .text__new-line, .card.warnings-card .list-group-item, .card.errors-card .list-group-item {
   white-space: pre-wrap;
   font-family: monospace;