fix(cockpit/console): ensure console for processes is rendered

Prior to this commit, `Console` would only be rendered when Embark's API returns
at least one registered process from `/embark-api/processes`.
`Console` itself would then add another processes "embark" resulting in two tabs
with console output. This used to work fine because Embark always registered
at least a blockchain process.

In cd934f8157 however, this has changed.
With Ganache being the default blockchain, there's no longer a processes registered for this
service, resulting in an empty list for `processes` inside Cockpit, causing `Console` not to render
at all. Which also means the `embark` process logs aren't rendered either.

This commit removes the requirement of `processes` being non-empty so that embark process
logs are always shown.

It also fixes `Console` to updates its own `processes` state when its properties change.
This is needed because it's no longer guarded by `DataWrapper`, which previously ensured
`Console` is only rendered when there are processes.

Kudos to @jrainville for helping me cracking this nut.

packages/cockpit/ui/src/components/Console.js

@@ -16,11 +16,26 @@ const convert = new Convert({newline: true, escapeXML: true});
 class Console extends Component {
   constructor(props) {
     super(props);
-    // Add embark to the start of the list
-    this.processes = [...props.processes];
-    this.processes.unshift({name: 'embark', state: 'running'});
 
-    this.state = {value: '', isLoading: true, options: [], activeTab: EMBARK_PROCESS_NAME};
+    this.state = {
+      value: '',
+      isLoading: true,
+      options: [],
+      activeTab: EMBARK_PROCESS_NAME,
+      processes: this.getProcesses()
+    };
+  }
+
+  getProcesses() {
+    const processes = [...this.props.processes];
+    processes.unshift({name: 'embark', state: 'running'});
+    return processes;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.processes.length !== this.props.processes.length) {
+      this.setState({ processes: this.getProcesses() });
+    }
   }
 
   handleSubmit(event) {
@@ -52,7 +67,7 @@ class Console extends Component {
   renderNav() {
     return (
       <Nav tabs>
-        {this.processes.map((process) => (
+        {this.state.processes.map((process) => (
           <NavItem key={process.name}>
             <NavLink
               className={classnames({ active: this.state.activeTab === process.name })}
@@ -90,7 +105,7 @@ class Console extends Component {
 
     return (
       <TabContent activeTab={this.state.activeTab}>
-        {this.processes.map(process => (
+        {this.state.processes.map(process => (
           <TabPane key={process.name} tabId={process.name}>
             <Logs>
               {processLogs

packages/cockpit/ui/src/containers/HomeContainer.js

@@ -53,21 +53,19 @@ class HomeContainer extends Component {
         <PageHead title="Dashboard" description="Overview of available services and logs. Interact with Embark using the console. Summary of deployed contracts." />
         <ServicesContainer />
 
-        <DataWrapper shouldRender={this.props.processes.length > 0 } {...this.props} render={({processes, postCommand, postCommandSuggestions, processLogs, commandSuggestions}) => (
+        <Card>
-          <Card>
+          <CardBody>
-            <CardBody>
+            <CardTitle>Console</CardTitle>
-              <CardTitle>Console</CardTitle>
+            <Console activeProcess={this.state.activeProcess}
-              <Console activeProcess={this.state.activeProcess}
+                      postCommand={this.props.postCommand}
-                       postCommand={postCommand}
+                      postCommandSuggestions={this.props.postCommandSuggestions}
-                       postCommandSuggestions={postCommandSuggestions}
+                      processes={this.props.processes}
-                       processes={processes}
+                      processLogs={this.props.processLogs}
-                       processLogs={processLogs}
+                      commandSuggestions={this.props.commandSuggestions}
-                       commandSuggestions={commandSuggestions}
+                      isEmbark={() => this.isEmbark}
-                       isEmbark={() => this.isEmbark}
+                      updateTab={processName => this.updateTab(processName)} />
-                       updateTab={processName => this.updateTab(processName)} />
+          </CardBody>
-            </CardBody>
+        </Card>
-          </Card>
-        )} />
 
         <Card>
           <CardBody>