trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web: last-minute pre-commit cleanup.

Browse source
This commit is contained in:
Ken Sternberg 2024-01-02 16:01:07 -08:00
parent 73bba0498f
commit cdeff2c86f
14 changed files with 83 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/src/admin/outposts/OutpostForm.ts
View file

@ -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">

2
web/src/elements/ak-dual-select/ak-dual-select-provider.ts
View file

@ -26,7 +26,7 @@ import type { DataProvider, DualSelectPair } from "./types";
@customElement("ak-dual-select-provider")
export class AkDualSelectProvider extends CustomListenerElement(AKElement) {
// A function that takes a page and returns the DualSelectPair[] collection with which to update
// the "Available" pane.
// the "Available" pane.
@property({ type: Object })
provider!: DataProvider;

13
web/src/elements/ak-dual-select/ak-dual-select.ts
View file

@ -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,19 +36,14 @@ 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
*
* A master (but independent) component that shows two lists-- one of "available options" and one of
* "selected options". The Available Options panel supports pagination if it receives a valid and
* active pagination object (based on Django's pagination object) from the invoking component.
* active pagination object (based on Django's pagination object) from the invoking component.
*
* @fires ak-dual-select-change - A custom change event with the current `selected` list.
*/
@ -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 });

16
web/src/elements/ak-dual-select/components/ak-dual-select-available-pane.ts
View file

@ -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

12
web/src/elements/ak-dual-select/components/ak-dual-select-controls.ts
View file

@ -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>

8
web/src/elements/ak-dual-select/components/ak-dual-select-selected-pane.ts
View file

@ -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

2
web/src/elements/ak-dual-select/components/ak-pagination.ts
View file

@ -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>

44
web/src/elements/ak-dual-select/components/styles.css.ts
View file

@ -126,35 +126,33 @@ export const mainStyles = css`
`;
export const listStyles = css`
:host {
display: block;
overflow: hidden;
max-width: 100%;
}
:host {
display: block;
overflow: hidden;
max-width: 100%;
}
.pf-c-dual-list-selector__menu {
max-width: 100%;
height: 100%;
}
.pf-c-dual-list-selector__menu {
max-width: 100%;
height: 100%;
}
.pf-c-dual-list-selector__list {
max-width: 100%;
display: block;
}
.pf-c-dual-list-selector__list {
max-width: 100%;
display: block;
}
.pf-c-dual-list-selector__item {
padding: 0.25rem;
width: auto;
}
.pf-c-dual-list-selector__item-text {
user-select: none;
flex-grow: 0;
}
.pf-c-dual-list-selector__item {
padding: 0.25rem;
width: auto;
}
.pf-c-dual-list-selector__item-text {
user-select: none;
flex-grow: 0;
}
`;
export const selectedPaneStyles = css`
input[type="checkbox"][readonly] {
pointer-events: none;

3
web/src/elements/ak-dual-select/index.ts
View file

@ -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;

8
web/src/elements/ak-dual-select/stories/ak-dual-select-available-pane.stories.ts
View file

@ -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>`,
),
};

45
web/src/elements/ak-dual-select/stories/ak-dual-select-master.stories.ts
View file

@ -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,8 +24,8 @@ 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 goodForYou: DualSelectPair[] = goodForYouRaw
const keyToPair = (key: string): DualSelectPair => [slug(key), key];
const goodForYou: DualSelectPair[] = goodForYouRaw
.replace("\n", " ")
.split(",")
.map((a: string) => a.trim())
@ -61,11 +60,11 @@ const metadata: Meta<AkDualSelect> = {
export default metadata;
@customElement("ak-sb-fruity")
// @ts-ignore
class AkSbFruity extends LitElement {
@property({ type: Array })
options: DualSelectPair[] = goodForYou;
@property({ attribute: "page-length", type: Number })
pageLength = 20;
@ -81,44 +80,49 @@ 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);
const endIndex = Math.min(endCount, this.options.length);
this.page = {
...this.page,
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(", "));
};

9
web/src/elements/ak-dual-select/stories/ak-dual-select-selected-pane.stories.ts
View file

@ -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>`;

5
web/src/elements/ak-dual-select/stories/sb-host-provider.ts
View file

@ -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
*

2
web/src/elements/ak-dual-select/types.ts
View file

@ -12,6 +12,6 @@ export type BasePagination = Pick<
export type DataProvision = {
pagination: Pagination;
options: DualSelectPair[];
}
};
export type DataProvider = (page: number) => Promise<DataProvision>;