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

Merge branch 'ak-toggle-group' into application-wizard-2 

* ak-toggle-group:
  Bugs found by CI/CD.
  web: adding a storybook for the ak-toggle-group component
  web: minor code formatting issue.
  web: Replace ad-hoc toggle control with ak-toggle-group
This commit is contained in:
Ken Sternberg 2023-08-07 09:54:20 -07:00
parent 53828cda70 ee6504f123
commit 564ce4fc0c
5 changed files with 112 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/admin/blueprints/BlueprintForm.ts
View File

@ -9,12 +9,11 @@ import "@goauthentik/elements/forms/SearchSelect";
import YAML from "yaml";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css";
import { BlueprintFile, BlueprintInstance, ManagedApi } from "@goauthentik/api";
@ -51,15 +50,7 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
}
static get styles(): CSSResult[] {
return super.styles.concat(
PFToggleGroup,
PFContent,
css`
.pf-c-toggle-group {
justify-content: center;
}
`,
);
return [...super.styles, PFContent];
}
async send(data: BlueprintInstance): Promise<BlueprintInstance> {

13
web/src/admin/policies/PolicyBindingForm.ts
View File

@ -5,12 +5,11 @@ import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/SearchSelect";
import { msg } from "@lit/localize";
import { CSSResult, css } from "lit";
import { CSSResult } from "lit";
import { TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css";
import {
CoreApi,
@ -70,15 +69,7 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
}
static get styles(): CSSResult[] {
return super.styles.concat(
PFToggleGroup,
PFContent,
css`
.pf-c-toggle-group {
justify-content: center;
}
`,
);
return [...super.styles, PFContent];
}
send(data: PolicyBinding): Promise<unknown> {

37
web/src/admin/providers/proxy/ProxyProviderForm.ts
View File

@ -9,13 +9,12 @@ import "@goauthentik/elements/forms/SearchSelect";
import "@goauthentik/elements/utils/TimeDeltaHelp";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFList from "@patternfly/patternfly/components/List/list.css";
import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css";
import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";
import {
@ -35,17 +34,7 @@ import {
@customElement("ak-provider-proxy-form")
export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
static get styles(): CSSResult[] {
return super.styles.concat(
PFToggleGroup,
PFContent,
PFList,
PFSpacing,
css`
.pf-c-toggle-group {
justify-content: center;
}
`,
);
return [...super.styles, PFContent, PFList, PFSpacing];
}
async loadInstance(pk: number): Promise<ProxyProvider> {
@ -114,6 +103,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
>
</ak-text-input>
<<<<<<< HEAD
<ak-text-input
name="basicAuthPasswordAttribute"
label=${msg("HTTP-Basic Password Key")}
@ -122,7 +112,22 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
"User/Group Attribute used for the password part of the HTTP-Basic Header.",
)}
>
</ak-text-input>`;
</ak-text-input>`;
}
renderModeSelector(): TemplateResult {
const setMode = (ev: CustomEvent<{ value: ProxyMode }>) => {
this.mode = ev.detail.value;
};
// prettier-ignore
return html`
<ak-toggle-group value=${this.mode} @ak-toggle=${setMode}>
<option value=${ProxyMode.Proxy}>${msg("Proxy")}</option>
<option value=${ProxyMode.ForwardSingle}>${msg("Forward auth (single application)")}</option>
<option value=${ProxyMode.ForwardDomain}>${msg("Forward auth (domain level)")}</option>
</ak-toggle-group>
`;
}
renderSettings(): TemplateResult {
@ -303,6 +308,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
</ak-form-element-horizontal>
<div class="pf-c-card pf-m-selectable pf-m-selected">
<<<<<<< HEAD
<div class="pf-c-card__body">
<ak-toggle-group
value=${this.mode}
@ -319,6 +325,9 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
</option>
</ak-toggle-group>
</div>
=======
<div class="pf-c-card__body">${this.renderModeSelector()}</div>
>>>>>>> ak-toggle-group
<div class="pf-c-card__footer">${this.renderSettings()}</div>
</div>
<ak-form-element-horizontal label=${msg("Token validity")} name="accessTokenValidity">

18
web/src/components/ak-toggle-group.ts
View File

@ -9,6 +9,19 @@ import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-
type Pair = [string, string];
/**
* Toggle Group
*
* An implementation of the Patternfly Toggle Group as a LitElement
*
* @element ak-toggle-group
*
* @fires ak-toggle - Fired when someone clicks on a toggle option. Carries the value of the option.
*/
// MYNIS:
// A 'name' property so that the event carries *which* toggle group emitted the event.
@customElement("ak-toggle-group")
export class AkToggleGroup extends CustomEmitterElement(AKElement) {
static get styles() {
@ -22,6 +35,11 @@ export class AkToggleGroup extends CustomEmitterElement(AKElement) {
];
}
/*
* The value (causes highlighting, value is returned)
*
* @attr
*/
@property({ type: String, reflect: true })
value = "";

67
web/src/components/stories/ak-toggle-group.stories.ts Normal file
View File

@ -0,0 +1,67 @@
import "@goauthentik/elements/messages/MessageContainer";
import { Meta } from "@storybook/web-components";
import { TemplateResult, html } from "lit";
import "../ak-toggle-group";
import AkToggleGroup from "../ak-toggle-group";
const metadata: Meta<AkToggleGroup> = {
title: "Components / Toggle Group",
component: "ak-toggle-group",
parameters: {
docs: {
description: {
component: "A stylized toggle control",
},
},
},
};
export default metadata;
const LIGHT = "pf-t-light";
function injectTheme() {
setTimeout(() => {
if (!document.body.classList.contains(LIGHT)) {
document.body.classList.add(LIGHT);
}
});
}
const container = (testItem: TemplateResult) => {
injectTheme();
return html` <div style="background: #fff; padding: 2em">
<style>
li {
display: block;
}
p {
margin-top: 1em;
}
</style>
${testItem}
<ul id="toggle-message-pad" style="margin-top: 1em"></ul>
</div>`;
};
const testOptions = [
["funky", "Option One: The Funky One"],
["invalid", "Option Two: The Invalid One"],
["weird", "Option Three: The Weird One"],
];
export const ToggleGroup = () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const displayChange = (ev: any) => {
document.getElementById(
"toggle-message-pad",
)!.innerText = `Value selected: ${ev.detail.value}`;
};
return container(
html`<ak-toggle-group @ak-toggle=${displayChange}>
${testOptions.map(([key, label]) => html`<option value="${key}">${label}</option>`)}
</ak-toggle-group>`,
);
};