web/admin: migrate property mapping test to web

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

web/src/pages/property-mappings/PropertyMappingListPage.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 "./PropertyMappingTestForm";
 import { TableColumn } from "../../elements/table/Table";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
@@ -64,12 +66,19 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.propertyMappings(`${item.pk}/test/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+            <ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
+                <span slot="submit">
                     ${gettext("Test")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
+                </span>
+                <span slot="header">
+                    ${gettext("Test Property Mapping")}
+                </span>
+                <ak-property-mapping-test-form slot="form" .mapping=${item}>
+                </ak-property-mapping-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("Property Mapping")}

web/src/pages/property-mappings/PropertyMappingTestForm.ts

@@ -0,0 +1,74 @@
+import { CoreApi, PropertyMapping, PropertymappingsApi, PropertyMappingTestResult } 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-property-mapping-test-form")
+export class PolicyTestForm extends Form<PolicyTest> {
+
+    @property({attribute: false})
+    mapping?: PropertyMapping;
+
+    @property({ attribute: false})
+    result?: PropertyMappingTestResult;
+
+    getSuccessMessage(): string {
+        return gettext("Successfully sent test-request.");
+    }
+
+    send = (data: PolicyTest): Promise<PropertyMappingTestResult> => {
+        return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllTest({
+            pmUuid: this.mapping?.pk || "",
+            data: data
+        }).then(result => this.result = result);
+    };
+
+    renderResult(): TemplateResult {
+        return html`<ak-form-element-horizontal
+                label=${gettext("Result")}>
+            ${this.result?.successful ?
+                html`<ak-codemirror mode="javascript" ?readOnly=${true} value="${this.result?.result}">
+                </ak-codemirror>`:
+                html`
+                    <div class="pf-c-form__group-label">
+                        <div class="c-form__horizontal-group">
+                            <span class="pf-c-form__label-text">${this.result?.result}</span>
+                        </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>`;
+    }
+
+}