IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: conditionally use actions in DataSourceListPage (#60300)

Browse Source 
* conditionally use actions in DataSourceListPage

* fix unit tests
This commit is contained in:
Ashley Harrison 2022-12-14 13:19:29 +00:00 committed by GitHub
parent 70e34e7f32
commit 3a5c3b517c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/connections/pages/DataSourcesListPage.tsx
View File

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

33
public/app/features/datasources/components/DataSourcesListHeader.tsx
View File

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

6
public/app/features/datasources/pages/DataSourcesListPage.test.tsx
View File

@ -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 () => {

4
public/app/features/datasources/pages/DataSourcesListPage.tsx
View File

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