Show workflow link (#37070)

Add the workflow link to the left list.

Superseeds #31906

---------

Signed-off-by: Nicolas <bircni@icloud.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

options/locale/locale_en-US.json

@@ -3722,6 +3722,8 @@
   "actions.runs.workflow_run_count_1": "%d workflow run",
   "actions.runs.workflow_run_count_n": "%d workflow runs",
   "actions.runs.commit": "Commit",
+  "actions.runs.run_details": "Run Details",
+  "actions.runs.workflow_file": "Workflow file",
   "actions.runs.scheduled": "Scheduled",
   "actions.runs.pushed_by": "pushed by",
   "actions.runs.invalid_workflow_helper": "Workflow config file is invalid. Please check your config file: %s",

templates/repo/actions/view_component.tmpl

@@ -16,6 +16,8 @@
 		data-locale-all-jobs="{{ctx.Locale.Tr "actions.runs.all_jobs"}}"
 		data-locale-triggered-via="{{ctx.Locale.Tr "actions.runs.triggered_via"}}"
 		data-locale-total-duration="{{ctx.Locale.Tr "actions.runs.total_duration"}}"
+		data-locale-run-details="{{ctx.Locale.Tr "actions.runs.run_details"}}"
+		data-locale-workflow-file="{{ctx.Locale.Tr "actions.runs.workflow_file"}}"
 		data-locale-status-unknown="{{ctx.Locale.Tr "actions.status.unknown"}}"
 		data-locale-status-waiting="{{ctx.Locale.Tr "actions.status.waiting"}}"
 		data-locale-status-running="{{ctx.Locale.Tr "actions.status.running"}}"

web_src/js/components/RepoActionView.vue

@@ -92,52 +92,62 @@ async function deleteArtifact(name: string) {
     </div>
     <div class="action-view-body">
       <div class="action-view-left">
-        <div class="job-group-section">
-          <a class="job-brief-item" :href="run.link" :class="!props.jobId ? 'selected' : ''">
-            <div class="job-brief-item-left">
-              <SvgIcon name="octicon-list-unordered" class="tw-mr-2"/>
-              <span class="job-brief-name tw-mx-2 gt-ellipsis">{{ locale.summary }}</span>
-            </div>
-          </a>
-          <div class="ui divider"/>
-          <div class="job-brief-list">
-            <div class="left-list-header">{{ locale.allJobs }}</div>
-            <a class="job-brief-item" :href="run.link+'/jobs/'+job.id" :class="props.jobId === job.id ? 'selected' : ''" v-for="job in run.jobs" :key="job.id">
-              <div class="job-brief-item-left">
-                <ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/>
-                <span class="job-brief-name tw-mx-2 gt-ellipsis">{{ job.name }}</span>
-              </div>
-              <span class="job-brief-item-right">
-                <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun tw-mx-2 link-action interact-fg" :data-url="`${run.link}/jobs/${job.id}/rerun`" v-if="job.canRerun"/>
-                <span class="step-summary-duration">{{ job.duration }}</span>
-              </span>
+        <!-- summary -->
+        <a class="job-brief-item silenced" :href="run.link" :class="!props.jobId ? 'selected' : ''">
+          <SvgIcon name="octicon-list-unordered"/>
+          <span class="gt-ellipsis">{{ locale.summary }}</span>
+        </a>
+
+        <!-- jobs list -->
+        <div class="ui divider"/>
+        <div class="left-list-header">{{ locale.allJobs }}</div>
+        <!-- unlike other lists, the items have paddings already -->
+        <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="run.link+'/jobs/'+job.id">
+              <ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/>
+              <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>
-          </div>
-        </div>
-        <div class="job-artifacts" v-if="artifacts.length > 0">
+          </li>
+        </ul>
+
+        <!-- artifacts list -->
+        <template v-if="artifacts.length > 0">
           <div class="ui divider"/>
           <div class="left-list-header">{{ locale.artifactsTitle }} ({{ artifacts.length }})</div>
-          <ul class="job-artifacts-list">
-            <template v-for="artifact in artifacts" :key="artifact.name">
-              <li class="job-artifacts-item">
-                <template v-if="artifact.status !== 'expired'">
-                  <a class="flex-text-inline" target="_blank" :href="run.link+'/artifacts/'+artifact.name">
-                    <SvgIcon name="octicon-file" class="tw-text-text"/>
-                    <span class="gt-ellipsis">{{ artifact.name }}</span>
-                  </a>
-                  <a v-if="run.canDeleteArtifact" @click="deleteArtifact(artifact.name)">
-                    <SvgIcon name="octicon-trash" class="tw-text-text"/>
-                  </a>
-                </template>
-                <span v-else class="flex-text-inline tw-text-grey-light">
-                  <SvgIcon name="octicon-file"/>
-                  <span class="gt-ellipsis">{{ artifact.name }}</span>
-                  <span class="ui label tw-text-grey-light tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
-                </span>
-              </li>
-            </template>
+          <ul class="ui relaxed list flex-items-block">
+            <li class="item" v-for="artifact in artifacts" :key="artifact.name">
+              <template v-if="artifact.status !== 'expired'">
+                <a class="tw-flex-1 flex-text-block" target="_blank" :href="run.link+'/artifacts/'+artifact.name">
+                  <SvgIcon name="octicon-file" class="tw-text-text"/>
+                  <span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
+                </a>
+                <a v-if="run.canDeleteArtifact" @click="deleteArtifact(artifact.name)">
+                  <SvgIcon name="octicon-trash" class="tw-text-text"/>
+                </a>
+              </template>
+              <span v-else class="flex-text-block tw-flex-1 tw-text-grey-light">
+                <SvgIcon name="octicon-file"/>
+                <span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
+                <span class="ui label tw-text-grey-light tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
+              </span>
+            </li>
           </ul>
-        </div>
+        </template>
+
+        <!-- run details -->
+        <div class="ui divider"/>
+        <div class="left-list-header">{{ locale.runDetails }}</div>
+        <ul class="ui relaxed list">
+          <li class="item">
+            <a class="flex-text-block" :href="`${run.link}/workflow`">
+              <SvgIcon name="octicon-file-code" class="tw-text-text"/>
+              <span class="gt-ellipsis">{{ locale.workflowFile }}</span>
+            </a>
+          </li>
+        </ul>
       </div>
 
       <div class="action-view-right">
@@ -244,34 +254,18 @@ async function deleteArtifact(name: string) {
   color: var(--color-text-light-2);
 }
 
-.job-artifacts-item {
-  margin: 5px 0;
-  padding: 6px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.job-artifacts-list {
-  padding-left: 4px;
-  list-style: none;
-}
-
-.job-brief-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+.action-view-left .ui.relaxed.list {
+  margin: var(--gap-block) 0;
+  padding-left: 10px;
 }
 
 .job-brief-item {
   padding: 6px 10px;
   border-radius: var(--border-radius);
-  text-decoration: none;
   display: flex;
   flex-wrap: nowrap;
-  justify-content: space-between;
   align-items: center;
-  color: var(--color-text);
+  gap: var(--gap-block);
 }
 
 .job-brief-item:hover {
@@ -283,34 +277,6 @@ async function deleteArtifact(name: string) {
   background-color: var(--color-active);
 }
 
-.job-brief-item:first-of-type {
-  margin-top: 0;
-}
-
-.job-brief-item .job-brief-rerun {
-  cursor: pointer;
-}
-
-.job-brief-item .job-brief-item-left {
-  display: flex;
-  width: 100%;
-  min-width: 0;
-}
-
-.job-brief-item .job-brief-item-left span {
-  display: flex;
-  align-items: center;
-}
-
-.job-brief-item .job-brief-item-left .job-brief-name {
-  display: block;
-}
-
-.job-brief-item .job-brief-item-right {
-  display: flex;
-  align-items: center;
-}
-
 /* ================ */
 /* action view right */
 

web_src/js/features/repo-actions.ts

@@ -50,6 +50,8 @@ export function initRepositoryActionView() {
       },
       logsAlwaysAutoScroll: el.getAttribute('data-locale-logs-always-auto-scroll'),
       logsAlwaysExpandRunning: el.getAttribute('data-locale-logs-always-expand-running'),
+      workflowFile: el.getAttribute('data-locale-workflow-file'),
+      runDetails: el.getAttribute('data-locale-run-details'),
     },
   });
   view.mount(el);

web_src/js/svg.ts

@@ -29,6 +29,7 @@ import octiconDotFill from '../../public/assets/img/svg/octicon-dot-fill.svg';
 import octiconDownload from '../../public/assets/img/svg/octicon-download.svg';
 import octiconEye from '../../public/assets/img/svg/octicon-eye.svg';
 import octiconFile from '../../public/assets/img/svg/octicon-file.svg';
+import octiconFileCode from '../../public/assets/img/svg/octicon-file-code.svg';
 import octiconFileDirectoryFill from '../../public/assets/img/svg/octicon-file-directory-fill.svg';
 import octiconFileDirectoryOpenFill from '../../public/assets/img/svg/octicon-file-directory-open-fill.svg';
 import octiconFileSubmodule from '../../public/assets/img/svg/octicon-file-submodule.svg';
@@ -112,6 +113,7 @@ const svgs = {
   'octicon-download': octiconDownload,
   'octicon-eye': octiconEye,
   'octicon-file': octiconFile,
+  'octicon-file-code': octiconFileCode,
   'octicon-file-directory-fill': octiconFileDirectoryFill,
   'octicon-file-directory-open-fill': octiconFileDirectoryOpenFill,
   'octicon-file-submodule': octiconFileSubmodule,