From 53b8af4676a857dc5eb61c8852f8601dbe933e14 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 21 Mar 2024 20:04:16 +0100
Subject: [PATCH 1/7] Handle skipped action step status in UI

---
 web_src/js/components/RepoActionView.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index c1e2c2b2d520b..9c2724ec52c99 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -459,12 +459,13 @@ export function initRepositoryActionView() {
         </div>
         <div class="job-step-container" ref="steps" v-if="currentJob.steps.length">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
-            <div class="job-step-summary" @click.stop="toggleStepLogs(i)" :class="currentJobStepsStates[i].expanded ? 'selected' : ''">
+            <div class="job-step-summary" @click.stop="jobStep.status !== 'skipped' && toggleStepLogs(i)" :class="[selected ? currentJobStepsStates[i].expanded : '', jobStep.status ? `step-status-${jobStep.status}` : '']">
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->
               <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
-              <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" class="gt-mr-3"/>
+              <SvgIcon v-else-if="jobStep.status !== 'skipped'" :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" class="gt-mr-3"/>
+              <div v-else class="tw-w-4 tw-h-4 gt-mr-3"/>
               <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/>
 
               <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
@@ -715,13 +716,16 @@ export function initRepositoryActionView() {
 }
 
 .job-step-container .job-step-summary {
-  cursor: pointer;
   padding: 5px 10px;
   display: flex;
   align-items: center;
   border-radius: var(--border-radius);
 }
 
+.job-step-container .job-step-summary:not(.step-status-skipped) {
+  cursor: pointer;
+}
+
 .job-step-container .job-step-summary .step-summary-msg {
   flex: 1;
 }
@@ -730,10 +734,9 @@ export function initRepositoryActionView() {
   margin-left: 16px;
 }
 
-.job-step-container .job-step-summary:hover {
+.job-step-container .job-step-summary:not(.step-status-skipped):hover {
   color: var(--color-console-fg);
   background-color: var(--color-console-hover-bg);
-
 }
 
 .job-step-container .job-step-summary.selected {

From 5c4b02bc524d8c9563c80ba4b057ba1deaf856c7 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 21 Mar 2024 20:09:44 +0100
Subject: [PATCH 2/7] fix selected state

---
 web_src/js/components/RepoActionView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 9c2724ec52c99..b633f60114f53 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -459,7 +459,7 @@ export function initRepositoryActionView() {
         </div>
         <div class="job-step-container" ref="steps" v-if="currentJob.steps.length">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
-            <div class="job-step-summary" @click.stop="jobStep.status !== 'skipped' && toggleStepLogs(i)" :class="[selected ? currentJobStepsStates[i].expanded : '', jobStep.status ? `step-status-${jobStep.status}` : '']">
+            <div class="job-step-summary" @click.stop="jobStep.status !== 'skipped' && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', jobStep.status ? `step-status-${jobStep.status}` : '']">
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->

From d20ebff580ac26383d680468a0fefc5f0c1f16bb Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 21 Mar 2024 20:15:29 +0100
Subject: [PATCH 3/7] fix icon size

---
 web_src/js/components/RepoActionView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index b633f60114f53..c34344cd3374d 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -465,7 +465,7 @@ export function initRepositoryActionView() {
               -->
               <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
               <SvgIcon v-else-if="jobStep.status !== 'skipped'" :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" class="gt-mr-3"/>
-              <div v-else class="tw-w-4 tw-h-4 gt-mr-3"/>
+              <div v-else class="tw-w-[16px] tw-h-[16px] gt-mr-3"/>
               <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/>
 
               <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>

From 3cad42a131c745dd3a8467627e7fb3cf9b0317c9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 21 Mar 2024 20:43:46 +0100
Subject: [PATCH 4/7] use tw-invisible

---
 web_src/js/components/RepoActionView.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index c34344cd3374d..8b95a98e6904b 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -464,8 +464,7 @@ export function initRepositoryActionView() {
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->
               <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
-              <SvgIcon v-else-if="jobStep.status !== 'skipped'" :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" class="gt-mr-3"/>
-              <div v-else class="tw-w-[16px] tw-h-[16px] gt-mr-3"/>
+              <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['gt-mr-3', jobStep.status === 'skipped' && 'tw-invisible']"/>
               <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/>
 
               <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>

From d24815bd5113179f3da9e22295673ce9d2e1c818 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 21 Mar 2024 20:48:10 +0100
Subject: [PATCH 5/7] simplify

---
 web_src/js/components/RepoActionView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 8b95a98e6904b..eb734e21f25c6 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -459,7 +459,7 @@ export function initRepositoryActionView() {
         </div>
         <div class="job-step-container" ref="steps" v-if="currentJob.steps.length">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
-            <div class="job-step-summary" @click.stop="jobStep.status !== 'skipped' && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', jobStep.status ? `step-status-${jobStep.status}` : '']">
+            <div class="job-step-summary" @click.stop="jobStep.status !== 'skipped' && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', jobStep.status && `step-status-${jobStep.status}`]">
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->

From 35f2c377d21423137bb3a5e707b17c6add0add49 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 22 Mar 2024 00:55:13 +0100
Subject: [PATCH 6/7] refactor and add all 4 status that are surely expandable

---
 web_src/js/components/RepoActionView.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index eb734e21f25c6..bfa2da3e35685 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -268,6 +268,10 @@ const sfc = {
       return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
     },
 
+    isExpandable(status) {
+      return ['success', 'running', 'failure', 'cancelled'].includes(status);
+    },
+
     closeDropdown() {
       if (this.menuVisible) this.menuVisible = false;
     },
@@ -352,7 +356,7 @@ export function initRepositoryActionView() {
         skipped: el.getAttribute('data-locale-status-skipped'),
         blocked: el.getAttribute('data-locale-status-blocked'),
       },
-    }
+    },
   });
   view.mount(el);
 }
@@ -459,12 +463,12 @@ export function initRepositoryActionView() {
         </div>
         <div class="job-step-container" ref="steps" v-if="currentJob.steps.length">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
-            <div class="job-step-summary" @click.stop="jobStep.status !== 'skipped' && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', jobStep.status && `step-status-${jobStep.status}`]">
+            <div class="job-step-summary" @click.stop="jobStep.status !== 'skipped' && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', isExpandable(jobStep.status) && 'step-expandable']">
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->
               <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
-              <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['gt-mr-3', jobStep.status === 'skipped' && 'tw-invisible']"/>
+              <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['gt-mr-3', !isExpandable(jobStep.status) && 'tw-invisible']"/>
               <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/>
 
               <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
@@ -721,10 +725,16 @@ export function initRepositoryActionView() {
   border-radius: var(--border-radius);
 }
 
-.job-step-container .job-step-summary:not(.step-status-skipped) {
+.job-step-container .job-step-summary.step-expandable {
   cursor: pointer;
 }
 
+.job-step-container .job-step-summary.step-expandable:hover {
+  color: var(--color-console-fg);
+  background-color: var(--color-console-hover-bg);
+}
+
+
 .job-step-container .job-step-summary .step-summary-msg {
   flex: 1;
 }
@@ -733,11 +743,6 @@ export function initRepositoryActionView() {
   margin-left: 16px;
 }
 
-.job-step-container .job-step-summary:not(.step-status-skipped):hover {
-  color: var(--color-console-fg);
-  background-color: var(--color-console-hover-bg);
-}
-
 .job-step-container .job-step-summary.selected {
   color: var(--color-console-fg);
   background-color: var(--color-console-active-bg);

From e6abc01a8fcc6e1074030eb16cbf8f5691fe9423 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 22 Mar 2024 00:55:48 +0100
Subject: [PATCH 7/7] fix lint

---
 web_src/js/components/RepoActionView.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index bfa2da3e35685..803a13a995142 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -734,7 +734,6 @@ export function initRepositoryActionView() {
   background-color: var(--color-console-hover-bg);
 }
 
-
 .job-step-container .job-step-summary .step-summary-msg {
   flex: 1;
 }