web: remove sidebar items from sidebar class, add admin-interface

passbook/core/templates/base/page.html

@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block body %}
-<pb-messages url="{% url 'passbook_api:messages-list' %}"></pb-messages>
+<pb-messages></pb-messages>
 <div class="pf-c-page">
     <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">{% trans 'Skip to content' %}</a>
     {% block page_content %}

passbook/core/templates/shell.html

@@ -1,10 +1,5 @@
-{% extends "base/page.html" %}
+{% extends "base/skeleton.html" %}
 
-{% block page_content %}
+{% block body %}
-<pb-sidebar class="pf-c-page__sidebar">
+<pb-interface-admin></pb-interface-admin>
-</pb-sidebar>
-<main class="pf-c-page__main">
-    <pb-router-outlet role="main" class="pf-c-page__main" tabindex="-1" id="main-content" defaultUrl="/library/">
-    </pb-router-outlet>
-</main>
 {% endblock %}

web/src/api/user.ts

@@ -1,5 +1,7 @@
 import { DefaultClient, PBResponse } from "./client";
 
+let me: User;
+
 export class User {
     pk: number;
     username: string;
@@ -13,7 +15,10 @@ export class User {
     }
 
     static me(): Promise<User> {
-        return DefaultClient.fetch<User>(["core", "users", "me"]);
+        if (me) {
+            return Promise.resolve<User>(me);
+        }
+        return DefaultClient.fetch<User>(["core", "users", "me"]).then(u => me = u);
     }
 
     static count(): Promise<number> {

web/src/elements/Messages.ts

@@ -1,4 +1,5 @@
-import { LitElement, html, customElement, property, TemplateResult } from "lit-element";
+import { LitElement, html, customElement, TemplateResult } from "lit-element";
+import { DefaultClient } from "../api/client";
 
 const LEVEL_ICON_MAP: { [key: string]: string } = {
     error: "fas fa-exclamation-circle",
@@ -19,8 +20,7 @@ interface Message {
 
 @customElement("pb-messages")
 export class Messages extends LitElement {
-    @property()
+    url = DefaultClient.makeUrl(["root", "messages"]);
-    url = "";
 
     messageSocket?: WebSocket;
     retryDelay = 200;

web/src/elements/sidebar/Sidebar.ts

@@ -6,136 +6,22 @@ import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
 // @ts-ignore
 import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
 
-import { User } from "../../api/user";
+import { until } from "lit-html/directives/until";
 
 export interface SidebarItem {
     name: string;
     path?: string[];
     children?: SidebarItem[];
-    condition?: (sb: Sidebar) => boolean;
+    condition?: () => Promise<boolean>;
 }
 
-export const SIDEBAR_ITEMS: SidebarItem[] = [
-    {
-        name: "Library",
-        path: ["/library/"],
-    },
-    {
-        name: "Monitor",
-        path: ["/audit/audit/"],
-        condition: (sb: Sidebar): boolean => {
-            return sb.user?.is_superuser || false;
-        },
-    },
-    {
-        name: "Administration",
-        children: [
-            {
-                name: "Overview",
-                path: ["/administration/overview-ng/"],
-            },
-            {
-                name: "System Tasks",
-                path: ["/administration/tasks/"],
-            },
-            {
-                name: "Applications",
-                path: ["/administration/applications/"],
-            },
-            {
-                name: "Sources",
-                path: ["/administration/sources/"],
-            },
-            {
-                name: "Providers",
-                path: ["/administration/providers/"],
-            },
-            {
-                name: "User Management",
-                children: [
-                    {
-                        name: "User",
-                        path: ["/administration/users/"],
-                    },
-                    {
-                        name: "Groups",
-                        path: ["/administration/groups/"],
-                    },
-                ],
-            },
-            {
-                name: "Outposts",
-                children: [
-                    {
-                        name: "Outposts",
-                        path: ["/administration/outposts/"],
-                    },
-                    {
-                        name: "Service Connections",
-                        path: ["/administration/outposts/service_connections/"],
-                    },
-                ],
-            },
-            {
-                name: "Policies",
-                children: [
-                    {
-                        name: "Policies",
-                        path: ["/administration/policies/"],
-                    },
-                    {
-                        name: "Bindings",
-                        path: ["/administration/policies/bindings/"],
-                    },
-                ],
-            },
-            {
-                name: "Property Mappings",
-                path: ["/administration/property-mappings/"],
-            },
-            {
-                name: "Flows",
-                children: [
-                    {
-                        name: "Flows",
-                        path: ["/administration/flows/"],
-                    },
-                    {
-                        name: "Stages",
-                        path: ["/administration/stages/"],
-                    },
-                    {
-                        name: "Prompts",
-                        path: ["/administration/stages/prompts/"],
-                    },
-                    {
-                        name: "Invitations",
-                        path: ["/administration/stages/invitations/"],
-                    },
-                ],
-            },
-            {
-                name: "Certificates",
-                path: ["/administration/crypto/certificates/"],
-            },
-            {
-                name: "Tokens",
-                path: ["/administration/tokens/"],
-            },
-        ],
-        condition: (sb: Sidebar): boolean => {
-            return sb.user?.is_superuser || false;
-        },
-    },
-];
-
 @customElement("pb-sidebar")
 export class Sidebar extends LitElement {
-    @property()
+    @property({attribute: false})
-    activePath: string;
+    items: SidebarItem[] = [];
 
     @property()
-    user?: User;
+    activePath: string;
 
     static get styles(): CSSResult[] {
         return [
@@ -145,7 +31,7 @@ export class Sidebar extends LitElement {
             css`
                 .pf-c-nav__list .sidebar-brand {
                     max-height: 82px;
-                    margin-bottom: 0.5rem;
+                    margin-bottom: -0.5rem;
                 }
                 .pf-c-nav__link {
                     --pf-c-nav__link--PaddingTop: 0.5rem;
@@ -167,16 +53,15 @@ export class Sidebar extends LitElement {
 
     constructor() {
         super();
-        User.me().then((u) => (this.user = u));
         this.activePath = window.location.hash.slice(1, Infinity);
         window.addEventListener("hashchange", () => {
             this.activePath = window.location.hash.slice(1, Infinity);
         });
     }
 
-    renderItem(item: SidebarItem): TemplateResult {
+    async renderItem(item: SidebarItem): Promise<TemplateResult> {
         if (item.condition) {
-            const result = item.condition(this);
+            const result = await item.condition();
             if (!result) {
                 return html``;
             }
@@ -194,7 +79,7 @@ export class Sidebar extends LitElement {
                     </a>
                     <section class="pf-c-nav__subnav">
                         <ul class="pf-c-nav__simple-list">
-                            ${item.children?.map((i) => this.renderItem(i))}
+                            ${item.children?.map((i) => until(this.renderItem(i), html``))}
                         </ul>
                     </section>`}
         </li>`;
@@ -207,9 +92,9 @@ export class Sidebar extends LitElement {
                     <li class="pf-c-nav__item sidebar-brand">
                         <pb-sidebar-brand></pb-sidebar-brand>
                     </li>
-                    ${SIDEBAR_ITEMS.map((i) => this.renderItem(i))}
+                    ${this.items.map((i) => until(this.renderItem(i), html``))}
                     <li class="pf-c-nav__item pf-c-nav__item-bottom">
-                        <pb-sidebar-user .user=${this.user}></pb-sidebar-user>
+                        <pb-sidebar-user></pb-sidebar-user>
                     </li>
                 </ul>
             </nav>

web/src/elements/sidebar/SidebarUser.ts

@@ -1,4 +1,4 @@
-import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
 // @ts-ignore
 import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
 // @ts-ignore
@@ -9,9 +9,6 @@ import { User } from "../../api/user";
 
 @customElement("pb-sidebar-user")
 export class SidebarUser extends LitElement {
-    @property()
-    user?: User;
-
     static get styles(): CSSResult[] {
         return [
             fa,
@@ -44,14 +41,12 @@ export class SidebarUser extends LitElement {
         ];
     }
 
-    render(): TemplateResult {
+    async render(): Promise<TemplateResult> {
-        if (!this.user) {
+        const user = await User.me();
-            return html``;
-        }
         return html`
             <a href="#/-/user/" class="pf-c-nav__link user-avatar" id="user-settings">
-                <img class="pf-c-avatar" src="${this.user?.avatar}" alt="" />
+                <img class="pf-c-avatar" src="${user.avatar}" alt="" />
-                <span>${this.user?.username}</span>
+                <span>${user.username}</span>
             </a>
             <a href="/flows/-/default/invalidation/" class="pf-c-nav__link user-logout" id="logout">
                 <i class="fas fa-sign-out-alt" aria-hidden="true"></i>

web/src/interfaces/AdminInterface.ts

@@ -0,0 +1,127 @@
+import { customElement } from "lit-element";
+import { User } from "../api/user";
+import { SidebarItem } from "../elements/sidebar/Sidebar";
+import { Interface } from "./Interface";
+
+export const SIDEBAR_ITEMS: SidebarItem[] = [
+    {
+        name: "Library",
+        path: ["/library/"],
+    },
+    {
+        name: "Monitor",
+        path: ["/audit/audit/"],
+        condition: (): Promise<boolean> => {
+            return User.me().then(u => u.is_superuser);
+        },
+    },
+    {
+        name: "Administration",
+        children: [
+            {
+                name: "Overview",
+                path: ["/administration/overview-ng/"],
+            },
+            {
+                name: "System Tasks",
+                path: ["/administration/tasks/"],
+            },
+            {
+                name: "Applications",
+                path: ["/administration/applications/"],
+            },
+            {
+                name: "Sources",
+                path: ["/administration/sources/"],
+            },
+            {
+                name: "Providers",
+                path: ["/administration/providers/"],
+            },
+            {
+                name: "User Management",
+                children: [
+                    {
+                        name: "User",
+                        path: ["/administration/users/"],
+                    },
+                    {
+                        name: "Groups",
+                        path: ["/administration/groups/"],
+                    },
+                ],
+            },
+            {
+                name: "Outposts",
+                children: [
+                    {
+                        name: "Outposts",
+                        path: ["/administration/outposts/"],
+                    },
+                    {
+                        name: "Service Connections",
+                        path: ["/administration/outposts/service_connections/"],
+                    },
+                ],
+            },
+            {
+                name: "Policies",
+                children: [
+                    {
+                        name: "Policies",
+                        path: ["/administration/policies/"],
+                    },
+                    {
+                        name: "Bindings",
+                        path: ["/administration/policies/bindings/"],
+                    },
+                ],
+            },
+            {
+                name: "Property Mappings",
+                path: ["/administration/property-mappings/"],
+            },
+            {
+                name: "Flows",
+                children: [
+                    {
+                        name: "Flows",
+                        path: ["/administration/flows/"],
+                    },
+                    {
+                        name: "Stages",
+                        path: ["/administration/stages/"],
+                    },
+                    {
+                        name: "Prompts",
+                        path: ["/administration/stages/prompts/"],
+                    },
+                    {
+                        name: "Invitations",
+                        path: ["/administration/stages/invitations/"],
+                    },
+                ],
+            },
+            {
+                name: "Certificates",
+                path: ["/administration/crypto/certificates/"],
+            },
+            {
+                name: "Tokens",
+                path: ["/administration/tokens/"],
+            },
+        ],
+        condition: (): Promise<boolean> => {
+            return User.me().then(u => u.is_superuser);
+        },
+    },
+];
+
+@customElement("pb-interface-admin")
+export class AdminInterface extends Interface {
+
+    get sidebar(): SidebarItem[] {
+        return SIDEBAR_ITEMS;
+    }
+
+}

web/src/interfaces/Interface.ts

@@ -0,0 +1,28 @@
+import { gettext } from "django";
+import { CSSResult, html, LitElement, TemplateResult } from "lit-element";
+import { COMMON_STYLES } from "../common/styles";
+import { SidebarItem } from "../elements/sidebar/Sidebar";
+
+// @customElement("pb-interface")
+export abstract class Interface extends LitElement {
+
+    abstract get sidebar(): SidebarItem[];
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES;
+    }
+
+    render(): TemplateResult {
+        return html`<pb-messages></pb-messages>
+            <div class="pf-c-page">
+                <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">${gettext("Skip to content")}</a>
+                <pb-sidebar class="pf-c-page__sidebar" .items=${this.sidebar}>
+                </pb-sidebar>
+                <main class="pf-c-page__main">
+                    <pb-router-outlet role="main" class="pf-c-page__main" tabindex="-1" id="main-content" defaultUrl="/library/">
+                    </pb-router-outlet>
+                </main>
+            </div>`;
+    }
+
+}

web/src/main.ts

@@ -30,3 +30,5 @@ import "./pages/admin-overview/TopApplicationsTable";
 import "./pages/applications/ApplicationListPage";
 import "./pages/applications/ApplicationViewPage";
 import "./pages/LibraryPage";
+
+import "./interfaces/AdminInterface";

web/src/passbook.css

@@ -114,7 +114,3 @@ select[multiple] {
 .pf-c-content h1 :first-child {
     margin-right: var(--pf-global--spacer--sm);
 }
-
-.pf-c-empty-state {
-    height: 100vh;
-}