static: add multiple active paths to sidebar

passbook/static/static/src/api/application.ts

@@ -1,5 +1,4 @@
 export class Application {
-
     pk: string;
     name: string;
     slug: string;
@@ -13,8 +12,7 @@ export class Application {
 
     static get(slug: string): Promise<Application> {
         return fetch(`/api/v2beta/core/applications/${slug}/`)
-            .then(r => r.json())
-            .then(r => <Application>r);
+            .then((r) => r.json())
+            .then((r) => <Application>r);
     }
-
 }

passbook/static/static/src/api/errors.ts

@@ -1,3 +1 @@
-export class NotFoundError extends Error {
-
-}
+export class NotFoundError extends Error {}

passbook/static/static/src/elements/Sidebar.ts

@@ -17,7 +17,7 @@ import { me, User } from "../api/user";
 
 export interface SidebarItem {
     name: string;
-    path?: string;
+    path?: string[];
     children?: SidebarItem[];
     condition?: (sb: Sidebar) => boolean;
 }
@@ -25,11 +25,11 @@ export interface SidebarItem {
 export const SIDEBAR_ITEMS: SidebarItem[] = [
     {
         name: "Library",
-        path: "/-/overview/",
+        path: ["/-/overview/"],
     },
     {
         name: "Monitor",
-        path: "/audit/audit/",
+        path: ["/audit/audit/"],
         condition: (sb: Sidebar) => {
             return sb.user?.is_superuser!;
         },
@@ -42,36 +42,36 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
                 children: [
                     {
                         name: "Overview",
-                        path: "/administration/overview/",
+                        path: ["/administration/overview/"],
                     },
                     {
                         name: "System Tasks",
-                        path: "/administration/tasks/",
+                        path: ["/administration/tasks/"],
                     },
                 ],
             },
             {
                 name: "Applications",
-                path: "/administration/applications/",
+                path: ["/administration/applications/"],
             },
             {
                 name: "Sources",
-                path: "/administration/sources/",
+                path: ["/administration/sources/"],
             },
             {
                 name: "Providers",
-                path: "/administration/providers/",
+                path: ["/administration/providers/"],
             },
             {
                 name: "User Management",
                 children: [
                     {
                         name: "User",
-                        path: "/administration/users/",
+                        path: ["/administration/users/"],
                     },
                     {
                         name: "Groups",
-                        path: "/administration/groups/",
+                        path: ["/administration/groups/"],
                     },
                 ],
             },
@@ -80,50 +80,50 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
                 children: [
                     {
                         name: "Outposts",
-                        path: "/administration/outposts/",
+                        path: ["/administration/outposts/"],
                     },
                     {
                         name: "Service Connections",
-                        path: "/administration/outposts/service_connections/",
+                        path: ["/administration/outposts/service_connections/"],
                     },
                 ],
             },
             {
                 name: "Policies",
-                path: "/administration/policies/",
+                path: ["/administration/policies/"],
             },
             {
                 name: "Property Mappings",
-                path: "/administration/property-mappings/",
+                path: ["/administration/property-mappings/"],
             },
             {
                 name: "Flows",
                 children: [
                     {
                         name: "Flows",
-                        path: "/administration/flows/",
+                        path: ["/administration/flows/"],
                     },
                     {
                         name: "Stages",
-                        path: "/administration/stages/",
+                        path: ["/administration/stages/"],
                     },
                     {
                         name: "Prompts",
-                        path: "/administration/stages/prompts/",
+                        path: ["/administration/stages/prompts/"],
                     },
                     {
                         name: "Invitations",
-                        path: "/administration/stages/invitations/",
+                        path: ["/administration/stages/invitations/"],
                     },
                 ],
             },
             {
                 name: "Certificates",
-                path: "/administration/crypto/certificates/",
+                path: ["/administration/crypto/certificates/"],
             },
             {
                 name: "Tokens",
-                path: "/administration/tokens/",
+                path: ["/administration/tokens/"],
             },
         ],
         condition: (sb: Sidebar) => {
@@ -188,7 +188,9 @@ export class Sidebar extends LitElement {
             ${item.path
                 ? html`<a
                       href="#${item.path}"
-                      class="pf-c-nav__link ${item.path === this.activePath
+                      class="pf-c-nav__link ${item.path.some(
+                          (v) => v === this.activePath
+                      )
                           ? "pf-m-current"
                           : ""}"
                   >

passbook/static/static/src/pages/RouterOutlet.ts

@@ -17,7 +17,7 @@ export class Route {
     url: RegExp;
 
     private element?: TemplateResult;
-    private callback?: (args: { [key: string]: string; }) => TemplateResult;
+    private callback?: (args: { [key: string]: string }) => TemplateResult;
 
     constructor(url: RegExp, element?: TemplateResult) {
         this.url = url;
@@ -33,12 +33,12 @@ export class Route {
         return this;
     }
 
-    then(render: (args: { [key: string]: string; }) => TemplateResult): Route {
+    then(render: (args: { [key: string]: string }) => TemplateResult): Route {
         this.callback = render;
         return this;
     }
 
-    render(args: { [key: string]: string; }): TemplateResult {
+    render(args: { [key: string]: string }): TemplateResult {
         if (this.callback) {
             return this.callback(args);
         }
@@ -54,9 +54,13 @@ export const ROUTES: Route[] = [
     // Prevent infinite Shell loops
     new Route(new RegExp(`^/$`)).redirect("/-/overview/"),
     new Route(new RegExp(`^/applications/$`), html`<h1>test</h1>`),
-    new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})/$`)).then((args) => {
-        return html`<pb-application-view .args=${args}></pb-application-view>`;
-    }),
+    new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})/$`)).then(
+        (args) => {
+            return html`<pb-application-view
+                .args=${args}
+            ></pb-application-view>`;
+        }
+    ),
 ];
 
 class RouteMatch {
@@ -112,7 +116,7 @@ export class RouterOutlet extends LitElement {
         }
         let matchedRoute: RouteMatch | null = null;
         ROUTES.forEach((route) => {
-            console.log(`matching ${activeUrl} against ${route.url}`);
+            console.debug(`passbook/router: matching ${activeUrl} against ${route.url}`);
             const match = route.url.exec(activeUrl);
             if (match != null) {
                 matchedRoute = new RouteMatch(route);
@@ -122,7 +126,7 @@ export class RouterOutlet extends LitElement {
             }
         });
         if (!matchedRoute) {
-            console.log(
+            console.debug(
                 `passbook/router: route "${activeUrl}" not defined, defaulting to shell`
             );
             const route = new Route(

passbook/static/static/src/pages/applications/ApplicationViewPage.ts

@@ -5,13 +5,13 @@ import { COMMON_STYLES } from "../../common/styles";
 @customElement("pb-application-view")
 export class ApplicationViewPage extends LitElement {
     @property()
-    set args(value: { [key: string]: string; }) {
+    set args(value: { [key: string]: string }) {
         this.applicationSlug = value.slug;
     }
 
     @property()
     set applicationSlug(value: string) {
-        Application.get(value).then(app => this.application = app);
+        Application.get(value).then((app) => (this.application = app));
     }
 
     @property()
@@ -28,7 +28,11 @@ export class ApplicationViewPage extends LitElement {
                         <i class="pf-icon pf-icon-applications"></i>
                         ${this.application?.name}
                     </h1>
-                    <p>External Applications which use passbook as Identity-Provider, utilizing protocols like OAuth2 and SAML.</p>
+                    <p>
+                        External Applications which use passbook as
+                        Identity-Provider, utilizing protocols like OAuth2 and
+                        SAML.
+                    </p>
                 </div>
             </section>
             <section class="pf-c-page__main-section pf-m-no-padding-mobile">
@@ -43,5 +47,4 @@ export class ApplicationViewPage extends LitElement {
                 </div>
             </section>`;
     }
-
 }