Banners

Signed-off-by: Václav Muzikář <[email protected]>

js/apps/admin-ui/src/App.tsx

@@ -26,6 +26,7 @@ import { WhoAmIContextProvider } from "./context/whoami/WhoAmI";
 import type { Environment } from "./environment";
 import { SubGroups } from "./groups/SubGroupsContext";
 import { AuthWall } from "./root/AuthWall";
+import { Banners } from "./Banner";
 
 const AppContexts = ({ children }: PropsWithChildren) => (
   <ErrorBoundaryProvider>
@@ -71,6 +72,7 @@ export const App = () => {
           <ErrorBoundaryFallback fallback={ErrorRenderer}>
             <Suspense fallback={<KeycloakSpinner />}>
               <AuthWall>
+                <Banners />
                 <Outlet />
               </AuthWall>
             </Suspense>

js/apps/admin-ui/src/Banner.tsx

@@ -0,0 +1,19 @@
+import { Banner, Flex, FlexItem } from "@patternfly/react-core";
+import { ExclamationTriangleIcon } from "@patternfly/react-icons";
+
+const WarnBanner = (text: string) => {
+  return (
+    <Banner screenReaderText={text} variant="gold" isSticky>
+      <Flex spaceItems={{ default: "spaceItemsSm" }}>
+        <FlexItem>
+          <ExclamationTriangleIcon />
+        </FlexItem>
+        <FlexItem>{text}</FlexItem>
+      </Flex>
+    </Banner>
+  );
+};
+
+export const Banners = () => {
+  return WarnBanner("This is a warning");
+};