Feature: Introduced CallToActionCard to @grafana/ui (#16237)

CallToActionCard is an abstraction to display a card with message, call to action element and a footer. It is used i.e. on datasource add page.

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import EmptyListCTA from './EmptyListCTA';
-
-const model = {
-  title: 'Title',
-  buttonIcon: 'ga css class',
-  buttonLink: 'http://url/to/destination',
-  buttonTitle: 'Click me',
-  onClick: jest.fn(),
-  proTip: 'This is a tip',
-  proTipLink: 'http://url/to/tip/destination',
-  proTipLinkTitle: 'Learn more',
-  proTipTarget: '_blank',
-};
-
-describe('EmptyListCTA', () => {
-  it('renders correctly', () => {
-    const tree = shallow(<EmptyListCTA model={model} />);
-    expect(tree).toMatchSnapshot();
-  });
-});

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

@@ -1,40 +1,48 @@
-import React, { Component } from 'react';
-
+import React, { useContext } from 'react';
+import { CallToActionCard, ExtraLargeLinkButton, ThemeContext } from '@grafana/ui';
+import { css } from 'emotion';
 export interface Props {
   model: any;
 }
 
-class EmptyListCTA extends Component<Props, any> {
-  render() {
-    const {
-      title,
-      buttonIcon,
-      buttonLink,
-      buttonTitle,
-      onClick,
-      proTip,
-      proTipLink,
-      proTipLinkTitle,
-      proTipTarget,
-    } = this.props.model;
-    return (
-      <div className="empty-list-cta">
-        <div className="empty-list-cta__title">{title}</div>
-        <a onClick={onClick} href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-primary">
-          <i className={buttonIcon} />
-          {buttonTitle}
-        </a>
-        {proTip && (
-          <div className="empty-list-cta__pro-tip">
-            <i className="fa fa-rocket" /> ProTip: {proTip}
-            <a className="text-link empty-list-cta__pro-tip-link" href={proTipLink} target={proTipTarget}>
-              {proTipLinkTitle}
-            </a>
-          </div>
-        )}
-      </div>
-    );
-  }
-}
+const EmptyListCTA: React.FunctionComponent<Props> = props => {
+  const theme = useContext(ThemeContext);
+
+  const {
+    title,
+    buttonIcon,
+    buttonLink,
+    buttonTitle,
+    onClick,
+    proTip,
+    proTipLink,
+    proTipLinkTitle,
+    proTipTarget,
+  } = props.model;
+
+  const footer = proTip ? (
+    <span>
+      <i className="fa fa-rocket" />
+      <> ProTip: {proTip} </>
+      <a href={proTipLink} target={proTipTarget} className="text-link">
+        {proTipLinkTitle}
+      </a>
+    </span>
+  ) : null;
+
+  const ctaElementClassName = !footer
+    ? css`
+        margin-bottom: 20px;
+      `
+    : '';
+
+  const ctaElement = (
+    <ExtraLargeLinkButton onClick={onClick} href={buttonLink} icon={buttonIcon} className={ctaElementClassName}>
+      {buttonTitle}
+    </ExtraLargeLinkButton>
+  );
+
+  return <CallToActionCard message={title} footer={footer} callToActionElement={ctaElement} theme={theme} />;
+};
 
 export default EmptyListCTA;

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

@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EmptyListCTA renders correctly 1`] = `
-<div
-  className="empty-list-cta"
->
-  <div
-    className="empty-list-cta__title"
-  >
-    Title
-  </div>
-  <a
-    className="empty-list-cta__button btn btn-xlarge btn-primary"
-    href="http://url/to/destination"
-    onClick={[MockFunction]}
-  >
-    <i
-      className="ga css class"
-    />
-    Click me
-  </a>
-  <div
-    className="empty-list-cta__pro-tip"
-  >
-    <i
-      className="fa fa-rocket"
-    />
-     ProTip: 
-    This is a tip
-    <a
-      className="text-link empty-list-cta__pro-tip-link"
-      href="http://url/to/tip/destination"
-      target="_blank"
-    >
-      Learn more
-    </a>
-  </div>
-</div>
-`;

public/app/features/alerting/AlertTab.tsx

@@ -133,7 +133,7 @@ export class AlertTab extends PureComponent<Props> {
 
     const model = {
       title: 'Panel has no alert rule defined',
-      icon: 'icon-gf icon-gf-alert',
+      buttonIcon: 'icon-gf icon-gf-alert',
       onClick: this.onAddAlert,
       buttonTitle: 'Create Alert',
     };