From 2de869d9c328ce0b3720727dd397a044552760fe Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 18 Mar 2021 18:12:04 +0100
Subject: [PATCH] web: add ObjectChangelog element to show changelog for a
 single object

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/events/ObjectChangelog.ts    | 86 +++++++++++++++++++
 web/src/elements/forms/DeleteForm.ts          |  2 +-
 .../pages/applications/ApplicationViewPage.ts | 15 ++++
 web/src/pages/flows/FlowViewPage.ts           | 10 +++
 4 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 web/src/elements/events/ObjectChangelog.ts

diff --git a/web/src/elements/events/ObjectChangelog.ts b/web/src/elements/events/ObjectChangelog.ts
new file mode 100644
index 000000000..d7f4125c4
--- /dev/null
+++ b/web/src/elements/events/ObjectChangelog.ts
@@ -0,0 +1,86 @@
+import { gettext } from "django";
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { AKResponse } from "../../api/Client";
+import { Table, TableColumn } from "../table/Table";
+import { Event, EventsApi } from "authentik-api";
+
+import "../forms/DeleteForm";
+import "../Tabs";
+import "../buttons/ModalButton";
+import "../buttons/SpinnerButton";
+import "../buttons/Dropdown";
+import "../../pages/events/EventInfo";
+import { PAGE_SIZE } from "../../constants";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { EventWithContext } from "../../api/Events";
+
+@customElement("ak-object-changelog")
+export class ObjectChangelog extends Table<Event> {
+    expandable = true;
+
+    @property()
+    order = "-created";
+
+    @property()
+    targetModelPk!: string | number;
+
+    @property()
+    targetModelApp!: string;
+
+    @property()
+    targetModelName!: string;
+
+    apiEndpoint(page: number): Promise<AKResponse<Event>> {
+        return new EventsApi(DEFAULT_CONFIG).eventsEventsList({
+            action: "model_",
+            page: page,
+            ordering: this.order,
+            pageSize: PAGE_SIZE,
+            contextModelApp: this.targetModelApp,
+            contextModelName: this.targetModelName,
+            contextModelPk: this.targetModelPk.toString(),
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn("Action", "action"),
+            new TableColumn("User", "enabled"),
+            new TableColumn("Creation Date", "created"),
+            new TableColumn("Client IP", "client_ip"),
+        ];
+    }
+
+    row(item: EventWithContext): TemplateResult[] {
+        return [
+            html`${item.action}`,
+            html`<div>${item.user?.username}</div>
+            ${item.user.on_behalf_of ? html`<small>
+                ${gettext(`On behalf of ${item.user.on_behalf_of.username}`)}
+            </small>` : html``}`,
+            html`<span>${item.created?.toLocaleString()}</span>`,
+            html`<span>${item.clientIp}</span>`,
+        ];
+    }
+
+    renderExpanded(item: Event): TemplateResult {
+        return html`
+        <td role="cell" colspan="4">
+            <div class="pf-c-table__expandable-row-content">
+                <ak-event-info .event=${item as EventWithContext}></ak-event-info>
+            </div>
+        </td>
+        <td></td>
+        <td></td>
+        <td></td>`;
+    }
+
+    renderEmpty(): TemplateResult {
+        return super.renderEmpty(html`<ak-empty-state header=${gettext("No Events found.")} icon="pf-icon-module">
+            <div slot="body">
+                ${gettext("No matching events could be found.")}
+            </div>
+        </ak-empty-state>`);
+    }
+
+}
diff --git a/web/src/elements/forms/DeleteForm.ts b/web/src/elements/forms/DeleteForm.ts
index 93060b630..bbe2d1af4 100644
--- a/web/src/elements/forms/DeleteForm.ts
+++ b/web/src/elements/forms/DeleteForm.ts
@@ -13,7 +13,7 @@ export class DeleteForm extends ModalButton {
     objectLabel?: string;
 
     @property({attribute: false})
-    delete!: () => Promise<void>;
+    delete!: () => Promise<unknown>;
 
     confirm(): void {
         this.delete().then(() => {
diff --git a/web/src/pages/applications/ApplicationViewPage.ts b/web/src/pages/applications/ApplicationViewPage.ts
index ca0c12069..e0360ee67 100644
--- a/web/src/pages/applications/ApplicationViewPage.ts
+++ b/web/src/pages/applications/ApplicationViewPage.ts
@@ -7,6 +7,7 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/policies/BoundPoliciesList";
 import "../../elements/EmptyState";
+import "../../elements/events/ObjectChangelog";
 import { Application, CoreApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
@@ -111,6 +112,20 @@ export class ApplicationViewPage extends LitElement {
                                 </dl>
                             </div>
                         </div>
+                        <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
+                            <div class="pf-c-card__header">
+                                <div class="pf-c-card__header-main">
+                                    <i class="pf-icon pf-icon-server"></i> ${gettext("Changelog")}
+                                </div>
+                            </div>
+                            <div class="pf-c-card__body">
+                                <ak-object-changelog
+                                    targetModelPk=${this.application.pk || ""}
+                                    targetModelApp="authentik_core"
+                                    targetModelName="application">
+                                </ak-object-changelog>
+                            </div>
+                        </div>
                     </div>
                 </section>
                 <div slot="page-2" data-tab-title="${gettext("Policy Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
diff --git a/web/src/pages/flows/FlowViewPage.ts b/web/src/pages/flows/FlowViewPage.ts
index c5165e353..fa3fad4c3 100644
--- a/web/src/pages/flows/FlowViewPage.ts
+++ b/web/src/pages/flows/FlowViewPage.ts
@@ -2,6 +2,7 @@ import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 
 import "../../elements/Tabs";
+import "../../elements/events/ObjectChangelog";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/policies/BoundPoliciesList";
@@ -79,6 +80,15 @@ export class FlowViewPage extends LitElement {
                         </ak-bound-policies-list>
                     </div>
                 </div>
+                <div slot="page-4" data-tab-title="${gettext("Changelog")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-c-card">
+                        <ak-object-changelog
+                            targetModelPk=${this.flow.pk || ""}
+                            targetModelApp="authentik_flows"
+                            targetModelName="flow">
+                        </ak-object-changelog>
+                    </div>
+                </div>
             </ak-tabs>`;
     }
 }