From 3a5c3b517c976887597c316df5db22d6d295c65d Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Wed, 14 Dec 2022 13:19:29 +0000 Subject: [PATCH] Navigation: conditionally use actions in `DataSourceListPage` (#60300) * conditionally use actions in DataSourceListPage * fix unit tests --- .../connections/pages/DataSourcesListPage.tsx | 4 ++- .../components/DataSourcesListHeader.tsx | 33 +++++++++++++++++-- .../pages/DataSourcesListPage.test.tsx | 6 ++-- .../datasources/pages/DataSourcesListPage.tsx | 4 ++- 4 files changed, 39 insertions(+), 8 deletions(-) diff --git a/public/app/features/connections/pages/DataSourcesListPage.tsx b/public/app/features/connections/pages/DataSourcesListPage.tsx index 17612363ba4..29115e72763 100644 --- a/public/app/features/connections/pages/DataSourcesListPage.tsx +++ b/public/app/features/connections/pages/DataSourcesListPage.tsx @@ -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 ( - + diff --git a/public/app/features/datasources/components/DataSourcesListHeader.tsx b/public/app/features/datasources/components/DataSourcesListHeader.tsx index 4961a22e172..4f97016b4f7 100644 --- a/public/app/features/datasources/components/DataSourcesListHeader.tsx +++ b/public/app/features/datasources/components/DataSourcesListHeader.tsx @@ -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 ( - + ); } diff --git a/public/app/features/datasources/pages/DataSourcesListPage.test.tsx b/public/app/features/datasources/pages/DataSourcesListPage.test.tsx index ced9e960885..e70525e493a 100644 --- a/public/app/features/datasources/pages/DataSourcesListPage.test.tsx +++ b/public/app/features/datasources/pages/DataSourcesListPage.test.tsx @@ -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 () => { diff --git a/public/app/features/datasources/pages/DataSourcesListPage.tsx b/public/app/features/datasources/pages/DataSourcesListPage.tsx index e8ddc5f4587..e17efc1f220 100644 --- a/public/app/features/datasources/pages/DataSourcesListPage.tsx +++ b/public/app/features/datasources/pages/DataSourcesListPage.tsx @@ -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 ( - +