1import React from 'react';
2import { css } from '@emotion/css';
3import { LinkButton, CallToActionCard, Icon, useTheme2 } from '@grafana/ui';
4
5import { contextSrv } from 'app/core/core';
6import { AccessControlAction } from 'app/types';
7
8export const NoDataSourceCallToAction = () => {
9  const theme = useTheme2();
10
11  const canCreateDataSource =
12    contextSrv.hasPermission(AccessControlAction.DataSourcesCreate) &&
13    contextSrv.hasPermission(AccessControlAction.DataSourcesWrite);
14
15  const message =
16    'Explore requires at least one data source. Once you have added a data source, you can query it here.';
17  const footer = (
18    <>
19      <Icon name="rocket" />
20      <> ProTip: You can also define data sources through configuration files. </>
21      <a
22        href="http://docs.grafana.org/administration/provisioning/#datasources?utm_source=explore"
23        target="_blank"
24        rel="noreferrer"
25        className="text-link"
26      >
27        Learn more
28      </a>
29    </>
30  );
31
32  const ctaElement = (
33    <LinkButton size="lg" href="datasources/new" icon="database" disabled={!canCreateDataSource}>
34      Add data source
35    </LinkButton>
36  );
37
38  const cardClassName = css`
39    max-width: ${theme.breakpoints.values.lg}px;
40    margin-top: ${theme.spacing(2)};
41    align-self: center;
42  `;
43
44  return (
45    <CallToActionCard callToActionElement={ctaElement} className={cardClassName} footer={footer} message={message} />
46  );
47};
48