Add back navigation link to action run view#36721
Conversation
The workflow filename in the commit summary now links to the workflow source file. A back-arrow link above the title navigates to the workflow's runs list, similar to GitHub's UI. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR updates the Actions run view header UI to add a “back to workflow runs” navigation link and adjust the workflow file link/visual spacing.
Changes:
- Add a back navigation link (
<- workflowId) at the top of the Actions run header. - Update the
workflowIDlink to point to the workflow source file view (/actions/runs/{run}/workflow). - Tweak header icon sizing and spacing/layout CSS.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| web_src/js/svg.ts | Registers the octicon-arrow-left SVG for use in the new back link. |
| web_src/js/components/RepoActionView.vue | Adds back link + updates workflow link target; adjusts header layout and icon sizing. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <!-- make the view container full width to make users easier to read logs --> | ||
| <div class="ui fluid container"> | ||
| <div class="action-view-header"> | ||
| <a class="action-view-back" :href="run.workflowLink"><SvgIcon name="octicon-arrow-left"/> {{ run.workflowID.replace(/\.(yml|yaml)$/i, '') }}</a> |
There was a problem hiding this comment.
The new back link is rendered unconditionally, but run.workflowLink/run.workflowID are initialized as empty strings. Until loadJob() finishes, this produces a clickable <a> with an empty href and no text (only the icon), which can cause an accidental reload/navigation. Consider guarding the link with v-if (e.g. only render when run.workflowLink and run.workflowID are set) or otherwise disabling it until data is loaded.
| <a class="action-view-back" :href="run.workflowLink"><SvgIcon name="octicon-arrow-left"/> {{ run.workflowID.replace(/\.(yml|yaml)$/i, '') }}</a> | |
| <a v-if="run.workflowLink && run.workflowID" class="action-view-back" :href="run.workflowLink"><SvgIcon name="octicon-arrow-left"/> {{ run.workflowID.replace(/\.(yml|yaml)$/i, '') }}</a> |
| </div> | ||
| <div class="action-commit-summary"> | ||
| <span><a class="muted" :href="run.workflowLink"><b>{{ run.workflowID }}</b></a>:</span> | ||
| <span><a class="muted" :href="`${run.link}/workflow`"><b>{{ run.workflowID }}</b></a>:</span> |
There was a problem hiding this comment.
href="${run.link}/workflow" will evaluate to /workflow while run.link is still the initial empty string, creating a valid-looking link to the site root before the run data loads. Please guard this link until run.link is populated (or compute the href to return an empty/disabled value when run.link is empty).
| <span><a class="muted" :href="`${run.link}/workflow`"><b>{{ run.workflowID }}</b></a>:</span> | |
| <span><a class="muted" :href="run.link ? `${run.link}/workflow` : undefined"><b>{{ run.workflowID }}</b></a>:</span> |
|
Not totally satisfied with the vertical spacing, it will need more tweaks. Maybe I will also check what's needed to get |
|
Would also be cool to navigate back to the pr or wherever you came from |
|
Could you continue this 🥹? |
Do you have a example link of a to-PR navigation working in GitHub UI? As far as I'm aware, they have no working to-PR navigation link. |
Let's merge #37070 first, then remove the workflow file link here. |
|
Thanks, yes that should be implemented along with the "back to run list". Same element, just a different link. |
|
TODO:
|

<- workflowIdlink on top of the title goes the the workflow's run list. This uses filename minus extension becauseworkflow.nameis unfortunately not available in the database.filename.yamllink now points to the workflow source file.Before:
After: