web/admin: migrate events notification rules to web

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

authentik/admin/urls.py

@@ -3,7 +3,6 @@ from django.urls import path
 
 from authentik.admin.views import (
     applications,
-    events_notifications_rules,
     flows,
     outposts,
     outposts_service_connections,
@@ -171,15 +170,4 @@ urlpatterns = [
         outposts_service_connections.OutpostServiceConnectionUpdateView.as_view(),
         name="outpost-service-connection-update",
     ),
-    # Event Notification Rules
-    path(
-        "events/rules/create/",
-        events_notifications_rules.NotificationRuleCreateView.as_view(),
-        name="notification-rule-create",
-    ),
-    path(
-        "events/rules/<uuid:pk>/update/",
-        events_notifications_rules.NotificationRuleUpdateView.as_view(),
-        name="notification-rule-update",
-    ),
 ]

authentik/admin/views/events_notifications_rules.py

@@ -1,47 +0,0 @@
-"""authentik NotificationRule administration"""
-from django.contrib.auth.mixins import LoginRequiredMixin
-from django.contrib.auth.mixins import (
-    PermissionRequiredMixin as DjangoPermissionRequiredMixin,
-)
-from django.contrib.messages.views import SuccessMessageMixin
-from django.utils.translation import gettext as _
-from django.views.generic import UpdateView
-from guardian.mixins import PermissionRequiredMixin
-
-from authentik.events.forms import NotificationRuleForm
-from authentik.events.models import NotificationRule
-from authentik.lib.views import CreateAssignPermView
-
-
-class NotificationRuleCreateView(
-    SuccessMessageMixin,
-    LoginRequiredMixin,
-    DjangoPermissionRequiredMixin,
-    CreateAssignPermView,
-):
-    """Create new NotificationRule"""
-
-    model = NotificationRule
-    form_class = NotificationRuleForm
-    permission_required = "authentik_events.add_NotificationRule"
-
-    success_url = "/"
-    template_name = "generic/create.html"
-    success_message = _("Successfully created Notification Rule")
-
-
-class NotificationRuleUpdateView(
-    SuccessMessageMixin,
-    LoginRequiredMixin,
-    PermissionRequiredMixin,
-    UpdateView,
-):
-    """Update application"""
-
-    model = NotificationRule
-    form_class = NotificationRuleForm
-    permission_required = "authentik_events.change_NotificationRule"
-
-    success_url = "/"
-    template_name = "generic/update.html"
-    success_message = _("Successfully updated Notification Rule")

authentik/events/forms.py

@@ -1,21 +0,0 @@
-"""authentik events NotificationTransport forms"""
-from django import forms
-
-from authentik.events.models import NotificationRule
-
-
-class NotificationRuleForm(forms.ModelForm):
-    """NotificationRule Form"""
-
-    class Meta:
-
-        model = NotificationRule
-        fields = [
-            "name",
-            "group",
-            "transports",
-            "severity",
-        ]
-        widgets = {
-            "name": forms.TextInput(),
-        }

web/src/interfaces/AdminInterface.ts

@@ -15,15 +15,6 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
     ).when((): Promise<boolean> => {
         return me().then(u => u.user.isSuperuser||false);
     }),
-    new SidebarItem("Events").children(
-        new SidebarItem("Logs", "/events/log").activeWhen(
-            `^/events/log/(?<id>${UUID_REGEX})$`
-        ),
-        new SidebarItem("Notification Rules", "/events/rules"),
-        new SidebarItem("Notification Transports", "/events/transports"),
-    ).when((): Promise<boolean> => {
-        return me().then(u => u.user.isSuperuser||false);
-    }),
     new SidebarItem("Resources").children(
         new SidebarItem("Applications", "/core/applications").activeWhen(
             `^/core/applications/(?<slug>${SLUG_REGEX})$`
@@ -39,6 +30,15 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
     ).when((): Promise<boolean> => {
         return me().then(u => u.user.isSuperuser||false);
     }),
+    new SidebarItem("Events").children(
+        new SidebarItem("Logs", "/events/log").activeWhen(
+            `^/events/log/(?<id>${UUID_REGEX})$`
+        ),
+        new SidebarItem("Notification Rules", "/events/rules"),
+        new SidebarItem("Notification Transports", "/events/transports"),
+    ).when((): Promise<boolean> => {
+        return me().then(u => u.user.isSuperuser || false);
+    }),
     new SidebarItem("Customisation").children(
         new SidebarItem("Policies", "/policy/policies"),
         new SidebarItem("Property Mappings", "/core/property-mappings"),

web/src/pages/events/RuleForm.ts

@@ -0,0 +1,100 @@
+import { CoreApi, EventsApi, NotificationRule, NotificationRuleSeverityEnum } 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 { ifDefined } from "lit-html/directives/if-defined";
+import "../../elements/forms/HorizontalFormElement";
+import { until } from "lit-html/directives/until";
+
+@customElement("ak-event-rule-form")
+export class RuleForm extends Form<NotificationRule> {
+
+    @property({attribute: false})
+    rule?: NotificationRule;
+
+    getSuccessMessage(): string {
+        if (this.rule) {
+            return gettext("Successfully updated rule.");
+        } else {
+            return gettext("Successfully created rule.");
+        }
+    }
+
+    send = (data: NotificationRule): Promise<NotificationRule> => {
+        if (this.rule) {
+            return new EventsApi(DEFAULT_CONFIG).eventsRulesUpdate({
+                pbmUuid: this.rule.pk || "",
+                data: data
+            });
+        } else {
+            return new EventsApi(DEFAULT_CONFIG).eventsRulesCreate({
+                data: data
+            });
+        }
+    };
+
+    renderSeverity(): TemplateResult {
+        return html`
+            <option value=${NotificationRuleSeverityEnum.Alert} ?selected=${this.rule?.severity === NotificationRuleSeverityEnum.Alert}>
+                ${gettext("Alert")}
+            </option>
+            <option value=${NotificationRuleSeverityEnum.Warning} ?selected=${this.rule?.severity === NotificationRuleSeverityEnum.Warning}>
+                ${gettext("Warning")}
+            </option>
+            <option value=${NotificationRuleSeverityEnum.Notice} ?selected=${this.rule?.severity === NotificationRuleSeverityEnum.Notice}>
+                ${gettext("Notice")}
+            </option>
+        `;
+    }
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal
+                label=${gettext("Name")}
+                ?required=${true}
+                name="name">
+                <input type="text" value="${ifDefined(this.rule?.name)}" class="pf-c-form-control" required>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Group")}
+                name="group">
+                <select class="pf-c-form-control">
+                    <option value="" ?selected=${this.rule?.group === undefined}>---------</option>
+                    ${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then(groups => {
+                        return groups.results.map(group => {
+                            return html`<option value=${ifDefined(group.pk)} ?selected=${this.rule?.group?.groupUuid === group.pk}>${group.name}</option>`;
+                        });
+                    }), html``)}
+                </select>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Transports")}
+                ?required=${true}
+                name="transports">
+                <select name="users" class="pf-c-form-control" multiple>
+                    ${until(new EventsApi(DEFAULT_CONFIG).eventsTransportsList({}).then(transports => {
+                        return transports.results.map(transport => {
+                            const selected = Array.from(this.rule?.transports || []).some(su => {
+                                return su.uuid == transport.pk;
+                            });
+                            return html`<option value=${ifDefined(transport.pk)} ?selected=${selected}>${transport.name}</option>`;
+                        });
+                    }))}
+                </select>
+                <p class="pf-c-form__helper-text">${gettext("Select which transports should be used to notify the user. If none are selected, the notification will only be shown in the authentik UI.")}</p>
+                <p class="pf-c-form__helper-text">${gettext("Hold control/command to select multiple items.")}</p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Severity")}
+                ?required=${true}
+                name="severity">
+                <select class="pf-c-form-control">
+                    ${this.renderSeverity()}
+                </select>
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+
+}

web/src/pages/events/RuleListPage.ts

@@ -4,14 +4,15 @@ import { AKResponse } from "../../api/Client";
 import { TablePage } from "../../elements/table/TablePage";
 
 import "../../elements/policies/BoundPoliciesList";
-import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
+import "../../elements/forms/ModalForm";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
 import { EventsApi, NotificationRule } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
 import "../../elements/forms/DeleteForm";
+import "./RuleForm";
 
 @customElement("ak-event-rule-list")
 export class RuleListPage extends TablePage<NotificationRule> {
@@ -57,12 +58,19 @@ export class RuleListPage extends TablePage<NotificationRule> {
             html`${item.severity}`,
             html`${item.group?.name || gettext("None (rule disabled)")}`,
             html`
-            <ak-modal-button href="${AdminURLManager.eventRules(`${item.pk}/update/`)}">
+            <ak-forms-modal>
-                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+                <span slot="submit">
+                    ${gettext("Update")}
+                </span>
+                <span slot="header">
+                    ${gettext("Update Notification Rule")}
+                </span>
+                <ak-event-rule-form slot="form" .rule=${item}>
+                </ak-event-rule-form>
+                <button slot="trigger" class="pf-c-button pf-m-primary">
                     ${gettext("Edit")}
-                </ak-spinner-button>
+                </button>
-                <div slot="modal"></div>
+            </ak-forms-modal>
-            </ak-modal-button>
             <ak-forms-delete
                 .obj=${item}
                 objectLabel=${gettext("Notification rule")}
@@ -80,12 +88,19 @@ export class RuleListPage extends TablePage<NotificationRule> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${AdminURLManager.eventRules("create/")}>
+        <ak-forms-modal>
-            <ak-spinner-button slot="trigger" class="pf-m-primary">
+            <span slot="submit">
                 ${gettext("Create")}
-            </ak-spinner-button>
+            </span>
-            <div slot="modal"></div>
+            <span slot="header">
-        </ak-modal-button>
+                ${gettext("Create Notification Rule")}
+            </span>
+            <ak-event-rule-form slot="form">
+            </ak-event-rule-form>
+            <button slot="trigger" class="pf-c-button pf-m-primary">
+                ${gettext("Create")}
+            </button>
+        </ak-forms-modal>
         ${super.renderToolbar()}
         `;
     }