diff --git a/public/app/core/components/NavLandingPage/NavLandingPage.test.tsx b/public/app/core/components/NavLandingPage/NavLandingPage.test.tsx index f327f0b1463..61ffd5a0fd9 100644 --- a/public/app/core/components/NavLandingPage/NavLandingPage.test.tsx +++ b/public/app/core/components/NavLandingPage/NavLandingPage.test.tsx @@ -39,7 +39,7 @@ describe('NavLandingPage', () => { ], }; - const setup = () => { + const setup = (showHeader = false) => { config.bootData.navTree = [ { text: mockSectionTitle, @@ -50,9 +50,10 @@ describe('NavLandingPage', () => { }, ]; + const header = showHeader ?

Custom Header

: undefined; return render( - + ); }; @@ -78,4 +79,9 @@ describe('NavLandingPage', () => { expect(screen.getByText(mockChild1.subTitle)).toBeInTheDocument(); expect(screen.getByText(mockChild2.subTitle)).toBeInTheDocument(); }); + + it('renders the custom header when supplied', () => { + setup(true); + expect(screen.getByRole('heading', { name: 'Custom Header' })).toBeInTheDocument(); + }); }); diff --git a/public/app/core/components/NavLandingPage/NavLandingPage.tsx b/public/app/core/components/NavLandingPage/NavLandingPage.tsx index 75a069b5bb9..9be82d67c7a 100644 --- a/public/app/core/components/NavLandingPage/NavLandingPage.tsx +++ b/public/app/core/components/NavLandingPage/NavLandingPage.tsx @@ -10,9 +10,10 @@ import { NavLandingPageCard } from './NavLandingPageCard'; interface Props { navId: string; + header?: React.ReactNode; } -export function NavLandingPage({ navId }: Props) { +export function NavLandingPage({ navId, header }: Props) { const { node } = useNavModel(navId); const styles = useStyles2(getStyles); const children = node.children?.filter((child) => !child.hideFromTabs); @@ -21,6 +22,7 @@ export function NavLandingPage({ navId }: Props) {
+ {header} {children && children.length > 0 && (
{children?.map((child) => ( diff --git a/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx b/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx index f6567a77d7a..fc49117c918 100644 --- a/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx +++ b/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import React from 'react'; +import React, { useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { Alert, LinkButton, useStyles2 } from '@grafana/ui'; @@ -22,12 +22,13 @@ const getStyles = (theme: GrafanaTheme2) => ({ export function ConnectionsRedirectNotice() { const styles = useStyles2(getStyles); + const [showNotice, setShowNotice] = useState(true); - return ( - + return showNotice ? ( + setShowNotice(false)}>

- Data sources have a new home! You can discover new data sources or manage existing ones in the new Connections + Data sources have a new home! You can discover new data sources or manage existing ones in the Connections page, accessible from the main menu.

@@ -35,5 +36,7 @@ export function ConnectionsRedirectNotice() {
+ ) : ( + <> ); } diff --git a/public/app/routes/routes.tsx b/public/app/routes/routes.tsx index 16f202022ea..eb56b5d3d41 100644 --- a/public/app/routes/routes.tsx +++ b/public/app/routes/routes.tsx @@ -10,6 +10,7 @@ import { contextSrv } from 'app/core/services/context_srv'; import UserAdminPage from 'app/features/admin/UserAdminPage'; import LdapPage from 'app/features/admin/ldap/LdapPage'; import { getAlertingRoutes } from 'app/features/alerting/routes'; +import { ConnectionsRedirectNotice } from 'app/features/connections/components/ConnectionsRedirectNotice'; import { ROUTES as CONNECTIONS_ROUTES } from 'app/features/connections/constants'; import { getRoutes as getDataConnectionsRoutes } from 'app/features/connections/routes'; import { DATASOURCES_ROUTES } from 'app/features/datasources/constants'; @@ -309,7 +310,7 @@ export function getAppRoutes(): RouteDescriptor[] { }, { path: '/admin', - component: () => , + component: () => } />, }, { path: '/admin/access',