chore: remove frontendHeaderRedesign flag (#9428)

Removes all references to the flag and deletes unused components.

Author: thomasheartman

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,54 +51,38 @@ export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
 }));
 
 const StyledContainer = styled('div', {
-    shouldForwardProp: (prop) =>
-        prop !== 'active' && prop !== 'frontendHeaderRedesign',
+    shouldForwardProp: (prop) => prop !== 'active',
 })<{
     active: boolean | undefined;
-    frontendHeaderRedesign?: boolean;
-}>(({ theme, active, frontendHeaderRedesign }) => ({
+}>(({ theme, active }) => ({
     border: `1px solid transparent`,
     display: 'flex',
     flexGrow: 1,
     alignItems: 'center',
     position: 'relative',
-    backgroundColor: frontendHeaderRedesign
-        ? theme.palette.background.application
-        : theme.palette.background.paper,
+    backgroundColor: theme.palette.background.application,
     maxWidth: active ? '100%' : '400px',
     [theme.breakpoints.down('md')]: {
         marginTop: theme.spacing(1),
         maxWidth: '100%',
     },
 }));
 
-const StyledSearch = styled('div', {
-    shouldForwardProp: (prop) => prop !== 'frontendHeaderRedesign',
-})<{
-    frontendHeaderRedesign?: boolean;
-}>(({ theme, frontendHeaderRedesign }) => ({
+const StyledSearch = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    backgroundColor: frontendHeaderRedesign
-        ? theme.palette.background.paper
-        : theme.palette.background.elevation1,
+    backgroundColor: theme.palette.background.paper,
     border: `1px solid ${theme.palette.neutral.border}`,
     borderRadius: theme.shape.borderRadiusExtraLarge,
     padding: '3px 5px 3px 12px',
     width: '100%',
     zIndex: 3,
 }));
 
-const StyledInputBase = styled(InputBase, {
-    shouldForwardProp: (prop) => prop !== 'frontendHeaderRedesign',
-})<{
-    frontendHeaderRedesign?: boolean;
-}>(({ theme, frontendHeaderRedesign }) => ({
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
     width: '100%',
     minWidth: '300px',
-    backgroundColor: frontendHeaderRedesign
-        ? theme.palette.background.paper
-        : theme.palette.background.elevation1,
+    backgroundColor: theme.palette.background.paper,
 }));
 
 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
-            ref={searchContainerRef}
-            active={showSuggestions}
-            frontendHeaderRedesign={frontendHeaderRedesign}
-        >
+        <StyledContainer ref={searchContainerRef} active={showSuggestions}>
             <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 {
-    IconButton,
-    MenuItem,
-    styled,
-    TextField,
-    Tooltip,
-} from '@mui/material';
+import { MenuItem, styled, TextField } 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 />
-                    </>
-                ) : (
-                    <>
-                        <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>
-                    </>
-                )}
+                <TimeSpanFilter />
+                <EnvironmentFilter />
             </StyledCol>
         </>
     );

frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeaderTip.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
-                                    ? 0
-                                    : theme.spacing(0.25),
+                                mt: 0,
                             })}
                         >
                             <ConditionallyRender
@@ -145,15 +135,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                                     minWidth: 0,
                                 }}
                             >
-                                <ConditionallyRender
-                                    condition={frontendHeaderRedesign}
-                                    show={<Header />}
-                                />
-
-                                <ConditionallyRender
-                                    condition={!frontendHeaderRedesign}
-                                    show={<MainLayoutEventTimeline />}
-                                />
+                                <Header />
 
                                 <MainLayoutContent>
                                     <SkipNavTarget />

frontend/src/component/layout/MainLayout/MainLayout.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 () => {