Skip to content

Commit a50fb7d

Browse files
chore: remove frontendHeaderRedesign flag (#9428)
Removes all references to the flag and deletes unused components.
1 parent e7ac420 commit a50fb7d

File tree

14 files changed

+91
-347
lines changed

14 files changed

+91
-347
lines changed

frontend/src/component/commandBar/CommandBar.tsx

+8-32
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ import { CommandQuickSuggestions } from './CommandQuickSuggestions';
3030
import { CommandSearchPages } from './CommandSearchPages';
3131
import { CommandBarFeedback } from './CommandBarFeedback';
3232
import { RecentlyVisitedRecorder } from './RecentlyVisitedRecorder';
33-
import { useUiFlag } from 'hooks/useUiFlag';
3433
import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
3534

3635
export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
@@ -52,54 +51,38 @@ export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
5251
}));
5352

5453
const StyledContainer = styled('div', {
55-
shouldForwardProp: (prop) =>
56-
prop !== 'active' && prop !== 'frontendHeaderRedesign',
54+
shouldForwardProp: (prop) => prop !== 'active',
5755
})<{
5856
active: boolean | undefined;
59-
frontendHeaderRedesign?: boolean;
60-
}>(({ theme, active, frontendHeaderRedesign }) => ({
57+
}>(({ theme, active }) => ({
6158
border: `1px solid transparent`,
6259
display: 'flex',
6360
flexGrow: 1,
6461
alignItems: 'center',
6562
position: 'relative',
66-
backgroundColor: frontendHeaderRedesign
67-
? theme.palette.background.application
68-
: theme.palette.background.paper,
63+
backgroundColor: theme.palette.background.application,
6964
maxWidth: active ? '100%' : '400px',
7065
[theme.breakpoints.down('md')]: {
7166
marginTop: theme.spacing(1),
7267
maxWidth: '100%',
7368
},
7469
}));
7570

76-
const StyledSearch = styled('div', {
77-
shouldForwardProp: (prop) => prop !== 'frontendHeaderRedesign',
78-
})<{
79-
frontendHeaderRedesign?: boolean;
80-
}>(({ theme, frontendHeaderRedesign }) => ({
71+
const StyledSearch = styled('div')(({ theme }) => ({
8172
display: 'flex',
8273
alignItems: 'center',
83-
backgroundColor: frontendHeaderRedesign
84-
? theme.palette.background.paper
85-
: theme.palette.background.elevation1,
74+
backgroundColor: theme.palette.background.paper,
8675
border: `1px solid ${theme.palette.neutral.border}`,
8776
borderRadius: theme.shape.borderRadiusExtraLarge,
8877
padding: '3px 5px 3px 12px',
8978
width: '100%',
9079
zIndex: 3,
9180
}));
9281

93-
const StyledInputBase = styled(InputBase, {
94-
shouldForwardProp: (prop) => prop !== 'frontendHeaderRedesign',
95-
})<{
96-
frontendHeaderRedesign?: boolean;
97-
}>(({ theme, frontendHeaderRedesign }) => ({
82+
const StyledInputBase = styled(InputBase)(({ theme }) => ({
9883
width: '100%',
9984
minWidth: '300px',
100-
backgroundColor: frontendHeaderRedesign
101-
? theme.palette.background.paper
102-
: theme.palette.background.elevation1,
85+
backgroundColor: theme.palette.background.paper,
10386
}));
10487

10588
const StyledClose = styled(Close)(({ theme }) => ({
@@ -115,7 +98,6 @@ interface IPageRouteInfo {
11598

11699
export const CommandBar = () => {
117100
const { trackEvent } = usePlausibleTracker();
118-
const frontendHeaderRedesign = useUiFlag('frontendHeaderRedesign');
119101
const searchInputRef = useRef<HTMLInputElement>(null);
120102
const searchContainerRef = useRef<HTMLInputElement>(null);
121103
const [showSuggestions, setShowSuggestions] = useState(false);
@@ -322,14 +304,9 @@ export const CommandBar = () => {
322304
};
323305

324306
return (
325-
<StyledContainer
326-
ref={searchContainerRef}
327-
active={showSuggestions}
328-
frontendHeaderRedesign={frontendHeaderRedesign}
329-
>
307+
<StyledContainer ref={searchContainerRef} active={showSuggestions}>
330308
<RecentlyVisitedRecorder />
331309
<StyledSearch
332-
frontendHeaderRedesign={frontendHeaderRedesign}
333310
sx={{
334311
borderBottomLeftRadius: (theme) =>
335312
showSuggestions
@@ -357,7 +334,6 @@ export const CommandBar = () => {
357334
</ScreenReaderOnly>
358335
<StyledInputBase
359336
id='command-bar-input'
360-
frontendHeaderRedesign={frontendHeaderRedesign}
361337
inputRef={searchInputRef}
362338
placeholder={placeholder}
363339
inputProps={{

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

+3-39
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,11 @@
1-
import {
2-
IconButton,
3-
MenuItem,
4-
styled,
5-
TextField,
6-
Tooltip,
7-
} from '@mui/material';
1+
import { MenuItem, styled, TextField } from '@mui/material';
82
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
93
import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
104
import { useEffect, useMemo } from 'react';
115
import { timeSpanOptions } from '../EventTimelineProvider';
12-
import CloseIcon from '@mui/icons-material/Close';
136
import { useEventTimelineContext } from '../EventTimelineContext';
147
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
158
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
16-
import { EventTimelineHeaderTip } from './EventTimelineHeaderTip';
17-
import { useUiFlag } from 'hooks/useUiFlag';
189

1910
const StyledCol = styled('div')(({ theme }) => ({
2011
display: 'flex',
@@ -50,7 +41,6 @@ export const EventTimelineHeader = ({
5041
const { timeSpan, environment, setOpen, setTimeSpan, setEnvironment } =
5142
useEventTimelineContext();
5243
const { environments } = useEnvironments();
53-
const frontendHeaderRefactor = useUiFlag('frontendHeaderRedesign');
5444

5545
const activeEnvironments = useMemo(
5646
() => environments.filter(({ enabled }) => enabled),
@@ -123,36 +113,10 @@ export const EventTimelineHeader = ({
123113
{totalEvents === 1 ? '' : 's'}
124114
<HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
125115
</StyledTimelineEventsCount>
126-
{!frontendHeaderRefactor && <TimeSpanFilter />}
127116
</StyledCol>
128117
<StyledCol>
129-
{frontendHeaderRefactor ? (
130-
<>
131-
<TimeSpanFilter />
132-
<EnvironmentFilter />
133-
</>
134-
) : (
135-
<>
136-
<EventTimelineHeaderTip />
137-
<EnvironmentFilter />
138-
<Tooltip title='Hide event timeline' arrow>
139-
<IconButton
140-
aria-label='close'
141-
size='small'
142-
onClick={() => {
143-
trackEvent('event-timeline', {
144-
props: {
145-
eventType: 'close',
146-
},
147-
});
148-
setOpen(false);
149-
}}
150-
>
151-
<CloseIcon />
152-
</IconButton>
153-
</Tooltip>
154-
</>
155-
)}
118+
<TimeSpanFilter />
119+
<EnvironmentFilter />
156120
</StyledCol>
157121
</>
158122
);

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

-75
This file was deleted.

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

+2-20
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,8 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
1515
import { DraftBanner } from './DraftBanner/DraftBanner';
1616
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
1717
import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar';
18-
import { MainLayoutEventTimeline } from './MainLayoutEventTimeline';
1918
import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider';
2019
import { NewInUnleash } from './NavigationSidebar/NewInUnleash/NewInUnleash';
21-
import { useUiFlag } from 'hooks/useUiFlag';
2220

2321
interface IMainLayoutProps {
2422
children: ReactNode;
@@ -94,7 +92,6 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
9492
({ children }, ref) => {
9593
const { uiConfig } = useUiConfig();
9694
const projectId = useOptionalPathParam('projectId');
97-
const frontendHeaderRedesign = useUiFlag('frontendHeaderRedesign');
9895
const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
9996
projectId || '',
10097
);
@@ -105,11 +102,6 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
105102
return (
106103
<EventTimelineProvider>
107104
<SkipNavLink />
108-
<ConditionallyRender
109-
condition={!frontendHeaderRedesign}
110-
show={<Header />}
111-
/>
112-
113105
<MainLayoutContainer>
114106
<MainLayoutContentWrapper>
115107
<ConditionallyRender
@@ -123,9 +115,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
123115
<Box
124116
sx={(theme) => ({
125117
display: 'flex',
126-
mt: frontendHeaderRedesign
127-
? 0
128-
: theme.spacing(0.25),
118+
mt: 0,
129119
})}
130120
>
131121
<ConditionallyRender
@@ -145,15 +135,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
145135
minWidth: 0,
146136
}}
147137
>
148-
<ConditionallyRender
149-
condition={frontendHeaderRedesign}
150-
show={<Header />}
151-
/>
152-
153-
<ConditionallyRender
154-
condition={!frontendHeaderRedesign}
155-
show={<MainLayoutEventTimeline />}
156-
/>
138+
<Header />
157139

158140
<MainLayoutContent>
159141
<SkipNavTarget />

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

-48
This file was deleted.

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@ test('select active item', async () => {
7575
{ route: '/search' },
7676
);
7777

78-
const links = screen.getAllByRole('link');
78+
const searchLink = screen.getByRole('link', { name: 'Search' });
7979

80-
expect(links[2]).toHaveClass(classes.selected);
80+
expect(searchLink).toHaveClass(classes.selected);
8181
});
8282

8383
test('print recent projects and flags', async () => {

0 commit comments

Comments
 (0)