web: last-minute pre-commit cleanup.
This commit is contained in:
parent
73bba0498f
commit
cdeff2c86f
|
@ -110,7 +110,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
|||
|
||||
async load(): Promise<void> {
|
||||
this.defaultConfig = await new OutpostsApi(
|
||||
DEFAULT_CONFIG
|
||||
DEFAULT_CONFIG,
|
||||
).outpostsInstancesDefaultSettingsRetrieve();
|
||||
this.providers = providerProvider(this.type);
|
||||
}
|
||||
|
@ -188,7 +188,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
|||
args.search = query;
|
||||
}
|
||||
const items = await new OutpostsApi(
|
||||
DEFAULT_CONFIG
|
||||
DEFAULT_CONFIG,
|
||||
).outpostsServiceConnectionsAllList(args);
|
||||
return items.results;
|
||||
}}
|
||||
|
@ -213,7 +213,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
|||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${msg(
|
||||
"Selecting an integration enables the management of the outpost by authentik."
|
||||
"Selecting an integration enables the management of the outpost by authentik.",
|
||||
)}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
|
@ -239,7 +239,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
|||
<ak-codemirror
|
||||
mode=${CodeMirrorMode.YAML}
|
||||
value="${YAML.stringify(
|
||||
this.instance ? this.instance.config : this.defaultConfig?.config
|
||||
this.instance ? this.instance.config : this.defaultConfig?.config,
|
||||
)}"
|
||||
></ak-codemirror>
|
||||
<p class="pf-c-form__helper-text">
|
||||
|
|
|
@ -5,7 +5,7 @@ import {
|
|||
} from "@goauthentik/elements/utils/eventEmitter";
|
||||
|
||||
import { msg, str } from "@lit/localize";
|
||||
import { PropertyValues, TemplateResult, css, html, nothing } from "lit";
|
||||
import { PropertyValues, TemplateResult, html, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { createRef, ref } from "lit/directives/ref.js";
|
||||
import type { Ref } from "lit/directives/ref.js";
|
||||
|
@ -36,12 +36,7 @@ type PairValue = string | TemplateResult;
|
|||
type Pair = [string, PairValue];
|
||||
const alphaSort = ([_k1, v1]: Pair, [_k2, v2]: Pair) => (v1 < v2 ? -1 : v1 > v2 ? 1 : 0);
|
||||
|
||||
const styles = [
|
||||
PFBase,
|
||||
PFButton,
|
||||
globalVariables,
|
||||
mainStyles,
|
||||
];
|
||||
const styles = [PFBase, PFButton, globalVariables, mainStyles];
|
||||
|
||||
/**
|
||||
* @element ak-dual-select
|
||||
|
@ -153,7 +148,7 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
|
|||
|
||||
default:
|
||||
throw new Error(
|
||||
`AkDualSelect.handleMove received unknown event type: ${eventName}`
|
||||
`AkDualSelect.handleMove received unknown event type: ${eventName}`,
|
||||
);
|
||||
}
|
||||
this.dispatchCustomEvent("ak-dual-select-change", { value: this.value });
|
||||
|
|
|
@ -1,26 +1,20 @@
|
|||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
|
||||
|
||||
import { PropertyValues, css, html, nothing } from "lit";
|
||||
import { html, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { classMap } from "lit/directives/class-map.js";
|
||||
import { map } from "lit/directives/map.js";
|
||||
|
||||
import { availablePaneStyles, listStyles } from "./styles.css";
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFDualListSelector from "@patternfly/patternfly/components/DualListSelector/dual-list-selector.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
|
||||
import { EVENT_ADD_ONE } from "../constants";
|
||||
import type { DualSelectPair } from "../types";
|
||||
import { availablePaneStyles, listStyles } from "./styles.css";
|
||||
|
||||
const styles = [
|
||||
PFBase,
|
||||
PFButton,
|
||||
PFDualListSelector,
|
||||
listStyles,
|
||||
availablePaneStyles
|
||||
];
|
||||
const styles = [PFBase, PFButton, PFDualListSelector, listStyles, availablePaneStyles];
|
||||
|
||||
const hostAttributes = [
|
||||
["aria-labelledby", "dual-list-selector-available-pane-status"],
|
||||
|
@ -39,7 +33,7 @@ const hostAttributes = [
|
|||
* @fires ak-dual-select-available-move-changed - When the list of "to move" entries changed.
|
||||
* Includes the current * `toMove` content.
|
||||
*
|
||||
* @fires ak-dual-select-add-one - Doubleclick with the element clicked on.
|
||||
* @fires ak-dual-select-add-one - Double-click with the element clicked on.
|
||||
*
|
||||
* It is not expected that the `ak-dual-select-available-move-changed` event will be used; instead,
|
||||
* the attribute will be read by the parent when a control is clicked.
|
||||
|
@ -105,7 +99,7 @@ export class AkDualSelectAvailablePane extends CustomEmitterElement(AKElement) {
|
|||
}
|
||||
this.dispatchCustomEvent(
|
||||
"ak-dual-select-available-move-changed",
|
||||
Array.from(this.toMove.values()).sort()
|
||||
Array.from(this.toMove.values()).sort(),
|
||||
);
|
||||
this.dispatchCustomEvent("ak-dual-select-move");
|
||||
// Necessary because updating a map won't trigger a state change
|
||||
|
|
|
@ -64,7 +64,7 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
|
|||
removeActive = false;
|
||||
|
||||
/* Set to true if *all* the currently visible elements can be moved
|
||||
* into the selected list (essentially, if any visible elemnets are
|
||||
* into the selected list (essentially, if any visible elements are
|
||||
* not currently selected
|
||||
*/
|
||||
@property({ attribute: "add-all-active", type: Boolean })
|
||||
|
@ -125,7 +125,7 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
|
|||
msg("Add"),
|
||||
EVENT_ADD_SELECTED,
|
||||
this.addActive,
|
||||
"fa-angle-right"
|
||||
"fa-angle-right",
|
||||
)}
|
||||
${this.selectAll
|
||||
? html`
|
||||
|
@ -133,13 +133,13 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
|
|||
msg("Add All Available"),
|
||||
EVENT_ADD_ALL,
|
||||
this.addAllActive,
|
||||
"fa-angle-double-right"
|
||||
"fa-angle-double-right",
|
||||
)}
|
||||
${this.renderButton(
|
||||
msg("Remove All Available"),
|
||||
EVENT_REMOVE_ALL,
|
||||
this.removeAllActive,
|
||||
"fa-angle-double-left"
|
||||
"fa-angle-double-left",
|
||||
)}
|
||||
`
|
||||
: nothing}
|
||||
|
@ -147,14 +147,14 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
|
|||
msg("Remove"),
|
||||
EVENT_REMOVE_SELECTED,
|
||||
this.removeActive,
|
||||
"fa-angle-left"
|
||||
"fa-angle-left",
|
||||
)}
|
||||
${this.deleteAll
|
||||
? html`${this.renderButton(
|
||||
msg("Remove All"),
|
||||
EVENT_DELETE_ALL,
|
||||
this.enableDeleteAll,
|
||||
"fa-times"
|
||||
"fa-times",
|
||||
)}`
|
||||
: nothing}
|
||||
</div>
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
|
||||
|
||||
import { css, html } from "lit";
|
||||
import { html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { classMap } from "lit/directives/class-map.js";
|
||||
import { map } from "lit/directives/map.js";
|
||||
|
||||
import { listStyles, selectedPaneStyles } from "./styles.css";
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFDualListSelector from "@patternfly/patternfly/components/DualListSelector/dual-list-selector.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
|
||||
import { EVENT_REMOVE_ONE } from "../constants";
|
||||
import type { DualSelectPair } from "../types";
|
||||
import { listStyles, selectedPaneStyles } from "./styles.css";
|
||||
|
||||
const styles = [PFBase, PFButton, PFDualListSelector, listStyles, selectedPaneStyles];
|
||||
|
||||
|
@ -31,7 +31,7 @@ const hostAttributes = [
|
|||
* @fires ak-dual-select-selected-move-changed - When the list of "to move" entries changed.
|
||||
* Includes the current * `toMove` content.
|
||||
*
|
||||
* @fires ak-dual-select-remove-one - Doubleclick with the element clicked on.
|
||||
* @fires ak-dual-select-remove-one - Double-click with the element clicked on.
|
||||
*
|
||||
* It is not expected that the `ak-dual-select-selected-move-changed` will be used; instead, the
|
||||
* attribute will be read by the parent when a control is clicked.
|
||||
|
@ -79,7 +79,7 @@ export class AkDualSelectSelectedPane extends CustomEmitterElement(AKElement) {
|
|||
}
|
||||
this.dispatchCustomEvent(
|
||||
"ak-dual-select-selected-move-changed",
|
||||
Array.from(this.toMove.values()).sort()
|
||||
Array.from(this.toMove.values()).sort(),
|
||||
);
|
||||
this.dispatchCustomEvent("ak-dual-select-move");
|
||||
// Necessary because updating a map won't trigger a state change
|
||||
|
|
|
@ -54,7 +54,7 @@ export class AkPagination extends CustomEmitterElement(AKElement) {
|
|||
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
|
||||
<span class="pf-c-options-menu__toggle-text">
|
||||
${msg(
|
||||
str`${this.pages?.startIndex} - ${this.pages?.endIndex} of ${this.pages?.count}`
|
||||
str`${this.pages?.startIndex} - ${this.pages?.endIndex} of ${this.pages?.count}`,
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
@ -151,10 +151,8 @@ export const listStyles = css`
|
|||
user-select: none;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
|
||||
export const selectedPaneStyles = css`
|
||||
input[type="checkbox"][readonly] {
|
||||
pointer-events: none;
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import { AkDualSelect } from "./ak-dual-select";
|
||||
import "./ak-dual-select";
|
||||
|
||||
import { AkDualSelectProvider } from "./ak-dual-select-provider";
|
||||
import "./ak-dual-select-provider";
|
||||
|
||||
export { AkDualSelect, AkDualSelectProvider }
|
||||
export { AkDualSelect, AkDualSelectProvider };
|
||||
export default AkDualSelect;
|
||||
|
|
|
@ -5,8 +5,8 @@ import { slug } from "github-slugger";
|
|||
import { TemplateResult, html } from "lit";
|
||||
|
||||
import "../components/ak-dual-select-available-pane";
|
||||
import "./sb-host-provider";
|
||||
import { AkDualSelectAvailablePane } from "../components/ak-dual-select-available-pane";
|
||||
import "./sb-host-provider";
|
||||
|
||||
const metadata: Meta<AkDualSelectAvailablePane> = {
|
||||
title: "Elements / Dual Select / Available Items Pane",
|
||||
|
@ -47,9 +47,7 @@ const container = (testItem: TemplateResult) =>
|
|||
}
|
||||
</style>
|
||||
<ak-message-container></ak-message-container>
|
||||
<sb-dual-select-host-provider>
|
||||
${testItem}
|
||||
</sb-dual-select-host-provider>
|
||||
<sb-dual-select-host-provider> ${testItem} </sb-dual-select-host-provider>
|
||||
<p>Messages received from the button:</p>
|
||||
<ul id="action-button-message-pad" style="margin-top: 1em"></ul>
|
||||
</div>`;
|
||||
|
@ -112,6 +110,6 @@ export const SomeSelected: Story = {
|
|||
html` <ak-dual-select-available-pane
|
||||
.options=${goodForYouPairs}
|
||||
.selected=${someSelected}
|
||||
></ak-dual-select-available-pane>`,
|
||||
></ak-dual-select-available-pane>`,
|
||||
),
|
||||
};
|
||||
|
|
|
@ -1,16 +1,15 @@
|
|||
import "@goauthentik/elements/messages/MessageContainer";
|
||||
import { LitElement, TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
|
||||
import { Meta, StoryObj } from "@storybook/web-components";
|
||||
import { slug } from "github-slugger";
|
||||
|
||||
import { LitElement, TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
|
||||
import type { DualSelectPair } from "../types";
|
||||
import { Pagination } from "@goauthentik/api";
|
||||
|
||||
import "../ak-dual-select";
|
||||
import { AkDualSelect } from "../ak-dual-select";
|
||||
import type { DualSelectPair } from "../types";
|
||||
|
||||
const goodForYouRaw = `
|
||||
Apple, Arrowroot, Artichoke, Arugula, Asparagus, Avocado, Bamboo, Banana, Basil, Beet Root,
|
||||
|
@ -25,7 +24,7 @@ Rosemary, Rutabaga, Shallot, Soybeans, Spinach, Squash, Strawberries, Sweet pota
|
|||
Thyme, Tomatillo, Tomato, Turnip, Waterchestnut, Watercress, Watermelon, Yams
|
||||
`;
|
||||
|
||||
const keyToPair = (key: string): DualSelectPair => ([slug(key), key]);
|
||||
const keyToPair = (key: string): DualSelectPair => [slug(key), key];
|
||||
const goodForYou: DualSelectPair[] = goodForYouRaw
|
||||
.replace("\n", " ")
|
||||
.split(",")
|
||||
|
@ -61,8 +60,8 @@ const metadata: Meta<AkDualSelect> = {
|
|||
export default metadata;
|
||||
|
||||
@customElement("ak-sb-fruity")
|
||||
// @ts-ignore
|
||||
class AkSbFruity extends LitElement {
|
||||
|
||||
@property({ type: Array })
|
||||
options: DualSelectPair[] = goodForYou;
|
||||
|
||||
|
@ -81,18 +80,19 @@ class AkSbFruity extends LitElement {
|
|||
endIndex: this.options.length > this.pageLength ? this.pageLength : this.options.length,
|
||||
next: this.options.length > this.pageLength ? 2 : 0,
|
||||
previous: 0,
|
||||
totalPages: Math.ceil(this.options.length / this.pageLength)
|
||||
totalPages: Math.ceil(this.options.length / this.pageLength),
|
||||
};
|
||||
this.onNavigation = this.onNavigation.bind(this);
|
||||
this.addEventListener('ak-pagination-nav-to',
|
||||
this.onNavigation);
|
||||
this.addEventListener("ak-pagination-nav-to", this.onNavigation);
|
||||
}
|
||||
|
||||
onNavigation(evt: Event) {
|
||||
const current: number = (evt as CustomEvent).detail;
|
||||
const index = current - 1;
|
||||
if ((index * this.pageLength) > this.options.length) {
|
||||
console.warn(`Attempted to index from ${index} for options length ${this.options.length}`);
|
||||
if (index * this.pageLength > this.options.length) {
|
||||
console.warn(
|
||||
`Attempted to index from ${index} for options length ${this.options.length}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
const endCount = this.pageLength * (index + 1);
|
||||
|
@ -103,22 +103,26 @@ class AkSbFruity extends LitElement {
|
|||
current,
|
||||
startIndex: this.pageLength * index + 1,
|
||||
endIndex,
|
||||
next: ((index + 1) * this.pageLength > this.options.length) ? 0 : current + 1,
|
||||
previous: index
|
||||
next: (index + 1) * this.pageLength > this.options.length ? 0 : current + 1,
|
||||
previous: index,
|
||||
};
|
||||
}
|
||||
|
||||
get pageoptions() {
|
||||
return this.options.slice(this.pageLength * (this.page.current - 1),
|
||||
this.pageLength * (this.page.current));
|
||||
return this.options.slice(
|
||||
this.pageLength * (this.page.current - 1),
|
||||
this.pageLength * this.page.current,
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`<ak-dual-select .options=${this.pageoptions} .pages=${this.page}></ak-dual-select>`;
|
||||
return html`<ak-dual-select
|
||||
.options=${this.pageoptions}
|
||||
.pages=${this.page}
|
||||
></ak-dual-select>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const container = (testItem: TemplateResult) =>
|
||||
html` <div style="background: #fff; padding: 2em">
|
||||
<style>
|
||||
|
@ -139,6 +143,7 @@ const container = (testItem: TemplateResult) =>
|
|||
const handleMoveChanged = (result: any) => {
|
||||
const target = document.querySelector("#action-button-message-pad");
|
||||
target!.innerHTML = "";
|
||||
// @ts-ignore
|
||||
target!.append(result.detail.value.map(([k, _]) => k).join(", "));
|
||||
};
|
||||
|
||||
|
|
|
@ -5,8 +5,8 @@ import { slug } from "github-slugger";
|
|||
import { TemplateResult, html } from "lit";
|
||||
|
||||
import "../components/ak-dual-select-selected-pane";
|
||||
import "./sb-host-provider";
|
||||
import { AkDualSelectSelectedPane } from "../components/ak-dual-select-selected-pane";
|
||||
import "./sb-host-provider";
|
||||
|
||||
const metadata: Meta<AkDualSelectSelectedPane> = {
|
||||
title: "Elements / Dual Select / Selected Items Pane",
|
||||
|
@ -19,6 +19,7 @@ const metadata: Meta<AkDualSelectSelectedPane> = {
|
|||
},
|
||||
},
|
||||
argTypes: {
|
||||
// @ts-ignore
|
||||
options: {
|
||||
type: "string",
|
||||
description: "An array of [key, label] pairs of what to show",
|
||||
|
@ -42,10 +43,8 @@ const container = (testItem: TemplateResult) =>
|
|||
margin-top: 1em;
|
||||
}
|
||||
</style>
|
||||
<ak-message-container></ak-message-container>
|
||||
<sb-dual-select-host-provider>
|
||||
${testItem}
|
||||
</sb-dual-select-host-provider>
|
||||
<ak-message-container></ak-message-container>
|
||||
<sb-dual-select-host-provider> ${testItem} </sb-dual-select-host-provider>
|
||||
<p>Messages received from the button:</p>
|
||||
<ul id="action-button-message-pad" style="margin-top: 1em"></ul>
|
||||
</div>`;
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
import { html, LitElement } from "lit";
|
||||
import { globalVariables } from "../components/styles.css";
|
||||
import { LitElement, html } from "lit";
|
||||
import { customElement } from "lit/decorators.js";
|
||||
|
||||
import { globalVariables } from "../components/styles.css";
|
||||
|
||||
/**
|
||||
* @element sb-dual-select-host-provider
|
||||
*
|
||||
|
|
|
@ -12,6 +12,6 @@ export type BasePagination = Pick<
|
|||
export type DataProvision = {
|
||||
pagination: Pagination;
|
||||
options: DualSelectPair[];
|
||||
}
|
||||
};
|
||||
|
||||
export type DataProvider = (page: number) => Promise<DataProvision>;
|
||||
|
|
Reference in New Issue