From f0e4052fd74c6e83762fdc6ffb1c2868c07783d7 Mon Sep 17 00:00:00 2001
From: "James E. Blair" <jeblair@redhat.com>
Date: Thu, 9 Jul 2020 11:30:55 -0700
Subject: [PATCH] Add an icon next to result buttons on the console log

As a low-cost attempt to indicate that the results button is
clickable and will bring up details, add a search-with-plus icon
("zoom in") to the left of it.  Let's see if that indicates to
users that they can click on it (or at least mouseover and read
the help text that explains it).

This also updates the other icons in the task rows to use the
newest recommendations for PF4.  There are some minor size and
style differences, so keeping all of them in sync makes sense.

Change-Id: I3fff295d2b3b38b9e1c75e13f9a8a967e812168e
---
 web/src/containers/build/Console.jsx | 24 +++++++++++++++++++++---
 web/src/index.css                    |  6 ++++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/web/src/containers/build/Console.jsx b/web/src/containers/build/Console.jsx
index d8810170ee..a84b4a01dd 100644
--- a/web/src/containers/build/Console.jsx
+++ b/web/src/containers/build/Console.jsx
@@ -24,6 +24,11 @@ import {
   Col,
   Modal,
 } from 'patternfly-react'
+import {
+  ContainerNodeIcon,
+  InfoCircleIcon,
+  SearchPlusIcon,
+} from '@patternfly/react-icons'
 
 import {
   hasInterestingKeys,
@@ -181,30 +186,42 @@ class HostTask extends React.Component {
     if (this.state.failed) {
       ai.push(
         <ListView.InfoItem key="failed" title="Click for details">
+          <span className="task-details-icon" onClick={this.open}>
+            <SearchPlusIcon />
+          </span>
           <span className="task-failed" onClick={this.open}>FAILED</span>
         </ListView.InfoItem>)
     } else if (this.state.changed) {
       ai.push(
         <ListView.InfoItem key="changed" title="Click for details">
+          <span className="task-details-icon" onClick={this.open}>
+            <SearchPlusIcon />
+          </span>
           <span className="task-changed" onClick={this.open}>CHANGED</span>
         </ListView.InfoItem>)
     } else if (this.state.skipped) {
       ai.push(
         <ListView.InfoItem key="skipped" title="Click for details">
+          <span className="task-details-icon" onClick={this.open}>
+            <SearchPlusIcon />
+          </span>
           <span className="task-skipped" onClick={this.open}>SKIPPED</span>
         </ListView.InfoItem>)
     } else if (this.state.ok) {
       ai.push(
         <ListView.InfoItem key="ok" title="Click for details">
+          <span className="task-details-icon" onClick={this.open}>
+            <SearchPlusIcon />
+          </span>
           <span className="task-ok" onClick={this.open}>OK</span>
         </ListView.InfoItem>)
     }
     ai.push(
       <ListView.InfoItem key="hostname">
         <span className="additionalinfo-icon">
-          <Icon type='pf' name='container-node' />
-          {hostname}
+          <ContainerNodeIcon />
         </span>
+        {hostname}
       </ListView.InfoItem>
     )
 
@@ -304,8 +321,9 @@ class PlayBook extends React.Component {
       ai.push(
         <ListView.InfoItem key="trusted" title="This playbook runs in a trusted execution context, which permits executing code on the Zuul executor and allows access to all Ansible features.">
           <span className="additionalinfo-icon">
-            <Icon type='pf' name='info' /> Trusted
+            <InfoCircleIcon />
           </span>
+          Trusted
         </ListView.InfoItem>
       )
     }
diff --git a/web/src/index.css b/web/src/index.css
index f26428fc75..6a2ae44044 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -253,6 +253,12 @@ pre.version {
 .zuul-console .additionalinfo-icon
 {
     cursor: default;
+    margin-right: 8px;
+}
+.zuul-console .task-details-icon
+{
+    cursor: pointer;
+    margin-right: 8px;
 }
 .zuul-console-modal-header-link
 {