From 3ce666b16522ebe6564c4c3753f49ecafb5235ca Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Thu, 2 Apr 2020 16:38:47 +0200
Subject: [PATCH] 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 https://github.com/embarklabs/embark/commit/cd934f815799e376799b0c14cfeafe8b1bf3f3e8 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 | 27 ++++++++++++++----
 .../ui/src/containers/HomeContainer.js        | 28 +++++++++----------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/packages/cockpit/ui/src/components/Console.js b/packages/cockpit/ui/src/components/Console.js
index bac4783f7..90603ab79 100644
--- a/packages/cockpit/ui/src/components/Console.js
+++ b/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
diff --git a/packages/cockpit/ui/src/containers/HomeContainer.js b/packages/cockpit/ui/src/containers/HomeContainer.js
index bcc1520f5..c79a37f68 100644
--- a/packages/cockpit/ui/src/containers/HomeContainer.js
+++ b/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>
-            <CardBody>
-              <CardTitle>Console</CardTitle>
-              <Console activeProcess={this.state.activeProcess}
-                       postCommand={postCommand}
-                       postCommandSuggestions={postCommandSuggestions}
-                       processes={processes}
-                       processLogs={processLogs}
-                       commandSuggestions={commandSuggestions}
-                       isEmbark={() => this.isEmbark}
-                       updateTab={processName => this.updateTab(processName)} />
-            </CardBody>
-          </Card>
-        )} />
+        <Card>
+          <CardBody>
+            <CardTitle>Console</CardTitle>
+            <Console activeProcess={this.state.activeProcess}
+                      postCommand={this.props.postCommand}
+                      postCommandSuggestions={this.props.postCommandSuggestions}
+                      processes={this.props.processes}
+                      processLogs={this.props.processLogs}
+                      commandSuggestions={this.props.commandSuggestions}
+                      isEmbark={() => this.isEmbark}
+                      updateTab={processName => this.updateTab(processName)} />
+          </CardBody>
+        </Card>
 
         <Card>
           <CardBody>