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
3 changed files with 16 additions and 30 deletions

View File

@@ -21,18 +21,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
`, `,
}); });
export enum DestinationPage { export function ConnectionsRedirectNotice() {
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 }) {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
return ( 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 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. page, accessible from the lefthand nav.
</p> </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 See data sources in Connections
</LinkButton> </LinkButton>
</div> </div>

View File

@@ -2,10 +2,7 @@ import React from 'react';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { Page } from 'app/core/components/Page/Page'; import { Page } from 'app/core/components/Page/Page';
import { import { ConnectionsRedirectNotice } from 'app/features/connections/components/ConnectionsRedirectNotice';
ConnectionsRedirectNotice,
DestinationPage,
} from 'app/features/connections/components/ConnectionsRedirectNotice';
import { StoreState, useSelector } from 'app/types'; import { StoreState, useSelector } from 'app/types';
import { DataSourceAddButton } from '../components/DataSourceAddButton'; import { DataSourceAddButton } from '../components/DataSourceAddButton';
@@ -19,9 +16,7 @@ export function DataSourcesListPage() {
return ( return (
<Page navId="datasources" actions={actions}> <Page navId="datasources" actions={actions}>
<Page.Contents> <Page.Contents>
{config.featureToggles.dataConnectionsConsole && ( {config.featureToggles.dataConnectionsConsole && <ConnectionsRedirectNotice />}
<ConnectionsRedirectNotice destinationPage={DestinationPage.dataSources} />
)}
<DataSourcesList /> <DataSourcesList />
</Page.Contents> </Page.Contents>
</Page> </Page>

View File

@@ -8,10 +8,7 @@ import { LoadingPlaceholder, Select, RadioButtonGroup, useStyles2, Tooltip, Fiel
import { Page } from 'app/core/components/Page/Page'; import { Page } from 'app/core/components/Page/Page';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { getNavModel } from 'app/core/selectors/navModel'; import { getNavModel } from 'app/core/selectors/navModel';
import { import { ROUTES as CONNECTIONS_ROUTES } from 'app/features/connections/constants';
ConnectionsRedirectNotice,
DestinationPage,
} from 'app/features/connections/components/ConnectionsRedirectNotice';
import { useSelector } from 'app/types'; import { useSelector } from 'app/types';
import { HorizontalGroup } from '../components/HorizontalGroup'; import { HorizontalGroup } from '../components/HorizontalGroup';
@@ -67,13 +64,18 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
return null; return null;
} }
return ( const subTitle = config.featureToggles.dataConnectionsConsole ? (
<Page navModel={navModel}> <p>
<Page.Contents> Extend the Grafana experience with panel plugins and apps. To find more data sources go to{' '}
{config.featureToggles.dataConnectionsConsole && (filterByType === 'all' || filterByType === 'datasource') && ( <a href={`${CONNECTIONS_ROUTES.ConnectData}?cat=data-source`}>Connections</a>.
<ConnectionsRedirectNotice destinationPage={DestinationPage.connectData} /> </p>
)} ) : (
<p>Extend the Grafana experience with panel plugins and apps.</p>
);
return (
<Page navModel={navModel} subTitle={subTitle}>
<Page.Contents>
<HorizontalGroup wrap> <HorizontalGroup wrap>
<Field label="Search"> <Field label="Search">
<SearchField value={query} onSearch={onSearch} /> <SearchField value={query} onSearch={onSearch} />