mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01:00 
			
		
		
		
	chore: remove frontendHeaderRedesign flag (#9428)
Removes all references to the flag and deletes unused components.
This commit is contained in:
		
							parent
							
								
									e7ac42080d
								
							
						
					
					
						commit
						a50fb7db35
					
				| @ -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={{ | ||||
|  | ||||
| @ -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> | ||||
|         </> | ||||
|     ); | ||||
|  | ||||
| @ -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; | ||||
| }; | ||||
| @ -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 /> | ||||
|  | ||||
| @ -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> | ||||
|     ); | ||||
| }; | ||||
| @ -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 () => { | ||||
|  | ||||
| @ -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 | ||||
|                         condition={mode === 'full'} | ||||
|                         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 to='/' sx={flexRow} aria-label='Home'> | ||||
|                         <ThemeMode | ||||
|                             darkmode={ | ||||
|                                 <ConditionallyRender | ||||
|                                     condition={celebatoryUnleash} | ||||
|                                     show={<CelebatoryUnleashLogoWhite />} | ||||
|                                     elseShow={ | ||||
|                                         <StyledUnleashLogoWhite aria-label='Unleash logo' /> | ||||
|                                     } | ||||
|                                 /> | ||||
|                             </StyledLink> | ||||
|                         } | ||||
|                         elseShow={ | ||||
|                             <StyledLink to='/' sx={flexRow} aria-label='Home'> | ||||
|                                 <ThemeMode | ||||
|                                     darkmode={<StyledUnleashLogoOnlyWhite />} | ||||
|                                     lightmode={<StyledUnleashLogoOnly />} | ||||
|                             } | ||||
|                             lightmode={ | ||||
|                                 <ConditionallyRender | ||||
|                                     condition={celebatoryUnleash} | ||||
|                                     show={<StyledCelebatoryLogo />} | ||||
|                                     elseShow={ | ||||
|                                         <StyledUnleashLogo aria-label='Unleash logo' /> | ||||
|                                     } | ||||
|                                 /> | ||||
|                             </StyledLink> | ||||
|                         } | ||||
|                     /> | ||||
|                             } | ||||
|                         /> | ||||
|                     </StyledLink> | ||||
|                 } | ||||
|                 elseShow={ | ||||
|                     <StyledLink to='/' sx={flexRow} aria-label='Home'> | ||||
|                         <ThemeMode | ||||
|                             darkmode={<StyledUnleashLogoOnlyWhite />} | ||||
|                             lightmode={<StyledUnleashLogoOnly />} | ||||
|                         /> | ||||
|                     </StyledLink> | ||||
|                 } | ||||
|             /> | ||||
| 
 | ||||
|  | ||||
| @ -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", | ||||
|  | ||||
| @ -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, { | ||||
|     shouldForwardProp: (prop) => prop !== 'frontendHeaderRedesign', | ||||
| })<{ frontendHeaderRedesign?: boolean }>( | ||||
|     ({ theme, frontendHeaderRedesign }) => ({ | ||||
|         backgroundColor: frontendHeaderRedesign | ||||
|             ? theme.palette.background.application | ||||
|             : theme.palette.background.paper, | ||||
|         padding: theme.spacing(1), | ||||
|         boxShadow: 'none', | ||||
|         position: 'relative', | ||||
|         zIndex: 300, | ||||
|         paddingRight: theme.spacing(9), | ||||
|         [theme.breakpoints.down('lg')]: { | ||||
|             paddingLeft: theme.spacing(1), | ||||
|             paddingRight: theme.spacing(1), | ||||
|         }, | ||||
|         [theme.breakpoints.down(1024)]: { | ||||
|             marginLeft: 0, | ||||
|             marginRight: 0, | ||||
|         }, | ||||
|         [theme.breakpoints.down('sm')]: { | ||||
|             minWidth: '100%', | ||||
|         }, | ||||
|         margin: '0 auto', | ||||
|     }), | ||||
| ); | ||||
| const HeaderComponent = styled(AppBar)(({ theme }) => ({ | ||||
|     backgroundColor: theme.palette.background.application, | ||||
|     padding: theme.spacing(1), | ||||
|     boxShadow: 'none', | ||||
|     position: 'relative', | ||||
|     zIndex: 300, | ||||
|     paddingRight: theme.spacing(9), | ||||
|     [theme.breakpoints.down('lg')]: { | ||||
|         paddingLeft: theme.spacing(1), | ||||
|         paddingRight: theme.spacing(1), | ||||
|     }, | ||||
|     [theme.breakpoints.down(1024)]: { | ||||
|         marginLeft: 0, | ||||
|         marginRight: 0, | ||||
|     }, | ||||
|     [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 | ||||
|                 position='static' | ||||
|                 frontendHeaderRedesign={frontendHeaderRedesign} | ||||
|             > | ||||
|             <HeaderComponent position='static'> | ||||
|                 <ContainerComponent> | ||||
|                     <Tooltip title='Menu' arrow> | ||||
|                         <IconButton | ||||
| @ -163,59 +150,19 @@ 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' | ||||
|                                     flexItem | ||||
|                                     sx={(theme) => ({ | ||||
|                                         marginLeft: theme.spacing(1), | ||||
|                                         border: 'transparent', | ||||
|                                     })} | ||||
|                                 /> | ||||
|                             } | ||||
|                         /> | ||||
|                         <ConditionallyRender | ||||
|                             condition={!frontendHeaderRedesign} | ||||
|                             show={<HeaderEventTimelineButton />} | ||||
|                         <Divider | ||||
|                             orientation='vertical' | ||||
|                             variant='middle' | ||||
|                             flexItem | ||||
|                             sx={(theme) => ({ | ||||
|                                 marginLeft: theme.spacing(1), | ||||
|                                 border: 'transparent', | ||||
|                             })} | ||||
|                         /> | ||||
|                         <InviteLinkButton /> | ||||
|                         <Tooltip | ||||
|  | ||||
| @ -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 /> | ||||
| 
 | ||||
|  | ||||
| @ -90,7 +90,6 @@ export type UiFlags = { | ||||
|     showUserDeviceCount?: boolean; | ||||
|     flagOverviewRedesign?: boolean; | ||||
|     granularAdminPermissions?: boolean; | ||||
|     frontendHeaderRedesign?: boolean; | ||||
|     dataUsageMultiMonthView?: boolean; | ||||
|     consumptionModel?: boolean; | ||||
|     edgeObservability?: boolean; | ||||
|  | ||||
| @ -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> | ||||
|  | ||||
| @ -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, | ||||
|  | ||||
| @ -56,7 +56,6 @@ process.nextTick(async () => { | ||||
|                         granularAdminPermissions: true, | ||||
|                         deltaApi: true, | ||||
|                         uniqueSdkTracking: true, | ||||
|                         frontendHeaderRedesign: true, | ||||
|                         dataUsageMultiMonthView: true, | ||||
|                         filterExistingFlagNames: true, | ||||
|                         teamsIntegrationChangeRequests: true, | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user