From eec7462bc3b103c04e47a25125a0a134017c9aa5 Mon Sep 17 00:00:00 2001
From: mikkancso <miklos.tolnai@grafana.com>
Date: Wed, 5 Apr 2023 10:23:25 +0200
Subject: [PATCH] Admin/Plugins: Change alert about Connections to subtitle 
 (#65913)

* change ConnectionRedirectNotice to a subtitle on Admin/Plugins

* cleanup ConnectionsRedirectNotice a bit
---
 .../ConnectionsRedirectNotice.tsx             | 15 ++-----------
 .../datasources/pages/DataSourcesListPage.tsx |  9 ++------
 .../features/plugins/admin/pages/Browse.tsx   | 22 ++++++++++---------
 3 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx b/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx
index 8a14aadebb8..c473107d804 100644
--- a/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx
+++ b/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx
@@ -21,18 +21,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   `,
 });
 
-export enum DestinationPage {
-  dataSources = 'dataSources',
-  connectData = 'connectData',
-}
-
-const destinationLinks = {
-  [DestinationPage.dataSources]: ROUTES.DataSources,
-  // Set category filter for the cloud version of ConnectData page
-  [DestinationPage.connectData]: `${ROUTES.ConnectData}?cat=data-source`,
-};
-
-export function ConnectionsRedirectNotice({ destinationPage }: { destinationPage: DestinationPage }) {
+export function ConnectionsRedirectNotice() {
   const styles = useStyles2(getStyles);
 
   return (
@@ -42,7 +31,7 @@ export function ConnectionsRedirectNotice({ destinationPage }: { destinationPage
           Data sources have a new home! You can discover new data sources or manage existing ones in the new Connections
           page, accessible from the lefthand nav.
         </p>
-        <LinkButton aria-label="Link to Connections" icon="adjust-circle" href={destinationLinks[destinationPage]}>
+        <LinkButton aria-label="Link to Connections" icon="adjust-circle" href={ROUTES.DataSources}>
           See data sources in Connections
         </LinkButton>
       </div>
diff --git a/public/app/features/datasources/pages/DataSourcesListPage.tsx b/public/app/features/datasources/pages/DataSourcesListPage.tsx
index 27a8afef8b4..05c43b663ff 100644
--- a/public/app/features/datasources/pages/DataSourcesListPage.tsx
+++ b/public/app/features/datasources/pages/DataSourcesListPage.tsx
@@ -2,10 +2,7 @@ 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 { ConnectionsRedirectNotice } from 'app/features/connections/components/ConnectionsRedirectNotice';
 import { StoreState, useSelector } from 'app/types';
 
 import { DataSourceAddButton } from '../components/DataSourceAddButton';
@@ -19,9 +16,7 @@ export function DataSourcesListPage() {
   return (
     <Page navId="datasources" actions={actions}>
       <Page.Contents>
-        {config.featureToggles.dataConnectionsConsole && (
-          <ConnectionsRedirectNotice destinationPage={DestinationPage.dataSources} />
-        )}
+        {config.featureToggles.dataConnectionsConsole && <ConnectionsRedirectNotice />}
         <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 37596ad8c95..62cb83ba6dc 100644
--- a/public/app/features/plugins/admin/pages/Browse.tsx
+++ b/public/app/features/plugins/admin/pages/Browse.tsx
@@ -8,10 +8,7 @@ import { LoadingPlaceholder, Select, RadioButtonGroup, useStyles2, Tooltip, Fiel
 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 { ROUTES as CONNECTIONS_ROUTES } from 'app/features/connections/constants';
 import { useSelector } from 'app/types';
 
 import { HorizontalGroup } from '../components/HorizontalGroup';
@@ -67,13 +64,18 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
     return null;
   }
 
-  return (
-    <Page navModel={navModel}>
-      <Page.Contents>
-        {config.featureToggles.dataConnectionsConsole && (filterByType === 'all' || filterByType === 'datasource') && (
-          <ConnectionsRedirectNotice destinationPage={DestinationPage.connectData} />
-        )}
+  const subTitle = config.featureToggles.dataConnectionsConsole ? (
+    <p>
+      Extend the Grafana experience with panel plugins and apps. To find more data sources go to{' '}
+      <a href={`${CONNECTIONS_ROUTES.ConnectData}?cat=data-source`}>Connections</a>.
+    </p>
+  ) : (
+    <p>Extend the Grafana experience with panel plugins and apps.</p>
+  );
 
+  return (
+    <Page navModel={navModel} subTitle={subTitle}>
+      <Page.Contents>
         <HorizontalGroup wrap>
           <Field label="Search">
             <SearchField value={query} onSearch={onSearch} />