From 3ab331dce7e32d2520716c7f391f090045a98371 Mon Sep 17 00:00:00 2001 From: Fredrik Strand Oseberg Date: Thu, 21 Dec 2023 08:42:28 +0100 Subject: [PATCH] feat: increase unleash width (#5707) This PR adds two feature flags: * One is to add some holiday cheer to the unleash logo * The other allows us to increase the width of unleash if the screen allows it Skjermbilde 2023-12-20 kl 16 18 16 --- frontend/src/assets/img/unleashHoliday.svg | 33 ++++++++ .../src/assets/img/unleashHolidayDark.svg | 33 ++++++++ .../layout/MainLayout/MainLayout.tsx | 35 ++++++++- frontend/src/component/menu/Header/Header.tsx | 77 ++++++++++++++++--- frontend/src/interfaces/uiConfig.ts | 2 + .../__snapshots__/create-config.test.ts.snap | 2 + src/lib/types/experimental.ts | 12 ++- src/server-dev.ts | 2 + 8 files changed, 183 insertions(+), 13 deletions(-) create mode 100644 frontend/src/assets/img/unleashHoliday.svg create mode 100644 frontend/src/assets/img/unleashHolidayDark.svg diff --git a/frontend/src/assets/img/unleashHoliday.svg b/frontend/src/assets/img/unleashHoliday.svg new file mode 100644 index 0000000000..bd2f5a4d03 --- /dev/null +++ b/frontend/src/assets/img/unleashHoliday.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/img/unleashHolidayDark.svg b/frontend/src/assets/img/unleashHolidayDark.svg new file mode 100644 index 0000000000..b5ec42e3ea --- /dev/null +++ b/frontend/src/assets/img/unleashHolidayDark.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx index 7d7f5b1578..89a19da569 100644 --- a/frontend/src/component/layout/MainLayout/MainLayout.tsx +++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx @@ -15,6 +15,7 @@ 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 { children: ReactNode; @@ -53,6 +54,26 @@ const MainLayoutContent = styled(Grid)(({ theme }) => ({ }, })); +const SpaciousMainLayoutContent = styled(Grid)(({ theme }) => ({ + width: '100%', + maxWidth: '1500px', + margin: '0 auto', + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + [theme.breakpoints.down('lg')]: { + maxWidth: '1250px', + paddingLeft: theme.spacing(1), + paddingRight: theme.spacing(1), + }, + [theme.breakpoints.down(1024)]: { + marginLeft: 0, + marginRight: 0, + }, + [theme.breakpoints.down('sm')]: { + minWidth: '100%', + }, +})); + const StyledImg = styled('img')(() => ({ display: 'block', position: 'fixed', @@ -81,6 +102,11 @@ export const MainLayout = forwardRef( const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled( projectId || '', ); + const increaseUnleashWidth = useUiFlag('increaseUnleashWidth'); + + const StyledMainLayoutContent = increaseUnleashWidth + ? SpaciousMainLayoutContent + : MainLayoutContent; return ( <> @@ -102,13 +128,18 @@ export const MainLayout = forwardRef( /> } /> - + {children} - + ({ zIndex: 300, })); +const StyledSpaciousHeader = styled(AppBar)(({ theme }) => ({ + backgroundColor: theme.palette.background.paper, + padding: theme.spacing(1), + boxShadow: 'none', + position: 'relative', + zIndex: 300, + maxWidth: '1580px', + [theme.breakpoints.down('lg')]: { + maxWidth: '1280px', + paddingLeft: theme.spacing(1), + paddingRight: theme.spacing(1), + }, + [theme.breakpoints.down(1024)]: { + marginLeft: 0, + marginRight: 0, + }, + [theme.breakpoints.down('sm')]: { + minWidth: '100%', + }, + margin: '0 auto', +})); + +const SpaciousStyledContainer = styled(Box)(() => ({ + display: 'flex', + alignItems: 'center', + width: '100%', + '&&&': { padding: 0 }, +})); + const StyledContainer = styled(Container)(() => ({ display: 'flex', alignItems: 'center', @@ -68,6 +100,8 @@ const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ width: '150px' }); const StyledUnleashLogo = styled(UnleashLogo)({ width: '150px' }); +const StyledCelebatoryLogo = styled(CelebatoryUnleashLogo)({ width: '150px' }); + const StyledLinks = styled('div')(({ theme }) => ({ display: 'flex', justifyContent: 'center', @@ -131,6 +165,9 @@ const Header: VFC = () => { const onAdminClose = () => setAdminRef(null); const onConfigureClose = () => setConfigRef(null); + const increaseUnleashWidth = useUiFlag('increaseUnleashWidth'); + const celebatoryUnleash = useUiFlag('celebrateUnleash'); + const routes = getRoutes(); const adminRoutes = useAdminRoutes(); @@ -144,10 +181,18 @@ const Header: VFC = () => { adminRoutes, }; + const HeaderComponent = increaseUnleashWidth + ? StyledSpaciousHeader + : StyledHeader; + + const ContainerComponent = increaseUnleashWidth + ? SpaciousStyledContainer + : StyledContainer; + if (smallScreen) { return ( - - + + { - - + + ); } return ( - - + + + } + elseShow={ + + } + /> } lightmode={ - + } + elseShow={ + + } + /> } /> @@ -279,8 +336,8 @@ const Header: VFC = () => { - - + + ); }; diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index 94b520f40d..c2a282d257 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -68,6 +68,8 @@ export type UiFlags = { featureSearchFrontend?: boolean; newStrategyConfiguration?: boolean; incomingWebhooks?: boolean; + celebrateUnleash?: boolean; + increaseUnleashWidth?: boolean; }; export interface IVersionInfo { diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap index 4830f6ebcd..18d5e5be5e 100644 --- a/src/lib/__snapshots__/create-config.test.ts.snap +++ b/src/lib/__snapshots__/create-config.test.ts.snap @@ -73,6 +73,7 @@ exports[`should create default config 1`] = ` "experiments": { "anonymiseEventLog": false, "caseInsensitiveInOperators": false, + "celebrateUnleash": false, "customRootRolesKillSwitch": false, "demo": false, "detectSegmentUsageInChangeRequests": false, @@ -87,6 +88,7 @@ exports[`should create default config 1`] = ` "filterInvalidClientMetrics": false, "googleAuthEnabled": false, "incomingWebhooks": false, + "increaseUnleashWidth": false, "maintenanceMode": false, "messageBanner": { "enabled": false, diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index ef7311829f..dd2e778eeb 100644 --- a/src/lib/types/experimental.ts +++ b/src/lib/types/experimental.ts @@ -32,7 +32,9 @@ export type IFlagKey = | 'stripClientHeadersOn304' | 'newStrategyConfiguration' | 'stripHeadersOnAPI' - | 'incomingWebhooks'; + | 'incomingWebhooks' + | 'celebrateUnleash' + | 'increaseUnleashWidth'; export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>; @@ -146,6 +148,14 @@ const flags: IFlags = { process.env.UNLEASH_EXPERIMENTAL_INCOMING_WEBHOOKS, false, ), + celebrateUnleash: parseEnvVarBoolean( + process.env.UNLEASH_EXPERIMENTAL_CELEBRATE_UNLEASH, + false, + ), + increaseUnleashWidth: parseEnvVarBoolean( + process.env.UNLEASH_EXPERIMENTAL_INCREASE_UNLEASH_WIDTH, + false, + ), }; export const defaultExperimentalOptions: IExperimentalOptions = { diff --git a/src/server-dev.ts b/src/server-dev.ts index f41cbdb17d..81190f7db2 100644 --- a/src/server-dev.ts +++ b/src/server-dev.ts @@ -46,6 +46,8 @@ process.nextTick(async () => { stripClientHeadersOn304: true, newStrategyConfiguration: true, stripHeadersOnAPI: true, + celebrateUnleash: true, + increaseUnleashWidth: true, }, }, authentication: {