diff --git a/public/app/features/connections/pages/DataSourcesListPage.tsx b/public/app/features/connections/pages/DataSourcesListPage.tsx
index 29115e72763..b4521282df5 100644
--- a/public/app/features/connections/pages/DataSourcesListPage.tsx
+++ b/public/app/features/connections/pages/DataSourcesListPage.tsx
@@ -6,7 +6,7 @@ import { DataSourceAddButton } from 'app/features/datasources/components/DataSou
 import { DataSourcesList } from 'app/features/datasources/components/DataSourcesList';
 
 export function DataSourcesListPage() {
-  const actions = config.featureToggles.topnav ? DataSourceAddButton() : undefined;
+  const actions = config.featureToggles.topnav ? <DataSourceAddButton /> : undefined;
   return (
     <Page navId={'connections-your-connections-datasources'} actions={actions}>
       <Page.Contents>
diff --git a/public/app/features/datasources/components/DataSourceAddButton.tsx b/public/app/features/datasources/components/DataSourceAddButton.tsx
index ca57d7c4165..030fae9aaab 100644
--- a/public/app/features/datasources/components/DataSourceAddButton.tsx
+++ b/public/app/features/datasources/components/DataSourceAddButton.tsx
@@ -6,15 +6,13 @@ import { AccessControlAction } from 'app/types';
 
 import { useDataSourcesRoutes } from '../state';
 
-export function DataSourceAddButton() {
+export function DataSourceAddButton(): JSX.Element | null {
   const canCreateDataSource = contextSrv.hasPermission(AccessControlAction.DataSourcesCreate);
   const dataSourcesRoutes = useDataSourcesRoutes();
 
-  return (
-    canCreateDataSource && (
-      <LinkButton icon="plus" href={dataSourcesRoutes.New}>
-        Add new data source
-      </LinkButton>
-    )
-  );
+  return canCreateDataSource ? (
+    <LinkButton icon="plus" href={dataSourcesRoutes.New}>
+      Add new data source
+    </LinkButton>
+  ) : null;
 }
diff --git a/public/app/features/datasources/pages/DataSourcesListPage.tsx b/public/app/features/datasources/pages/DataSourcesListPage.tsx
index e17efc1f220..fa2ea0b57bc 100644
--- a/public/app/features/datasources/pages/DataSourcesListPage.tsx
+++ b/public/app/features/datasources/pages/DataSourcesListPage.tsx
@@ -7,7 +7,7 @@ import { DataSourceAddButton } from '../components/DataSourceAddButton';
 import { DataSourcesList } from '../components/DataSourcesList';
 
 export function DataSourcesListPage() {
-  const actions = config.featureToggles.topnav ? DataSourceAddButton() : undefined;
+  const actions = config.featureToggles.topnav ? <DataSourceAddButton /> : undefined;
   return (
     <Page navId="datasources" actions={actions}>
       <Page.Contents>