mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Navigation: conditionally use actions in DataSourceListPage
(#60300)
* conditionally use actions in DataSourceListPage * fix unit tests
This commit is contained in:
parent
70e34e7f32
commit
3a5c3b517c
@ -1,12 +1,14 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { config } from '@grafana/runtime';
|
||||
import { Page } from 'app/core/components/Page/Page';
|
||||
import { DataSourceAddButton } from 'app/features/datasources/components/DataSourceAddButton';
|
||||
import { DataSourcesList } from 'app/features/datasources/components/DataSourcesList';
|
||||
|
||||
export function DataSourcesListPage() {
|
||||
const actions = config.featureToggles.topnav ? DataSourceAddButton() : undefined;
|
||||
return (
|
||||
<Page navId={'connections-your-connections-datasources'} actions={DataSourceAddButton()}>
|
||||
<Page navId={'connections-your-connections-datasources'} actions={actions}>
|
||||
<Page.Contents>
|
||||
<DataSourcesList />
|
||||
</Page.Contents>
|
||||
|
@ -1,10 +1,18 @@
|
||||
import React, { useCallback } from 'react';
|
||||
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import { config } from '@grafana/runtime';
|
||||
import PageActionBar from 'app/core/components/PageActionBar/PageActionBar';
|
||||
import { StoreState, useSelector, useDispatch } from 'app/types';
|
||||
import { contextSrv } from 'app/core/core';
|
||||
import { StoreState, useSelector, useDispatch, AccessControlAction } from 'app/types';
|
||||
|
||||
import { getDataSourcesSearchQuery, getDataSourcesSort, setDataSourcesSearchQuery, setIsSortAscending } from '../state';
|
||||
import {
|
||||
getDataSourcesSearchQuery,
|
||||
getDataSourcesSort,
|
||||
setDataSourcesSearchQuery,
|
||||
setIsSortAscending,
|
||||
useDataSourcesRoutes,
|
||||
} from '../state';
|
||||
|
||||
const ascendingSortValue = 'alpha-asc';
|
||||
const descendingSortValue = 'alpha-desc';
|
||||
@ -22,6 +30,19 @@ export function DataSourcesListHeader() {
|
||||
const setSearchQuery = useCallback((q: string) => dispatch(setDataSourcesSearchQuery(q)), [dispatch]);
|
||||
const searchQuery = useSelector(({ dataSources }: StoreState) => getDataSourcesSearchQuery(dataSources));
|
||||
|
||||
// TODO remove this logic adding the link button once topnav is live
|
||||
// instead use the actions in DataSourcesListPage
|
||||
const canCreateDataSource = contextSrv.hasPermission(AccessControlAction.DataSourcesCreate);
|
||||
const dataSourcesRoutes = useDataSourcesRoutes();
|
||||
const isTopnav = config.featureToggles.topnav;
|
||||
const linkButton =
|
||||
!isTopnav && canCreateDataSource
|
||||
? {
|
||||
href: dataSourcesRoutes.New,
|
||||
title: 'Add new data source',
|
||||
}
|
||||
: undefined;
|
||||
|
||||
const setSort = useCallback(
|
||||
(sort: SelectableValue) => dispatch(setIsSortAscending(sort.value === ascendingSortValue)),
|
||||
[dispatch]
|
||||
@ -35,6 +56,12 @@ export function DataSourcesListHeader() {
|
||||
};
|
||||
|
||||
return (
|
||||
<PageActionBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} key="action-bar" sortPicker={sortPicker} />
|
||||
<PageActionBar
|
||||
searchQuery={searchQuery}
|
||||
setSearchQuery={setSearchQuery}
|
||||
key="action-bar"
|
||||
sortPicker={sortPicker}
|
||||
linkButton={linkButton}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -49,10 +49,10 @@ describe('Render', () => {
|
||||
expect(await screen.findByRole('link', { name: 'Documentation' })).toBeInTheDocument();
|
||||
expect(await screen.findByRole('link', { name: 'Support' })).toBeInTheDocument();
|
||||
expect(await screen.findByRole('link', { name: 'Community' })).toBeInTheDocument();
|
||||
expect(await screen.findByRole('link', { name: 'Add new data source' })).toBeInTheDocument();
|
||||
expect(await screen.findByRole('link', { name: 'Add data source' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not render "Add new data source" button if user has no permissions', async () => {
|
||||
it('should disable the "Add data source" button if user has no permissions', async () => {
|
||||
(contextSrv.hasPermission as jest.Mock) = jest.fn().mockReturnValue(false);
|
||||
setup({ isSortAscending: true });
|
||||
|
||||
@ -60,7 +60,7 @@ describe('Render', () => {
|
||||
expect(await screen.findByRole('link', { name: 'Documentation' })).toBeInTheDocument();
|
||||
expect(await screen.findByRole('link', { name: 'Support' })).toBeInTheDocument();
|
||||
expect(await screen.findByRole('link', { name: 'Community' })).toBeInTheDocument();
|
||||
expect(screen.queryByRole('link', { name: 'Add new data source' })).toBeNull();
|
||||
expect(await screen.findByRole('link', { name: 'Add data source' })).toHaveStyle('pointer-events: none');
|
||||
});
|
||||
|
||||
it('should render action bar and datasources', async () => {
|
||||
|
@ -1,13 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
import { config } from '@grafana/runtime';
|
||||
import { Page } from 'app/core/components/Page/Page';
|
||||
|
||||
import { DataSourceAddButton } from '../components/DataSourceAddButton';
|
||||
import { DataSourcesList } from '../components/DataSourcesList';
|
||||
|
||||
export function DataSourcesListPage() {
|
||||
const actions = config.featureToggles.topnav ? DataSourceAddButton() : undefined;
|
||||
return (
|
||||
<Page navId="datasources" actions={DataSourceAddButton()}>
|
||||
<Page navId="datasources" actions={actions}>
|
||||
<Page.Contents>
|
||||
<DataSourcesList />
|
||||
</Page.Contents>
|
||||
|
Loading…
Reference in New Issue
Block a user