fix: improve actions status icons and texts (#37206)

Action runs, jobs and steps have 8 statuses but the UI only showed 5 (from the commit status api) for the latter two. Align all 8 to GitHub as closely as possible: - waiting — `octicon-circle` (hollow circle), gray - blocked — `octicon-blocked` (slashed circle), yellow - running — `gitea-running` (rotating spinner), yellow - cancelled — `octicon-stop` (gray), was `octicon-x` (red) Descriptions also aligned with GitHub: - "Has started running" → "In progress" - "Has been cancelled" → "Cancelled after {dur}" - "Has been skipped" → "Skipped" Fixes: https://github.com/go-gitea/gitea/issues/32228 --------- Signed-off-by: wxiaoguang <wxiaoguang@gmail.com> Signed-off-by: silverwind <me@silverwind.io> Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Nicolas <bircni@icloud.com>
2026-05-23 05:42:33 +09:00 · 2026-05-09 09:24:08 +02:00
parent a5d81d9ce2
commit ce089f498b
22 changed files with 248 additions and 70 deletions
--- a/web_src/js/components/ActionRunJobView.vue
+++ b/web_src/js/components/ActionRunJobView.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import {nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
-import ActionRunStatus from './ActionRunStatus.vue';
+import ActionStatusIcon from './ActionStatusIcon.vue';
 import {addDelegatedEventListener, createElementFromAttrs, toggleElem} from '../utils/dom.ts';
 import {formatDatetime} from '../utils/time.ts';
 import {POST} from '../modules/fetch.ts';
 import type {IntervalId} from '../types.ts';
 import {toggleFullScreen} from '../utils.ts';
 import {localUserSettings} from '../modules/user-settings.ts';
-import type {ActionsArtifact, ActionsRun, ActionsRunStatus} from '../modules/gitea-actions.ts';
+import type {ActionsArtifact, ActionsRun, ActionsStatus} from '../modules/gitea-actions.ts';
 import {
  type ActionRunViewStore,
  createLogLineMessage,
@@ -26,7 +26,7 @@ function isLogElementInViewport(el: Element, {extraViewPortHeight}={extraViewPor
 type Step = {
  summary: string,
  duration: string,
-  status: ActionsRunStatus,
+  status: ActionsStatus,
 }

 type JobStepState = {
@@ -352,11 +352,11 @@ async function loadJob() {
  }
 }

-function isDone(status: ActionsRunStatus) {
+function isDone(status: ActionsStatus) {
  return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
 }

-function isExpandable(status: ActionsRunStatus) {
+function isExpandable(status: ActionsStatus) {
  return ['success', 'running', 'failure', 'cancelled'].includes(status);
 }

@@ -466,7 +466,7 @@ async function hashChangeListener() {
          :name="currentJobStepsStates[stepIdx].expanded ? 'octicon-chevron-down' : 'octicon-chevron-right'"
          :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"
        />
-        <ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
+        <ActionStatusIcon :status="jobStep.status" icon-variant="circle-fill" class="tw-mr-2"/>
        <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
        <span class="step-summary-duration">{{ jobStep.duration }}</span>
      </div>
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/web_src/js/components/ActionRunSummaryView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ActionRunStatus from './ActionRunStatus.vue';
+import ActionStatusIcon from './ActionStatusIcon.vue';
 import WorkflowGraph from './WorkflowGraph.vue';
 import type {ActionRunViewStore} from "./ActionRunView.ts";
 import {computed, onBeforeUnmount, onMounted, toRefs} from "vue";
@@ -45,11 +45,11 @@ onBeforeUnmount(() => {
          <a v-if="triggerUser.link" class="muted" :href="triggerUser.link">{{ triggerUser.name }}</a>
          <span v-else class="muted">{{ triggerUser.name }}</span>
        </template>
-        <span>•</span> 
+        <span>•</span>
        <relative-time :datetime="run.triggeredAt || ''" prefix=""/>
      </div>
      <div class="flex-text-block">
-        <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="16"/>
+        <ActionStatusIcon :locale-status="locale.status[run.status]" :status="run.status" :size="16" icon-variant="circle-fill"/>
        <span>{{ locale.status[run.status] }}</span> • <span>{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
      </div>
    </div>
--- a/web_src/js/components/ActionRunView.ts
+++ b/web_src/js/components/ActionRunView.ts
@@ -1,7 +1,7 @@
 import {createElementFromAttrs} from '../utils/dom.ts';
 import {renderAnsi} from '../render/ansi.ts';
 import {reactive} from 'vue';
-import type {ActionsArtifact, ActionsJob, ActionsRun, ActionsRunStatus} from '../modules/gitea-actions.ts';
+import type {ActionsArtifact, ActionsJob, ActionsRun, ActionsStatus} from '../modules/gitea-actions.ts';
 import type {IntervalId} from '../types.ts';
 import {POST} from '../modules/fetch.ts';

@@ -94,7 +94,7 @@ export function createEmptyActionsRun(): ActionsRun {
    viewLink: '',
    title: '',
    titleHTML: '',
-    status: '' as ActionsRunStatus, // do not show the status before initialized, otherwise it would show an incorrect "error" icon
+    status: '' as ActionsStatus, // do not show the status before initialized, otherwise it would show an incorrect "error" icon
    canCancel: false,
    canApprove: false,
    canRerun: false,
--- a/web_src/js/components/ActionStatusIcon.vue
+++ b/web_src/js/components/ActionStatusIcon.vue
@@ -1,30 +1,32 @@
-<!-- This vue should be kept the same as templates/repo/actions/status.tmpl
-    Please also update the template file above if this vue is modified.
-    action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown
+<!-- Keep in sync with templates/repo/icons/action_status.tmpl.
+    action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown.
 -->
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';

-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
  status: 'success' | 'skipped' | 'waiting' | 'blocked' | 'running' | 'failure' | 'cancelled' | 'unknown',
  size?: number,
  className?: string,
  localeStatus?: string,
+  iconVariant?: 'circle-fill' | '',
 }>(), {
  size: 16,
  className: '',
  localeStatus: undefined,
+  iconVariant: '',
 });
+const circleFill = props.iconVariant === 'circle-fill';
 </script>

 <template>
  <span :data-tooltip-content="localeStatus ?? status" v-if="status">
-    <SvgIcon name="octicon-check-circle-fill" class="tw-text-green" :size="size" :class="className" v-if="status === 'success'"/>
+    <SvgIcon :name="circleFill ? 'octicon-check-circle-fill' : 'octicon-check'" class="tw-text-green" :size="size" :class="className" v-if="status === 'success'"/>
    <SvgIcon name="octicon-skip" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'skipped'"/>
    <SvgIcon name="octicon-stop" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
    <SvgIcon name="octicon-circle" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'waiting'"/>
    <SvgIcon name="octicon-blocked" class="tw-text-yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
    <SvgIcon name="gitea-running" class="tw-text-yellow" :size="size" :class="'rotate-clockwise ' + className" v-else-if="status === 'running'"/>
-    <SvgIcon name="octicon-x-circle-fill" class="tw-text-red" :size="size" v-else/><!-- failure, unknown -->
+    <SvgIcon :name="circleFill ? 'octicon-x-circle-fill' : 'octicon-x'" class="tw-text-red" :size="size" :class="className" v-else/><!-- failure, unknown -->
  </span>
 </template>
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {SvgIcon} from '../svg.ts';
-import ActionRunStatus from './ActionRunStatus.vue';
+import ActionStatusIcon from './ActionStatusIcon.vue';
 import {toRefs} from 'vue';
 import {POST, DELETE} from '../modules/fetch.ts';
 import ActionRunSummaryView from './ActionRunSummaryView.vue';
@@ -56,7 +56,7 @@ async function deleteArtifact(name: string) {
    <div class="action-view-header">
      <div class="action-info-summary">
        <div class="action-info-summary-title">
-          <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/>
+          <ActionStatusIcon :locale-status="locale.status[run.status]" :status="run.status" :size="20" icon-variant="circle-fill"/>
          <!-- eslint-disable-next-line vue/no-v-html -->
          <h2 class="action-info-summary-title-text" v-html="run.titleHTML"/>
        </div>
@@ -105,7 +105,7 @@ async function deleteArtifact(name: string) {
                </div>
                <div class="flex-text-block tw-pl-[20px]">
                  <span class="flex-text-inline tw-flex-shrink-0">
-                    <ActionRunStatus :locale-status="locale.status[attempt.status]" :status="attempt.status" :size="14" class="flex-text-block"/>
+                    <ActionStatusIcon :locale-status="locale.status[attempt.status]" :status="attempt.status" :size="14" class="flex-text-block" icon-variant="circle-fill"/>
                    <span>{{ locale.status[attempt.status] }}</span>
                  </span>
                  <span>•</span>
@@ -154,7 +154,7 @@ async function deleteArtifact(name: string) {
        <ul class="ui relaxed list flex-items-block tw-p-0">
          <li class="item job-brief-item" v-for="job in run.jobs" :key="job.id" :class="props.jobId === job.id ? 'selected' : ''">
            <a class="tw-contents silenced" :href="job.link">
-              <ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/>
+              <ActionStatusIcon :locale-status="locale.status[job.status]" :status="job.status" icon-variant="circle-fill"/>
              <span class="tw-flex-1 gt-ellipsis">{{ job.name }}</span>
              <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${job.id}/rerun`" v-if="job.canRerun"/>
              <span>{{ job.duration }}</span>
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
-import ActionRunStatus from './ActionRunStatus.vue';
+import ActionStatusIcon from './ActionStatusIcon.vue';
 import {localUserSettings} from '../modules/user-settings.ts';
 import {isPlainClick} from '../utils/dom.ts';
 import {debounce} from 'throttle-debounce';
-import type {ActionsJob, ActionsRunStatus} from '../modules/gitea-actions.ts';
+import type {ActionsJob, ActionsStatus} from '../modules/gitea-actions.ts';
 import type {ActionRunViewStore} from './ActionRunView.ts';

 interface JobNode {
  id: number;
  name: string;
-  status: ActionsRunStatus;
+  status: ActionsStatus;
  duration: string;

  x: number;
@@ -641,7 +641,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
            class="job-status-fg-obj"
          >
            <div class="job-status-icon-wrap">
-              <ActionRunStatus :status="job.status"/>
+              <ActionStatusIcon :status="job.status" icon-variant="circle-fill"/>
            </div>
          </foreignObject>