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} />