From 54df62fe04d1cedbeea866db54b5d1a429082633 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 10 Sep 2024 14:27:52 +0200
Subject: [PATCH] moved banner to top of the screen (#32765)

fixes: #32468

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 js/apps/admin-ui/src/App.tsx     | 14 +++++++-------
 js/apps/admin-ui/src/Banners.tsx |  9 ++++++---
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/js/apps/admin-ui/src/App.tsx b/js/apps/admin-ui/src/App.tsx
index c3ba39f1f2..081aa4f1b1 100644
--- a/js/apps/admin-ui/src/App.tsx
+++ b/js/apps/admin-ui/src/App.tsx
@@ -7,16 +7,17 @@ import { Page } from "@patternfly/react-core";
 import { PropsWithChildren, Suspense, useEffect, useState } from "react";
 import { Outlet } from "react-router-dom";
 
+import {
+  ErrorBoundaryFallback,
+  ErrorBoundaryProvider,
+  KeycloakSpinner,
+} from "@keycloak/keycloak-ui-shared";
+import { Banners } from "./Banners";
 import { Header } from "./PageHeader";
 import { PageNav } from "./PageNav";
 import { AdminClientContext, initAdminClient } from "./admin-client";
 import { PageBreadCrumbs } from "./components/bread-crumb/PageBreadCrumbs";
 import { ErrorRenderer } from "./components/error/ErrorRenderer";
-import { KeycloakSpinner } from "@keycloak/keycloak-ui-shared";
-import {
-  ErrorBoundaryFallback,
-  ErrorBoundaryProvider,
-} from "@keycloak/keycloak-ui-shared";
 import { RecentRealmsProvider } from "./context/RecentRealms";
 import { AccessContextProvider } from "./context/access/Access";
 import { RealmContextProvider } from "./context/realm-context/RealmContext";
@@ -25,7 +26,6 @@ import { WhoAmIContextProvider } from "./context/whoami/WhoAmI";
 import type { Environment } from "./environment";
 import { SubGroups } from "./groups/SubGroupsContext";
 import { AuthWall } from "./root/AuthWall";
-import { Banners } from "./Banners";
 
 const AppContexts = ({ children }: PropsWithChildren) => (
   <ErrorBoundaryProvider>
@@ -59,6 +59,7 @@ export const App = () => {
   return (
     <AdminClientContext.Provider value={{ keycloak, adminClient }}>
       <AppContexts>
+        <Banners />
         <Page
           header={<Header />}
           isManagedSidebar
@@ -66,7 +67,6 @@ export const App = () => {
           breadcrumb={<PageBreadCrumbs />}
           mainContainerId={mainPageContentId}
         >
-          <Banners />
           <ErrorBoundaryFallback fallback={ErrorRenderer}>
             <Suspense fallback={<KeycloakSpinner />}>
               <AuthWall>
diff --git a/js/apps/admin-ui/src/Banners.tsx b/js/apps/admin-ui/src/Banners.tsx
index 9ec4c914b1..acd2f88936 100644
--- a/js/apps/admin-ui/src/Banners.tsx
+++ b/js/apps/admin-ui/src/Banners.tsx
@@ -3,7 +3,11 @@ import { ExclamationTriangleIcon } from "@patternfly/react-icons";
 import { useWhoAmI } from "./context/whoami/WhoAmI";
 import { useTranslation } from "react-i18next";
 
-const WarnBanner = (msg: string) => {
+type WarnBannerProps = {
+  msg: string;
+};
+
+const WarnBanner = ({ msg }: WarnBannerProps) => {
   const { t } = useTranslation();
 
   return (
@@ -21,6 +25,5 @@ const WarnBanner = (msg: string) => {
 export const Banners = () => {
   const { whoAmI } = useWhoAmI();
 
-  if (whoAmI.isTemporary()) return WarnBanner("loggedInAsTempAdminUser");
-  // more banners in the future?
+  if (whoAmI.isTemporary()) return <WarnBanner msg="loggedInAsTempAdminUser" />;
 };