web/admin: port policy test form

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

authentik/core/api/propertymappings.py

@@ -7,7 +7,7 @@ from guardian.shortcuts import get_objects_for_user
 from rest_framework import mixins
 from rest_framework.decorators import action
 from rest_framework.exceptions import PermissionDenied
-from rest_framework.fields import CharField
+from rest_framework.fields import BooleanField, CharField
 from rest_framework.request import Request
 from rest_framework.response import Response
 from rest_framework.serializers import ModelSerializer, SerializerMethodField
@@ -29,6 +29,7 @@ class PropertyMappingTestResultSerializer(PassiveSerializer):
     """Result of a Property-mapping test"""
 
     result = CharField(read_only=True)
+    successful = BooleanField(read_only=True)
 
 
 class PropertyMappingSerializer(ModelSerializer, MetaNameSerializer):
@@ -115,7 +116,9 @@ class PropertyMappingViewSet(
         if not users.exists():
             raise PermissionDenied()
 
-        response_data = {}
+        response_data = {
+            "successful": True
+        }
         try:
             result = mapping.evaluate(
                 users.first(),
@@ -125,5 +128,6 @@ class PropertyMappingViewSet(
             response_data["result"] = dumps(result)
         except Exception as exc:  # pylint: disable=broad-except
             response_data["result"] = str(exc)
+            response_data["successful"] = False
         response = PropertyMappingTestResultSerializer(response_data)
         return Response(response.data)

swagger.yaml

@@ -16888,6 +16888,10 @@ definitions:
         type: string
         readOnly: true
         minLength: 1
+      successful:
+        title: Successful
+        type: boolean
+        readOnly: true
   LDAPPropertyMapping:
     required:
       - name

web/src/elements/forms/ModalForm.ts

@@ -1,5 +1,5 @@
 import { gettext } from "django";
-import { customElement, html, TemplateResult } from "lit-element";
+import { customElement, html, property, TemplateResult } from "lit-element";
 import { EVENT_REFRESH } from "../../constants";
 import { ModalButton } from "../buttons/ModalButton";
 import { Form } from "./Form";
@@ -7,6 +7,9 @@ import { Form } from "./Form";
 @customElement("ak-forms-modal")
 export class ModalForm extends ModalButton {
 
+    @property({ type: Boolean })
+    closeAfterSuccessfulSubmit = true;
+
     confirm(): void {
         this.querySelectorAll<Form<unknown>>("[slot=form]").forEach(form => {
             const formPromise = form.submit(new Event("submit"));
@@ -14,8 +17,10 @@ export class ModalForm extends ModalButton {
                 return;
             }
             formPromise.then(() => {
+                if (this.closeAfterSuccessfulSubmit) {
                     this.open = false;
                     form.reset();
+                }
                 this.dispatchEvent(
                     new CustomEvent(EVENT_REFRESH, {
                         bubbles: true,

web/src/pages/outposts/OutpostListPage.ts

@@ -10,6 +10,7 @@ import "./OutpostForm";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/TokenCopyButton";
 import "../../elements/forms/DeleteForm";
+import "../../elements/forms/ModalForm";
 import { PAGE_SIZE } from "../../constants";
 import { Outpost, OutpostsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";

web/src/pages/policies/PolicyListPage.ts

@@ -7,6 +7,8 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteForm";
+import "../../elements/forms/ModalForm";
+import "./PolicyTestForm";
 import { TableColumn } from "../../elements/table/Table";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
@@ -69,12 +71,19 @@ export class PolicyListPage extends TablePage<Policy> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.policies(`${item.pk}/test/`)}">
+            <ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
-                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+                <span slot="submit">
                     ${gettext("Test")}
-                </ak-spinner-button>
+                </span>
-                <div slot="modal"></div>
+                <span slot="header">
-            </ak-modal-button>
+                    ${gettext("Test Policy")}
+                </span>
+                <ak-policy-test-form slot="form" .policy=${item}>
+                </ak-policy-test-form>
+                <button slot="trigger" class="pf-c-button pf-m-secondary">
+                    ${gettext("Test")}
+                </button>
+            </ak-forms-modal>
             <ak-forms-delete
                 .obj=${item}
                 objectLabel=${gettext("Policy")}

web/src/pages/policies/PolicyTestForm.ts

@@ -0,0 +1,85 @@
+import { CoreApi, PoliciesApi, Policy, PolicyTestResult } from "authentik-api";
+import { gettext } from "django";
+import { customElement, property } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { Form } from "../../elements/forms/Form";
+import { until } from "lit-html/directives/until";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "../../elements/forms/HorizontalFormElement";
+import "../../elements/CodeMirror";
+import { PolicyTest } from "authentik-api/src";
+
+@customElement("ak-policy-test-form")
+export class PolicyTestForm extends Form<PolicyTest> {
+
+    @property({attribute: false})
+    policy?: Policy;
+
+    @property({ attribute: false})
+    result?: PolicyTestResult;
+
+    getSuccessMessage(): string {
+        return gettext("Successfully sent test-request.");
+    }
+
+    send = (data: PolicyTest): Promise<PolicyTestResult> => {
+        return new PoliciesApi(DEFAULT_CONFIG).policiesAllTest({
+            policyUuid: this.policy?.pk || "",
+            data: data
+        }).then(result => this.result = result);
+    };
+
+    renderResult(): TemplateResult {
+        return html`
+            <ak-form-element-horizontal
+                label=${gettext("Passing")}>
+                <div class="pf-c-form__group-label">
+                    <div class="c-form__horizontal-group">
+                        <span class="pf-c-form__label-text">${this.result?.passing ? gettext("Yes") : gettext("No")}</span>
+                    </div>
+                </div>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Messages")}>
+                <div class="pf-c-form__group-label">
+                    <div class="c-form__horizontal-group">
+                        <ul>
+                            ${(this.result?.messages || []).length > 0 ?
+                            this.result?.messages?.map(m => {
+                                return html`<li><span class="pf-c-form__label-text">${m}</span></li>`;
+                            }) :
+                            html`<li><span class="pf-c-form__label-text">-</span></li>`}
+                        </ul>
+                    </div>
+                </div>
+            </ak-form-element-horizontal>`;
+    }
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal
+                label=${gettext("User")}
+                ?required=${true}
+                name="user">
+                <select class="pf-c-form-control">
+                    ${until(new CoreApi(DEFAULT_CONFIG).coreUsersList({
+                        ordering: "username",
+                    }).then(users => {
+                        return users.results.map(user => {
+                            return html`<option value=${ifDefined(user.pk)}>${user.username}</option>`;
+                        });
+                    }), html``)}
+                </select>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Context")}
+                name="context">
+                <ak-codemirror mode="yaml">
+                </ak-codemirror>
+            </ak-form-element-horizontal>
+            ${this.result ? this.renderResult(): html``}
+        </form>`;
+    }
+
+}