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 ( + +
+

+ 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. +

+ + Connections + +
+
+ ); +} 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 ( + {config.featureToggles.dataConnectionsConsole && ( + + )} 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 ( + {config.featureToggles.dataConnectionsConsole && (filterByType === 'all' || filterByType === 'datasource') && ( + + )} +