Add Traefik Hub demo in dashboard

webui/src/layout/Navigation.tsx

@@ -2,6 +2,7 @@ import {
   Badge,
   Box,
   Button,
+  CSS,
   DialogTitle,
   DropdownMenu,
   DropdownMenuContent,
@@ -37,6 +38,7 @@ import TooltipText from 'components/TooltipText'
 import { VersionContext } from 'contexts/version'
 import useTotals from 'hooks/use-overview-totals'
 import { useIsDarkMode } from 'hooks/use-theme'
+import ApimDemoNavMenu from 'pages/hub-demo/HubDemoNav'
 import { Route, ROUTES } from 'routes'
 
 export const LAPTOP_BP = 1025
@@ -54,7 +56,7 @@ const NavigationDrawer = styled(Flex, {
   },
 })
 
-const BasicNavigationItem = ({
+export const BasicNavigationItem = ({
   route,
   count,
   isSmallScreen,
@@ -270,7 +272,7 @@ export const SideNav = ({
             ))}
           </Flex>
         ))}
-        <Flex direction="column" css={{ borderTop: '1px solid $colors$tableRowBorder', borderRadius: 0, pt: '$3' }}>
+        <Flex direction="column" css={{ borderTop: '1px solid $colors$tableRowBorder', borderRadius: 0, py: '$3' }}>
           <NavigationLink
             startAdornment={<PluginsIcon />}
             css={{
@@ -283,12 +285,14 @@ export const SideNav = ({
             {!isSmallScreen || isExpanded ? 'Plugins' : ''}
           </NavigationLink>
         </Flex>
+
+        <ApimDemoNavMenu isResponsive={isResponsive} isSmallScreen={isSmallScreen} isExpanded={isExpanded} />
       </Container>
     </NavigationDrawer>
   )
 }
 
-export const TopNav = () => {
+export const TopNav = ({ css, noHubButton = false }: { css?: CSS; noHubButton?: boolean }) => {
   const [hasHubButtonComponent, setHasHubButtonComponent] = useState(false)
   const { showHubButton, version } = useContext(VersionContext)
   const isDarkMode = useIsDarkMode()
@@ -341,8 +345,8 @@ export const TopNav = () => {
   }, [showHubButton])
 
   return (
-    <Flex as="nav" role="navigation" justify="end" align="center" css={{ gap: '$2', mb: '$6' }}>
-      {hasHubButtonComponent && (
+    <Flex as="nav" role="navigation" justify="end" align="center" css={{ gap: '$2', mb: '$6', ...css }}>
+      {!noHubButton && hasHubButtonComponent && (
         <Box css={{ fontFamily: '$rubik', fontWeight: '500 !important' }}>
           <hub-button-app
             key={`dark-mode-${isDarkMode}`}

webui/src/layout/Page.spec.tsx

@@ -4,7 +4,7 @@ import { renderWithProviders } from 'utils/test'
 
 describe('<Page />', () => {
   it('should render an empty page', () => {
-    const { getByTestId } = renderWithProviders(<Page title="Test" />)
-    expect(getByTestId('Test page')).toBeInTheDocument()
+    const { getByTestId } = renderWithProviders(<Page />, { route: '/test' })
+    expect(getByTestId('/test page')).toBeInTheDocument()
   })
 })

webui/src/layout/Page.tsx

@@ -1,6 +1,7 @@
 import { Flex, globalCss, styled } from '@traefiklabs/faency'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
+import { useLocation } from 'react-router-dom'
 
 import Container from './Container'
 import { LAPTOP_BP, SideBarPanel, SideNav, TopNav } from './Navigation'
@@ -40,14 +41,31 @@ export interface Props {
   children?: ReactNode
 }
 
-const Page = ({ children, title }: Props) => {
+const Page = ({ children }: Props) => {
+  const { pathname } = useLocation()
   const [isSideBarPanelOpen, setIsSideBarPanelOpen] = useState(false)
+  const location = useLocation()
+
+  const isDemoPage = useMemo(() => pathname.includes('hub-dashboard'), [pathname])
+
+  const renderedContent = useMemo(() => {
+    if (isDemoPage) {
+      return children
+    }
+
+    return (
+      <PageContainer data-testid={`${location.pathname} page`} direction="column">
+        <TopNav />
+        {children}
+      </PageContainer>
+    )
+  }, [children, isDemoPage, location.pathname])
 
   return (
     <ToastProvider>
       {globalStyles()}
       <Helmet>
-        <title>{title ? `${title} - ` : ''}Traefik Proxy</title>
+        <title>Traefik Proxy</title>
       </Helmet>
       <Flex>
         <SideBarPanel isOpen={isSideBarPanelOpen} onOpenChange={setIsSideBarPanelOpen} />
@@ -56,10 +74,7 @@ const Page = ({ children, title }: Props) => {
           justify="center"
           css={{ flex: 1, margin: 'auto', ml: 264, [`@media (max-width:${LAPTOP_BP}px)`]: { ml: 60 } }}
         >
-          <PageContainer data-testid={`${title} page`} direction="column">
-            <TopNav />
-            {children}
-          </PageContainer>
+          {renderedContent}
         </Flex>
       </Flex>
       <ToastPool />