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

web/src/admin/blueprints/BlueprintForm.ts

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

web/src/admin/policies/PolicyBindingForm.ts

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

web/src/admin/providers/proxy/ProxyProviderForm.ts

@@ -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")}
@@ -125,6 +115,21 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
 </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 {
         switch (this.mode) {
             case ProxyMode.Proxy:
@@ -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">

web/src/components/ak-toggle-group.ts

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

web/src/components/stories/ak-toggle-group.stories.ts

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