From 9c33f4858fd570deedcf37b68780b93eb7d2fd54 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Mon, 1 Mar 2021 10:32:25 +0100
Subject: [PATCH] web: fix more height issues and sidebar not correctly
 activating

---
 web/src/elements/Tabs.ts                          |  8 ++++++--
 web/src/interfaces/AdminInterface.ts              | 10 +++++++---
 web/src/pages/applications/ApplicationViewPage.ts |  3 +++
 web/src/pages/flows/FlowViewPage.ts               |  3 +++
 web/src/pages/providers/ProviderViewPage.ts       |  8 ++++++--
 web/src/pages/sources/SourceViewPage.ts           | 10 ++++++----
 6 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts
index aeffb18c5..1144e793c 100644
--- a/web/src/elements/Tabs.ts
+++ b/web/src/elements/Tabs.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, customElement, property, CSSResult, TemplateResult } from "lit-element";
+import { LitElement, html, customElement, property, CSSResult, TemplateResult, css } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
 // @ts-ignore
 import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
@@ -13,7 +13,11 @@ export class Tabs extends LitElement {
     currentPage?: string;
 
     static get styles(): CSSResult[] {
-        return [GlobalsStyle, TabsStyle];
+        return [GlobalsStyle, TabsStyle, css`
+            ::slotted(*) {
+                height: 100%;
+            }
+        `];
     }
 
     renderTab(page: Element): TemplateResult {
diff --git a/web/src/interfaces/AdminInterface.ts b/web/src/interfaces/AdminInterface.ts
index b5c9f3325..b4861ec80 100644
--- a/web/src/interfaces/AdminInterface.ts
+++ b/web/src/interfaces/AdminInterface.ts
@@ -1,7 +1,7 @@
 import { customElement } from "lit-element";
 import { User } from "../api/Users";
 import { SidebarItem } from "../elements/sidebar/Sidebar";
-import { SLUG_REGEX } from "../elements/router/Route";
+import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "../elements/router/Route";
 import { Interface } from "./Interface";
 
 export const SIDEBAR_ITEMS: SidebarItem[] = [
@@ -13,7 +13,9 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
         return User.me().then(u => u.is_superuser);
     }),
     new SidebarItem("Events").children(
-        new SidebarItem("Log", "/events/log"),
+        new SidebarItem("Log", "/events/log").activeWhen(
+            `^/events/log/(?<id>${UUID_REGEX})$`
+        ),
         new SidebarItem("Notification Rules", "/events/rules"),
         new SidebarItem("Notification Transports", "/events/transports"),
     ).when((): Promise<boolean> => {
@@ -26,7 +28,9 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
         new SidebarItem("Sources", "/core/sources").activeWhen(
             `^/core/sources/(?<slug>${SLUG_REGEX})$`,
         ),
-        new SidebarItem("Providers", "/core/providers"),
+        new SidebarItem("Providers", "/core/providers").activeWhen(
+            `^/core/providers/(?<id>${ID_REGEX})$`,
+        ),
         new SidebarItem("Outposts", "/outpost/outposts"),
         new SidebarItem("Outpost Service Connections", "/outpost/service-connections"),
     ).when((): Promise<boolean> => {
diff --git a/web/src/pages/applications/ApplicationViewPage.ts b/web/src/pages/applications/ApplicationViewPage.ts
index 7ac812315..a68175bf2 100644
--- a/web/src/pages/applications/ApplicationViewPage.ts
+++ b/web/src/pages/applications/ApplicationViewPage.ts
@@ -32,6 +32,9 @@ export class ApplicationViewPage extends LitElement {
                 img.pf-icon {
                     max-height: 24px;
                 }
+                ak-tabs {
+                    height: 100%;
+                }
             `
         );
     }
diff --git a/web/src/pages/flows/FlowViewPage.ts b/web/src/pages/flows/FlowViewPage.ts
index 51814e3ef..093b2ce32 100644
--- a/web/src/pages/flows/FlowViewPage.ts
+++ b/web/src/pages/flows/FlowViewPage.ts
@@ -27,6 +27,9 @@ export class FlowViewPage extends LitElement {
                 img.pf-icon {
                     max-height: 24px;
                 }
+                ak-tabs {
+                    height: 100%;
+                }
             `
         );
     }
diff --git a/web/src/pages/providers/ProviderViewPage.ts b/web/src/pages/providers/ProviderViewPage.ts
index 20726c8ce..239507762 100644
--- a/web/src/pages/providers/ProviderViewPage.ts
+++ b/web/src/pages/providers/ProviderViewPage.ts
@@ -1,4 +1,4 @@
-import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { Provider } from "../../api/Providers";
 import { COMMON_STYLES } from "../../common/styles";
 
@@ -22,7 +22,11 @@ export class ProviderViewPage extends LitElement {
     provider?: Provider;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return COMMON_STYLES.concat(css`
+            * {
+                height: 100%;
+            }
+        `);
     }
 
     render(): TemplateResult {
diff --git a/web/src/pages/sources/SourceViewPage.ts b/web/src/pages/sources/SourceViewPage.ts
index 7abbb731d..81d8a07ff 100644
--- a/web/src/pages/sources/SourceViewPage.ts
+++ b/web/src/pages/sources/SourceViewPage.ts
@@ -1,4 +1,4 @@
-import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/buttons/ModalButton";
@@ -25,7 +25,11 @@ export class SourceViewPage extends LitElement {
     source?: Source;
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return COMMON_STYLES.concat(css`
+            * {
+                height: 100%;
+            }
+        `);
     }
 
     render(): TemplateResult {
@@ -45,8 +49,6 @@ export class SourceViewPage extends LitElement {
                 return html`<ak-source-ldap-view sourceSlug=${this.source.slug}></ak-source-ldap-view>`;
             case "oauth":
                 return html`<ak-source-oauth-view sourceSlug=${this.source.slug}></ak-source-oauth-view>`;
-            // case "proxy":
-            //     return html`<ak-provider-proxy-view providerID=${this.source.pk}></ak-provider-proxy-view>`;
             default:
                 return html`<p>Invalid source type ${this.source.object_type}</p>`;
         }