Hooks: Adding possibility to display banner on the top of the page (#39099)

* 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>

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 {

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={{

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;
   `,
 });

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%;

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%;