Navigation: conditionally use actions in DataSourceListPage (#60300)

* conditionally use actions in DataSourceListPage * fix unit tests
grafana · Dec 14, 2022 · 3a5c3b5 · 3a5c3b5
1 parent 70e34e7
commit 3a5c3b5
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git 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 (
-    <Page navId={'connections-your-connections-datasources'} actions={DataSourceAddButton()}>
+    <Page navId={'connections-your-connections-datasources'} actions={actions}>
       <Page.Contents>
         <DataSourcesList />
       </Page.Contents>

diff --git 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 (
-    <PageActionBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} key="action-bar" sortPicker={sortPicker} />
+    <PageActionBar
+      searchQuery={searchQuery}
+      setSearchQuery={setSearchQuery}
+      key="action-bar"
+      sortPicker={sortPicker}
+      linkButton={linkButton}
+    />
   );
 }
diff --git a/public/app/features/datasources/pages/DataSourcesListPage.test.tsx b/public/app/features/datasources/pages/DataSourcesListPage.test.tsx
@@ -49,18 +49,18 @@ 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 });
 
     expect(await screen.findByRole('heading', { name: 'Configuration' })).toBeInTheDocument();
     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
@@ -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>