Admin/Plugins: Change alert about Connections to subtitle (#65913)

* change ConnectionRedirectNotice to a subtitle on Admin/Plugins

* cleanup ConnectionsRedirectNotice a bit
This commit is contained in:
mikkancso 2023-04-05 10:23:25 +02:00 committed by GitHub
parent 3af8f3246a
commit eec7462bc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 30 deletions

View File

@ -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>

View File

@ -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>

View File

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