chore: remove frontendHeaderRedesign flag (#9428)

Removes all references to the flag and deletes unused components.

frontend/src/component/commandBar/CommandBar.tsx

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

frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx

@@ -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 { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import { useEffect, useMemo } from 'react';
 import { timeSpanOptions } from '../EventTimelineProvider';
-import CloseIcon from '@mui/icons-material/Close';
 import { useEventTimelineContext } from '../EventTimelineContext';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
-import { EventTimelineHeaderTip } from './EventTimelineHeaderTip';
-import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledCol = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -50,7 +41,6 @@ export const EventTimelineHeader = ({
     const { timeSpan, environment, setOpen, setTimeSpan, setEnvironment } =
         useEventTimelineContext();
     const { environments } = useEnvironments();
-    const frontendHeaderRefactor = useUiFlag('frontendHeaderRedesign');
 
     const activeEnvironments = useMemo(
         () => environments.filter(({ enabled }) => enabled),
@@ -123,36 +113,10 @@ export const EventTimelineHeader = ({
                     {totalEvents === 1 ? '' : 's'}
                     <HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
                 </StyledTimelineEventsCount>
-                {!frontendHeaderRefactor && <TimeSpanFilter />}
             </StyledCol>
             <StyledCol>
-                {frontendHeaderRefactor ? (
+                <TimeSpanFilter />
-                    <>
+                <EnvironmentFilter />
-                        <TimeSpanFilter />
-                        <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>
         </>
     );

frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeaderTip.tsx

@@ -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;
-};

frontend/src/component/layout/MainLayout/MainLayout.tsx

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

frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx

@@ -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>
-    );
-};

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx

@@ -75,9 +75,9 @@ test('select active item', async () => {
         { 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 () => {

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx

@@ -103,7 +103,6 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
 }) => {
     const { routes } = useRoutes();
     const celebatoryUnleash = useUiFlag('celebrateUnleash');
-    const frontendHeaderRedesign = useUiFlag('frontendHeaderRedesign');
 
     const [mode, setMode] = useNavigationMode();
     const [expanded, changeExpanded] = useExpanded<'configure' | 'admin'>();
@@ -124,45 +123,38 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
     return (
         <StretchContainer mode={mode}>
             <ConditionallyRender
-                condition={frontendHeaderRedesign}
+                condition={mode === 'full'}
                 show={
-                    <ConditionallyRender
+                    <StyledLink to='/' sx={flexRow} aria-label='Home'>
-                        condition={mode === 'full'}
+                        <ThemeMode
-                        show={
+                            darkmode={
-                            <StyledLink to='/' sx={flexRow} aria-label='Home'>
+                                <ConditionallyRender
-                                <ThemeMode
+                                    condition={celebatoryUnleash}
-                                    darkmode={
+                                    show={<CelebatoryUnleashLogoWhite />}
-                                        <ConditionallyRender
+                                    elseShow={
-                                            condition={celebatoryUnleash}
+                                        <StyledUnleashLogoWhite aria-label='Unleash logo' />
-                                            show={
-                                                <CelebatoryUnleashLogoWhite />
-                                            }
-                                            elseShow={
-                                                <StyledUnleashLogoWhite aria-label='Unleash logo' />
-                                            }
-                                        />
-                                    }
-                                    lightmode={
-                                        <ConditionallyRender
-                                            condition={celebatoryUnleash}
-                                            show={<StyledCelebatoryLogo />}
-                                            elseShow={
-                                                <StyledUnleashLogo aria-label='Unleash logo' />
-                                            }
-                                        />
                                     }
                                 />
-                            </StyledLink>
+                            }
-                        }
+                            lightmode={
-                        elseShow={
+                                <ConditionallyRender
-                            <StyledLink to='/' sx={flexRow} aria-label='Home'>
+                                    condition={celebatoryUnleash}
-                                <ThemeMode
+                                    show={<StyledCelebatoryLogo />}
-                                    darkmode={<StyledUnleashLogoOnlyWhite />}
+                                    elseShow={
-                                    lightmode={<StyledUnleashLogoOnly />}
+                                        <StyledUnleashLogo aria-label='Unleash logo' />
+                                    }
                                 />
-                            </StyledLink>
+                            }
-                        }
+                        />
-                    />
+                    </StyledLink>
+                }
+                elseShow={
+                    <StyledLink to='/' sx={flexRow} aria-label='Home'>
+                        <ThemeMode
+                            darkmode={<StyledUnleashLogoOnlyWhite />}
+                            lightmode={<StyledUnleashLogoOnly />}
+                        />
+                    </StyledLink>
                 }
             />
 

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

@@ -2,6 +2,10 @@
 
 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",
     "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`] = `
 [
+  {
+    "icon": null,
+    "text": ".cls-1{fill:#1a4049;}.cls-2{fill:#fff;}.cls-3{fill:#817afe;}",
+  },
   {
     "icon": "DashboardOutlinedIcon",
     "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`] = `
 [
+  {
+    "icon": null,
+    "text": ".cls-1{fill:#1a4049;}.cls-2{fill:#fff;}.cls-3{fill:#817afe;}",
+  },
   {
     "icon": "DashboardOutlinedIcon",
     "text": "Dashboard",

frontend/src/component/menu/Header/Header.tsx

@@ -17,50 +17,41 @@ import MenuBookIcon from '@mui/icons-material/MenuBook';
 import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
 import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.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 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 DarkModeOutlined from '@mui/icons-material/DarkModeOutlined';
 import LightModeOutlined from '@mui/icons-material/LightModeOutlined';
 import { filterByConfig, mapRouteLink } from 'component/common/util';
-import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 import { useThemeMode } from 'hooks/useThemeMode';
 import { Notifications } from 'component/common/Notifications/Notifications';
 import { useAdminRoutes } from 'component/admin/useAdminRoutes';
 import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton';
 import { useUiFlag } from 'hooks/useUiFlag';
 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 }>(
+    padding: theme.spacing(1),
-    ({ theme, frontendHeaderRedesign }) => ({
+    boxShadow: 'none',
-        backgroundColor: frontendHeaderRedesign
+    position: 'relative',
-            ? theme.palette.background.application
+    zIndex: 300,
-            : theme.palette.background.paper,
+    paddingRight: theme.spacing(9),
-        padding: theme.spacing(1),
+    [theme.breakpoints.down('lg')]: {
-        boxShadow: 'none',
+        paddingLeft: theme.spacing(1),
-        position: 'relative',
+        paddingRight: theme.spacing(1),
-        zIndex: 300,
+    },
-        paddingRight: theme.spacing(9),
+    [theme.breakpoints.down(1024)]: {
-        [theme.breakpoints.down('lg')]: {
+        marginLeft: 0,
-            paddingLeft: theme.spacing(1),
+        marginRight: 0,
-            paddingRight: theme.spacing(1),
+    },
-        },
+    [theme.breakpoints.down('sm')]: {
-        [theme.breakpoints.down(1024)]: {
+        minWidth: '100%',
-            marginLeft: 0,
+    },
-            marginRight: 0,
+    margin: '0 auto',
-        },
+}));
-        [theme.breakpoints.down('sm')]: {
-            minWidth: '100%',
-        },
-        margin: '0 auto',
-    }),
-);
 
 const ContainerComponent = styled(Box)(() => ({
     display: 'flex',
@@ -113,7 +104,6 @@ const Header = () => {
     const [openDrawer, setOpenDrawer] = useState(false);
     const toggleDrawer = () => setOpenDrawer((prev) => !prev);
     const celebatoryUnleash = useUiFlag('celebrateUnleash');
-    const frontendHeaderRedesign = useUiFlag('frontendHeaderRedesign');
 
     const routes = getRoutes();
     const adminRoutes = useAdminRoutes();
@@ -130,10 +120,7 @@ const Header = () => {
 
     if (smallScreen) {
         return (
-            <HeaderComponent
+            <HeaderComponent position='static'>
-                position='static'
-                frontendHeaderRedesign={frontendHeaderRedesign}
-            >
                 <ContainerComponent>
                     <Tooltip title='Menu' arrow>
                         <IconButton
@@ -163,59 +150,19 @@ const Header = () => {
     }
 
     return (
-        <HeaderComponent
+        <HeaderComponent position='static'>
-            frontendHeaderRedesign={frontendHeaderRedesign}
-            position='static'
-        >
             <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>
                     <StyledUserContainer>
                         <CommandBar />
-                        <ConditionallyRender
+                        <Divider
-                            condition={frontendHeaderRedesign}
+                            orientation='vertical'
-                            show={
+                            variant='middle'
-                                <Divider
+                            flexItem
-                                    orientation='vertical'
+                            sx={(theme) => ({
-                                    variant='middle'
+                                marginLeft: theme.spacing(1),
-                                    flexItem
+                                border: 'transparent',
-                                    sx={(theme) => ({
+                            })}
-                                        marginLeft: theme.spacing(1),
-                                        border: 'transparent',
-                                    })}
-                                />
-                            }
-                        />
-                        <ConditionallyRender
-                            condition={!frontendHeaderRedesign}
-                            show={<HeaderEventTimelineButton />}
                         />
                         <InviteLinkButton />
                         <Tooltip

frontend/src/component/personalDashboard/PersonalDashboard.tsx

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

frontend/src/interfaces/uiConfig.ts

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

frontend/src/utils/testRenderer.tsx

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

src/lib/types/experimental.ts

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

src/server-dev.ts

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