From c6ba9603c83e9e53802de2c1b632b5b87dfdba32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Fri, 5 Jan 2024 14:57:34 +0000
Subject: [PATCH] fix: demo banner zIndex, display on top (#5776)

This PR does 2 things:
- Fixes the `DemoBanner` zIndex to be the same as the sticky banners (no
longer displays on top of modals)
- Moves the `Demo` wrapper to `App` instead of `MainLayout`, always
displaying the demo banner before other banners


![image](https://github.com/Unleash/unleash/assets/14320932/b115ee7f-26e0-468f-91aa-1f82335a6538)
---
 frontend/src/component/App.tsx                | 103 +++++++++---------
 .../component/demo/DemoBanner/DemoBanner.tsx  |   2 +-
 .../layout/MainLayout/MainLayout.tsx          |  82 ++++++--------
 3 files changed, 89 insertions(+), 98 deletions(-)

diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx
index f1ff13add3..f9d8b3c10c 100644
--- a/frontend/src/component/App.tsx
+++ b/frontend/src/component/App.tsx
@@ -23,6 +23,7 @@ import { InitialRedirect } from './InitialRedirect';
 import { InternalBanners } from './banners/internalBanners/InternalBanners';
 import { ExternalBanners } from './banners/externalBanners/ExternalBanners';
 import { LicenseBanner } from './banners/internalBanners/LicenseBanner';
+import { Demo } from './demo/Demo';
 
 const StyledContainer = styled('div')(() => ({
     '& ul': {
@@ -59,58 +60,62 @@ export const App = () => {
                                 condition={!hasFetchedAuth}
                                 show={<Loader />}
                                 elseShow={
-                                    <>
-                                        <ConditionallyRender
-                                            condition={Boolean(
-                                                uiConfig?.maintenanceMode,
-                                            )}
-                                            show={<MaintenanceBanner />}
-                                        />
-                                        <LicenseBanner />
-                                        <ExternalBanners />
-                                        <InternalBanners />
-                                        <StyledContainer>
-                                            <ToastRenderer />
-                                            <Routes>
-                                                {availableRoutes.map(
-                                                    (route) => (
-                                                        <Route
-                                                            key={route.path}
-                                                            path={route.path}
-                                                            element={
-                                                                <LayoutPicker
-                                                                    isStandalone={
-                                                                        route.isStandalone ===
-                                                                        true
-                                                                    }
-                                                                >
-                                                                    <ProtectedRoute
-                                                                        route={
-                                                                            route
-                                                                        }
-                                                                    />
-                                                                </LayoutPicker>
-                                                            }
-                                                        />
-                                                    ),
+                                    <Demo>
+                                        <>
+                                            <ConditionallyRender
+                                                condition={Boolean(
+                                                    uiConfig?.maintenanceMode,
                                                 )}
-                                                <Route
-                                                    path='/'
-                                                    element={
-                                                        <InitialRedirect />
-                                                    }
-                                                />
-                                                <Route
-                                                    path='*'
-                                                    element={<NotFound />}
-                                                />
-                                            </Routes>
+                                                show={<MaintenanceBanner />}
+                                            />
+                                            <LicenseBanner />
+                                            <ExternalBanners />
+                                            <InternalBanners />
+                                            <StyledContainer>
+                                                <ToastRenderer />
+                                                <Routes>
+                                                    {availableRoutes.map(
+                                                        (route) => (
+                                                            <Route
+                                                                key={route.path}
+                                                                path={
+                                                                    route.path
+                                                                }
+                                                                element={
+                                                                    <LayoutPicker
+                                                                        isStandalone={
+                                                                            route.isStandalone ===
+                                                                            true
+                                                                        }
+                                                                    >
+                                                                        <ProtectedRoute
+                                                                            route={
+                                                                                route
+                                                                            }
+                                                                        />
+                                                                    </LayoutPicker>
+                                                                }
+                                                            />
+                                                        ),
+                                                    )}
+                                                    <Route
+                                                        path='/'
+                                                        element={
+                                                            <InitialRedirect />
+                                                        }
+                                                    />
+                                                    <Route
+                                                        path='*'
+                                                        element={<NotFound />}
+                                                    />
+                                                </Routes>
 
-                                            <FeedbackNPS openUrl='http://feedback.unleash.run' />
+                                                <FeedbackNPS openUrl='http://feedback.unleash.run' />
 
-                                            <SplashPageRedirect />
-                                        </StyledContainer>
-                                    </>
+                                                <SplashPageRedirect />
+                                            </StyledContainer>
+                                        </>
+                                    </Demo>
                                 }
                             />
                         </Suspense>
diff --git a/frontend/src/component/demo/DemoBanner/DemoBanner.tsx b/frontend/src/component/demo/DemoBanner/DemoBanner.tsx
index 2f09b002eb..827c066b0b 100644
--- a/frontend/src/component/demo/DemoBanner/DemoBanner.tsx
+++ b/frontend/src/component/demo/DemoBanner/DemoBanner.tsx
@@ -3,7 +3,7 @@ import { Sticky } from 'component/common/Sticky/Sticky';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledBanner = styled(Sticky)(({ theme }) => ({
-    zIndex: theme.zIndex.sticky,
+    zIndex: theme.zIndex.sticky - 100,
     display: 'flex',
     gap: theme.spacing(1),
     justifyContent: 'center',
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index 88b6085f55..b884c9ae2f 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@@ -14,7 +14,6 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { DraftBanner } from './DraftBanner/DraftBanner';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
-import { Demo } from 'component/demo/Demo';
 import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IMainLayoutProps {
@@ -111,55 +110,42 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
         return (
             <>
                 <SkipNavLink />
-                <Demo>
-                    <>
-                        <Header />
-                        <SkipNavTarget />
-                        <MainLayoutContainer>
-                            <MainLayoutContentWrapper>
-                                <ConditionallyRender
-                                    condition={Boolean(
-                                        projectId &&
-                                            isChangeRequestConfiguredInAnyEnv(),
-                                    )}
-                                    show={
-                                        <DraftBanner
-                                            project={projectId || ''}
-                                        />
-                                    }
+                <Header />
+                <SkipNavTarget />
+                <MainLayoutContainer>
+                    <MainLayoutContentWrapper>
+                        <ConditionallyRender
+                            condition={Boolean(
+                                projectId &&
+                                    isChangeRequestConfiguredInAnyEnv(),
+                            )}
+                            show={<DraftBanner project={projectId || ''} />}
+                        />
+                        <StyledMainLayoutContent item xs={12} sm={12} my={2}>
+                            <MainLayoutContentContainer ref={ref}>
+                                <BreadcrumbNav />
+                                <Proclamation toast={uiConfig.toast} />
+                                {children}
+                            </MainLayoutContentContainer>
+                        </StyledMainLayoutContent>
+                        <ThemeMode
+                            darkmode={
+                                <StyledImg
+                                    style={{ opacity: 0.06 }}
+                                    src={formatAssetPath(textureImage)}
+                                    alt=''
                                 />
-                                <StyledMainLayoutContent
-                                    item
-                                    xs={12}
-                                    sm={12}
-                                    my={2}
-                                >
-                                    <MainLayoutContentContainer ref={ref}>
-                                        <BreadcrumbNav />
-                                        <Proclamation toast={uiConfig.toast} />
-                                        {children}
-                                    </MainLayoutContentContainer>
-                                </StyledMainLayoutContent>
-                                <ThemeMode
-                                    darkmode={
-                                        <StyledImg
-                                            style={{ opacity: 0.06 }}
-                                            src={formatAssetPath(textureImage)}
-                                            alt=''
-                                        />
-                                    }
-                                    lightmode={
-                                        <StyledImg
-                                            src={formatAssetPath(textureImage)}
-                                            alt=''
-                                        />
-                                    }
+                            }
+                            lightmode={
+                                <StyledImg
+                                    src={formatAssetPath(textureImage)}
+                                    alt=''
                                 />
-                            </MainLayoutContentWrapper>
-                            <Footer />
-                        </MainLayoutContainer>
-                    </>
-                </Demo>
+                            }
+                        />
+                    </MainLayoutContentWrapper>
+                    <Footer />
+                </MainLayoutContainer>
             </>
         );
     },