From b82bc90180d9a6ffe107453df1783f4baa5ca7cc Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 29 Sep 2021 02:29:45 -0400
Subject: [PATCH] Hooks: Adding possibility to display banner on the top of the
 page (#39099) (#39755)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* adding working version of notificaion banner trigger.

* Move it to enterprise

* Fixing csss, none of the pages showed our CustomScrollbar or had double scrollbars

* fixing explore

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
(cherry picked from commit b626ba223f302741aab984e0e279dd103d8858b9)

Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>
---
 packages/grafana-ui/src/themes/GlobalStyles/page.ts    | 10 +++++++---
 public/app/AppWrapper.tsx                              |  7 +++++++
 public/app/core/components/Page/Page.tsx               |  6 +++---
 .../features/dashboard/containers/DashboardPage.tsx    |  4 +---
 public/sass/pages/_explore.scss                        |  2 +-
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/themes/GlobalStyles/page.ts b/packages/grafana-ui/src/themes/GlobalStyles/page.ts
index 53739143a9f..1be34dcb752 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/page.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/page.ts
@@ -18,14 +18,18 @@ export function getPageStyles(theme: GrafanaTheme2) {
 
     .main-view {
       position: relative;
+      display: flex;
+      flex-direction: column;
       flex-grow: 1;
+      height: 100%;
+      flex: 1 1 0;
     }
 
     .page-scrollbar-wrapper {
-      position: absolute;
-      top: 0;
-      bottom: 0;
       width: 100%;
+      flex-grow: 1;
+      width: 100%;
+      min-height: 0;
     }
 
     .page-scrollbar-content {
diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx
index 89c1b48eab2..2e3f2bbc705 100644
--- a/public/app/AppWrapper.tsx
+++ b/public/app/AppWrapper.tsx
@@ -25,11 +25,15 @@ interface AppWrapperState {
 
 /** Used by enterprise */
 let bodyRenderHooks: ComponentType[] = [];
+let pageBanners: ComponentType[] = [];
 
 export function addBodyRenderHook(fn: ComponentType) {
   bodyRenderHooks.push(fn);
 }
 
+export function addPageBanner(fn: ComponentType) {
+  pageBanners.push(fn);
+}
 export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState> {
   container = React.createRef<HTMLDivElement>();
 
@@ -98,6 +102,9 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
                   <Router history={locationService.getHistory()}>
                     <NavBar />
                     <main className="main-view">
+                      {pageBanners.map((Banner, index) => (
+                        <Banner key={index.toString()} />
+                      ))}
                       <div
                         ref={this.container}
                         dangerouslySetInnerHTML={{
diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx
index 573449ed416..40034d4299f 100644
--- a/public/app/core/components/Page/Page.tsx
+++ b/public/app/core/components/Page/Page.tsx
@@ -53,9 +53,9 @@ export default Page;
 
 const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
-    bottom: 0;
-    position: absolute;
-    top: 0;
     width: 100%;
+    flex-grow: 1;
+    width: 100%;
+    min-height: 0;
   `,
 });
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 577b4d01e5a..c1f076eaacd 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -395,14 +395,12 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, kioskMode) => {
   const contentPadding = kioskMode !== KioskMode.Full ? theme.spacing(0, 2, 2) : theme.spacing(2);
   return {
     dashboardContainer: css`
-      position: absolute;
-      top: 0;
-      bottom: 0;
       width: 100%;
       height: 100%;
       display: flex;
       flex: 1 1 0;
       flex-direction: column;
+      min-height: 0;
     `,
     dashboardScroll: css`
       width: 100%;
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 78704925e2d..37f468d8070 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -141,7 +141,6 @@
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
-  height: 100vh;
   width: 100%;
 }
 
@@ -166,6 +165,7 @@
 
 .explore-wrapper {
   display: flex;
+  height: 100%;
 
   > .explore-split {
     width: 50%;