Skip to content

wip: Flesh out. #17034

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

wip: Flesh out. #17034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 51 additions & 11 deletions web/e2e/fixtures/FormFixture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { PageFixture } from "#e2e/fixtures/PageFixture";
import type { LocatorContext } from "#e2e/selectors/types";

import { expect, Page } from "@playwright/test";
import { expect, Locator, Page } from "@playwright/test";

export class FormFixture extends PageFixture {
static fixtureName = "Form";
Expand All @@ -18,22 +18,62 @@ export class FormFixture extends PageFixture {
* @param fieldName The name of the form element.
* @param value the value to set.
*/
public fill = async (
fieldName: string,
value: string,
parent: LocatorContext = this.page,
): Promise<void> => {
const control = parent
.getByRole("textbox", {
name: fieldName,
public findTextualInput = async (
fieldName: string | RegExp,
context: LocatorContext = this.page,
) => {
const control = context
.getByLabel(fieldName, { exact: true })
.filter({
hasNot: context.getByRole("presentation"),
})
.or(
parent.getByRole("spinbutton", {
context.getByRole("textbox", {
name: fieldName,
}),
)
.or(
context.getByRole("spinbutton", {
name: fieldName,
}),
);

await expect(control, `Field (${fieldName}) should be visible`).toBeVisible();
const role = await control.getAttribute("role");

let textbox: Locator;

if (role === "combobox") {
// Comboboxes, such as our Query Language input need additional handling...
const textbox = control.getByRole("textbox");

return textbox;
} else {
textbox = control;
}

await expect(textbox, `Field (${fieldName}) should be visible`).toBeVisible();

return textbox;
};

/**
* Set the value of a text input.
*
* @param target The name of the form element.
* @param value the value to set.
*/
public fill = async (
target: string | RegExp | Locator,
value: string,
context: LocatorContext = this.page,
): Promise<void> => {
let control: Locator;

if (typeof target === "string" || target instanceof RegExp) {
control = await this.findTextualInput(target, context);
} else {
control = target;
}

await control.fill(value);
};
Expand Down
10 changes: 7 additions & 3 deletions web/e2e/fixtures/PointerFixture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,14 @@ export class PointerFixture extends PageFixture {
public static fixtureName = "Pointer";

public click = (
name: string,
name: string | RegExp,
optionsOrRole?: ARIAOptions | ARIARole,
context: LocatorContext = this.page,
): Promise<void> => {
if (typeof optionsOrRole === "string") {
return context.getByRole(optionsOrRole, { name }).click();
return context.getByRole(optionsOrRole, { name }).click({
force: true,
});
}

const options = {
Expand All @@ -36,7 +38,9 @@ export class PointerFixture extends PageFixture {
// ---
.getByRole("button", options)
.or(context.getByRole("link", options))
.click()
.click({
force: true,
})
);
};
}
2 changes: 1 addition & 1 deletion web/src/admin/applications/ApplicationListPage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
protected renderSidebarAfter(): TemplateResult {
return html`<aside
aria-label=${msg("Applications Documentation")}
class="pf-c-sidebar__panel pf-m-width-25"
class="pf-c-sidebar__panel"
>
<div class="pf-c-card">
<div class="pf-c-card__body">
Expand Down
2 changes: 1 addition & 1 deletion web/src/admin/enterprise/EnterpriseLicenseForm.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
getSuccessMessage(): string {
return this.instance
? msg("Successfully updated license.")
: msg("Successfully created license.");
: msg("Successfully installed license.");
}

async load(): Promise<void> {
Expand Down
37 changes: 18 additions & 19 deletions web/src/admin/groups/MemberSelectModal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,27 +76,26 @@ export class MemberSelectTable extends TableModal<User> {
this.fetch();
};

return html`&nbsp;
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item pf-m-search-filter">
<div class="pf-c-input-group show-disabled-toggle-group">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
?checked=${this.userListFilter === "all"}
@change=${toggleShowDisabledUsers}
/>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
return html` <div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item pf-m-search-filter">
<div class="pf-c-input-group show-disabled-toggle-group">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
?checked=${this.userListFilter === "all"}
@change=${toggleShowDisabledUsers}
/>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
<span class="pf-c-switch__label">${msg("Show inactive users")}</span>
</label>
</div>
</span>
<span class="pf-c-switch__label">${msg("Show inactive users")}</span>
</label>
</div>
</div>`;
</div>
</div>`;
}

row(item: User): SlottedTemplateResult[] {
Expand Down
51 changes: 25 additions & 26 deletions web/src/admin/groups/RelatedUserList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,34 +449,33 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl
}

renderToolbarAfter(): TemplateResult {
return html`&nbsp;
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item pf-m-search-filter">
<div class="pf-c-input-group">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
?checked=${this.hideServiceAccounts}
@change=${() => {
this.hideServiceAccounts = !this.hideServiceAccounts;
this.page = 1;
this.fetch();
updateURLParams({
hideServiceAccounts: this.hideServiceAccounts,
});
}}
/>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
return html` <div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item pf-m-search-filter">
<div class="pf-c-input-group">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
?checked=${this.hideServiceAccounts}
@change=${() => {
this.hideServiceAccounts = !this.hideServiceAccounts;
this.page = 1;
this.fetch();
updateURLParams({
hideServiceAccounts: this.hideServiceAccounts,
});
}}
/>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
<span class="pf-c-switch__label">${msg("Hide service-accounts")}</span>
</label>
</div>
</span>
<span class="pf-c-switch__label">${msg("Hide service-accounts")}</span>
</label>
</div>
</div>`;
</div>
</div>`;
}
}

Expand Down
51 changes: 25 additions & 26 deletions web/src/admin/property-mappings/PropertyMappingListPage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,34 +127,33 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
}

renderToolbarAfter(): TemplateResult {
return html`&nbsp;
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item pf-m-search-filter">
<div class="pf-c-input-group">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
?checked=${this.hideManaged}
@change=${() => {
this.hideManaged = !this.hideManaged;
this.page = 1;
this.fetch();
updateURLParams({
hideManaged: this.hideManaged,
});
}}
/>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
return html` <div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item pf-m-search-filter">
<div class="pf-c-input-group">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
?checked=${this.hideManaged}
@change=${() => {
this.hideManaged = !this.hideManaged;
this.page = 1;
this.fetch();
updateURLParams({
hideManaged: this.hideManaged,
});
}}
/>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
<span class="pf-c-switch__label">${msg("Hide managed mappings")}</span>
</label>
</div>
</span>
<span class="pf-c-switch__label">${msg("Hide managed mappings")}</span>
</label>
</div>
</div>`;
</div>
</div>`;
}
}

Expand Down
Loading
Loading