feat(ui): Automatically refresh workflows in the "Actions" list (#7361)

- Make the "Actions" list (for example, https://codeberg.org/forgejo/forgejo/actions) dynamically refresh using htmx and partial page reloading. This addresses a pet peeve of mine, I find it common to end up on this page and have workflows in-progress, but not be able to monitor the workflows to success or failure from the page as it currently doesn't do any data refreshing.
- There are a few major risks involves with this change.
  - Increased server-side load & network utilization.  In order to mitigate this risk, I have configured the refresh to occur every 30 seconds **only** when the Page Visibility API indicates that the web page is currently visible to the end-user. It is still reasonable to assume this change will increase server-side load though.
  - UI interactions on the page, such as the "Actor" and "Status" dropdown and the workflow dispatch form, would be replaced from the server with non-expanded UI during the refresh. This problem is prevented by stopping the refresh while these UIs are in their expanded states.
- E2E tests added.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7361
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Mathieu Fenniak <mathieu@fenniak.net>
Co-committed-by: Mathieu Fenniak <mathieu@fenniak.net>
This commit is contained in:
Mathieu Fenniak 2025-04-04 14:38:54 +00:00 committed by Gusted
parent c977585e4c
commit 6ad706aa88
4 changed files with 271 additions and 99 deletions

View file

@ -31,8 +31,9 @@ import (
)
const (
tplListActions base.TplName = "repo/actions/list"
tplViewActions base.TplName = "repo/actions/view"
tplListActions base.TplName = "repo/actions/list"
tplListActionsInner base.TplName = "repo/actions/list_inner"
tplViewActions base.TplName = "repo/actions/view"
)
type Workflow struct {
@ -67,6 +68,8 @@ func List(ctx *context.Context) {
curWorkflow := ctx.FormString("workflow")
ctx.Data["CurWorkflow"] = curWorkflow
listInner := ctx.FormBool("list_inner")
var workflows []Workflow
if empty, err := ctx.Repo.GitRepo.IsEmpty(); err != nil {
ctx.ServerError("IsEmpty", err)
@ -250,7 +253,11 @@ func List(ctx *context.Context) {
ctx.Data["Page"] = pager
ctx.Data["HasWorkflowsOrRuns"] = len(workflows) > 0 || len(runs) > 0
ctx.HTML(http.StatusOK, tplListActions)
if listInner {
ctx.HTML(http.StatusOK, tplListActionsInner)
} else {
ctx.HTML(http.StatusOK, tplListActions)
}
}
// loadIsRefDeleted loads the IsRefDeleted field for each run in the list.

View file

@ -4,89 +4,38 @@
<div class="ui container">
{{template "base/alert" .}}
{{if .HasWorkflowsOrRuns}}
<div class="ui stackable grid">
<div class="four wide column">
<div class="ui fluid vertical menu">
<a class="item{{if not $.CurWorkflow}} active{{end}}" href="?actor={{$.CurActor}}&status={{$.CurStatus}}">{{ctx.Locale.Tr "actions.runs.all_workflows"}}</a>
{{range .workflows}}
<a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">{{.Entry.Name}}
{{if .ErrMsg}}
<span data-tooltip-content="{{.ErrMsg}}">
{{svg "octicon-alert" 16 "text red"}}
</span>
{{end}}
{{if $.ActionsConfig.IsWorkflowDisabled .Entry.Name}}
<div class="ui red label">{{ctx.Locale.Tr "disabled"}}</div>
{{end}}
</a>
{{end}}
</div>
</div>
<div class="twelve wide column content">
<div class="ui secondary filter menu tw-justify-end tw-flex tw-items-center">
<!-- Actor -->
<div class="ui{{if not .Actors}} disabled{{end}} dropdown jump item">
<span class="text">{{ctx.Locale.Tr "actions.runs.actor"}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="ui icon search input">
<i class="icon">{{svg "octicon-search"}}</i>
<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.actor"}}">
</div>
<a class="item{{if not $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&status={{$.CurStatus}}&actor=0">
{{ctx.Locale.Tr "actions.runs.actors_no_select"}}
</a>
{{range .Actors}}
<a class="item{{if eq .ID $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{.ID}}&status={{$.CurStatus}}">
{{ctx.AvatarUtils.Avatar . 20}} {{.GetDisplayName}}
</a>
{{end}}
</div>
</div>
<!-- Status -->
<div class="ui dropdown jump item">
<span class="text">{{ctx.Locale.Tr "actions.runs.status"}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="ui icon search input">
<i class="icon">{{svg "octicon-search"}}</i>
<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.status"}}">
</div>
<a class="item{{if not $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status=0">
{{ctx.Locale.Tr "actions.runs.status_no_select"}}
</a>
{{range .StatusInfoList}}
<a class="item{{if eq .Status $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status={{.Status}}">
{{.DisplayedStatus}}
</a>
{{end}}
</div>
</div>
{{if .AllowDisableOrEnableWorkflow}}
<button class="ui jump dropdown btn interact-bg tw-p-2">
{{svg "octicon-kebab-horizontal"}}
<div class="menu">
<a class="item link-action" data-url="{{$.Link}}/{{if .CurWorkflowDisabled}}enable{{else}}disable{{end}}?workflow={{$.CurWorkflow}}&actor={{.CurActor}}&status={{$.CurStatus}}">
{{if .CurWorkflowDisabled}}{{ctx.Locale.Tr "actions.workflow.enable"}}{{else}}{{ctx.Locale.Tr "actions.workflow.disable"}}{{end}}
</a>
</div>
</button>
{{end}}
</div>
{{if $.CurWorkflowDispatch}}
{{template "repo/actions/dispatch" .}}
{{end}}
{{template "repo/actions/runs_list" .}}
</div>
{{/* Refresh the list every interval (30s) unless the document isn't visible or a dropdown is open; refresh
if visibility changes as well. simulate-polling-interval is a custom event used for e2e tests to mimic
the polling interval and should be defined identically to the `every` clause for accurate testing. */}}
<div
hx-get="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status={{$.CurStatus}}&page={{$.Page.Paginater.Current}}&list_inner=true"
hx-swap="morph:innerHTML"
hx-trigger="every 30s [pollingOk()], visibilitychange[document.visibilityState === 'visible'] from:document, simulate-polling-interval[pollingOk()] from:document"
hx-indicator="#reloading-indicator">
{{template "repo/actions/list_inner" .}}
</div>
{{else}}
{{template "repo/actions/no_workflows" .}}
{{end}}
</div>
</div>
<script type="text/javascript">
function pollingOk() {
return document.visibilityState === 'visible' && noActiveDropdowns();
}
// Intent: If the "Actor" or "Status" dropdowns are currently open and being navigated, or the workflow dispatch
// dropdown form is open, the htmx refresh would replace them with closed dropdowns. Instead this prevents the list
// refresh from occurring while those dropdowns are open.
//
// Can't inline this into the `hx-trigger` above because using a left-brace ('[') breaks htmx's trigger parsing.
function noActiveDropdowns() {
if (document.querySelector('[aria-expanded=true]') !== null)
return false;
const dropdownForm = document.querySelector('#branch-dropdown-form');
if (dropdownForm !== null && dropdownForm.checkVisibility())
return false;
return true;
}
</script>
{{template "base/footer" .}}

View file

@ -0,0 +1,85 @@
{{if .HasWorkflowsOrRuns}}
<div class="ui stackable grid">
<div class="four wide column">
<div class="ui fluid vertical menu">
<a class="item{{if not $.CurWorkflow}} active{{end}}" href="?actor={{$.CurActor}}&status={{$.CurStatus}}">{{ctx.Locale.Tr "actions.runs.all_workflows"}}</a>
{{range .workflows}}
<a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">{{.Entry.Name}}
{{if .ErrMsg}}
<span data-tooltip-content="{{.ErrMsg}}">
{{svg "octicon-alert" 16 "text red"}}
</span>
{{end}}
{{if $.ActionsConfig.IsWorkflowDisabled .Entry.Name}}
<div class="ui red label">{{ctx.Locale.Tr "disabled"}}</div>
{{end}}
</a>
{{end}}
</div>
</div>
<div class="twelve wide column content">
<div class="ui secondary filter menu tw-justify-end tw-flex tw-items-center">
<div id="reloading-indicator" class="htmx-indicator"></div>
<!-- Actor -->
<div id="actor_dropdown" class="ui{{if not .Actors}} disabled{{end}} dropdown jump item">
<span class="text">{{ctx.Locale.Tr "actions.runs.actor"}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="ui icon search input">
<i class="icon">{{svg "octicon-search"}}</i>
<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.actor"}}">
</div>
<a class="item{{if not $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&status={{$.CurStatus}}&actor=0">
{{ctx.Locale.Tr "actions.runs.actors_no_select"}}
</a>
{{range .Actors}}
<a class="item{{if eq .ID $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{.ID}}&status={{$.CurStatus}}">
{{ctx.AvatarUtils.Avatar . 20}} {{.GetDisplayName}}
</a>
{{end}}
</div>
</div>
<!-- Status -->
<div id="status_dropdown" class="ui dropdown jump item">
<span class="text">{{ctx.Locale.Tr "actions.runs.status"}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="ui icon search input">
<i class="icon">{{svg "octicon-search"}}</i>
<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.status"}}">
</div>
<a class="item{{if not $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status=0">
{{ctx.Locale.Tr "actions.runs.status_no_select"}}
</a>
{{range .StatusInfoList}}
<a class="item{{if eq .Status $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status={{.Status}}">
{{.DisplayedStatus}}
</a>
{{end}}
</div>
</div>
{{if .AllowDisableOrEnableWorkflow}}
<button class="ui jump dropdown btn interact-bg tw-p-2">
{{svg "octicon-kebab-horizontal"}}
<div class="menu">
<a class="item link-action" data-url="{{$.Link}}/{{if .CurWorkflowDisabled}}enable{{else}}disable{{end}}?workflow={{$.CurWorkflow}}&actor={{.CurActor}}&status={{$.CurStatus}}">
{{if .CurWorkflowDisabled}}{{ctx.Locale.Tr "actions.workflow.enable"}}{{else}}{{ctx.Locale.Tr "actions.workflow.disable"}}{{end}}
</a>
</div>
</button>
{{end}}
</div>
{{if $.CurWorkflowDispatch}}
{{template "repo/actions/dispatch" .}}
{{end}}
{{template "repo/actions/runs_list" .}}
</div>
</div>
{{else}}
{{template "repo/actions/no_workflows" .}}
{{end}}

View file

@ -9,10 +9,27 @@
// routers/web/repo/actions/**
// @watch end
import {expect} from '@playwright/test';
import {expect, type Page, type TestInfo} from '@playwright/test';
import {save_visual, test} from './utils_e2e.ts';
const workflow_trigger_notification_text = 'This workflow has a workflow_dispatch event trigger.';
async function dispatchSuccess(page: Page, testInfo: TestInfo) {
test.skip(testInfo.project.name === 'Mobile Safari', 'Flaky behaviour on mobile safari; see https://codeberg.org/forgejo/forgejo/pulls/3334#issuecomment-2033383');
await page.goto('/user2/test_workflows/actions?workflow=test-dispatch.yml&actor=0&status=0');
await page.locator('#workflow_dispatch_dropdown>button').click();
await page.fill('input[name="inputs[string2]"]', 'abc');
await save_visual(page);
await page.locator('#workflow-dispatch-submit').click();
await expect(page.getByText('Workflow run was successfully requested.')).toBeVisible();
await expect(page.locator('.run-list>:first-child .run-list-meta', {hasText: 'now'})).toBeVisible();
await save_visual(page);
}
test.describe('Workflow Authenticated user2', () => {
test.use({user: 'user2'});
@ -50,20 +67,10 @@ test.describe('Workflow Authenticated user2', () => {
await save_visual(page);
});
// no assertions as the login in this test case is extracted for reuse
// eslint-disable-next-line playwright/expect-expect
test('dispatch success', async ({page}, testInfo) => {
test.skip(testInfo.project.name === 'Mobile Safari', 'Flaky behaviour on mobile safari; see https://codeberg.org/forgejo/forgejo/pulls/3334#issuecomment-2033383');
await page.goto('/user2/test_workflows/actions?workflow=test-dispatch.yml&actor=0&status=0');
await page.locator('#workflow_dispatch_dropdown>button').click();
await page.fill('input[name="inputs[string2]"]', 'abc');
await save_visual(page);
await page.locator('#workflow-dispatch-submit').click();
await expect(page.getByText('Workflow run was successfully requested.')).toBeVisible();
await expect(page.locator('.run-list>:first-child .run-list-meta', {hasText: 'now'})).toBeVisible();
await save_visual(page);
await dispatchSuccess(page, testInfo);
});
});
@ -73,3 +80,127 @@ test('workflow dispatch box not available for unauthenticated users', async ({pa
await expect(page.locator('body')).not.toContainText(workflow_trigger_notification_text);
await save_visual(page);
});
async function completeDynamicRefresh(page: Page) {
// Ensure that the reloading indicator isn't active, indicating that dynamic refresh is done.
await expect(page.locator('#reloading-indicator')).not.toHaveClass(/(^|\s)is-loading(\s|$)/);
}
async function simulatePollingInterval(page: Page) {
// In order to simulate the background page sitting around for > 30s, a custom event `simulate-polling-interval` is
// fired into the document to mimic the polling interval expiring -- although this isn't a perfectly great E2E test
// with this kind of mimicry, it's better than having multiple >30s execution-time tests.
await page.evaluate(() => {
document.dispatchEvent(new Event('simulate-polling-interval'));
});
await completeDynamicRefresh(page);
}
test.describe('workflow list dynamic refresh', () => {
test.use({user: 'user2'});
test('refreshes on visibility change', async ({page}, testInfo) => {
// Test operates by creating two pages; one which is sitting idle on the workflows list (backgroundPage), and one
// which triggers a workflow dispatch. Then a document visibilitychange event is fired on the background page to
// mimic a user returning to the tab on their browser, which should trigger the workflow list to refresh and display
// the newly dispatched workflow from the other page.
const backgroundPage = await page.context().newPage();
await backgroundPage.goto('/user2/test_workflows/actions?workflow=test-dispatch.yml&actor=0&status=0');
// Mirror the `Workflow Authenticated user2 > dispatch success` test:
await dispatchSuccess(page, testInfo);
const latestDispatchedRun = await page.locator('.run-list>:first-child .flex-item-body>b').textContent();
expect(latestDispatchedRun).toMatch(/^#/); // workflow ID, eg. "#53"
// Synthetically trigger a visibilitychange event, as if we were returning to backgroundPage:
await backgroundPage.evaluate(() => {
document.dispatchEvent(new Event('visibilitychange'));
});
await completeDynamicRefresh(page);
await expect(backgroundPage.locator('.run-list>:first-child .flex-item-body>b', {hasText: latestDispatchedRun})).toBeVisible();
await save_visual(backgroundPage);
});
test('refreshes on interval', async ({page}, testInfo) => {
// Test operates by creating two pages; one which is sitting idle on the workflows list (backgroundPage), and one
// which triggers a workflow dispatch. After the polling, the page should refresh and show the newly dispatched
// workflow from the other page.
const backgroundPage = await page.context().newPage();
await backgroundPage.goto('/user2/test_workflows/actions?workflow=test-dispatch.yml&actor=0&status=0');
// Mirror the `Workflow Authenticated user2 > dispatch success` test:
await dispatchSuccess(page, testInfo);
const latestDispatchedRun = await page.locator('.run-list>:first-child .flex-item-body>b').textContent();
expect(latestDispatchedRun).toMatch(/^#/); // workflow ID, eg. "#53"
await simulatePollingInterval(backgroundPage);
await expect(backgroundPage.locator('.run-list>:first-child .flex-item-body>b', {hasText: latestDispatchedRun})).toBeVisible();
await save_visual(backgroundPage);
});
test('post-refresh the dropdowns continue to operate', async ({page}, testInfo) => {
// Verify that after the page is dynamically refreshed, the 'Actor', 'Status', and 'Run workflow' dropdowns work
// correctly -- that the htmx morph hasn't messed up any JS event handlers.
await page.goto('/user2/test_workflows/actions?workflow=test-dispatch.yml&actor=0&status=0');
// Mirror the `Workflow Authenticated user2 > dispatch success` test -- this creates data for the 'Actor' dropdown
await dispatchSuccess(page, testInfo);
// Perform a dynamic refresh before checking the functionality of each dropdown.
await simulatePollingInterval(page);
// Workflow run dialog
await expect(page.locator('input[name="inputs[string2]"]')).toBeHidden();
await page.locator('#workflow_dispatch_dropdown>button').click();
await expect(page.locator('input[name="inputs[string2]"]')).toBeVisible();
await page.locator('#workflow_dispatch_dropdown>button').click();
// Status dropdown
await expect(page.getByText('Waiting')).toBeHidden();
await expect(page.getByText('Failure')).toBeHidden();
await page.locator('#status_dropdown').click();
await expect(page.getByText('Waiting')).toBeVisible();
await expect(page.getByText('Failure')).toBeVisible();
// Actor dropdown
await expect(page.getByText('All actors')).toBeHidden();
await page.locator('#actor_dropdown').click();
await expect(page.getByText('All Actors')).toBeVisible();
});
test('refresh does not break interacting with open drop-downs', async ({page}, testInfo) => {
// Verify that if the polling refresh occurs while interacting with any multi-step dropdown on the page, the
// multi-step interaction continues to be visible and functional. This is implemented by preventing the refresh,
// but that isn't the subject of the test here -- as long as the dropdown isn't broken by the refresh, that's fine.
await page.goto('/user2/test_workflows/actions?workflow=test-dispatch.yml&actor=0&status=0');
// Mirror the `Workflow Authenticated user2 > dispatch success` test -- this creates data for the 'Actor' dropdown
await dispatchSuccess(page, testInfo);
// Workflow run dialog
await expect(page.locator('input[name="inputs[string2]"]')).toBeHidden();
await page.locator('#workflow_dispatch_dropdown>button').click();
await expect(page.locator('input[name="inputs[string2]"]')).toBeVisible();
await simulatePollingInterval(page);
await expect(page.locator('input[name="inputs[string2]"]')).toBeVisible();
// Status dropdown
await expect(page.getByText('Waiting')).toBeHidden();
await expect(page.getByText('Failure')).toBeHidden();
await page.locator('#status_dropdown').click();
await expect(page.getByText('Waiting')).toBeVisible();
await expect(page.getByText('Failure')).toBeVisible();
await simulatePollingInterval(page);
await expect(page.getByText('Waiting')).toBeVisible();
await expect(page.getByText('Failure')).toBeVisible();
// Actor dropdown
await expect(page.getByText('All actors')).toBeHidden();
await page.locator('#actor_dropdown').click();
await expect(page.getByText('All Actors')).toBeVisible();
await simulatePollingInterval(page);
await expect(page.getByText('All Actors')).toBeVisible();
});
});