Grey out expired artifact on Artifacts list (#34314) (#34404)

Backport #34314 by @NorthRealm

Grey out expired artifact on Artifacts list.


![1](https://github.com/user-attachments/assets/79c00e39-29f5-4264-b7b2-7ed638ab71c1)

![2](https://github.com/user-attachments/assets/686b745f-d6d7-4921-8e1b-3472ac8b6c17)

Co-authored-by: NorthRealm <155140859+NorthRealm@users.noreply.github.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

options/locale/locale_en-US.ini

@@ -130,6 +130,7 @@ pin = Pin
 unpin = Unpin
 
 artifacts = Artifacts
+expired = Expired
 confirm_delete_artifact = Are you sure you want to delete the artifact '%s' ?
 
 archived = Archived

routers/web/devtest/mock_actions.go

@@ -94,6 +94,16 @@ func MockActionsRunsJobs(ctx *context.Context) {
 		Size:   1024 * 1024,
 		Status: "completed",
 	})
+	resp.Artifacts = append(resp.Artifacts, &actions.ArtifactsViewItem{
+		Name:   "artifact-very-loooooooooooooooooooooooooooooooooooooooooooooooooooooooong",
+		Size:   100 * 1024,
+		Status: "expired",
+	})
+	resp.Artifacts = append(resp.Artifacts, &actions.ArtifactsViewItem{
+		Name:   "artifact-really-loooooooooooooooooooooooooooooooooooooooooooooooooooooooong",
+		Size:   1024 * 1024,
+		Status: "completed",
+	})
 
 	resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
 		ID:       runID * 10,

templates/repo/actions/view_component.tmpl

@@ -19,6 +19,7 @@
 		data-locale-status-skipped="{{ctx.Locale.Tr "actions.status.skipped"}}"
 		data-locale-status-blocked="{{ctx.Locale.Tr "actions.status.blocked"}}"
 		data-locale-artifacts-title="{{ctx.Locale.Tr "artifacts"}}"
+		data-locale-artifact-expired="{{ctx.Locale.Tr "expired"}}"
 		data-locale-confirm-delete-artifact="{{ctx.Locale.Tr "confirm_delete_artifact"}}"
 		data-locale-show-timestamps="{{ctx.Locale.Tr "show_timestamps"}}"
 		data-locale-show-log-seconds="{{ctx.Locale.Tr "show_log_seconds"}}"

web_src/js/components/RepoActionView.vue

@@ -495,14 +495,24 @@ export default defineComponent({
             {{ locale.artifactsTitle }}
           </div>
           <ul class="job-artifacts-list">
-            <li class="job-artifacts-item" v-for="artifact in artifacts" :key="artifact.name">
+            <template v-for="artifact in artifacts" :key="artifact.name">
-              <a class="job-artifacts-link" target="_blank" :href="run.link+'/artifacts/'+artifact.name">
+              <li class="job-artifacts-item">
-                <SvgIcon name="octicon-file" class="ui text black job-artifacts-icon"/>{{ artifact.name }}
+                <template v-if="artifact.status !== 'expired'">
-              </a>
+                  <a class="flex-text-inline" target="_blank" :href="run.link+'/artifacts/'+artifact.name">
-              <a v-if="run.canDeleteArtifact" @click="deleteArtifact(artifact.name)" class="job-artifacts-delete">
+                    <SvgIcon name="octicon-file" class="text black"/>
-                <SvgIcon name="octicon-trash" class="ui text black job-artifacts-icon"/>
+                    <span class="gt-ellipsis">{{ artifact.name }}</span>
-              </a>
+                  </a>
-            </li>
+                  <a v-if="run.canDeleteArtifact" @click="deleteArtifact(artifact.name)">
+                    <SvgIcon name="octicon-trash" class="text black"/>
+                  </a>
+                </template>
+                <span v-else class="flex-text-inline text light grey">
+                  <SvgIcon name="octicon-file"/>
+                  <span class="gt-ellipsis">{{ artifact.name }}</span>
+                  <span class="ui label text light grey tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
+                </span>
+              </li>
+            </template>
           </ul>
         </div>
       </div>
@@ -664,6 +674,7 @@ export default defineComponent({
   padding: 6px;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 .job-artifacts-list {
@@ -671,10 +682,6 @@ export default defineComponent({
   list-style: none;
 }
 
-.job-artifacts-icon {
-  padding-right: 3px;
-}
-
 .job-brief-list {
   display: flex;
   flex-direction: column;

web_src/js/features/repo-actions.ts

@@ -24,6 +24,7 @@ export function initRepositoryActionView() {
       pushedBy: el.getAttribute('data-locale-runs-pushed-by'),
       artifactsTitle: el.getAttribute('data-locale-artifacts-title'),
       areYouSure: el.getAttribute('data-locale-are-you-sure'),
+      artifactExpired: el.getAttribute('data-locale-artifact-expired'),
       confirmDeleteArtifact: el.getAttribute('data-locale-confirm-delete-artifact'),
       showTimeStamps: el.getAttribute('data-locale-show-timestamps'),
       showLogSeconds: el.getAttribute('data-locale-show-log-seconds'),