From 9bed93383418e23fdcc007b2e64d555508501abb Mon Sep 17 00:00:00 2001
From: Esa Puttonen <esa.puttonen@nitorcreations.com>
Date: Sat, 6 Feb 2021 11:11:05 +0200
Subject: [PATCH] Fix review findings

---
 .../src/app/workflow/workflowInfo.html        | 131 +++++++-----------
 .../src/app/workflow/workflowInfo.js          |   1 -
 nflow-explorer/src/config.js                  |   4 -
 nflow-explorer/src/styles/main.scss           |  14 +-
 4 files changed, 62 insertions(+), 88 deletions(-)

diff --git a/nflow-explorer/src/app/workflow/workflowInfo.html b/nflow-explorer/src/app/workflow/workflowInfo.html
index 74643a043..46a25174e 100644
--- a/nflow-explorer/src/app/workflow/workflowInfo.html
+++ b/nflow-explorer/src/app/workflow/workflowInfo.html
@@ -1,80 +1,55 @@
 <section class="wd-workflow-info">
-  <div ng-if="ctrl.workflowInfoTable">
-    <table id="workflow-properties">
-      <tr ng-show="ctrl.parentWorkflow">
-        <td>Parent workflow</td>
-        <td><a ui-sref="workflow({id: ctrl.parentWorkflow.id})">{{ctrl.parentWorkflow.type}} ({{ctrl.parentWorkflow.id}})</a></td>
-      </tr>
-      <tr ng-show="ctrl.childWorkflows.length">
-        <td>Child workflows</td>
-        <td><a ui-sref="search({parentWorkflowId: ctrl.workflow.id})">{{ctrl.childWorkflows.length}}</a></td>
-      </tr>
-      <tr title="{{ctrl.workflow.stateText}}">
-        <td>Current state</td>
-        <td>
-          <a class="wd-active-state clickable" ng-click="ctrl.selectAction(ctrl.workflow.state)">{{ctrl.workflow.state}}</a>
-        </td>
-      </tr>
-      <tr>
-        <td>Current status</td>
-        <td>{{ctrl.workflow.status}}<br/>
-      </tr>
-      <tr title={{ctrl.workflow.nextActivation}}>
-        <td>Next activation</td>
-        <td>{{ctrl.workflow.nextActivation | fromNowOrNever}}</td>
-      </tr>
-      <tr ng-show="ctrl.workflow.businessKey">
-        <td>Business key</td>
-        <td><code>{{ctrl.workflow.businessKey}}</code></td>
-      </tr>
-      <tr ng-show="ctrl.workflow.externalId">
-        <td>External id</td>
-        <td><code>{{ctrl.workflow.externalId}}</code></td>
-      </tr>
-      <tr ng-show="ctrl.workflow.signal" title="See supported signals tab in workflow definition">
-        <td>Current signal</td>
-        <td>{{ctrl.workflow.signal}}</td>
-      </tr>
-      <tr ng-show="!!ctrl.workflow.priority" title="High value means high priority">
-        <td>Priority</td>
-        <td>{{ctrl.workflow.priority}}</td>
-      </tr>
-      <tr title="{{ctrl.workflow.created | fromNow}}">
-        <td>Created</td>
-        <td>{{ctrl.workflow.created | date:'yyyy-MM-dd HH:mm:ss'}}</td>
-      </tr>
-      <tr ng-show="ctrl.workflow.started" title="{{ctrl.workflow.started | fromNow}}">
-        <td>Started</td>
-        <td>{{ctrl.workflow.started | date:'yyyy-MM-dd HH:mm:ss'}}</td>
-      </tr>
-      <tr title="{{ctrl.workflow.modified | fromNow}}">
-        <td>Modified</td>
-        <td>{{ctrl.workflow.modified | date:'yyyy-MM-dd HH:mm:ss'}}</td>
-      </tr>
-      <custom-content func="ctrl.contentGenerator(ctrl.definition, ctrl.workflow, ctrl.parentWorkflow, ctrl.childWorkflows)"></custom-content>
-    </table>
-  </div>
-  <div ng-if="!ctrl.workflowInfoTable">
-    <div ng-show="ctrl.parentWorkflow">Parent workflow:
-      <a ui-sref="workflow({id: ctrl.parentWorkflow.id})">{{ctrl.parentWorkflow.type}} ({{ctrl.parentWorkflow.id}})</a>
-    </div>
-    <div ng-show="ctrl.childWorkflows.length">Child workflows:
-      <strong><a ui-sref="search({parentWorkflowId: ctrl.workflow.id})">{{ctrl.childWorkflows.length}}</a></strong>
-    </div>
-    Created: <strong title="{{ctrl.workflow.created | fromNow}}">{{ctrl.workflow.created | date:'yyyy-MM-dd HH:mm:ss' }}</strong><br/>
-    Started: <strong title="{{ctrl.workflow.started | fromNow}}">{{ctrl.workflow.started | date:'yyyy-MM-dd HH:mm:ss' }}</strong><br/>
-    Modified: <strong title="{{ctrl.workflow.modified | fromNow}}">{{ctrl.workflow.modified | date:'yyyy-MM-dd HH:mm:ss' }}</strong><br/>
-    Current state: <strong class="wd-active-state clickable" ng-click="ctrl.selectAction(ctrl.workflow.state)">{{ctrl.workflow.state}}</strong>
-    <span ng-show="ctrl.workflow.stateText">({{ctrl.workflow.stateText}})</span><br/>
-    Current status: <strong>{{ctrl.workflow.status}}</strong><br/>
-    <div ng-show="ctrl.workflow.signal">
-      Current signal: <strong title="See supported signals tab in workflow definition">{{ctrl.workflow.signal}}</strong><br/>
-    </div>
-    Next activation: <strong title={{ctrl.workflow.nextActivation}}>{{ctrl.workflow.nextActivation | fromNowOrNever}}</strong>
-    <div>Workflow id: <strong>{{ctrl.workflow.id}}</strong></div>
-    <div>Priority: <strong>{{ctrl.workflow.priority}}</strong><br/>
-    <div ng-show="ctrl.workflow.businessKey">Business key: <code>{{ctrl.workflow.businessKey}}</code></div>
-    <div ng-show="ctrl.workflow.externalId">External id: <code>{{ctrl.workflow.externalId}}</code></div>
-    <custom-content func="ctrl.contentGenerator(ctrl.definition, ctrl.workflow, ctrl.parentWorkflow, ctrl.childWorkflows)"></custom-content>
-  </div>
+  <table class="workflow-properties">
+    <tr ng-if="ctrl.parentWorkflow">
+      <td>Parent workflow</td>
+      <td><a ui-sref="workflow({id: ctrl.parentWorkflow.id})">{{ctrl.parentWorkflow.type}} ({{ctrl.parentWorkflow.id}})</a></td>
+    </tr>
+    <tr ng-if="ctrl.childWorkflows.length">
+      <td>Child workflows</td>
+      <td><a ui-sref="search({parentWorkflowId: ctrl.workflow.id})">{{ctrl.childWorkflows.length}}</a></td>
+    </tr>
+    <tr title="{{ctrl.workflow.stateText}}">
+      <td>Current state</td>
+      <td>
+        <a class="wd-active-state clickable" ng-click="ctrl.selectAction(ctrl.workflow.state)">{{ctrl.workflow.state}}</a>
+      </td>
+    </tr>
+    <tr>
+      <td>Current status</td>
+      <td>{{ctrl.workflow.status}}<br/>
+    </tr>
+    <tr title={{ctrl.workflow.nextActivation}}>
+      <td>Next activation</td>
+      <td>{{ctrl.workflow.nextActivation | fromNowOrNever}}</td>
+    </tr>
+    <tr ng-if="ctrl.workflow.businessKey">
+      <td>Business key</td>
+      <td><code>{{ctrl.workflow.businessKey}}</code></td>
+    </tr>
+    <tr ng-if="ctrl.workflow.externalId">
+      <td>External id</td>
+      <td><code>{{ctrl.workflow.externalId}}</code></td>
+    </tr>
+    <tr ng-if="ctrl.workflow.signal" title="See supported signals tab in workflow definition">
+      <td>Current signal</td>
+      <td>{{ctrl.workflow.signal}}</td>
+    </tr>
+    <tr ng-if="!!ctrl.workflow.priority" title="High value means high priority">
+      <td>Priority</td>
+      <td>{{ctrl.workflow.priority}}</td>
+    </tr>
+    <tr title="{{ctrl.workflow.created | fromNow}}">
+      <td>Created</td>
+      <td>{{ctrl.workflow.created | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+    </tr>
+    <tr ng-if="ctrl.workflow.started" title="{{ctrl.workflow.started | fromNow}}">
+      <td>Started</td>
+      <td>{{ctrl.workflow.started | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+    </tr>
+    <tr title="{{ctrl.workflow.modified | fromNow}}">
+      <td>Modified</td>
+      <td>{{ctrl.workflow.modified | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+    </tr>
+  </table>
+  <custom-content func="ctrl.contentGenerator(ctrl.definition, ctrl.workflow, ctrl.parentWorkflow, ctrl.childWorkflows)"></custom-content>
 </section>
diff --git a/nflow-explorer/src/app/workflow/workflowInfo.js b/nflow-explorer/src/app/workflow/workflowInfo.js
index a47d1011a..b0199fb53 100644
--- a/nflow-explorer/src/app/workflow/workflowInfo.js
+++ b/nflow-explorer/src/app/workflow/workflowInfo.js
@@ -27,7 +27,6 @@
     var self = this;
     self.currentStateTime = currentStateTime;
     self.selectAction = WorkflowGraphApi.onSelectNode;
-    self.workflowInfoTable = config.workflowInfoTable;
     self.contentGenerator = config.customInstanceContent;
 
     function currentStateTime() {
diff --git a/nflow-explorer/src/config.js b/nflow-explorer/src/config.js
index 6907cac04..3da97d022 100644
--- a/nflow-explorer/src/config.js
+++ b/nflow-explorer/src/config.js
@@ -79,8 +79,4 @@ var Config = function() {
 
   // When true, hides the sticky footer with copyright
   this.hideFooter = false;
-
-  // When true, workflow instance properties shown in a table
-  // (if needed, update your customInstanceContent to generate table rows)
-  this.workflowInfoTable = false;
 };
diff --git a/nflow-explorer/src/styles/main.scss b/nflow-explorer/src/styles/main.scss
index 1edf72066..7bbf5d592 100644
--- a/nflow-explorer/src/styles/main.scss
+++ b/nflow-explorer/src/styles/main.scss
@@ -259,24 +259,28 @@ ul.listing {
   cursor: pointer;
 }
 
-#workflow-properties tr:nth-child(even) {
+.workflow-properties tr:nth-child(even) {
   background-color: #f2f2f2;
 }
 
-#workflow-properties tr:hover {
+.workflow-properties tr:hover {
   background-color: #ddd;
 }
 
-#workflow-properties td:first-child {
+.workflow-properties td:first-child {
   font-weight: bold;
 }
 
-#workflow-properties td {
+.workflow-properties th {
+  background-color: #d9d9d9;
+}
+
+.workflow-properties td, .workflow-properties th {
   border: 1px solid #ddd;
   padding: 8px;
 }
 
-#workflow-properties code {
+.workflow-properties code {
   color: black;
   background-color: transparent;
 }