Dont show expansion for empty actions steps (#29977)

This hides the chevron icon and makes the step header unclickable for
skipped steps because there is no content to expand on those.

Before:

<img width="272" alt="Screenshot 2024-03-21 at 20 06 47"
src="https://github.com/go-gitea/gitea/assets/115237/9bb328d1-6f74-48a9-af19-de9b351e3707">

After:
<img width="295" alt="Screenshot 2024-03-21 at 20 03 07"
src="https://github.com/go-gitea/gitea/assets/115237/72a26e14-5a28-4606-8c3c-184b405872c8">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2024-03-24 14:38:10 +01:00 committed by GitHub
parent f22fe4e194
commit 5bd0773741
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -268,6 +268,10 @@ const sfc = {
return ['success', 'skipped', 'failure', 'cancelled'].includes(status); return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
}, },
isExpandable(status) {
return ['success', 'running', 'failure', 'cancelled'].includes(status);
},
closeDropdown() { closeDropdown() {
if (this.menuVisible) this.menuVisible = false; if (this.menuVisible) this.menuVisible = false;
}, },
@ -459,12 +463,12 @@ export function initRepositoryActionView() {
</div> </div>
<div class="job-step-container" ref="steps" v-if="currentJob.steps.length"> <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-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="[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 <!-- 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 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-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 :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"/> <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/>
<span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span> <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
@ -715,13 +719,21 @@ export function initRepositoryActionView() {
} }
.job-step-container .job-step-summary { .job-step-container .job-step-summary {
cursor: pointer;
padding: 5px 10px; padding: 5px 10px;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.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 { .job-step-container .job-step-summary .step-summary-msg {
flex: 1; flex: 1;
} }
@ -730,12 +742,6 @@ export function initRepositoryActionView() {
margin-left: 16px; margin-left: 16px;
} }
.job-step-container .job-step-summary:hover {
color: var(--color-console-fg);
background-color: var(--color-console-hover-bg);
}
.job-step-container .job-step-summary.selected { .job-step-container .job-step-summary.selected {
color: var(--color-console-fg); color: var(--color-console-fg);
background-color: var(--color-console-active-bg); background-color: var(--color-console-active-bg);