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',