From 8e8f4986746d1e0ff341125b5b0966e094b50099 Mon Sep 17 00:00:00 2001
From: mikkancso <miklos.tolnai@grafana.com>
Date: Fri, 6 Jan 2023 09:00:29 +0100
Subject: [PATCH] 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.
---
 .../ConnectionsRedirectNotice.tsx             | 49 +++++++++++++++++++
 .../ConnectionsRedirectNotice/index.ts        |  1 +
 .../datasources/pages/DataSourcesListPage.tsx |  7 +++
 .../features/plugins/admin/pages/Browse.tsx   | 10 +++-
 4 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx
 create mode 100644 public/app/features/connections/components/ConnectionsRedirectNotice/index.ts

diff --git a/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx b/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx
new file mode 100644
index 00000000000..d6b691cac79
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/public/app/features/connections/components/ConnectionsRedirectNotice/index.ts b/public/app/features/connections/components/ConnectionsRedirectNotice/index.ts
new file mode 100644
index 00000000000..450d003a619
--- /dev/null
+++ b/public/app/features/connections/components/ConnectionsRedirectNotice/index.ts
@@ -0,0 +1 @@
+export * from './ConnectionsRedirectNotice';
diff --git a/public/app/features/datasources/pages/DataSourcesListPage.tsx b/public/app/features/datasources/pages/DataSourcesListPage.tsx
index fa2ea0b57bc..5dc57638d14 100644
--- a/public/app/features/datasources/pages/DataSourcesListPage.tsx
+++ b/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>
diff --git a/public/app/features/plugins/admin/pages/Browse.tsx b/public/app/features/plugins/admin/pages/Browse.tsx
index 59eb23f4e76..4bd15175ac5 100644
--- a/public/app/features/plugins/admin/pages/Browse.tsx
+++ b/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}>