Connections: Render a landing page for pages without actual content (#60369)

* render a landing page for pages without actual content

To be consistent with other pages in Grafana

* update tests
This commit is contained in:
mikkancso 2022-12-16 11:00:35 +01:00 committed by GitHub
parent 9bbc2c4cbb
commit e4d4eacd36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 7 deletions

View File

@ -41,14 +41,21 @@ describe('Connections', () => {
(contextSrv.hasPermission as jest.Mock) = jest.fn().mockReturnValue(true);
});
test('shows the "Data sources" page by default', async () => {
test('shows a landing page by default', async () => {
renderPage();
expect(await screen.findByText('Datasources')).toBeVisible();
expect(await screen.findByRole('link', { name: 'Your connections' })).toBeVisible();
expect(await screen.findByText('Manage your existing connections')).toBeVisible();
expect(await screen.findByRole('link', { name: 'Connect data' })).toBeVisible();
expect(await screen.findByText('Browse and create new connections')).toBeVisible();
});
test('shows a landing page for Your connections', async () => {
renderPage(ROUTES.YourConnections);
expect(await screen.findByRole('link', { name: 'Datasources' })).toBeVisible();
expect(await screen.findByText('Manage your existing datasource connections')).toBeVisible();
expect(await screen.findByText('Sort by AZ')).toBeVisible();
expect(await screen.findByRole('link', { name: /add new data source/i })).toBeVisible();
expect(await screen.findByText(mockDatasources[0].name)).toBeVisible();
});
test('renders the correct tab even if accessing it with a "sub-url"', async () => {

View File

@ -1,6 +1,7 @@
import * as React from 'react';
import { Route, Switch } from 'react-router-dom';
import { NavLandingPage } from 'app/core/components/AppChrome/NavLandingPage';
import { DataSourcesRoutesContext } from 'app/features/datasources/state';
import { StoreState, useSelector } from 'app/types';
@ -27,8 +28,12 @@ export default function Connections() {
}}
>
<Switch>
<Route exact path={ROUTES.Base} component={DataSourcesListPage} />
<Route exact path={ROUTES.YourConnections} component={DataSourcesListPage} />
<Route exact path={ROUTES.Base} component={() => <NavLandingPage navId="connections" />} />
<Route
exact
path={ROUTES.YourConnections}
component={() => <NavLandingPage navId="connections-your-connections" />}
/>
<Route exact path={ROUTES.DataSources} component={DataSourcesListPage} />
<Route exact path={ROUTES.DataSourcesDetails} component={DataSourceDetailsPage} />
<Route exact path={ROUTES.DataSourcesNew} component={NewDataSourcePage} />