Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

fix: demo banner zIndex, display on top (#5776)

Browse Source 
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)
This commit is contained in:
Nuno Góis 2024-01-05 14:57:34 +00:00 committed by GitHub
parent 1724219487
commit c6ba9603c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 89 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
frontend/src/component/App.tsx
View File

@ -23,6 +23,7 @@ import { InitialRedirect } from './InitialRedirect';
import { InternalBanners } from './banners/internalBanners/InternalBanners'; import { InternalBanners } from './banners/internalBanners/InternalBanners';
import { ExternalBanners } from './banners/externalBanners/ExternalBanners'; import { ExternalBanners } from './banners/externalBanners/ExternalBanners';
import { LicenseBanner } from './banners/internalBanners/LicenseBanner'; import { LicenseBanner } from './banners/internalBanners/LicenseBanner';
import { Demo } from './demo/Demo';
const StyledContainer = styled('div')(() => ({ const StyledContainer = styled('div')(() => ({
'& ul': { '& ul': {
@ -59,58 +60,62 @@ export const App = () => {
condition={!hasFetchedAuth} condition={!hasFetchedAuth}
show={<Loader />} show={<Loader />}
elseShow={ elseShow={
<> <Demo>
<ConditionallyRender <>
condition={Boolean( <ConditionallyRender
uiConfig?.maintenanceMode, 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>
}
/>
),
)} )}
<Route show={<MaintenanceBanner />}
path='/' />
element={ <LicenseBanner />
<InitialRedirect /> <ExternalBanners />
} <InternalBanners />
/> <StyledContainer>
<Route <ToastRenderer />
path='*' <Routes>
element={<NotFound />} {availableRoutes.map(
/> (route) => (
</Routes> <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 /> <SplashPageRedirect />
</StyledContainer> </StyledContainer>
</> </>
</Demo>
} }
/> />
</Suspense> </Suspense>

2
frontend/src/component/demo/DemoBanner/DemoBanner.tsx
View File

@ -3,7 +3,7 @@ import { Sticky } from 'component/common/Sticky/Sticky';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
const StyledBanner = styled(Sticky)(({ theme }) => ({ const StyledBanner = styled(Sticky)(({ theme }) => ({
zIndex: theme.zIndex.sticky, zIndex: theme.zIndex.sticky - 100,
display: 'flex', display: 'flex',
gap: theme.spacing(1), gap: theme.spacing(1),
justifyContent: 'center', justifyContent: 'center',

82
frontend/src/component/layout/MainLayout/MainLayout.tsx
View File

@ -14,7 +14,6 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { DraftBanner } from './DraftBanner/DraftBanner'; import { DraftBanner } from './DraftBanner/DraftBanner';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
import { Demo } from 'component/demo/Demo';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
interface IMainLayoutProps { interface IMainLayoutProps {
@ -111,55 +110,42 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
return ( return (
<> <>
<SkipNavLink /> <SkipNavLink />
<Demo> <Header />
<> <SkipNavTarget />
<Header /> <MainLayoutContainer>
<SkipNavTarget /> <MainLayoutContentWrapper>
<MainLayoutContainer> <ConditionallyRender
<MainLayoutContentWrapper> condition={Boolean(
<ConditionallyRender projectId &&
condition={Boolean( isChangeRequestConfiguredInAnyEnv(),
projectId && )}
isChangeRequestConfiguredInAnyEnv(), show={<DraftBanner project={projectId || ''} />}
)} />
show={ <StyledMainLayoutContent item xs={12} sm={12} my={2}>
<DraftBanner <MainLayoutContentContainer ref={ref}>
project={projectId || ''} <BreadcrumbNav />
/> <Proclamation toast={uiConfig.toast} />
} {children}
</MainLayoutContentContainer>
</StyledMainLayoutContent>
<ThemeMode
darkmode={
<StyledImg
style={{ opacity: 0.06 }}
src={formatAssetPath(textureImage)}
alt=''
/> />
<StyledMainLayoutContent }
item lightmode={
xs={12} <StyledImg
sm={12} src={formatAssetPath(textureImage)}
my={2} alt=''
>
<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=''
/>
}
/> />
</MainLayoutContentWrapper> }
<Footer /> />
</MainLayoutContainer> </MainLayoutContentWrapper>
</> <Footer />
</Demo> </MainLayoutContainer>
</> </>
); );
}, },