From edb86d4bf35be7540e74cf10b73b0f516d2ed238 Mon Sep 17 00:00:00 2001
From: mikkancso <miklos.tolnai@grafana.com>
Date: Thu, 15 Dec 2022 09:25:03 +0100
Subject: [PATCH] DataSources: fix DataSourceAddButton component (#60176)

* fix DataSourceAddButton component

This component implicitly returned `false` when `canCreateDataSource`
was false, and that way it didn't qualify as a function component.
We fixed it to explicitly return null in this case.

* DataSourceAddButton: update function signature

This is more consistent with other code in this codebase.
---
 .../connections/pages/DataSourcesListPage.tsx      |  2 +-
 .../datasources/components/DataSourceAddButton.tsx | 14 ++++++--------
 .../datasources/pages/DataSourcesListPage.tsx      |  2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

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>