Admin: Add redirect notice for datasources to admin landing page (#72736)

* update copy of ConnectionsRedirectNotice

The Connections page is not that new anymore

* extend NavLandingPage with optional header

* show ConnectionsRedirectNotice on Admin landing page

* make ConnectionsRedirectNotice dismissable

* make ConnectionsRedirectNotice informational

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 ? <h3>Custom Header</h3> : undefined;
     return render(
       <TestProvider>
-        <NavLandingPage navId={mockId} />
+        <NavLandingPage navId={mockId} header={header} />
       </TestProvider>
     );
   };
@@ -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();
+  });
 });

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) {
     <Page navId={node.id}>
       <Page.Contents>
         <div className={styles.content}>
+          {header}
           {children && children.length > 0 && (
             <section className={styles.grid}>
               {children?.map((child) => (

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 (
-    <Alert severity="warning" title="">
+  return showNotice ? (
+    <Alert severity="info" title="" onRemove={() => setShowNotice(false)}>
       <div className={styles.alertContent}>
         <p className={styles.alertParagraph}>
-          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.
         </p>
         <LinkButton aria-label="Link to Connections" icon="arrow-right" href={ROUTES.DataSources} fill="text">
@@ -35,5 +36,7 @@ export function ConnectionsRedirectNotice() {
         </LinkButton>
       </div>
     </Alert>
+  ) : (
+    <></>
   );
 }

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: () => <NavLandingPage navId="cfg" />,
+      component: () => <NavLandingPage navId="cfg" header={<ConnectionsRedirectNotice />} />,
     },
     {
       path: '/admin/access',