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

chore: remove frontendHeaderRedesign flag (#9428)

Browse Source 
Removes all references to the flag and deletes unused components.
This commit is contained in:
Thomas Heartman 2025-03-05 09:40:53 +01:00 committed by GitHub
parent e7ac42080d
commit a50fb7db35
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 91 additions and 347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/component/commandBar/CommandBar.tsx
View File

@ -30,7 +30,6 @@ import { CommandQuickSuggestions } from './CommandQuickSuggestions';
import { CommandSearchPages } from './CommandSearchPages'; import { CommandSearchPages } from './CommandSearchPages';
import { CommandBarFeedback } from './CommandBarFeedback'; import { CommandBarFeedback } from './CommandBarFeedback';
import { RecentlyVisitedRecorder } from './RecentlyVisitedRecorder'; import { RecentlyVisitedRecorder } from './RecentlyVisitedRecorder';
import { useUiFlag } from 'hooks/useUiFlag';
import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly'; import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
export const CommandResultsPaper = styled(Paper)(({ theme }) => ({ export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
@ -52,20 +51,16 @@ export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
})); }));
const StyledContainer = styled('div', { const StyledContainer = styled('div', {
shouldForwardProp: (prop) => shouldForwardProp: (prop) => prop !== 'active',
prop !== 'active' && prop !== 'frontendHeaderRedesign',
})<{ })<{
active: boolean | undefined; active: boolean | undefined;
frontendHeaderRedesign?: boolean; }>(({ theme, active }) => ({
}>(({ theme, active, frontendHeaderRedesign }) => ({
border: `1px solid transparent`, border: `1px solid transparent`,
display: 'flex', display: 'flex',
flexGrow: 1, flexGrow: 1,
alignItems: 'center', alignItems: 'center',
position: 'relative', position: 'relative',
backgroundColor: frontendHeaderRedesign backgroundColor: theme.palette.background.application,
? theme.palette.background.application
: theme.palette.background.paper,
maxWidth: active ? '100%' : '400px', maxWidth: active ? '100%' : '400px',
[theme.breakpoints.down('md')]: { [theme.breakpoints.down('md')]: {
marginTop: theme.spacing(1), marginTop: theme.spacing(1),
@ -73,16 +68,10 @@ const StyledContainer = styled('div', {
}, },
})); }));
const StyledSearch = styled('div', { const StyledSearch = styled('div')(({ theme }) => ({
shouldForwardProp: (prop) => prop !== 'frontendHeaderRedesign',
})<{
frontendHeaderRedesign?: boolean;
}>(({ theme, frontendHeaderRedesign }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
backgroundColor: frontendHeaderRedesign backgroundColor: theme.palette.background.paper,
? theme.palette.background.paper
: theme.palette.background.elevation1,
border: `1px solid ${theme.palette.neutral.border}`, border: `1px solid ${theme.palette.neutral.border}`,
borderRadius: theme.shape.borderRadiusExtraLarge, borderRadius: theme.shape.borderRadiusExtraLarge,
padding: '3px 5px 3px 12px', padding: '3px 5px 3px 12px',
@ -90,16 +79,10 @@ const StyledSearch = styled('div', {
zIndex: 3, zIndex: 3,
})); }));
const StyledInputBase = styled(InputBase, { const StyledInputBase = styled(InputBase)(({ theme }) => ({
shouldForwardProp: (prop) => prop !== 'frontendHeaderRedesign',
})<{
frontendHeaderRedesign?: boolean;
}>(({ theme, frontendHeaderRedesign }) => ({
width: '100%', width: '100%',
minWidth: '300px', minWidth: '300px',
backgroundColor: frontendHeaderRedesign backgroundColor: theme.palette.background.paper,
? theme.palette.background.paper
: theme.palette.background.elevation1,
})); }));
const StyledClose = styled(Close)(({ theme }) => ({ const StyledClose = styled(Close)(({ theme }) => ({
@ -115,7 +98,6 @@ interface IPageRouteInfo {
export const CommandBar = () => { export const CommandBar = () => {
const { trackEvent } = usePlausibleTracker(); const { trackEvent } = usePlausibleTracker();
const frontendHeaderRedesign = useUiFlag('frontendHeaderRedesign');
const searchInputRef = useRef<HTMLInputElement>(null); const searchInputRef = useRef<HTMLInputElement>(null);
const searchContainerRef = useRef<HTMLInputElement>(null); const searchContainerRef = useRef<HTMLInputElement>(null);
const [showSuggestions, setShowSuggestions] = useState(false); const [showSuggestions, setShowSuggestions] = useState(false);
@ -322,14 +304,9 @@ export const CommandBar = () => {
}; };
return ( return (
<StyledContainer <StyledContainer ref={searchContainerRef} active={showSuggestions}>
ref={searchContainerRef}
active={showSuggestions}
frontendHeaderRedesign={frontendHeaderRedesign}
>
<RecentlyVisitedRecorder /> <RecentlyVisitedRecorder />
<StyledSearch <StyledSearch
frontendHeaderRedesign={frontendHeaderRedesign}
sx={{ sx={{
borderBottomLeftRadius: (theme) => borderBottomLeftRadius: (theme) =>
showSuggestions showSuggestions
@ -357,7 +334,6 @@ export const CommandBar = () => {
</ScreenReaderOnly> </ScreenReaderOnly>
<StyledInputBase <StyledInputBase
id='command-bar-input' id='command-bar-input'
frontendHeaderRedesign={frontendHeaderRedesign}
inputRef={searchInputRef} inputRef={searchInputRef}
placeholder={placeholder} placeholder={placeholder}
inputProps={{ inputProps={{

38
frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
View File

@ -1,20 +1,11 @@
import { import { MenuItem, styled, TextField } from '@mui/material';
IconButton,
MenuItem,
styled,
TextField,
Tooltip,
} from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments'; import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
import { useEffect, useMemo } from 'react'; import { useEffect, useMemo } from 'react';
import { timeSpanOptions } from '../EventTimelineProvider'; import { timeSpanOptions } from '../EventTimelineProvider';
import CloseIcon from '@mui/icons-material/Close';
import { useEventTimelineContext } from '../EventTimelineContext'; import { useEventTimelineContext } from '../EventTimelineContext';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import { EventTimelineHeaderTip } from './EventTimelineHeaderTip';
import { useUiFlag } from 'hooks/useUiFlag';
const StyledCol = styled('div')(({ theme }) => ({ const StyledCol = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
@ -50,7 +41,6 @@ export const EventTimelineHeader = ({
const { timeSpan, environment, setOpen, setTimeSpan, setEnvironment } = const { timeSpan, environment, setOpen, setTimeSpan, setEnvironment } =
useEventTimelineContext(); useEventTimelineContext();
const { environments } = useEnvironments(); const { environments } = useEnvironments();
const frontendHeaderRefactor = useUiFlag('frontendHeaderRedesign');
const activeEnvironments = useMemo( const activeEnvironments = useMemo(
() => environments.filter(({ enabled }) => enabled), () => environments.filter(({ enabled }) => enabled),
@ -123,36 +113,10 @@ export const EventTimelineHeader = ({
{totalEvents === 1 ? '' : 's'} {totalEvents === 1 ? '' : 's'}
<HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' /> <HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
</StyledTimelineEventsCount> </StyledTimelineEventsCount>
{!frontendHeaderRefactor && <TimeSpanFilter />}
</StyledCol> </StyledCol>
<StyledCol> <StyledCol>
{frontendHeaderRefactor ? (
<>
<TimeSpanFilter /> <TimeSpanFilter />
<EnvironmentFilter /> <EnvironmentFilter />
</>
) : (
<>
<EventTimelineHeaderTip />
<EnvironmentFilter />
<Tooltip title='Hide event timeline' arrow>
<IconButton
aria-label='close'
size='small'
onClick={() => {
trackEvent('event-timeline', {
props: {
eventType: 'close',
},
});
setOpen(false);
}}
>
<CloseIcon />
</IconButton>
</Tooltip>
</>
)}
</StyledCol> </StyledCol>
</> </>
); );

75
frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeaderTip.tsx
View File

@ -1,75 +0,0 @@
import { Chip, styled } from '@mui/material';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useUiFlag } from 'hooks/useUiFlag';
import { useEventTimelineContext } from '../EventTimelineContext';
import { Link, useNavigate } from 'react-router-dom';
import SensorsIcon from '@mui/icons-material/Sensors';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { useSignalQuery } from 'hooks/api/getters/useSignalQuery/useSignalQuery';
import { startOfDay, sub } from 'date-fns';
const StyledTip = styled('div')({
display: 'flex',
alignItems: 'center',
});
const StyledSignalIcon = styled(SensorsIcon)(({ theme }) => ({
'&&&': {
color: theme.palette.primary.main,
},
}));
const signalsLink = '/integrations/signals';
const toISODateString = (date: Date) => date.toISOString().split('T')[0];
export const EventTimelineHeaderTip = () => {
const navigate = useNavigate();
const { timeSpan } = useEventTimelineContext();
const endDate = new Date();
const startDate = sub(endDate, timeSpan.value);
const { signals, loading: signalsLoading } = useSignalQuery({
from: `IS:${toISODateString(startOfDay(startDate))}`,
to: `IS:${toISODateString(endDate)}`,
});
const { signalsSuggestionSeen, setSignalsSuggestionSeen } =
useEventTimelineContext();
const { isEnterprise } = useUiConfig();
const signalsEnabled = useUiFlag('signals');
const { trackEvent } = usePlausibleTracker();
if (
!signalsSuggestionSeen &&
isEnterprise() &&
signalsEnabled &&
!signalsLoading &&
signals.length === 0
) {
return (
<StyledTip>
<Chip
size='small'
icon={<StyledSignalIcon />}
label={
<>
See <Link to={signalsLink}>signals</Link> from
external sources in real-time within Unleash
</>
}
onClick={() => {
trackEvent('event-timeline', {
props: {
eventType: 'signals clicked',
},
});
navigate(signalsLink);
}}
onDelete={() => setSignalsSuggestionSeen(true)}
/>
</StyledTip>
);
}
return null;
};

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

@ -15,10 +15,8 @@ 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 { NavigationSidebar } from './NavigationSidebar/NavigationSidebar'; import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar';
import { MainLayoutEventTimeline } from './MainLayoutEventTimeline';
import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider'; import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider';
import { NewInUnleash } from './NavigationSidebar/NewInUnleash/NewInUnleash'; import { NewInUnleash } from './NavigationSidebar/NewInUnleash/NewInUnleash';
import { useUiFlag } from 'hooks/useUiFlag';
interface IMainLayoutProps { interface IMainLayoutProps {
children: ReactNode; children: ReactNode;
@ -94,7 +92,6 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
({ children }, ref) => { ({ children }, ref) => {
const { uiConfig } = useUiConfig(); const { uiConfig } = useUiConfig();
const projectId = useOptionalPathParam('projectId'); const projectId = useOptionalPathParam('projectId');
const frontendHeaderRedesign = useUiFlag('frontendHeaderRedesign');
const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled( const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
projectId || '', projectId || '',
); );
@ -105,11 +102,6 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
return ( return (
<EventTimelineProvider> <EventTimelineProvider>
<SkipNavLink /> <SkipNavLink />
<ConditionallyRender
condition={!frontendHeaderRedesign}
show={<Header />}
/>
<MainLayoutContainer> <MainLayoutContainer>
<MainLayoutContentWrapper> <MainLayoutContentWrapper>
<ConditionallyRender <ConditionallyRender
@ -123,9 +115,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
<Box <Box
sx={(theme) => ({ sx={(theme) => ({
display: 'flex', display: 'flex',
mt: frontendHeaderRedesign mt: 0,
? 0
: theme.spacing(0.25),
})} })}
> >
<ConditionallyRender <ConditionallyRender
@ -145,15 +135,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
minWidth: 0, minWidth: 0,
}} }}
> >
<ConditionallyRender <Header />
condition={frontendHeaderRedesign}
show={<Header />}
/>
<ConditionallyRender
condition={!frontendHeaderRedesign}
show={<MainLayoutEventTimeline />}
/>
<MainLayoutContent> <MainLayoutContent>
<SkipNavTarget /> <SkipNavTarget />

48
frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx
View File

@ -1,48 +0,0 @@
import { Box, styled } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { EventTimeline } from 'component/events/EventTimeline/EventTimeline';
import { useEventTimelineContext } from 'component/events/EventTimeline/EventTimelineContext';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useEffect, useState } from 'react';
const StyledEventTimelineSlider = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
height: '120px',
overflow: 'hidden',
boxShadow: theme.boxShadows.popup,
borderLeft: `1px solid ${theme.palette.background.application}`,
}));
const StyledEventTimelineWrapper = styled(Box)(({ theme }) => ({
padding: theme.spacing(1.5, 2),
}));
export const MainLayoutEventTimeline = () => {
const { isOss } = useUiConfig();
const { open: showTimeline } = useEventTimelineContext();
const [isInitialLoad, setIsInitialLoad] = useState(true);
const open = showTimeline && !isOss();
useEffect(() => {
setIsInitialLoad(false);
}, []);
return (
<StyledEventTimelineSlider
sx={{
transition: isInitialLoad
? 'none'
: 'max-height 0.3s ease-in-out',
maxHeight: open ? '120px' : '0',
}}
>
<StyledEventTimelineWrapper>
<ConditionallyRender
condition={open}
show={<EventTimeline />}
/>
</StyledEventTimelineWrapper>
</StyledEventTimelineSlider>
);
};

4
frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx
View File

@ -75,9 +75,9 @@ test('select active item', async () => {
{ route: '/search' }, { route: '/search' },
); );
const links = screen.getAllByRole('link'); const searchLink = screen.getByRole('link', { name: 'Search' });
expect(links[2]).toHaveClass(classes.selected); expect(searchLink).toHaveClass(classes.selected);
}); });
test('print recent projects and flags', async () => { test('print recent projects and flags', async () => {

10
frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
View File

@ -103,7 +103,6 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
}) => { }) => {
const { routes } = useRoutes(); const { routes } = useRoutes();
const celebatoryUnleash = useUiFlag('celebrateUnleash'); const celebatoryUnleash = useUiFlag('celebrateUnleash');
const frontendHeaderRedesign = useUiFlag('frontendHeaderRedesign');
const [mode, setMode] = useNavigationMode(); const [mode, setMode] = useNavigationMode();
const [expanded, changeExpanded] = useExpanded<'configure' | 'admin'>(); const [expanded, changeExpanded] = useExpanded<'configure' | 'admin'>();
@ -123,9 +122,6 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
return ( return (
<StretchContainer mode={mode}> <StretchContainer mode={mode}>
<ConditionallyRender
condition={frontendHeaderRedesign}
show={
<ConditionallyRender <ConditionallyRender
condition={mode === 'full'} condition={mode === 'full'}
show={ show={
@ -134,9 +130,7 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
darkmode={ darkmode={
<ConditionallyRender <ConditionallyRender
condition={celebatoryUnleash} condition={celebatoryUnleash}
show={ show={<CelebatoryUnleashLogoWhite />}
<CelebatoryUnleashLogoWhite />
}
elseShow={ elseShow={
<StyledUnleashLogoWhite aria-label='Unleash logo' /> <StyledUnleashLogoWhite aria-label='Unleash logo' />
} }
@ -163,8 +157,6 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
</StyledLink> </StyledLink>
} }
/> />
}
/>
<PrimaryNavigationList <PrimaryNavigationList
mode={mode} mode={mode}

12
frontend/src/component/layout/MainLayout/NavigationSidebar/__snapshots__/NavigationSidebar.test.tsx.snap
View File

@ -2,6 +2,10 @@
exports[`order of items in navigation > menu for enterprise plan 1`] = ` exports[`order of items in navigation > menu for enterprise plan 1`] = `
[ [
{
"icon": null,
"text": ".cls-1{fill:#1a4049;}.cls-2{fill:#fff;}.cls-3{fill:#817afe;}",
},
{ {
"icon": "DashboardOutlinedIcon", "icon": "DashboardOutlinedIcon",
"text": "Dashboard", "text": "Dashboard",
@ -111,6 +115,10 @@ exports[`order of items in navigation > menu for enterprise plan 1`] = `
exports[`order of items in navigation > menu for open-source 1`] = ` exports[`order of items in navigation > menu for open-source 1`] = `
[ [
{
"icon": null,
"text": ".cls-1{fill:#1a4049;}.cls-2{fill:#fff;}.cls-3{fill:#817afe;}",
},
{ {
"icon": "DashboardOutlinedIcon", "icon": "DashboardOutlinedIcon",
"text": "Dashboard", "text": "Dashboard",
@ -184,6 +192,10 @@ exports[`order of items in navigation > menu for open-source 1`] = `
exports[`order of items in navigation > menu for pro plan 1`] = ` exports[`order of items in navigation > menu for pro plan 1`] = `
[ [
{
"icon": null,
"text": ".cls-1{fill:#1a4049;}.cls-2{fill:#fff;}.cls-3{fill:#817afe;}",
},
{ {
"icon": "DashboardOutlinedIcon", "icon": "DashboardOutlinedIcon",
"text": "Dashboard", "text": "Dashboard",

65
frontend/src/component/menu/Header/Header.tsx
View File

@ -17,31 +17,23 @@ import MenuBookIcon from '@mui/icons-material/MenuBook';
import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg'; import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg'; import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg';
import { ReactComponent as CelebatoryUnleashLogo } from 'assets/img/unleashHoliday.svg'; import { ReactComponent as CelebatoryUnleashLogo } from 'assets/img/unleashHoliday.svg';
import { ReactComponent as CelebatoryUnleashLogoWhite } from 'assets/img/unleashHolidayDark.svg';
import { DrawerMenu } from './DrawerMenu/DrawerMenu'; import { DrawerMenu } from './DrawerMenu/DrawerMenu';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { flexRow, focusable } from 'themes/themeStyles'; import { focusable } from 'themes/themeStyles';
import { getCondensedRoutes, getRoutes } from 'component/menu/routes'; import { getCondensedRoutes, getRoutes } from 'component/menu/routes';
import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'; import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined';
import LightModeOutlined from '@mui/icons-material/LightModeOutlined'; import LightModeOutlined from '@mui/icons-material/LightModeOutlined';
import { filterByConfig, mapRouteLink } from 'component/common/util'; import { filterByConfig, mapRouteLink } from 'component/common/util';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
import { useThemeMode } from 'hooks/useThemeMode'; import { useThemeMode } from 'hooks/useThemeMode';
import { Notifications } from 'component/common/Notifications/Notifications'; import { Notifications } from 'component/common/Notifications/Notifications';
import { useAdminRoutes } from 'component/admin/useAdminRoutes'; import { useAdminRoutes } from 'component/admin/useAdminRoutes';
import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton'; import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
import { CommandBar } from 'component/commandBar/CommandBar'; import { CommandBar } from 'component/commandBar/CommandBar';
import { HeaderEventTimelineButton } from './HeaderEventTimelineButton';
const HeaderComponent = styled(AppBar, { const HeaderComponent = styled(AppBar)(({ theme }) => ({
shouldForwardProp: (prop) => prop !== 'frontendHeaderRedesign', backgroundColor: theme.palette.background.application,
})<{ frontendHeaderRedesign?: boolean }>(
({ theme, frontendHeaderRedesign }) => ({
backgroundColor: frontendHeaderRedesign
? theme.palette.background.application
: theme.palette.background.paper,
padding: theme.spacing(1), padding: theme.spacing(1),
boxShadow: 'none', boxShadow: 'none',
position: 'relative', position: 'relative',
@ -59,8 +51,7 @@ const HeaderComponent = styled(AppBar, {
minWidth: '100%', minWidth: '100%',
}, },
margin: '0 auto', margin: '0 auto',
}), }));
);
const ContainerComponent = styled(Box)(() => ({ const ContainerComponent = styled(Box)(() => ({
display: 'flex', display: 'flex',
@ -113,7 +104,6 @@ const Header = () => {
const [openDrawer, setOpenDrawer] = useState(false); const [openDrawer, setOpenDrawer] = useState(false);
const toggleDrawer = () => setOpenDrawer((prev) => !prev); const toggleDrawer = () => setOpenDrawer((prev) => !prev);
const celebatoryUnleash = useUiFlag('celebrateUnleash'); const celebatoryUnleash = useUiFlag('celebrateUnleash');
const frontendHeaderRedesign = useUiFlag('frontendHeaderRedesign');
const routes = getRoutes(); const routes = getRoutes();
const adminRoutes = useAdminRoutes(); const adminRoutes = useAdminRoutes();
@ -130,10 +120,7 @@ const Header = () => {
if (smallScreen) { if (smallScreen) {
return ( return (
<HeaderComponent <HeaderComponent position='static'>
position='static'
frontendHeaderRedesign={frontendHeaderRedesign}
>
<ContainerComponent> <ContainerComponent>
<Tooltip title='Menu' arrow> <Tooltip title='Menu' arrow>
<IconButton <IconButton
@ -163,45 +150,11 @@ const Header = () => {
} }
return ( return (
<HeaderComponent <HeaderComponent position='static'>
frontendHeaderRedesign={frontendHeaderRedesign}
position='static'
>
<ContainerComponent> <ContainerComponent>
<ConditionallyRender
condition={!frontendHeaderRedesign}
show={
<StyledLink to='/' sx={flexRow} aria-label='Home'>
<ThemeMode
darkmode={
<ConditionallyRender
condition={celebatoryUnleash}
show={<CelebatoryUnleashLogoWhite />}
elseShow={
<StyledUnleashLogoWhite aria-label='Unleash logo' />
}
/>
}
lightmode={
<ConditionallyRender
condition={celebatoryUnleash}
show={<StyledCelebatoryLogo />}
elseShow={
<StyledUnleashLogo aria-label='Unleash logo' />
}
/>
}
/>
</StyledLink>
}
/>
<StyledNav> <StyledNav>
<StyledUserContainer> <StyledUserContainer>
<CommandBar /> <CommandBar />
<ConditionallyRender
condition={frontendHeaderRedesign}
show={
<Divider <Divider
orientation='vertical' orientation='vertical'
variant='middle' variant='middle'
@ -211,12 +164,6 @@ const Header = () => {
border: 'transparent', border: 'transparent',
})} })}
/> />
}
/>
<ConditionallyRender
condition={!frontendHeaderRedesign}
show={<HeaderEventTimelineButton />}
/>
<InviteLinkButton /> <InviteLinkButton />
<Tooltip <Tooltip
title={ title={

4
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

@ -26,7 +26,6 @@ import { InfoSection } from './InfoSection';
import { EventTimeline } from 'component/events/EventTimeline/EventTimeline'; import { EventTimeline } from 'component/events/EventTimeline/EventTimeline';
import { AccordionContent } from './SharedComponents'; import { AccordionContent } from './SharedComponents';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useUiFlag } from 'hooks/useUiFlag';
const WelcomeSection = styled('div')(({ theme }) => ({ const WelcomeSection = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
@ -277,7 +276,6 @@ export const PersonalDashboard = () => {
const { splash } = useAuthSplash(); const { splash } = useAuthSplash();
const { isOss } = useUiConfig(); const { isOss } = useUiConfig();
const name = user?.name || ''; const name = user?.name || '';
const showTimelinePanel = useUiFlag('frontendHeaderRedesign');
usePageTitle(name ? `Dashboard: ${name}` : 'Dashboard'); usePageTitle(name ? `Dashboard: ${name}` : 'Dashboard');
@ -324,7 +322,7 @@ export const PersonalDashboard = () => {
</ViewKeyConceptsButton> </ViewKeyConceptsButton>
</WelcomeSection> </WelcomeSection>
{showTimelinePanel && <EventTimelinePanel />} <EventTimelinePanel />
<ProjectPanel /> <ProjectPanel />

1
frontend/src/interfaces/uiConfig.ts
View File

@ -90,7 +90,6 @@ export type UiFlags = {
showUserDeviceCount?: boolean; showUserDeviceCount?: boolean;
flagOverviewRedesign?: boolean; flagOverviewRedesign?: boolean;
granularAdminPermissions?: boolean; granularAdminPermissions?: boolean;
frontendHeaderRedesign?: boolean;
dataUsageMultiMonthView?: boolean; dataUsageMultiMonthView?: boolean;
consumptionModel?: boolean; consumptionModel?: boolean;
edgeObservability?: boolean; edgeObservability?: boolean;

3
frontend/src/utils/testRenderer.tsx
View File

@ -15,6 +15,7 @@ import { QueryParamProvider } from 'use-query-params';
import { FeedbackProvider } from 'component/feedbackNew/FeedbackProvider'; import { FeedbackProvider } from 'component/feedbackNew/FeedbackProvider';
import { StickyProvider } from 'component/common/Sticky/StickyProvider'; import { StickyProvider } from 'component/common/Sticky/StickyProvider';
import { HighlightProvider } from 'component/common/Highlight/HighlightProvider'; import { HighlightProvider } from 'component/common/Highlight/HighlightProvider';
import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider';
export const render = ( export const render = (
ui: JSX.Element, ui: JSX.Element,
@ -52,7 +53,9 @@ export const render = (
<AnnouncerProvider> <AnnouncerProvider>
<StickyProvider> <StickyProvider>
<HighlightProvider> <HighlightProvider>
<EventTimelineProvider>
{children} {children}
</EventTimelineProvider>
</HighlightProvider> </HighlightProvider>
</StickyProvider> </StickyProvider>
</AnnouncerProvider> </AnnouncerProvider>

5
src/lib/types/experimental.ts
View File

@ -62,7 +62,6 @@ export type IFlagKey =
| 'etagVariant' | 'etagVariant'
| 'deltaApi' | 'deltaApi'
| 'uniqueSdkTracking' | 'uniqueSdkTracking'
| 'frontendHeaderRedesign'
| 'dataUsageMultiMonthView' | 'dataUsageMultiMonthView'
| 'consumptionModel' | 'consumptionModel'
| 'teamsIntegrationChangeRequests' | 'teamsIntegrationChangeRequests'
@ -300,10 +299,6 @@ const flags: IFlags = {
process.env.UNLEASH_EXPERIMENTAL_UNIQUE_SDK_TRACKING, process.env.UNLEASH_EXPERIMENTAL_UNIQUE_SDK_TRACKING,
false, false,
), ),
frontendHeaderRedesign: parseEnvVarBoolean(
process.env.UNLEASH_EXPERIMENTAL_FRONTEND_HEADER_REDESIGN,
false,
),
dataUsageMultiMonthView: parseEnvVarBoolean( dataUsageMultiMonthView: parseEnvVarBoolean(
process.env.UNLEASH_EXPERIMENTAL_DATA_USAGE_MULTI_MONTH_VIEW, process.env.UNLEASH_EXPERIMENTAL_DATA_USAGE_MULTI_MONTH_VIEW,
false, false,

1
src/server-dev.ts
View File

@ -56,7 +56,6 @@ process.nextTick(async () => {
granularAdminPermissions: true, granularAdminPermissions: true,
deltaApi: true, deltaApi: true,
uniqueSdkTracking: true, uniqueSdkTracking: true,
frontendHeaderRedesign: true,
dataUsageMultiMonthView: true, dataUsageMultiMonthView: true,
filterExistingFlagNames: true, filterExistingFlagNames: true,
teamsIntegrationChangeRequests: true, teamsIntegrationChangeRequests: true,