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,25 +34,16 @@ class Console extends Component {
     this.setState({value: event.target.value});
   }
 
-  render() {
-    const {processLogs, processes, commands}= this.props;
-    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">
+  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>
-                {processes.map(process => {
-                  return (
-                    <Tab title={process.name} key={process.name}>
+      </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)
@@ -58,19 +52,38 @@ class Console extends Component {
           }
         </Logs>
       </Tab>
-                  );
-                })}
-              </Tabs>
+    )));
+  }
 
+  render() {
+    const tabs = this.renderTabs();
+    const {selectedProcess, value} = this.state;
+
+    return (
+      <Grid.Row cards className="console">
+        <Grid.Col>
+          <Card>
+            <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;