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
Gusted
parent
c977585e4c
commit
6ad706aa88
4 changed files with 271 additions and 99 deletions
|
|
@ -31,8 +31,9 @@ import (
|
||||||
)
|
)
|
||||||
|
|
||||||
const (
|
const (
|
||||||
tplListActions base.TplName = "repo/actions/list"
|
tplListActions base.TplName = "repo/actions/list"
|
||||||
tplViewActions base.TplName = "repo/actions/view"
|
tplListActionsInner base.TplName = "repo/actions/list_inner"
|
||||||
|
tplViewActions base.TplName = "repo/actions/view"
|
||||||
)
|
)
|
||||||
|
|
||||||
type Workflow struct {
|
type Workflow struct {
|
||||||
|
|
@ -67,6 +68,8 @@ func List(ctx *context.Context) {
|
||||||
curWorkflow := ctx.FormString("workflow")
|
curWorkflow := ctx.FormString("workflow")
|
||||||
ctx.Data["CurWorkflow"] = curWorkflow
|
ctx.Data["CurWorkflow"] = curWorkflow
|
||||||
|
|
||||||
|
listInner := ctx.FormBool("list_inner")
|
||||||
|
|
||||||
var workflows []Workflow
|
var workflows []Workflow
|
||||||
if empty, err := ctx.Repo.GitRepo.IsEmpty(); err != nil {
|
if empty, err := ctx.Repo.GitRepo.IsEmpty(); err != nil {
|
||||||
ctx.ServerError("IsEmpty", err)
|
ctx.ServerError("IsEmpty", err)
|
||||||
|
|
@ -250,7 +253,11 @@ func List(ctx *context.Context) {
|
||||||
ctx.Data["Page"] = pager
|
ctx.Data["Page"] = pager
|
||||||
ctx.Data["HasWorkflowsOrRuns"] = len(workflows) > 0 || len(runs) > 0
|
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.
|
// loadIsRefDeleted loads the IsRefDeleted field for each run in the list.
|
||||||
|
|
|
||||||
|
|
@ -4,89 +4,38 @@
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
{{template "base/alert" .}}
|
{{template "base/alert" .}}
|
||||||
|
|
||||||
{{if .HasWorkflowsOrRuns}}
|
{{/* Refresh the list every interval (30s) unless the document isn't visible or a dropdown is open; refresh
|
||||||
<div class="ui stackable grid">
|
if visibility changes as well. simulate-polling-interval is a custom event used for e2e tests to mimic
|
||||||
<div class="four wide column">
|
the polling interval and should be defined identically to the `every` clause for accurate testing. */}}
|
||||||
<div class="ui fluid vertical menu">
|
<div
|
||||||
<a class="item{{if not $.CurWorkflow}} active{{end}}" href="?actor={{$.CurActor}}&status={{$.CurStatus}}">{{ctx.Locale.Tr "actions.runs.all_workflows"}}</a>
|
hx-get="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status={{$.CurStatus}}&page={{$.Page.Paginater.Current}}&list_inner=true"
|
||||||
{{range .workflows}}
|
hx-swap="morph:innerHTML"
|
||||||
<a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">{{.Entry.Name}}
|
hx-trigger="every 30s [pollingOk()], visibilitychange[document.visibilityState === 'visible'] from:document, simulate-polling-interval[pollingOk()] from:document"
|
||||||
{{if .ErrMsg}}
|
hx-indicator="#reloading-indicator">
|
||||||
<span data-tooltip-content="{{.ErrMsg}}">
|
{{template "repo/actions/list_inner" .}}
|
||||||
{{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>
|
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
|
||||||
{{template "repo/actions/no_workflows" .}}
|
|
||||||
{{end}}
|
|
||||||
</div>
|
</div>
|
||||||
</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" .}}
|
{{template "base/footer" .}}
|
||||||
|
|
|
||||||
85
templates/repo/actions/list_inner.tmpl
Normal file
85
templates/repo/actions/list_inner.tmpl
Normal 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}}
|
||||||
|
|
@ -9,10 +9,27 @@
|
||||||
// routers/web/repo/actions/**
|
// routers/web/repo/actions/**
|
||||||
// @watch end
|
// @watch end
|
||||||
|
|
||||||
import {expect} from '@playwright/test';
|
import {expect, type Page, type TestInfo} from '@playwright/test';
|
||||||
import {save_visual, test} from './utils_e2e.ts';
|
import {save_visual, test} from './utils_e2e.ts';
|
||||||
|
|
||||||
const workflow_trigger_notification_text = 'This workflow has a workflow_dispatch event trigger.';
|
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.describe('Workflow Authenticated user2', () => {
|
||||||
test.use({user: 'user2'});
|
test.use({user: 'user2'});
|
||||||
|
|
||||||
|
|
@ -50,20 +67,10 @@ test.describe('Workflow Authenticated user2', () => {
|
||||||
await save_visual(page);
|
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('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 dispatchSuccess(page, testInfo);
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -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 expect(page.locator('body')).not.toContainText(workflow_trigger_notification_text);
|
||||||
await save_visual(page);
|
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();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue