f5c6e7aeb0
Web: bugfix: broken backchannel selector (#7480) * web: break circular dependency between AKElement & Interface. This commit changes the way the root node of the web application shell is discovered by child components, such that the base class shared by both no longer results in a circular dependency between the two models. I've run this in isolation and have seen no failures of discovery; the identity token exists as soon as the Interface is constructed and is found by every item on the page. * web: fix broken typescript references This built... and then it didn't? Anyway, the current fix is to provide type information the AkInterface for the data that consumers require. * web: rollback dependabot's upgrade of context The most frustrating part of this is that I RAN THIS, dammit, with the updated context and the current Wizard, and it finished the End-to-End tests without complaint. * web: bugfix: broken backchannel selector There were two bugs here, both of them introduced by me because I didn't understand the system well enough the first time through, and because I didn't test thoroughly enough. The first is that I was calling the wrong confirmation code; the resulting syntax survived because `confirm()` is actually a legitimate function call in the context of the DOM Window, a legacy survivor similar to `alert()` but with a yes/no return value. Bleah. The second is that the confirm code doesn't appear to pass back a dictionary with the `{ items: Array<Provider> }` list, it passes back just the `items` as an Array. Co-authored-by: Ken Sternberg <133134217+kensternberg-authentik@users.noreply.github.com>
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import "@goauthentik/admin/applications/ProviderSelectModal";
|
|
import { AKElement } from "@goauthentik/elements/Base";
|
|
|
|
import { TemplateResult, html, nothing } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
import { map } from "lit/directives/map.js";
|
|
|
|
import { Provider } from "@goauthentik/api";
|
|
|
|
@customElement("ak-backchannel-providers-input")
|
|
export class AkBackchannelProvidersInput extends AKElement {
|
|
// Render into the lightDOM. This effectively erases the shadowDOM nature of this component, but
|
|
// we're not actually using that and, for the meantime, we need the form handlers to be able to
|
|
// find the children of this component.
|
|
//
|
|
// This field is so highly specialized that it would make more sense if we put the API and the
|
|
// fetcher here.
|
|
//
|
|
// TODO: This abstraction is wrong; it's putting *more* layers in as a way of managing the
|
|
// visual clutter and legibility issues of ak-form-elemental-horizontal and patternfly in
|
|
// general.
|
|
protected createRenderRoot() {
|
|
return this;
|
|
}
|
|
|
|
@property({ type: String })
|
|
name!: string;
|
|
|
|
@property({ type: String })
|
|
label = "";
|
|
|
|
@property({ type: Array })
|
|
providers: Provider[] = [];
|
|
|
|
@property({ type: Object })
|
|
tooltip?: TemplateResult;
|
|
|
|
@property({ attribute: false, type: Object })
|
|
confirm!: ({ items }: { items: Provider[] }) => Promise<void>;
|
|
|
|
@property({ attribute: false, type: Object })
|
|
remover!: (provider: Provider) => () => void;
|
|
|
|
@property({ type: String })
|
|
value = "";
|
|
|
|
@property({ type: Boolean })
|
|
required = false;
|
|
|
|
@property({ type: String })
|
|
help = "";
|
|
|
|
render() {
|
|
const renderOneChip = (provider: Provider) =>
|
|
html`<ak-chip
|
|
.removable=${true}
|
|
value=${ifDefined(provider.pk)}
|
|
@remove=${this.remover(provider)}
|
|
>${provider.name}</ak-chip
|
|
>`;
|
|
|
|
return html`
|
|
<ak-form-element-horizontal label=${this.label} name=${name}>
|
|
<div class="pf-c-input-group">
|
|
<ak-provider-select-table ?backchannelOnly=${true} .confirm=${this.confirm}>
|
|
<button slot="trigger" class="pf-c-button pf-m-control" type="button">
|
|
${this.tooltip ? this.tooltip : nothing}
|
|
<i class="fas fa-plus" aria-hidden="true"></i>
|
|
</button>
|
|
</ak-provider-select-table>
|
|
<div class="pf-c-form-control">
|
|
<ak-chip-group> ${map(this.providers, renderOneChip)} </ak-chip-group>
|
|
</div>
|
|
</div>
|
|
${this.help ? html`<p class="pf-c-form__helper-radio">${this.help}</p>` : nothing}
|
|
</ak-form-element-horizontal>
|
|
`;
|
|
}
|
|
}
|