diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx index 60bb7fd594..cb9f3cd7c6 100644 --- a/frontend/src/component/commandBar/CommandBar.tsx +++ b/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) => - 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(null); const searchContainerRef = useRef(null); const [showSuggestions, setShowSuggestions] = useState(false); @@ -322,14 +304,9 @@ export const CommandBar = () => { }; return ( - + showSuggestions @@ -357,7 +334,6 @@ export const CommandBar = () => { ({ 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'} - {!frontendHeaderRefactor && } - {frontendHeaderRefactor ? ( - <> - - - - ) : ( - <> - - - - { - trackEvent('event-timeline', { - props: { - eventType: 'close', - }, - }); - setOpen(false); - }} - > - - - - - )} + + ); diff --git a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeaderTip.tsx b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeaderTip.tsx deleted file mode 100644 index 05869b91fb..0000000000 --- a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeaderTip.tsx +++ /dev/null @@ -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 ( - - } - label={ - <> - See signals from - external sources in real-time within Unleash - - } - onClick={() => { - trackEvent('event-timeline', { - props: { - eventType: 'signals clicked', - }, - }); - navigate(signalsLink); - }} - onDelete={() => setSignalsSuggestionSeen(true)} - /> - - ); - } - - return null; -}; diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx index f977689e57..f1b9048da6 100644 --- a/frontend/src/component/layout/MainLayout/MainLayout.tsx +++ b/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( ({ 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( return ( - } - /> - ( ({ display: 'flex', - mt: frontendHeaderRedesign - ? 0 - : theme.spacing(0.25), + mt: 0, })} > ( minWidth: 0, }} > - } - /> - - } - /> +
diff --git a/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx b/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx deleted file mode 100644 index fd32cf7cd6..0000000000 --- a/frontend/src/component/layout/MainLayout/MainLayoutEventTimeline.tsx +++ /dev/null @@ -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 ( - - - } - /> - - - ); -}; diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx index 47c191c620..5e45729358 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx +++ b/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 () => { diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx index d728695552..c02ff3634e 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx +++ b/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 ( - - } - elseShow={ - - } - /> - } - lightmode={ - } - elseShow={ - - } - /> + + } + elseShow={ + } /> - - } - elseShow={ - - } - lightmode={} + } + lightmode={ + } + elseShow={ + + } /> - - } - /> + } + /> + + } + elseShow={ + + } + lightmode={} + /> + } /> diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/__snapshots__/NavigationSidebar.test.tsx.snap b/frontend/src/component/layout/MainLayout/NavigationSidebar/__snapshots__/NavigationSidebar.test.tsx.snap index 83eb5ebe97..a00860d0b3 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/__snapshots__/NavigationSidebar.test.tsx.snap +++ b/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", diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx index 8581abae84..9828c422ab 100644 --- a/frontend/src/component/menu/Header/Header.tsx +++ b/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, { - 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 ( - + { } return ( - + - - } - elseShow={ - - } - /> - } - lightmode={ - } - elseShow={ - - } - /> - } - /> - - } - /> - - ({ - marginLeft: theme.spacing(1), - border: 'transparent', - })} - /> - } - /> - } + ({ + marginLeft: theme.spacing(1), + border: 'transparent', + })} /> ({ 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 = () => { - {showTimelinePanel && } + diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index 51d82c16a8..616caf41f0 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/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; diff --git a/frontend/src/utils/testRenderer.tsx b/frontend/src/utils/testRenderer.tsx index 54e33cd7c3..7f948a578d 100644 --- a/frontend/src/utils/testRenderer.tsx +++ b/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 = ( - {children} + + {children} + diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index 874daf5262..d3f528d504 100644 --- a/src/lib/types/experimental.ts +++ b/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, diff --git a/src/server-dev.ts b/src/server-dev.ts index 446f9ed61c..2815e163a9 100644 --- a/src/server-dev.ts +++ b/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,