diff --git a/frontend/src/component/admin/Admin.tsx b/frontend/src/component/admin/Admin.tsx index c24281afa9ab..ccca09ded3d3 100644 --- a/frontend/src/component/admin/Admin.tsx +++ b/frontend/src/component/admin/Admin.tsx @@ -17,21 +17,12 @@ import { InviteLink } from './users/InviteLink/InviteLink'; import UsersAdmin from './users/UsersAdmin'; import NotFound from 'component/common/NotFound/NotFound'; import { AdminIndex } from './AdminIndex'; -import { AdminTabsMenu } from './menu/AdminTabsMenu'; import { Banners } from './banners/Banners'; import { License } from './license/License'; -import { useUiFlag } from 'hooks/useUiFlag'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; export const Admin = () => { - const sidebarNavigationEnabled = useUiFlag('navigationSidebar'); - return ( <> - } - /> } /> } /> diff --git a/frontend/src/component/admin/menu/AdminTabsMenu.tsx b/frontend/src/component/admin/menu/AdminTabsMenu.tsx deleted file mode 100644 index 639d122f9c29..000000000000 --- a/frontend/src/component/admin/menu/AdminTabsMenu.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { useLocation } from 'react-router-dom'; -import { Paper, styled, Tab, Tabs } from '@mui/material'; -import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { CenteredNavLink } from './CenteredNavLink'; -import type { VFC } from 'react'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge'; -import { useAdminRoutes } from '../useAdminRoutes'; - -const StyledPaper = styled(Paper)(({ theme }) => ({ - marginBottom: '1rem', - borderRadius: `${theme.shape.borderRadiusLarge}px`, - boxShadow: 'none', - padding: theme.spacing(0, 2), -})); - -const StyledBadgeContainer = styled('div')(({ theme }) => ({ - marginLeft: theme.spacing(1), - display: 'flex', - alignItems: 'center', -})); - -export const AdminTabsMenu: VFC = () => { - const { isPro, isOss } = useUiConfig(); - const { pathname } = useLocation(); - - const activeTab = pathname.split('/')[2]; - - const adminRoutes = useAdminRoutes(); - const group = adminRoutes.find((route) => - pathname.includes(route.path), - )?.group; - - const tabs = adminRoutes.filter( - (route) => - !group || - route.group === group || - (isOss() && route.group !== 'log'), - ); - - if (!group) { - return null; - } - - return ( - - - {tabs.map((tab) => ( - - {tab.title} - - - - } - /> - - } - /> - ))} - - - ); -}; diff --git a/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx b/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx index 42cb3029364b..3c9a8a689828 100644 --- a/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx +++ b/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx @@ -6,7 +6,6 @@ import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequ import type { ChangeRequestType } from 'component/changeRequest/changeRequest.types'; import { changesCount } from 'component/changeRequest/changesCount'; import { Sticky } from 'component/common/Sticky/Sticky'; -import { useUiFlag } from 'hooks/useUiFlag'; interface IDraftBannerProps { project: string; @@ -18,22 +17,6 @@ const StyledDraftBannerContentWrapper = styled(Box)(({ theme }) => ({ padding: theme.spacing(1, 0), })); -const OldStyledDraftBanner = styled(Box)(({ theme }) => ({ - maxWidth: '1512px', - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - marginLeft: 'auto', - marginRight: 'auto', - [theme.breakpoints.down(1024)]: { - width: '100%', - marginLeft: 0, - marginRight: 0, - }, - [theme.breakpoints.down('sm')]: { - minWidth: '100%', - }, -})); - const StyledDraftBanner = styled(Box)(({ theme }) => ({ width: '100%', paddingLeft: theme.spacing(3), @@ -55,7 +38,6 @@ const DraftBannerContent: FC<{ changeRequests: ChangeRequestType[]; onClick: () => void; }> = ({ changeRequests, onClick }) => { - const sidebarNavigationEnabled = useUiFlag('navigationSidebar'); const environments = changeRequests.map(({ environment }) => environment); const allChangesCount = changeRequests.reduce( (acc, curr) => acc + changesCount(curr), @@ -73,12 +55,8 @@ const DraftBannerContent: FC<{ }[changeRequests[0].state as 'Draft' | 'In review' | 'Approved'] : ''; - const Banner = sidebarNavigationEnabled - ? StyledDraftBanner - : OldStyledDraftBanner; - return ( - + Change request mode – You have changes{' '} @@ -114,7 +92,7 @@ const DraftBannerContent: FC<{ View changes ({allChangesCount}) - + ); }; diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx index 4a07dd3ddccd..32043b749477 100644 --- a/frontend/src/component/layout/MainLayout/MainLayout.tsx +++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx @@ -1,7 +1,6 @@ import { forwardRef, type ReactNode } from 'react'; import { Box, Grid, styled, useMediaQuery, useTheme } from '@mui/material'; import Header from 'component/menu/Header/Header'; -import OldHeader from 'component/menu/Header/OldHeader'; import Footer from 'component/menu/Footer/Footer'; import Proclamation from 'component/common/Proclamation/Proclamation'; import BreadcrumbNav from 'component/common/BreadcrumbNav/BreadcrumbNav'; @@ -16,7 +15,6 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; import { DraftBanner } from './DraftBanner/DraftBanner'; import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar'; -import { useUiFlag } from 'hooks/useUiFlag'; import { MainLayoutEventTimeline } from './MainLayoutEventTimeline'; import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider'; import { AIChat } from 'component/ai/AIChat'; @@ -42,27 +40,7 @@ const MainLayoutContentWrapper = styled('main')(({ theme }) => ({ position: 'relative', })); -const OldMainLayoutContent = styled(Grid)(({ theme }) => ({ - width: '100%', - maxWidth: '1512px', - margin: '0 auto', - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - [theme.breakpoints.down('lg')]: { - maxWidth: '1250px', - paddingLeft: theme.spacing(1), - paddingRight: theme.spacing(1), - }, - [theme.breakpoints.down(1024)]: { - marginLeft: 0, - marginRight: 0, - }, - [theme.breakpoints.down('sm')]: { - minWidth: '100%', - }, -})); - -const NewMainLayoutContent = styled(Grid)(({ theme }) => ({ +const MainLayoutContent = styled(Grid)(({ theme }) => ({ minWidth: 0, // this is a fix for overflowing flex maxWidth: '1512px', margin: '0 auto', @@ -119,21 +97,13 @@ export const MainLayout = forwardRef( projectId || '', ); - const sidebarNavigationEnabled = useUiFlag('navigationSidebar'); - const StyledMainLayoutContent = sidebarNavigationEnabled - ? NewMainLayoutContent - : OldMainLayoutContent; const theme = useTheme(); const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg')); return ( - } - elseShow={} - /> +
@@ -153,9 +123,7 @@ export const MainLayout = forwardRef( })} > } /> @@ -169,13 +137,13 @@ export const MainLayout = forwardRef( > - + {children} - + diff --git a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx index e2ccf96df2e2..12c4ed20df03 100644 --- a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx +++ b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx @@ -1,20 +1,13 @@ import type { ReactNode, VFC } from 'react'; import { Link } from 'react-router-dom'; -import { Divider, Drawer, List, styled } from '@mui/material'; -import GitHubIcon from '@mui/icons-material/GitHub'; -import LibraryBooksIcon from '@mui/icons-material/LibraryBooks'; -import ExitToApp from '@mui/icons-material/ExitToApp'; +import { Divider, Drawer, styled } from '@mui/material'; import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg'; import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg'; -import NavigationLink from '../NavigationLink/NavigationLink'; -import { basePath } from 'utils/formatPath'; import type { INavigationMenuItem } from 'interfaces/route'; import styles from './DrawerMenu.module.scss'; // FIXME: useStyle - theme import theme from 'themes/theme'; import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; import { MobileNavigationSidebar } from 'component/layout/MainLayout/NavigationSidebar/NavigationSidebar'; -import { useUiFlag } from 'hooks/useUiFlag'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; const StyledDrawerHeader = styled('div')(({ theme }) => ({ display: 'flex', @@ -51,32 +44,6 @@ export const DrawerMenu: VFC = ({ toggleDrawer, routes, }) => { - const sidebarNavigationEnabled = useUiFlag('navigationSidebar'); - - const renderLinks = () => { - return links.map((link) => { - let icon = null; - if (link.value === 'GitHub') { - icon = ; - } else if (link.value === 'Documentation') { - icon = ; - } - - return ( - - {icon} - {link.value} - - ); - }); - }; - return ( = ({ - } - elseShow={ - <> - - {routes.mobileRoutes.map((item) => ( - toggleDrawer()} - path={item.path} - text={item.title} - key={item.path} - /> - ))} - - - - - {routes.adminRoutes.map((item) => ( - toggleDrawer()} - path={item.path} - text={item.title} - key={item.path} - mode={item.menu?.mode} - /> - ))} - - -
- {renderLinks()} - - - Sign out - -
- - } - /> + ); diff --git a/frontend/src/component/menu/Header/OldHeader.tsx b/frontend/src/component/menu/Header/OldHeader.tsx deleted file mode 100644 index d156f6c95d46..000000000000 --- a/frontend/src/component/menu/Header/OldHeader.tsx +++ /dev/null @@ -1,313 +0,0 @@ -import { useState } from 'react'; -import useMediaQuery from '@mui/material/useMediaQuery'; -import { useTheme } from '@mui/material/styles'; -import { Link } from 'react-router-dom'; -import { - AppBar, - IconButton, - Tooltip, - styled, - type Theme, - Box, -} from '@mui/material'; -import MenuIcon from '@mui/icons-material/Menu'; -import SettingsIcon from '@mui/icons-material/Settings'; -import UserProfile from 'component/user/UserProfile'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -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 { NavigationMenu } from './NavigationMenu/NavigationMenu'; -import { getRoutes, getCondensedRoutes } from 'component/menu/routes'; -import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'; -import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; -import LightModeOutlined from '@mui/icons-material/LightModeOutlined'; -import { filterByConfig, mapRouteLink } from 'component/common/util'; -import { useId } from 'hooks/useId'; -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 { HeaderEventTimelineButton } from './HeaderEventTimelineButton'; - -const HeaderComponent = styled(AppBar)(({ theme }) => ({ - backgroundColor: theme.palette.background.paper, - padding: theme.spacing(1), - boxShadow: 'none', - position: 'relative', - zIndex: 300, - maxWidth: '1512px', - [theme.breakpoints.down('lg')]: { - maxWidth: '1280px', - 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', - alignItems: 'center', - width: '100%', - '&&&': { padding: 0 }, -})); - -const StyledUserContainer = styled('div')({ - marginLeft: 'auto', - display: 'flex', - alignItems: 'center', -}); - -const StyledNav = styled('nav')({ - display: 'flex', - alignItems: 'center', - flexGrow: 1, -}); - -const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ width: '150px' }); - -const StyledUnleashLogo = styled(UnleashLogo)({ width: '150px' }); - -const StyledCelebatoryLogo = styled(CelebatoryUnleashLogo)({ width: '150px' }); - -const StyledLinks = styled('div')(({ theme }) => ({ - display: 'flex', - justifyContent: 'center', - marginLeft: theme.spacing(3), - '& a': { - textDecoration: 'none', - color: 'inherit', - marginRight: theme.spacing(3), - display: 'flex', - alignItems: 'center', - }, -})); - -const StyledAdvancedNavButton = styled('button')(({ theme }) => ({ - ...focusable(theme), - border: 'none', - background: 'transparent', - height: '100%', - display: 'flex', - fontSize: theme.fontSizes.bodySize, - fontFamily: theme.typography.fontFamily, - alignItems: 'center', - color: 'inherit', - cursor: 'pointer', -})); - -const styledIconProps = (theme: Theme) => ({ - color: theme.palette.neutral.main, -}); - -const StyledLink = styled(Link)(({ theme }) => focusable(theme)); - -const StyledIconButton = styled(IconButton)<{ - component?: 'a' | 'button'; - href?: string; - target?: string; -}>(({ theme }) => ({ - borderRadius: 100, - '&:focus-visible': { - outlineStyle: 'solid', - outlineWidth: 2, - outlineColor: theme.palette.primary.main, - borderRadius: '100%', - }, -})); - -const OldHeader = () => { - const { onSetThemeMode, themeMode } = useThemeMode(); - const theme = useTheme(); - const adminId = useId(); - const configId = useId(); - const [adminRef, setAdminRef] = useState(null); - const [configRef, setConfigRef] = useState(null); - - const disableNotifications = useUiFlag('disableNotifications'); - const { uiConfig, isOss } = useUiConfig(); - const smallScreen = useMediaQuery(theme.breakpoints.down('md')); - const [openDrawer, setOpenDrawer] = useState(false); - const toggleDrawer = () => setOpenDrawer((prev) => !prev); - const onAdminClose = () => setAdminRef(null); - const onConfigureClose = () => setConfigRef(null); - const celebatoryUnleash = useUiFlag('celebrateUnleash'); - - const routes = getRoutes(); - const adminRoutes = useAdminRoutes(); - - const filteredMainRoutes = { - mainNavRoutes: getCondensedRoutes(routes.mainNavRoutes) - .filter(filterByConfig(uiConfig)) - .map(mapRouteLink), - mobileRoutes: getCondensedRoutes(routes.mobileRoutes) - .filter(filterByConfig(uiConfig)) - .map(mapRouteLink), - adminRoutes, - }; - - if (smallScreen) { - return ( - - - - theme.palette.text.primary, - }} - onClick={toggleDrawer} - aria-controls='header-drawer' - aria-expanded={openDrawer} - size='large' - > - - - - - - - - - - ); - } - - return ( - - - - } - elseShow={ - - } - /> - } - lightmode={ - } - elseShow={ - - } - /> - } - /> - - - - - Projects - Search - Playground - Insights - } - /> - setConfigRef(e.currentTarget)} - aria-controls={configRef ? configId : undefined} - aria-expanded={Boolean(configRef)} - > - Configure - - - - - - - - - - } - elseShow={} - /> - - - } - /> - - - - - - - setAdminRef(e.currentTarget)} - aria-controls={adminRef ? adminId : undefined} - aria-expanded={Boolean(adminRef)} - size='large' - > - - - - {' '} - - - - - - ); -}; - -export default OldHeader; diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index ca6c80965b00..dc2fe378feed 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -85,7 +85,6 @@ export type UiFlags = { featureLifecycle?: boolean; manyStrategiesPagination?: boolean; enableLegacyVariants?: boolean; - navigationSidebar?: boolean; flagCreator?: boolean; onboardingUI?: boolean; eventTimeline?: boolean; diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index d1b77a883240..ef02b72bc5a7 100644 --- a/src/lib/types/experimental.ts +++ b/src/lib/types/experimental.ts @@ -49,7 +49,6 @@ export type IFlagKey = | 'projectOverviewRefactorFeedback' | 'manyStrategiesPagination' | 'enableLegacyVariants' - | 'navigationSidebar' | 'extendedMetrics' | 'removeUnsafeInlineStyleSrc' | 'onboardingMetrics' @@ -256,10 +255,6 @@ const flags: IFlags = { process.env.UNLEASH_EXPERIMENTAL_ENABLE_LEGACY_VARIANTS, false, ), - navigationSidebar: parseEnvVarBoolean( - process.env.UNLEASH_EXPERIMENTAL_SIDEBAR_NAVIGATION, - true, - ), extendedMetrics: parseEnvVarBoolean( process.env.UNLEASH_EXPERIMENTAL_EXTENDED_METRICS, false,