99f8802122
After examining how people like Adobe and Salesforce do things, I have updated the storybook configuration to provide run-time configuration of light/dark mode (although right now nothing happens), inject the correct styling into the page, and update the preview handling so that we can see the components better. We'll see how this pans out. I have provided stories for the AggregateCard, AggregatePromiseCard, and a new QuickActionsCard. I also fixed a bug in AggregatePromiseCard where it would fail to report a fetch error. It will only report that "the operation falied," but it will give the full error into the console. **As an experiment**, I have changed the interpreter for `lint:precommit` and `build:watch` to use [Bun](https://bun.sh/) instead of NodeJS. We have observed significant speed-ups and much better memory management with Bun for these two operations. Those are both developer-facing operations, the behavior of the system undur current CI/CD should not change. And finally, I've switched the QuickActionsCard view in Admin-Overview to use the new component. Looks the same. Reads *way* easier. :-)
74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import { AKElement } from "@goauthentik/elements/Base";
|
|
import "@goauthentik/elements/cards/AggregateCard.js";
|
|
|
|
import { msg } from "@lit/localize";
|
|
import { html } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
import { map } from "lit/directives/map.js";
|
|
|
|
import PFList from "@patternfly/patternfly/components/List/list.css";
|
|
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
|
|
|
export type QuickAction = [label: string, url: string, isExternal?: boolean];
|
|
|
|
/**
|
|
* class QuickActionsCard
|
|
* element ak-quick-actions-card
|
|
*
|
|
* Specialized card for navigation.
|
|
*/
|
|
|
|
export interface IQuickActionsCard {
|
|
title: string;
|
|
actions: QuickAction[];
|
|
}
|
|
|
|
@customElement("ak-quick-actions-card")
|
|
export class QuickActionsCard extends AKElement implements IQuickActionsCard {
|
|
static get styles() {
|
|
return [PFBase, PFList];
|
|
}
|
|
|
|
/**
|
|
* Card title
|
|
*
|
|
* @attr
|
|
*/
|
|
@property()
|
|
title = msg("Quick actions");
|
|
|
|
/**
|
|
* Card contents. An array of [label, url, isExternal]. External links will
|
|
* be rendered with an external link icon and will always open in a new tab.
|
|
*
|
|
* @attr
|
|
*/
|
|
@property({ type: Array })
|
|
actions: QuickAction[] = [];
|
|
|
|
render() {
|
|
const renderItem = ([label, url, external]: QuickAction) =>
|
|
html` <li>
|
|
<a class="pf-u-mb-xl" href=${url} ${external ? 'target="_blank"' : ""}>
|
|
${external
|
|
? html`${label} <i
|
|
class="fas fa-external-link-alt ak-external-link"
|
|
></i>`
|
|
: label}
|
|
</a>
|
|
</li>`;
|
|
|
|
return html` <ak-aggregate-card icon="fa fa-share" header=${this.title} left-justified>
|
|
<ul class="pf-c-list">
|
|
${map(this.actions, renderItem)}
|
|
</ul>
|
|
</ak-aggregate-card>`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"ak-quick-actions-card": QuickActionsCard;
|
|
}
|
|
}
|