web: add Changelog Tab for sources and providers

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

web/src/pages/providers/OAuth2ProviderViewPage.ts

@@ -18,9 +18,10 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/CodeMirror";
 import "../../elements/Tabs";
+import "../../elements/events/ObjectChangelog";
+import "./RelatedApplicationButton";
 import { Page } from "../../elements/Page";
 import { convertToTitle } from "../../utils";
-import "./RelatedApplicationButton";
 import { OAuth2Provider, OAuth2ProviderSetupURLs, ProvidersApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
@@ -137,7 +138,18 @@ export class OAuth2ProviderViewPage extends Page {
                         </div>
                     </div>
                 </section>
-                <section slot="page-2" data-tab-title="${gettext("Metadata")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                <section slot="page-2" data-tab-title="${gettext("Changelog")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__body">
+                            <ak-object-changelog
+                                targetModelPk=${this.provider.pk || ""}
+                                targetModelApp="authentik_providers_oauth2"
+                                targetModelName="oauth2provider">
+                            </ak-object-changelog>
+                        </div>
+                    </div>
+                </section>
+                <section slot="page-3" data-tab-title="${gettext("Metadata")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                     <div class="pf-u-display-flex pf-u-justify-content-center">
                         <div class="pf-u-w-75">
                             <div class="pf-c-card pf-c-card-aggregate">

web/src/pages/providers/ProxyProviderViewPage.ts

@@ -16,8 +16,9 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/CodeMirror";
 import "../../elements/Tabs";
-import { Page } from "../../elements/Page";
+import "../../elements/events/ObjectChangelog";
 import "./RelatedApplicationButton";
+import { Page } from "../../elements/Page";
 import { ProvidersApi, ProxyProvider } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
@@ -137,6 +138,17 @@ export class ProxyProviderViewPage extends Page {
                         </div>
                     </div>
                 </section>
+                <section slot="page-2" data-tab-title="${gettext("Changelog")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__body">
+                            <ak-object-changelog
+                                targetModelPk=${this.provider.pk || ""}
+                                targetModelApp="authentik_providers_proxy"
+                                targetModelName="proxyprovider">
+                            </ak-object-changelog>
+                        </div>
+                    </div>
+                </section>
             </ak-tabs>`;
     }
 }

web/src/pages/providers/SAMLProviderViewPage.ts

@@ -17,8 +17,9 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/CodeMirror";
 import "../../elements/Tabs";
-import { Page } from "../../elements/Page";
+import "../../elements/events/ObjectChangelog";
 import "./RelatedApplicationButton";
+import { Page } from "../../elements/Page";
 import { ProvidersApi, SAMLProvider } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager, AppURLManager } from "../../api/legacy";
@@ -129,7 +130,18 @@ export class SAMLProviderViewPage extends Page {
                         </div>
                     </div>
                 </section>
-                <section slot="page-2" data-tab-title="${gettext("Metadata")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                <section slot="page-2" data-tab-title="${gettext("Changelog")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__body">
+                            <ak-object-changelog
+                                targetModelPk=${this.provider.pk || ""}
+                                targetModelApp="authentik_providers_saml"
+                                targetModelName="samlprovider">
+                            </ak-object-changelog>
+                        </div>
+                    </div>
+                </section>
+                <section slot="page-3" data-tab-title="${gettext("Metadata")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                     <div class="pf-u-display-flex pf-u-justify-content-center">
                         <div class="pf-u-w-75">
                             <div class="pf-c-card pf-c-card-aggregate">

web/src/pages/sources/LDAPSourceViewPage.ts

@@ -17,6 +17,7 @@ import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/ActionButton";
 import "../../elements/CodeMirror";
 import "../../elements/Tabs";
+import "../../elements/events/ObjectChangelog";
 import { Page } from "../../elements/Page";
 import { until } from "lit-html/directives/until";
 import { LDAPSource, SourcesApi } from "authentik-api";
@@ -112,7 +113,18 @@ export class LDAPSourceViewPage extends Page {
                         </div>
                     </div>
                 </section>
-                <section slot="page-2" data-tab-title="${gettext("Sync")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                <section slot="page-2" data-tab-title="${gettext("Changelog")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__body">
+                            <ak-object-changelog
+                                targetModelPk=${this.source.pk || ""}
+                                targetModelApp="authentik_sources_ldap"
+                                targetModelName="ldapsource">
+                            </ak-object-changelog>
+                        </div>
+                    </div>
+                </section>
+                <section slot="page-3" data-tab-title="${gettext("Sync")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                     <div class="pf-u-display-flex pf-u-justify-content-center">
                         <div class="pf-u-w-75">
                             <div class="pf-c-card pf-c-card-aggregate">

web/src/pages/sources/OAuthSourceViewPage.ts

@@ -16,6 +16,7 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/CodeMirror";
 import "../../elements/Tabs";
+import "../../elements/events/ObjectChangelog";
 import { Page } from "../../elements/Page";
 import { OAuthSource, SourcesApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
@@ -130,6 +131,17 @@ export class OAuthSourceViewPage extends Page {
                         </div>
                     </div>
                 </section>
+                <section slot="page-2" data-tab-title="${gettext("Changelog")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__body">
+                            <ak-object-changelog
+                                targetModelPk=${this.source.pk || ""}
+                                targetModelApp="authentik_sources_oauth"
+                                targetModelName="oauthsource">
+                            </ak-object-changelog>
+                        </div>
+                    </div>
+                </section>
             </ak-tabs>`;
     }
 }

web/src/pages/sources/SAMLSourceViewPage.ts

@@ -17,6 +17,7 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/CodeMirror";
 import "../../elements/Tabs";
+import "../../elements/events/ObjectChangelog";
 import { Page } from "../../elements/Page";
 import { SAMLSource, SourcesApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
@@ -115,7 +116,18 @@ export class SAMLSourceViewPage extends Page {
                         </div>
                     </div>
                 </section>
-                <section slot="page-2" data-tab-title="${gettext("Metadata")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                <section slot="page-2" data-tab-title="${gettext("Changelog")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__body">
+                            <ak-object-changelog
+                                targetModelPk=${this.source.pk || ""}
+                                targetModelApp="authentik_sources_saml"
+                                targetModelName="samlsource">
+                            </ak-object-changelog>
+                        </div>
+                    </div>
+                </section>
+                <section slot="page-3" data-tab-title="${gettext("Metadata")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                     <div class="pf-u-display-flex pf-u-justify-content-center">
                         <div class="pf-u-w-75">
                             <div class="pf-c-card pf-c-card-aggregate">