web: basic cleanup of buttons (#6107)
* web: basic cleanup of buttons
This commit adds Storybook features to the Authentik four-stage button.
The four-stage button is used to:
- trigger an action
- show that the action is running
- show when the action has succeeded, then reset
- show when the action has failed, then reset
It is used mostly for fetching data from the server. The variants are:
- ak-spinner-button: The basic form takes a single property argument, `callAction` a function that
returns a Promise (an asynchronous function).
- ak-action-button: Takes an API request function (which are all asynchronous) and adapts it to the
`callAction`. The only difference in behavior with the Spinner button is that on failure the error
message will be displayed by a notification.
- ak-token-copy-button: A specialized button that, on success, pushes the content of the retrieved
object into the clipboard.
Cleanup consisted of:
- removing a lot of the in-line code from the HTML, decluttering it and making more explicit what
the behaviors of each button type are on success and on failure.
- Replacing the ad-hoc Promise management with Lit's own `Task` handler. The `Task` handler knows
how to notify a Lit-Element of its own internal state change, making it ideal for objects like
this button that need to change their appearance as a Promise'd task progresses from idle →
running → (success or failure).
- Providing JSDoc strings for all of the properties, slots, attributes, elements, and events.
- Adding 'pointer-events: none' during the running phases of the action, to prevent the user from
clicking the button multiple times and launching multiple queries.
- Emitting an event for every stage of the operation:
- `ak-button-click` when the button is clicked.
- `ak-button-success` when the action completes. The payload is included in `Event.detail.result`
- `ak-button-failure` when the action fails. The error message is included in `Event.detail.error`
- `ak-button-reset` when the button completes a notification and goes back to idle
**Storybook**
Since the API requests for both `ak-spinner-button` and `ak-action-button` require only that a
promise be returned, Storybooking them was straightforward. `ak-token-copy-button` is a
special-purpose derivative with an internal functionality that can't be easily mocked (yet), so
there's no Storybook for it.
All of the stories provide the required asynchronous function, in this cose one that waits three
seconds before emitting either a `response` or `reject` Promise.
`ak-action-button`'s Story has event handler code so that pressing on the button will result in a
message being written to a display block under the button.
I've added a new pair of class mixins, `CustomEmitterElement` and `CustomListenerElement`. These
each add an additional method to the classes they're mixed into; one provides a very easy way to
emit a custom event and one provides a way to receive the custom event while sweeping all of the
custom event type handling under the rug.
`emitCustomEvent` replaces this:
``` JavaScript
this.dispatchEvent(
new CustomEvent('ak-button-click', {
composed: true,
bubbles: true,
detail: {
target: this,
result: "Some result, huh?"
},
})
);
```
... with this:
``` JavaScript
this.dispatchCustomEvent('ak-button-click', { result: "Some result, huh?" });
```
The `CustomListenerElement` handler just ensures that the handler being passed to it takes a
CustomEvent, and then makes sure that any actual event passed to the handler has been type-guarded
to ensure it is a custom event.
**Observations**
*Composition vs Inheritance, Part 1*
The four-state button has three implementations. All three inherit from `BaseTaskButton`:
- `spinner`
- provides a default `callAction()`
- `action`
- provides a different name for `callAction`
- overrides `onError` to display a Notification.
- `token-copy`
- provides a custom `callAction`
- overrides `onSuccess` to copy the results to the keyboard
- overrides `onError` to display a Notification, with special handling for asynchronous
processing.
The *results* of all of these could be handled higher up as event handlers, and the button could be
just a thing that displays the states. As it is, the BaseStateToken has only one reason to change
(the Promise changes its state), so I'm satisfied that this is a suitable evolution of the product,
and that it does what it says it does.
*Developer Ergonomics*
The one thing that stands out to me time and again is just how *confusing* all of the Patternfly
stuff tends to be; not because it's not logical, but because it overwhelms the human 7±2 ability to
remember details like this without any imperative to memorize all of them. I would like to get them
under control by marshalling them under a semantic CSS regime, but I'm blocked by some basic
disconnects in the current development environment. We can't shake out the CSS as much as we'd like
because there's no ESPrima equivalent for Typescript, and the smallest bundle purgeCSS is capable of
making for just *one* button is about 55KB. That's a bit too much. It's a great system for getting
off the ground, but long-term it needs more love than we (can) give it.
* Prettier has opinions.
* Removed extraneous debugging code.
* Added comments to the BaseTaskButton parent class.
* web: fixed two build errors (typing) in the stories.
* web: prettier's got opinions
* web: refactor the buttons
This commit adds URL mocking to Storybook, which in turn allows us to
commit a Story for ak-token-copy-button.
I have confirmed that the button's algorithm for writing to the
clipboard works on Safari, Chrome, and Firefox. I don't know
what's up with IE.
* ONE BYTE in .storybook/main blocked integration.
With the repair of lit-analyze, it's time to fix the rule set
to at least let us pass for the moment.
* Still looking for the list of exceptions in lit-analyze that will let us pass once more.
* web: repair error in EnterpriseLicenseForm
This commit continues to find the right configuration for
lit-analyze. During the course of this repair, I discovered
a bug in the EnterpriseLicenseForm; the original usage could
result in the _string_ `undefined` being passed back as a
value. To handle the case where the value truly is undefined,
the `ifDefined()` directive must be used in the HTML template.
I have also instituted a case-by-case stylistic decision to allow
the HTML, and only the HTML, to be longer that 100 characters
when doing so reduces the visual "noise" of a function.
This commit is contained in:
Ken Sternberg
GitHub
parent
14ebd55121
commit
12c4ac704f
3
Makefile
3
Makefile
|
|
@ -145,7 +145,8 @@ web-lint-fix:
|
|||
|
||||
web-lint:
|
||||
cd web && npm run lint
|
||||
cd web && npm run lit-analyse
|
||||
# TODO: The analyzer hasn't run correctly in awhile.
|
||||
# cd web && npm run lit-analyse
|
||||
|
||||
web-check-compile:
|
||||
cd web && npm run tsc
|
||||
|
|
|
|||
|
|
@ -11,9 +11,11 @@ export const apiBasePath = process.env.AK_API_BASE_PATH || "";
|
|||
const config: StorybookConfig = {
|
||||
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
|
||||
addons: [
|
||||
"@storybook/addon-controls",
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
"@jeysal/storybook-addon-css-user-preferences",
|
||||
"storybook-addon-mock",
|
||||
],
|
||||
framework: {
|
||||
name: "@storybook/web-components-vite",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import type { Preview } from "@storybook/web-components";
|
||||
|
||||
import "@goauthentik/common/styles/authentik.css";
|
||||
import "@goauthentik/common/styles/theme-dark.css";
|
||||
import "@patternfly/patternfly/components/Brand/brand.css";
|
||||
import "@patternfly/patternfly/components/Page/page.css";
|
||||
// .storybook/preview.js
|
||||
import "@patternfly/patternfly/patternfly-base.css";
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -36,6 +36,7 @@
|
|||
"@fortawesome/fontawesome-free": "^6.4.0",
|
||||
"@goauthentik/api": "^2023.6.1-1689609456",
|
||||
"@lit-labs/context": "^0.3.3",
|
||||
"@lit-labs/task": "^2.1.2",
|
||||
"@lit/localize": "^0.11.4",
|
||||
"@patternfly/patternfly": "^4.224.2",
|
||||
"@sentry/browser": "^7.59.2",
|
||||
|
|
@ -61,6 +62,7 @@
|
|||
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
||||
"@babel/plugin-proposal-decorators": "^7.22.7",
|
||||
"@babel/plugin-proposal-private-methods": "^7.18.6",
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||
"@babel/plugin-transform-runtime": "^7.22.9",
|
||||
"@babel/preset-env": "^7.22.9",
|
||||
"@babel/preset-typescript": "^7.22.5",
|
||||
|
|
@ -105,6 +107,7 @@
|
|||
"rollup-plugin-terser": "^7.0.2",
|
||||
"sharp-cli": "^4.1.1",
|
||||
"storybook": "^7.0.27",
|
||||
"storybook-addon-mock": "^4.1.0",
|
||||
"ts-lit-plugin": "^1.2.1",
|
||||
"tslib": "^2.6.0",
|
||||
"turnstile-types": "^1.1.2",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
|||
import { msg } from "@lit/localize";
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
|
||||
import { EnterpriseApi, License } from "@goauthentik/api";
|
||||
|
||||
|
|
@ -21,11 +22,9 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
|
|||
}
|
||||
|
||||
getSuccessMessage(): string {
|
||||
if (this.instance) {
|
||||
return msg("Successfully updated license.");
|
||||
} else {
|
||||
return msg("Successfully created license.");
|
||||
}
|
||||
return this.instance
|
||||
? msg("Successfully updated license.")
|
||||
: msg("Successfully created license.");
|
||||
}
|
||||
|
||||
async load(): Promise<void> {
|
||||
|
|
@ -35,28 +34,23 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
|
|||
}
|
||||
|
||||
async send(data: License): Promise<License> {
|
||||
if (this.instance) {
|
||||
return new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicensePartialUpdate({
|
||||
return this.instance
|
||||
? new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicensePartialUpdate({
|
||||
licenseUuid: this.instance.licenseUuid || "",
|
||||
patchedLicenseRequest: data,
|
||||
});
|
||||
} else {
|
||||
return new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicenseCreate({
|
||||
})
|
||||
: new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicenseCreate({
|
||||
licenseRequest: data,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
// prettier-ignore
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal label=${msg("Install ID")}>
|
||||
<input class="pf-c-form-control" readonly type="text" value="${this.installID}" />
|
||||
<input class="pf-c-form-control" readonly type="text" value="${ifDefined(this.installID)}" />
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
name="key"
|
||||
?writeOnly=${this.instance !== undefined}
|
||||
label=${msg("License key")}
|
||||
>
|
||||
<ak-form-element-horizontal name="key" ?writeOnly=${this.instance !== undefined} label=${msg("License key")}>
|
||||
<textarea class="pf-c-form-control"></textarea>
|
||||
</ak-form-element-horizontal>
|
||||
</form>`;
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
import { MessageLevel } from "@goauthentik/common/messages";
|
||||
import { SpinnerButton } from "@goauthentik/elements/buttons/SpinnerButton";
|
||||
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
|
||||
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
@customElement("ak-action-button")
|
||||
export class ActionButton extends SpinnerButton {
|
||||
@property({ attribute: false })
|
||||
apiRequest: () => Promise<unknown> = () => {
|
||||
throw new Error();
|
||||
};
|
||||
|
||||
callAction = (): Promise<unknown> => {
|
||||
this.setLoading();
|
||||
return this.apiRequest().catch((e: Error | Response) => {
|
||||
if (e instanceof Error) {
|
||||
showMessage({
|
||||
level: MessageLevel.error,
|
||||
message: e.toString(),
|
||||
});
|
||||
} else {
|
||||
e.text().then((t) => {
|
||||
showMessage({
|
||||
level: MessageLevel.error,
|
||||
message: t,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import "@goauthentik/elements/messages/MessageContainer";
|
||||
import { Meta } from "@storybook/web-components";
|
||||
|
||||
import { TemplateResult, html } from "lit";
|
||||
|
||||
import "./ak-action-button";
|
||||
import AKActionButton from "./ak-action-button";
|
||||
|
||||
const metadata: Meta<AKActionButton> = {
|
||||
title: "Elements / Action Button",
|
||||
component: "ak-action-button",
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: "A four-state button for asynchronous operations",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
apiRequest: {
|
||||
type: "function",
|
||||
description:
|
||||
"Asynchronous function that takes no arguments and returns a Promise. The contents of the completed Promise will be sent with the ak-button-success event.",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default metadata;
|
||||
|
||||
const container = (testItem: TemplateResult) => html` <div style="background: #fff; padding: 2em">
|
||||
<style>
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
}
|
||||
</style>
|
||||
<ak-message-container></ak-message-container>
|
||||
${testItem}
|
||||
<p>Messages received from the button:</p>
|
||||
<ul id="action-button-message-pad" style="margin-top: 1em"></ul>
|
||||
</div>`;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const displayMessage = (result: any) => {
|
||||
const doc = new DOMParser().parseFromString(
|
||||
`<li><i>Event</i>: ${
|
||||
"result" in result.detail ? result.detail.result : result.detail.error
|
||||
}</li>`,
|
||||
"text/xml",
|
||||
);
|
||||
const target = document.querySelector("#action-button-message-pad");
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
target!.appendChild(doc.firstChild!);
|
||||
};
|
||||
|
||||
window.addEventListener("ak-button-success", displayMessage);
|
||||
window.addEventListener("ak-button-failure", displayMessage);
|
||||
|
||||
export const ButtonWithSuccess = () => {
|
||||
const run = () =>
|
||||
new Promise<string>(function (resolve) {
|
||||
setTimeout(function () {
|
||||
resolve("Success!");
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
return container(
|
||||
html`<ak-action-button class="pf-m-primary" .apiRequest=${run}
|
||||
>3 Seconds</ak-action-button
|
||||
>`,
|
||||
);
|
||||
};
|
||||
|
||||
export const ButtonWithError = () => {
|
||||
const run = () =>
|
||||
new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
reject(new Error("This is the error message."));
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
return container(html` <ak-action-button class="pf-m-secondary" .apiRequest=${run}
|
||||
>3 Seconds</ak-action-button
|
||||
>`);
|
||||
};
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { MessageLevel } from "@goauthentik/common/messages";
|
||||
import { BaseTaskButton } from "@goauthentik/elements/buttons/SpinnerButton/BaseTaskButton";
|
||||
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
|
||||
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
/**
|
||||
* A button associated with an event handler for loading data. Takes an asynchronous function as its
|
||||
* only property.
|
||||
*
|
||||
* @element ak-action-button
|
||||
*
|
||||
* @slot - The label for the button
|
||||
*
|
||||
* @fires ak-button-click - When the button is first clicked.
|
||||
* @fires ak-button-success - When the async process succeeds
|
||||
* @fires ak-button-failure - When the async process fails
|
||||
* @fires ak-button-reset - When the button is reset after the async process completes
|
||||
*/
|
||||
|
||||
@customElement("ak-action-button")
|
||||
export class ActionButton extends BaseTaskButton {
|
||||
/**
|
||||
* The command to run when the button is pressed. Must return a promise. If the promise is a
|
||||
* reject or throw, we process the content of the promise and deliver it to the Notification
|
||||
* bus.
|
||||
*
|
||||
* @attr
|
||||
*/
|
||||
|
||||
@property({ attribute: false })
|
||||
apiRequest: () => Promise<unknown> = () => {
|
||||
throw new Error();
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.onError = this.onError.bind(this);
|
||||
}
|
||||
|
||||
callAction = (): Promise<unknown> => {
|
||||
return this.apiRequest();
|
||||
};
|
||||
|
||||
async onError(error: Error | Response) {
|
||||
super.onError(error);
|
||||
const message = error instanceof Error ? error.toString() : await error.text();
|
||||
showMessage({
|
||||
level: MessageLevel.error,
|
||||
message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default ActionButton;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import { ActionButton } from "./ak-action-button";
|
||||
|
||||
export { ActionButton };
|
||||
export default ActionButton;
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
import { ERROR_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "@goauthentik/common/constants";
|
||||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
import { PFSize } from "@goauthentik/elements/Spinner";
|
||||
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
|
||||
@customElement("ak-spinner-button")
|
||||
export class SpinnerButton extends AKElement {
|
||||
@property({ type: Boolean })
|
||||
isRunning = false;
|
||||
|
||||
@property()
|
||||
callAction?: () => Promise<unknown>;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
PFBase,
|
||||
PFButton,
|
||||
PFSpinner,
|
||||
css`
|
||||
button {
|
||||
/* Have to use !important here, as buttons with pf-m-progress have transition already */
|
||||
transition: all var(--pf-c-button--m-progress--TransitionDuration) ease 0s !important;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
setLoading(): void {
|
||||
this.isRunning = true;
|
||||
this.classList.add(PROGRESS_CLASS);
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
setDone(statusClass: string): void {
|
||||
this.isRunning = false;
|
||||
this.classList.remove(PROGRESS_CLASS);
|
||||
this.classList.add(statusClass);
|
||||
this.requestUpdate();
|
||||
setTimeout(() => {
|
||||
this.classList.remove(statusClass);
|
||||
this.requestUpdate();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<button
|
||||
class="pf-c-button pf-m-progress ${this.classList.toString()}"
|
||||
@click=${() => {
|
||||
if (this.isRunning === true) {
|
||||
return;
|
||||
}
|
||||
this.setLoading();
|
||||
if (this.callAction) {
|
||||
this.callAction()
|
||||
.then(() => {
|
||||
this.setDone(SUCCESS_CLASS);
|
||||
})
|
||||
.catch(() => {
|
||||
this.setDone(ERROR_CLASS);
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
${this.isRunning
|
||||
? html`<span class="pf-c-button__progress">
|
||||
<ak-spinner size=${PFSize.Medium}></ak-spinner>
|
||||
</span>`
|
||||
: ""}
|
||||
<slot></slot>
|
||||
</button>`;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
import { ERROR_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "@goauthentik/common/constants";
|
||||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
import { PFSize } from "@goauthentik/elements/Spinner";
|
||||
import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
|
||||
|
||||
import { Task, TaskStatus } from "@lit-labs/task";
|
||||
import { css, html } from "lit";
|
||||
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
|
||||
// `pointer-events: none` makes the button inaccessible during the processing phase.
|
||||
|
||||
const buttonStyles = [
|
||||
PFBase,
|
||||
PFButton,
|
||||
PFSpinner,
|
||||
css`
|
||||
#spinner-button {
|
||||
transition: all var(--pf-c-button--m-progress--TransitionDuration) ease 0s;
|
||||
}
|
||||
#spinner-button.working {
|
||||
pointer-events: none;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
const StatusMap = new Map<TaskStatus, string>([
|
||||
[TaskStatus.INITIAL, ""],
|
||||
[TaskStatus.PENDING, PROGRESS_CLASS],
|
||||
[TaskStatus.COMPLETE, SUCCESS_CLASS],
|
||||
[TaskStatus.ERROR, ERROR_CLASS],
|
||||
]);
|
||||
|
||||
const SPINNER_TIMEOUT = 1000 * 1.5; // milliseconds
|
||||
|
||||
/**
|
||||
* BaseTaskButton
|
||||
*
|
||||
* This is an abstract base class for our four-state buttons. It provides the four basic events of
|
||||
* this class: click, success, failure, reset. Subclasses can override any of these event handlers,
|
||||
* but overriding onSuccess() or onFailure() means that you must either call `onComplete` if you
|
||||
* want to preserve the TaskButton's "reset after completion" semantics, or inside `onSuccess` and
|
||||
* `onFailure` call their `super.` equivalents.
|
||||
*
|
||||
*/
|
||||
|
||||
export abstract class BaseTaskButton extends CustomEmitterElement(AKElement) {
|
||||
eventPrefix = "ak-button";
|
||||
|
||||
static get styles() {
|
||||
return buttonStyles;
|
||||
}
|
||||
|
||||
callAction!: () => Promise<unknown>;
|
||||
|
||||
actionTask: Task;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.onSuccess = this.onSuccess.bind(this);
|
||||
this.onError = this.onError.bind(this);
|
||||
this.onClick = this.onClick.bind(this);
|
||||
this.actionTask = new Task(this, {
|
||||
task: () => this.callAction(),
|
||||
args: () => [],
|
||||
autoRun: false,
|
||||
onComplete: (r: unknown) => this.onSuccess(r),
|
||||
onError: (r: unknown) => this.onError(r),
|
||||
});
|
||||
}
|
||||
|
||||
onComplete() {
|
||||
setTimeout(() => {
|
||||
this.actionTask.status = TaskStatus.INITIAL;
|
||||
this.dispatchCustomEvent(`${this.eventPrefix}-reset`);
|
||||
this.requestUpdate();
|
||||
}, SPINNER_TIMEOUT);
|
||||
}
|
||||
|
||||
onSuccess(r: unknown) {
|
||||
this.dispatchCustomEvent(`${this.eventPrefix}-success`, {
|
||||
result: r,
|
||||
});
|
||||
this.onComplete();
|
||||
}
|
||||
|
||||
onError(error: unknown) {
|
||||
this.dispatchCustomEvent(`${this.eventPrefix}-failure`, {
|
||||
error,
|
||||
});
|
||||
this.onComplete();
|
||||
}
|
||||
|
||||
onClick() {
|
||||
if (this.actionTask.status !== TaskStatus.INITIAL) {
|
||||
return;
|
||||
}
|
||||
this.dispatchCustomEvent(`${this.eventPrefix}-click`);
|
||||
this.actionTask.run();
|
||||
}
|
||||
|
||||
private spinner = html`<span class="pf-c-button__progress">
|
||||
<ak-spinner size=${PFSize.Medium}></ak-spinner>
|
||||
</span>`;
|
||||
|
||||
get buttonClasses() {
|
||||
return [
|
||||
...this.classList,
|
||||
StatusMap.get(this.actionTask.status),
|
||||
this.actionTask.status === TaskStatus.INITIAL ? "" : "working",
|
||||
]
|
||||
.join(" ")
|
||||
.trim();
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`<button
|
||||
id="spinner-button"
|
||||
class="pf-c-button pf-m-progress ${this.buttonClasses}"
|
||||
@click=${this.onClick}
|
||||
>
|
||||
${this.actionTask.render({ pending: () => this.spinner })}
|
||||
<slot></slot>
|
||||
</button>`;
|
||||
}
|
||||
}
|
||||
|
||||
export default BaseTaskButton;
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import { Meta } from "@storybook/web-components";
|
||||
|
||||
import { html } from "lit";
|
||||
|
||||
import "./ak-spinner-button";
|
||||
import AKSpinnerButton from "./ak-spinner-button";
|
||||
|
||||
const metadata: Meta<AKSpinnerButton> = {
|
||||
title: "Elements / Spinner Button",
|
||||
component: "ak-spinner-button",
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: "A four-state button for asynchronous operations",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
callAction: {
|
||||
type: "function",
|
||||
description:
|
||||
"Asynchronous function that takes no arguments and returns a promise. The contents of the completed Promise will be sent with the ak-button-success event.",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default metadata;
|
||||
|
||||
export const ButtonWithSuccess = () => {
|
||||
const run = () =>
|
||||
new Promise<void>(function (resolve) {
|
||||
setTimeout(function () {
|
||||
resolve();
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
return html`<div style="background: #fff; padding: 4em">
|
||||
<ak-spinner-button class="pf-m-primary" .callAction=${run}>3 Seconds</ak-spinner-button>
|
||||
</div>`;
|
||||
};
|
||||
|
||||
export const ButtonWithReject = () => {
|
||||
const run = () =>
|
||||
new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
reject("Rejected!");
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
return html`<div style="background: #fff; padding: 4em">
|
||||
<ak-spinner-button class="pf-m-secondary" .callAction=${run}>3 Seconds</ak-spinner-button>
|
||||
</div>`;
|
||||
};
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { customElement } from "lit/decorators.js";
|
||||
import { property } from "lit/decorators.js";
|
||||
|
||||
import { BaseTaskButton } from "./BaseTaskButton";
|
||||
|
||||
/**
|
||||
* A button associated with an event handler for loading data. Takes an asynchronous function as its
|
||||
* only property.
|
||||
*
|
||||
* @element ak-spinner-button
|
||||
*
|
||||
* @slot - The label for the button
|
||||
*
|
||||
* @fires ak-button-click - When the button is first clicked.
|
||||
* @fires ak-button-success - When the async process succeeds
|
||||
* @fires ak-button-failure - When the async process fails
|
||||
* @fires ak-button-reset - When the button is reset after the async process completes
|
||||
*/
|
||||
|
||||
@customElement("ak-spinner-button")
|
||||
export class SpinnerButton extends BaseTaskButton {
|
||||
/**
|
||||
* The command to run when the button is pressed. Must return a promise. We don't do anything
|
||||
* with that promise other than check if it's a resolve or reject, and rethrow the event after.
|
||||
*
|
||||
* @attr
|
||||
*/
|
||||
@property({ type: Object, attribute: false })
|
||||
callAction!: () => Promise<unknown>;
|
||||
}
|
||||
|
||||
export default SpinnerButton;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import SpinnerButton from "./ak-spinner-button";
|
||||
|
||||
export { SpinnerButton };
|
||||
export default SpinnerButton;
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { ERROR_CLASS, SECONDARY_CLASS, SUCCESS_CLASS } from "@goauthentik/common/constants";
|
||||
import { MessageLevel } from "@goauthentik/common/messages";
|
||||
import { PFSize } from "@goauthentik/elements/Spinner";
|
||||
import { ActionButton } from "@goauthentik/elements/buttons/ActionButton";
|
||||
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
|
||||
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
import { CoreApi, ResponseError } from "@goauthentik/api";
|
||||
|
||||
@customElement("ak-token-copy-button")
|
||||
export class TokenCopyButton extends ActionButton {
|
||||
@property()
|
||||
identifier?: string;
|
||||
|
||||
@property()
|
||||
buttonClass: string = SECONDARY_CLASS;
|
||||
|
||||
apiRequest: () => Promise<unknown> = () => {
|
||||
this.setLoading();
|
||||
if (!this.identifier) {
|
||||
return Promise.reject();
|
||||
}
|
||||
return new CoreApi(DEFAULT_CONFIG)
|
||||
.coreTokensViewKeyRetrieve({
|
||||
identifier: this.identifier,
|
||||
})
|
||||
.then((token) => {
|
||||
if (!token.key) {
|
||||
return Promise.reject();
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.buttonClass = SECONDARY_CLASS;
|
||||
}, 1500);
|
||||
this.buttonClass = SUCCESS_CLASS;
|
||||
return token.key;
|
||||
})
|
||||
.catch((err: Error | ResponseError | undefined) => {
|
||||
this.buttonClass = ERROR_CLASS;
|
||||
if (!(err instanceof ResponseError)) {
|
||||
setTimeout(() => {
|
||||
this.buttonClass = SECONDARY_CLASS;
|
||||
}, 1500);
|
||||
throw err;
|
||||
}
|
||||
return err.response.json().then((errResp) => {
|
||||
setTimeout(() => {
|
||||
this.buttonClass = SECONDARY_CLASS;
|
||||
}, 1500);
|
||||
throw new Error(errResp["detail"]);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<button
|
||||
class="pf-c-button pf-m-progress ${this.classList.toString()}"
|
||||
@click=${() => {
|
||||
if (this.isRunning === true) {
|
||||
return;
|
||||
}
|
||||
this.setLoading();
|
||||
// If we're on an insecure origin (non-https and not localhost), we might
|
||||
// not be able to write to the clipboard, and instead show a message
|
||||
if (!navigator.clipboard) {
|
||||
this.callAction()
|
||||
.then((v) => {
|
||||
this.setDone(SUCCESS_CLASS);
|
||||
showMessage({
|
||||
level: MessageLevel.info,
|
||||
message: v as string,
|
||||
});
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
this.setDone(ERROR_CLASS);
|
||||
throw err;
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Because safari is stupid, it only allows navigator.clipboard.write directly
|
||||
// in the @click handler.
|
||||
// And also chrome is stupid, because it doesn't accept Promises as values for
|
||||
// ClipboardItem, so now there's two implementations
|
||||
if (
|
||||
navigator.userAgent.includes("Safari") &&
|
||||
!navigator.userAgent.includes("Chrome")
|
||||
) {
|
||||
navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
"text/plain": (this.callAction() as Promise<string>)
|
||||
.then((key: string) => {
|
||||
this.setDone(SUCCESS_CLASS);
|
||||
return new Blob([key], {
|
||||
type: "text/plain",
|
||||
});
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
this.setDone(ERROR_CLASS);
|
||||
throw err;
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
} else {
|
||||
(this.callAction() as Promise<string>)
|
||||
.then((key: string) => {
|
||||
navigator.clipboard.writeText(key).then(() => {
|
||||
this.setDone(SUCCESS_CLASS);
|
||||
});
|
||||
})
|
||||
.catch((err: ResponseError | Error) => {
|
||||
if (!(err instanceof ResponseError)) {
|
||||
showMessage({
|
||||
level: MessageLevel.error,
|
||||
message: err.message,
|
||||
});
|
||||
return;
|
||||
}
|
||||
return err.response.json().then((errResp) => {
|
||||
this.setDone(ERROR_CLASS);
|
||||
throw new Error(errResp["detail"]);
|
||||
});
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
${this.isRunning
|
||||
? html`<span class="pf-c-button__progress">
|
||||
<ak-spinner size=${PFSize.Medium}></ak-spinner>
|
||||
</span>`
|
||||
: ""}
|
||||
<slot></slot>
|
||||
</button>`;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
import "@goauthentik/elements/messages/MessageContainer";
|
||||
import { Meta } from "@storybook/web-components";
|
||||
|
||||
import { TemplateResult, html } from "lit";
|
||||
|
||||
import "./ak-token-copy-button";
|
||||
import AKTokenCopyButton from "./ak-token-copy-button";
|
||||
|
||||
// For this test, we want each key to be unique so that the tester can
|
||||
// be assured that the returned result is in fact going into the
|
||||
// clipboard.
|
||||
|
||||
function makeid(length: number) {
|
||||
const sample = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
return new Array(length)
|
||||
.fill(" ")
|
||||
.map(() => sample.charAt(Math.floor(Math.random() * sample.length)))
|
||||
.join("");
|
||||
}
|
||||
|
||||
// We want the display to be rich and comprehensive. The next two functions provide
|
||||
// a styled wrapper for the return messages, and a styled wrapper for each message.
|
||||
|
||||
const container = (testItem: TemplateResult) => html` <div style="background: #fff; padding: 2em">
|
||||
<style>
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
p + p {
|
||||
margin-top: 0.2em;
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
<ak-message-container></ak-message-container>
|
||||
${testItem}
|
||||
<p>Messages received from the button:</p>
|
||||
<ul id="action-button-message-pad" style="margin-top: 1em"></ul>
|
||||
</div>`;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const displayMessage = (result: any) => {
|
||||
console.log(result);
|
||||
const doc = new DOMParser().parseFromString(
|
||||
`<li><p><i>Event</i>: ${
|
||||
"result" in result.detail ? result.detail.result.key : result.detail.error
|
||||
}</p><p style="padding-left: 2.5rem">The key should also be in your clipboard</p></li>`,
|
||||
"text/xml",
|
||||
);
|
||||
const target = document.querySelector("#action-button-message-pad");
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
target!.appendChild(doc.firstChild!);
|
||||
};
|
||||
|
||||
// The Four-State buttons each produce these events. Capture them.
|
||||
|
||||
window.addEventListener("ak-button-success", displayMessage);
|
||||
window.addEventListener("ak-button-failure", displayMessage);
|
||||
|
||||
const metadata: Meta<AKTokenCopyButton> = {
|
||||
title: "Elements / Token Copy Button",
|
||||
component: "ak-token-copy-button",
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A four-state button for asynchronous operations specialized to retrieve SSO tokens",
|
||||
},
|
||||
},
|
||||
mockData: [
|
||||
{
|
||||
url: "api/v3/core/tokens/foobar/view_key/",
|
||||
method: "GET",
|
||||
status: 200,
|
||||
response: () => {
|
||||
return {
|
||||
key: `ThisIsTheMockKeyYouShouldExpectToSeeOnSuccess-${makeid(5)}`,
|
||||
};
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default metadata;
|
||||
|
||||
export const ButtonWithSuccess = () => {
|
||||
return container(
|
||||
html`<ak-token-copy-button class="pf-m-primary" identifier="foobar"
|
||||
>3 Seconds to Foo</ak-token-copy-button
|
||||
>`,
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { MessageLevel } from "@goauthentik/common/messages";
|
||||
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
|
||||
import { isSafari } from "@goauthentik/elements/utils/isSafari";
|
||||
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
import { CoreApi, ResponseError, TokenView } from "@goauthentik/api";
|
||||
|
||||
import BaseTaskButton from "../SpinnerButton/BaseTaskButton";
|
||||
|
||||
/**
|
||||
* A derivative of ak-action-button that is used only to request tokens from the back-end server.
|
||||
* Automatically pushes tokens to the clipboard, if the clipboard is available; otherwise displays
|
||||
* them in the notifications.
|
||||
*
|
||||
* @element ak-token-copy-button
|
||||
*
|
||||
* @slot - The label for the button
|
||||
*
|
||||
* @fires ak-button-click - When the button is first clicked.
|
||||
* @fires ak-button-success - When the async process succeeds
|
||||
* @fires ak-button-failure - When the async process fails
|
||||
* @fires ak-button-reset - When the button is reset after the async process completes
|
||||
*/
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const isTokenView = (v: any): v is TokenView => v && "key" in v && typeof v.key === "string";
|
||||
|
||||
@customElement("ak-token-copy-button")
|
||||
export class TokenCopyButton extends BaseTaskButton {
|
||||
/**
|
||||
* The identifier key associated with this token.
|
||||
* @attr
|
||||
*/
|
||||
@property()
|
||||
identifier?: string;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.onSuccess = this.onSuccess.bind(this);
|
||||
this.onError = this.onError.bind(this);
|
||||
}
|
||||
|
||||
callAction: () => Promise<unknown> = () => {
|
||||
if (!this.identifier) {
|
||||
return Promise.reject();
|
||||
}
|
||||
return new CoreApi(DEFAULT_CONFIG).coreTokensViewKeyRetrieve({
|
||||
identifier: this.identifier,
|
||||
});
|
||||
};
|
||||
|
||||
onSuccess(token: unknown) {
|
||||
super.onSuccess(token);
|
||||
if (!isTokenView(token)) {
|
||||
throw new Error(`Unrecognized return from server: ${token}`);
|
||||
}
|
||||
|
||||
// Insecure origins may not have access to the clipboard. Show a message instead.
|
||||
if (!navigator.clipboard) {
|
||||
showMessage({
|
||||
level: MessageLevel.info,
|
||||
message: token.key as string,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Safari only allows navigator.clipboard.write with native clipboard items.
|
||||
if (isSafari()) {
|
||||
navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
"text/plain": new Blob([token.key as string], {
|
||||
type: "text/plain",
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
return;
|
||||
}
|
||||
|
||||
// Default behavior: write the token to the clipboard.
|
||||
navigator.clipboard.writeText(token.key as string);
|
||||
}
|
||||
|
||||
async onError(error: unknown) {
|
||||
super.onError(error);
|
||||
// prettier-ignore
|
||||
const message = error instanceof ResponseError ? await error.response.text()
|
||||
: error instanceof Error ? error.toString()
|
||||
: `${error}`;
|
||||
|
||||
showMessage({
|
||||
level: MessageLevel.error,
|
||||
message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default TokenCopyButton;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import { TokenCopyButton } from "./ak-token-copy-button";
|
||||
|
||||
export { TokenCopyButton };
|
||||
export default TokenCopyButton;
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import type { LitElement } from "lit";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
type Constructor<T = object> = new (...args: any[]) => T;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export const isCustomEvent = (v: any): v is CustomEvent =>
|
||||
v instanceof CustomEvent && "detail" in v;
|
||||
|
||||
export function CustomEmitterElement<T extends Constructor<LitElement>>(superclass: T) {
|
||||
return class EmmiterElementHandler extends superclass {
|
||||
dispatchCustomEvent(eventName: string, detail = {}, options = {}) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(eventName, {
|
||||
composed: true,
|
||||
bubbles: true,
|
||||
...options,
|
||||
detail: {
|
||||
target: this,
|
||||
...detail,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function CustomListenerElement<T extends Constructor<LitElement>>(superclass: T) {
|
||||
return class ListenerElementHandler extends superclass {
|
||||
addCustomListener(eventName: string, handler: (ev: CustomEvent) => void) {
|
||||
this.addEventListener(eventName, (ev: Event) => {
|
||||
if (!isCustomEvent(ev)) {
|
||||
console.error(
|
||||
`Received a standard event for custom event ${eventName}; event will not be handled.`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
handler(ev);
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export const isSafari = () =>
|
||||
navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome");
|
||||
|
||||
export default isSafari;
|
||||
|
|
@ -53,7 +53,9 @@
|
|||
"rules": {
|
||||
"no-unknown-tag-name": "off",
|
||||
"no-missing-import": "off",
|
||||
"no-incompatible-type-binding": "warn"
|
||||
"no-incompatible-type-binding": "off",
|
||||
"no-unknown-property": "off",
|
||||
"no-unknown-attribute": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
files: ["dist/**/*.spec.js"],
|
||||
nodeResolve: {
|
||||
exportConditions: ["browser", "production"],
|
||||
},
|
||||
};
|
||||
Reference in New Issue