events: allow setting a mapping for webhook transport to customise request payloads

closes #1383

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

web/src/pages/events/TransportForm.ts

@@ -1,4 +1,9 @@
-import { EventsApi, NotificationTransport, NotificationTransportModeEnum } from "@goauthentik/api";
+import {
+    EventsApi,
+    NotificationTransport,
+    NotificationTransportModeEnum,
+    PropertymappingsApi,
+} from "@goauthentik/api";
 import { t } from "@lingui/macro";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
@@ -7,6 +12,7 @@ import { ifDefined } from "lit-html/directives/if-defined";
 import "../../elements/forms/HorizontalFormElement";
 import { first } from "../../utils";
 import { ModelForm } from "../../elements/forms/ModelForm";
+import { until } from "lit-html/directives/until";
 
 @customElement("ak-event-transport-form")
 export class TransportForm extends ModelForm<NotificationTransport, string> {
@@ -112,6 +118,32 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
                     class="pf-c-form-control"
                 />
             </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                ?hidden=${!this.showWebhook}
+                label=${t`Webhook Mapping`}
+                name="webhookMapping"
+            >
+                <select class="pf-c-form-control">
+                    <option value="" ?selected=${this.instance?.webhookMapping === undefined}>
+                        ---------
+                    </option>
+                    ${until(
+                        new PropertymappingsApi(DEFAULT_CONFIG)
+                            .propertymappingsNotificationList({})
+                            .then((mappings) => {
+                                return mappings.results.map((mapping) => {
+                                    return html`<option
+                                        value=${ifDefined(mapping.pk)}
+                                        ?selected=${this.instance?.webhookMapping === mapping.pk}
+                                    >
+                                        ${mapping.name}
+                                    </option>`;
+                                });
+                            }),
+                        html`<option>${t`Loading...`}</option>`,
+                    )}
+                </select>
+            </ak-form-element-horizontal>
             <ak-form-element-horizontal name="sendOnce">
                 <div class="pf-c-check">
                     <input

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

@@ -12,6 +12,7 @@ import "./PropertyMappingTestForm";
 import "./PropertyMappingScopeForm";
 import "./PropertyMappingLDAPForm";
 import "./PropertyMappingSAMLForm";
+import "./PropertyMappingNotification";
 import { TableColumn } from "../../elements/table/Table";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";

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

@@ -0,0 +1,65 @@
+import { NotificationWebhookMapping, PropertymappingsApi } from "@goauthentik/api";
+import { t } from "@lingui/macro";
+import { customElement } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "../../elements/forms/HorizontalFormElement";
+import "../../elements/CodeMirror";
+import { ModelForm } from "../../elements/forms/ModelForm";
+
+@customElement("ak-property-mapping-notification-form")
+export class PropertyMappingNotification extends ModelForm<NotificationWebhookMapping, string> {
+    loadInstance(pk: string): Promise<NotificationWebhookMapping> {
+        return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsNotificationRetrieveRaw({
+            pmUuid: pk,
+        });
+    }
+
+    getSuccessMessage(): string {
+        if (this.instance) {
+            return t`Successfully updated mapping.`;
+        } else {
+            return t`Successfully created mapping.`;
+        }
+    }
+
+    send = (data: NotificationWebhookMapping): Promise<NotificationWebhookMapping> => {
+        if (this.instance) {
+            return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsNotificationUpdate({
+                pmUuid: this.instance.pk || "",
+                notificationWebhookMappingRequest: data,
+            });
+        } else {
+            return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsNotificationCreate({
+                notificationWebhookMappingRequest: data,
+            });
+        }
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
+                <input
+                    type="text"
+                    value="${ifDefined(this.instance?.name)}"
+                    class="pf-c-form-control"
+                    required
+                />
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${t`Expression`} ?required=${true} name="expression">
+                <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
+                </ak-codemirror>
+                <p class="pf-c-form__helper-text">
+                    ${t`Expression using Python.`}
+                    <a
+                        target="_blank"
+                        href="https://goauthentik.io/docs/property-mappings/expression/"
+                    >
+                        ${t`See documentation for a list of all variables.`}
+                    </a>
+                </p>
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+}