fix(actions): make job list item fully clickable (#38462) (#38471)

Backport #38462 by @SudhanshuMatrix

Clicking the empty space to the right of a job in the Actions sidebar
didn't switch jobs: the interactive `<a>`/`<button>` used `display:
contents` and so generated no clickable box.

Fixes: https://github.com/go-gitea/gitea/issues/38460

Drop the wrapper `div` and `display: contents`, moving the `.item` and
layout styles directly onto the `<a>`/`<button>` so the whole row is
clickable. Reusable-caller `<button>` rows also get `width: 100%` and
`line-height: inherit` to match the `<a>` rows.

Co-authored-by: Shudhanshu Singh <sudhanshuwriterblc@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>

services/mailer/mail_issue_common.go

@@ -99,7 +99,9 @@ func composeIssueCommentMessages(ctx context.Context, comment *mailComment, lang
 		}
 	}
 	locale := translation.NewLocale(lang)
-
+	if lang == "mock" {
+		locale = &translation.MockLocale{}
+	}
 	mailMeta := map[string]any{
 		"locale":          locale,
 		"FallbackSubject": fallback,

services/mailer/mail_test.go

@@ -18,10 +18,14 @@ import (
 
 	actions_model "gitea.dev/models/actions"
 	activities_model "gitea.dev/models/activities"
+	"gitea.dev/models/asymkey"
+	git_model "gitea.dev/models/git"
+	"gitea.dev/models/gituser"
 	issues_model "gitea.dev/models/issues"
 	repo_model "gitea.dev/models/repo"
 	"gitea.dev/models/unittest"
 	user_model "gitea.dev/models/user"
+	"gitea.dev/modules/git"
 	"gitea.dev/modules/markup"
 	"gitea.dev/modules/setting"
 	"gitea.dev/modules/storage"
@@ -556,3 +560,32 @@ func TestEmbedBase64Images(t *testing.T) {
 		assert.Equal(t, expected, string(resultMailBody))
 	})
 }
+
+func TestMailPullRequestPush(t *testing.T) {
+	doer, _, issue, comment := prepareMailerTest(t)
+	mc := &mailComment{
+		Issue:   issue,
+		Comment: comment,
+		Doer:    doer,
+	}
+	issue.IsPull = true
+	issue.PullRequest = &issues_model.PullRequest{BaseRepo: mc.Issue.Repo}
+	mc.Comment.Type = issues_model.CommentTypePullRequestPush
+	mc.Comment.Commits = []*git_model.SignCommitWithStatuses{
+		{
+			SignCommit: &asymkey.SignCommit{
+				UserCommit: &gituser.UserCommit{
+					GitCommit: &git.Commit{
+						CommitMessage: git.CommitMessage{MessageRaw: "test commit msg"},
+						ID:            git.Sha1ObjectFormat.EmptyObjectID(),
+					},
+				},
+			},
+		},
+	}
+
+	msgs, err := composeIssueCommentMessages(t.Context(), mc, "mock", []*user_model.User{{Name: "Test", Email: "test@gitea.com"}}, false, "pull request push")
+	require.NoError(t, err)
+	assert.Contains(t, msgs[0].Body, `<a href="https://try.gitea.io/user2/repo1/commit/0000000000000000000000000000000000000000">0000000000</a> - test commit msg`)
+	assert.Contains(t, msgs[0].Body, `</html>`)
+}

templates/mail/repo/issue/default.tmpl

@@ -63,19 +63,18 @@
 				<div>{{.RenderedContent}}</div>
 			</div>
 		{{end -}}
-		{{if eq .ActionName "push"}}
-			<ul>
-			{{$repoURL := $.Comment.Issue.PullRequest.BaseRepo.HTMLURL}}
-			{{range $commit := $.Comment.Commits}}
-				<li>
-					<a href="{{$repoURL}}/commit/{{$commit.ID}}">
-						{{ShortSha $commit.ID.String}}
-					</a>  -  {{$commit.MessageTitle}}
-				</li>
-			{{end}}
-			</ul>
-		{{end}}
 	</p>
+	{{if eq .ActionName "push"}}
+		<ul>
+		{{$repoURL := $.Comment.Issue.PullRequest.BaseRepo.HTMLURL}}
+		{{range $commit := $.Comment.Commits}}
+			{{$gitCommit := $commit.UserCommit.GitCommit}}
+			<li>
+				<a href="{{$repoURL}}/commit/{{$gitCommit.ID}}">{{ShortSha $gitCommit.ID.String}}</a> - {{$gitCommit.MessageTitle}}
+			</li>
+		{{end}}
+		</ul>
+	{{end}}
 	<div style="font-size:small; color:#666;">
 		<p>
 			---

web_src/js/components/RepoActionView.vue

@@ -216,10 +216,7 @@ onBeforeUnmount(() => {
         <div class="ui divider"/>
         <div class="left-list-header">{{ locale.allJobs }}</div>
         <div class="flex-items-block action-view-sidebar-list">
-          <div
-            class="item job-brief-item"
-            :class="{'selected': props.jobId === item.job.id}"
-            :style="{paddingLeft: `${10 + item.depth * 16}px`}"
+          <template
             v-for="item in visibleJobListItems"
             :key="item.job.id"
           >
@@ -228,7 +225,9 @@ onBeforeUnmount(() => {
             <button
               v-if="item.job.isReusableCaller"
               type="button"
-              class="tw-contents caller-row-toggle"
+              class="item caller-row-toggle"
+              :class="{'selected': props.jobId === item.job.id}"
+              :style="{paddingLeft: `${10 + item.depth * 16}px`}"
               @click="toggleExpandedJob(item.job.id)"
               :title="isJobCollapsed(item.job.id) ? locale.expandCallerJobs : locale.collapseCallerJobs"
               :aria-label="isJobCollapsed(item.job.id) ? locale.expandCallerJobs : locale.collapseCallerJobs"
@@ -239,13 +238,19 @@ onBeforeUnmount(() => {
               <span class="job-duration">{{ item.job.duration }}</span>
               <SvgIcon name="octicon-chevron-down" :size="14" class="job-brief-toggle-icon" :class="{'collapsed': isJobCollapsed(item.job.id)}"/>
             </button>
-            <a v-else class="tw-contents silenced" :href="item.job.link">
+            <a
+              v-else
+              class="item silenced"
+              :class="{'selected': props.jobId === item.job.id}"
+              :style="{paddingLeft: `${10 + item.depth * 16}px`}"
+              :href="item.job.link"
+            >
               <ActionStatusIcon :locale-status="locale.status[item.job.status]" :status="item.job.status" icon-variant="circle-fill"/>
               <span class="tw-min-w-0 gt-ellipsis">{{ item.job.name }}</span>
               <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-rerun-button tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${item.job.id}/rerun`" v-if="item.job.canRerun"/>
               <span class="job-duration">{{ item.job.duration }}</span>
             </a>
-          </div>
+          </template>
         </div>
 
         <!-- artifacts list -->
@@ -450,10 +455,11 @@ onBeforeUnmount(() => {
 }
 
 .caller-row-toggle {
+  width: 100%;
   border: none;
-  padding: 0;
   background: transparent;
   color: inherit;
+  line-height: inherit; /* buttons don't inherit line-height; match the <a> rows' row height */
   cursor: pointer;
   text-align: inherit;
 }
@@ -483,13 +489,13 @@ onBeforeUnmount(() => {
 }
 
 .action-view-sidebar-list > .item:hover .job-rerun-button,
-.action-view-sidebar-list > .item:has(a:focus) .job-rerun-button {
+.action-view-sidebar-list > .item:focus .job-rerun-button {
   display: inline-flex;
 }
 
 /* only swap out the duration when a re-run button exists to take its place */
 .action-view-sidebar-list > .item:hover .job-rerun-button ~ .job-duration,
-.action-view-sidebar-list > .item:has(a:focus) .job-rerun-button ~ .job-duration {
+.action-view-sidebar-list > .item:focus .job-rerun-button ~ .job-duration {
   display: none;
 }