A11y : Updated EmptyListCTA to switch between Button and LinkButton (#46292)

* Updated EmptyListCTA to switch between Button and LinkButton

* Added tests

public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import EmptyListCTA from './EmptyListCTA';
+
+describe('EmptyListCTA', () => {
+  it('should return a button element if there is no buttonLink prop', () => {
+    render(<EmptyListCTA title="title" buttonIcon="plus" buttonTitle="button title" />);
+
+    expect(screen.getByRole('button', { name: 'button title' }));
+  });
+
+  it('should return an anchor element if there is a buttonLink prop', () => {
+    render(<EmptyListCTA title="title" buttonIcon="plus" buttonLink="href" buttonTitle="button title" />);
+
+    expect(screen.getByRole('link', { name: 'button title' }));
+  });
+});

public/app/core/components/EmptyListCTA/EmptyListCTA.tsx

@@ -1,7 +1,7 @@
-import React, { MouseEvent } from 'react';
 import { css } from '@emotion/css';
-import { CallToActionCard, Icon, IconName, LinkButton } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
+import { Button, CallToActionCard, Icon, IconName, LinkButton } from '@grafana/ui';
+import React, { MouseEvent } from 'react';
 
 export interface Props {
   title: string;
@@ -75,8 +75,9 @@ const EmptyListCTA: React.FunctionComponent<Props> = ({
       `
     : '';
 
+  const ButtonEl = buttonLink ? LinkButton : Button;
   const ctaElement = (
-    <LinkButton
+    <ButtonEl
       size="lg"
       onClick={onClick}
       href={buttonLink}
@@ -86,7 +87,7 @@ const EmptyListCTA: React.FunctionComponent<Props> = ({
       disabled={buttonDisabled}
     >
       {buttonTitle}
-    </LinkButton>
+    </ButtonEl>
   );
 
   return <CallToActionCard className={ctaStyle} message={title} footer={footer()} callToActionElement={ctaElement} />;