diff --git a/authentik/outposts/models.py b/authentik/outposts/models.py
index 0e2d54b12..bd0d4b56e 100644
--- a/authentik/outposts/models.py
+++ b/authentik/outposts/models.py
@@ -141,7 +141,7 @@ class OutpostServiceConnection(models.Model):
@property
def component(self) -> str:
"""Return component used to edit this object"""
- raise NotImplementedError
+ return ""
class Meta:
diff --git a/web/src/interfaces/AdminInterface.ts b/web/src/interfaces/AdminInterface.ts
index 8a25367ae..01cfc233f 100644
--- a/web/src/interfaces/AdminInterface.ts
+++ b/web/src/interfaces/AdminInterface.ts
@@ -1,14 +1,103 @@
import "../elements/messages/MessageContainer";
-import { customElement, html, TemplateResult } from "lit-element";
+import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { me } from "../api/Users";
import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "../elements/router/Route";
-import { Interface } from "./Interface";
import "./locale";
import "../elements/sidebar/SidebarItem";
import { t } from "@lingui/macro";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
+
+import "../elements/router/RouterOutlet";
+import "../elements/messages/MessageContainer";
+import "../elements/notifications/NotificationDrawer";
+import "../elements/Banner";
+import "../elements/sidebar/Sidebar";
+import { until } from "lit-html/directives/until";
+import { EVENT_NOTIFICATION_TOGGLE, EVENT_SIDEBAR_TOGGLE, VERSION } from "../constants";
+import { AdminApi } from "authentik-api";
+import { DEFAULT_CONFIG } from "../api/Config";
+
@customElement("ak-interface-admin")
-export class AdminInterface extends Interface {
+export class AdminInterface extends LitElement {
+
+ @property({type: Boolean})
+ sidebarOpen = true;
+
+ @property({type: Boolean})
+ notificationOpen = false;
+
+ static get styles(): CSSResult[] {
+ return [PFBase, PFPage, PFButton, PFDrawer, css`
+ .pf-c-page__main, .pf-c-drawer__content, .pf-c-page__drawer {
+ z-index: auto !important;
+ }
+ `];
+ }
+
+ constructor() {
+ super();
+ this.sidebarOpen = window.innerWidth >= 1280;
+ window.addEventListener("resize", () => {
+ this.sidebarOpen = window.innerWidth >= 1280;
+ });
+ window.addEventListener(EVENT_SIDEBAR_TOGGLE, () => {
+ this.sidebarOpen = !this.sidebarOpen;
+ });
+ window.addEventListener(EVENT_NOTIFICATION_TOGGLE, () => {
+ this.notificationOpen = !this.notificationOpen;
+ });
+ }
+
+ render(): TemplateResult {
+ return html`
+ ${until(new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve().then(version => {
+ if (version.versionCurrent !== VERSION) {
+ return html`