Connections: Add redirect notice for datasources and plugins pages (#61037)

* add redirect notice for datasources and plugins pages

* do not depend on the internal implementation of Alert

The deleted css piece was problematic because it relied on the internals
of Alert.
If we don't remove that padding, then the Alert looks a bit off, so I
added some title to the Alert to look better.

This way the Connections LinkButton is not vertically aligned to the
center, but this is the closest we can get to the designed alert without
doing hacks and reimplementing the Alert component.

public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx

@@ -0,0 +1,49 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Alert, LinkButton, useStyles2 } from '@grafana/ui';
+
+import { ROUTES } from '../../constants';
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  alertContent: css`
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    justify-content: space-between;
+  `,
+  alertParagraph: css`
+    margin: 0 ${theme.spacing(1)} 0 0;
+    line-height: ${theme.spacing(theme.components.height.md)};
+    color: ${theme.colors.text.primary};
+  `,
+});
+
+export enum DestinationPage {
+  dataSources = 'dataSources',
+  connectData = 'connectData',
+}
+
+const destinationLinks = {
+  [DestinationPage.dataSources]: ROUTES.DataSources,
+  [DestinationPage.connectData]: ROUTES.ConnectData,
+};
+
+export function ConnectionsRedirectNotice({ destinationPage }: { destinationPage: DestinationPage }) {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <Alert severity="warning" title="Data sources have a new home!">
+      <div className={styles.alertContent}>
+        <p className={styles.alertParagraph}>
+          You can discover new data sources or manage existing ones in the new Connections section, accessible from the
+          left-hand navigation, or click the button here.
+        </p>
+        <LinkButton aria-label="Link to Connections" icon="link" href={destinationLinks[destinationPage]}>
+          Connections
+        </LinkButton>
+      </div>
+    </Alert>
+  );
+}

public/app/features/connections/components/ConnectionsRedirectNotice/index.ts

@@ -0,0 +1 @@
+export * from './ConnectionsRedirectNotice';

public/app/features/datasources/pages/DataSourcesListPage.tsx

@@ -2,6 +2,10 @@ import React from 'react';
 
 import { config } from '@grafana/runtime';
 import { Page } from 'app/core/components/Page/Page';
+import {
+  ConnectionsRedirectNotice,
+  DestinationPage,
+} from 'app/features/connections/components/ConnectionsRedirectNotice';
 
 import { DataSourceAddButton } from '../components/DataSourceAddButton';
 import { DataSourcesList } from '../components/DataSourcesList';
@@ -11,6 +15,9 @@ export function DataSourcesListPage() {
   return (
     <Page navId="datasources" actions={actions}>
       <Page.Contents>
+        {config.featureToggles.dataConnectionsConsole && (
+          <ConnectionsRedirectNotice destinationPage={DestinationPage.dataSources} />
+        )}
         <DataSourcesList />
       </Page.Contents>
     </Page>

public/app/features/plugins/admin/pages/Browse.tsx

@@ -3,11 +3,15 @@ import React, { ReactElement } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
-import { locationSearchToObject } from '@grafana/runtime';
+import { config, locationSearchToObject } from '@grafana/runtime';
 import { LoadingPlaceholder, Select, RadioButtonGroup, useStyles2, Tooltip } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { getNavModel } from 'app/core/selectors/navModel';
+import {
+  ConnectionsRedirectNotice,
+  DestinationPage,
+} from 'app/features/connections/components/ConnectionsRedirectNotice';
 import { useSelector } from 'app/types';
 
 import { HorizontalGroup } from '../components/HorizontalGroup';
@@ -66,6 +70,10 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
   return (
     <Page navModel={navModel}>
       <Page.Contents>
+        {config.featureToggles.dataConnectionsConsole && (filterByType === 'all' || filterByType === 'datasource') && (
+          <ConnectionsRedirectNotice destinationPage={DestinationPage.connectData} />
+        )}
+
         <HorizontalGroup wrap>
           <SearchField value={query} onSearch={onSearch} />
           <HorizontalGroup wrap className={styles.actionBar}>