From d08111bd92da38147f7ed7f434e2247313ef0371 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 2 Aug 2023 14:21:39 -0500
Subject: [PATCH] Make it obvious that `WorkflowInvocationStep` is
 clickable/expandable Added `cursor-pointer` class as well as
 `fa-chevron-up/down` icons.

---
 .../WorkflowInvocationState/WorkflowInvocationStep.vue   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index fb9500063b81..d0d8d697337c 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -1,11 +1,12 @@
 <template>
     <div class="d-flex" :data-step="workflowStep.id">
         <div class="ui-portlet-section" style="width: 100%">
-            <div class="portlet-header portlet-title portlet-operations" @click="toggleStep">
+            <div class="portlet-header portlet-title portlet-operations cursor-pointer" @click="toggleStep">
                 <i :class="'portlet-title-icon fa mr-1 ' + stepIcon"></i>
                 <span class="portlet-title-text">
                     <u class="step-title">{{ stepLabel }}</u>
                 </span>
+                <FontAwesomeIcon class="float-right" :icon="expanded ? 'fa-chevron-up' : 'fa-chevron-down'" />
             </div>
             <div v-if="expanded" class="portlet-content">
                 <InvocationStepProvider
@@ -84,6 +85,9 @@
     </div>
 </template>
 <script>
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import GenericHistoryItem from "components/History/Content/GenericItem";
 import LoadingSpan from "components/LoadingSpan";
 import { InvocationStepProvider } from "components/providers";
@@ -96,9 +100,12 @@ import { mapCacheActions } from "vuex-cache";
 import JobStep from "./JobStep";
 import ParameterStep from "./ParameterStep";
 
+library.add(faChevronUp, faChevronDown);
+
 export default {
     components: {
         LoadingSpan,
+        FontAwesomeIcon,
         JobStep,
         ParameterStep,
         InvocationStepProvider,