Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-17 01:17:29 +02: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 { 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) =>
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),
@ -73,16 +68,10 @@ const StyledContainer = styled('div', {
},
}));
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',
@ -90,16 +79,10 @@ const StyledSearch = styled('div', {
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={{

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

@ -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>
</>
)}
</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 { 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 />

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' },
);
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 () => {

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

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 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, {
shouldForwardProp: (prop) => prop !== 'frontendHeaderRedesign',
})<{ frontendHeaderRedesign?: boolean }>(
({ theme, frontendHeaderRedesign }) => ({
backgroundColor: frontendHeaderRedesign
? theme.palette.background.application
: theme.palette.background.paper,
const HeaderComponent = styled(AppBar)(({ theme }) => ({
backgroundColor: theme.palette.background.application,
padding: theme.spacing(1),
boxShadow: 'none',
position: 'relative',
@ -59,8 +51,7 @@ const HeaderComponent = styled(AppBar, {
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
position='static'
frontendHeaderRedesign={frontendHeaderRedesign}
>
<HeaderComponent position='static'>
<ContainerComponent>
<Tooltip title='Menu' arrow>
<IconButton
@ -163,45 +150,11 @@ const Header = () => {
}
return (
<HeaderComponent
frontendHeaderRedesign={frontendHeaderRedesign}
position='static'
>
<HeaderComponent 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
condition={frontendHeaderRedesign}
show={
<Divider
orientation='vertical'
variant='middle'
@ -211,12 +164,6 @@ const Header = () => {
border: 'transparent',
})}
/>
}
/>
<ConditionallyRender
condition={!frontendHeaderRedesign}
show={<HeaderEventTimelineButton />}
/>
<InviteLinkButton />
<Tooltip
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 { 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 />

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

@ -90,7 +90,6 @@ export type UiFlags = {
showUserDeviceCount?: boolean;
flagOverviewRedesign?: boolean;
granularAdminPermissions?: boolean;
frontendHeaderRedesign?: boolean;
dataUsageMultiMonthView?: boolean;
consumptionModel?: 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 { 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>
<EventTimelineProvider>
{children}
</EventTimelineProvider>
</HighlightProvider>
</StickyProvider>
</AnnouncerProvider>

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

@ -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,

1
src/server-dev.ts
View File

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