1import React from 'react';
2import { InfoBox, InfoBoxProps } from './InfoBox';
3import { FeatureState, GrafanaTheme } from '@grafana/data';
4import { stylesFactory, useStyles } from '../../themes';
5import { Badge, BadgeProps } from '../Badge/Badge';
6import { css } from '@emotion/css';
7
8export interface FeatureInfoBoxProps extends Omit<InfoBoxProps, 'title' | 'urlTitle'> {
9  title: string;
10  featureState?: FeatureState;
11}
12
13/** @deprecated use Alert with severity info */
14export const FeatureInfoBox = React.memo(
15  React.forwardRef<HTMLDivElement, FeatureInfoBoxProps>(({ title, featureState, ...otherProps }, ref) => {
16    const styles = useStyles(getFeatureInfoBoxStyles);
17
18    const titleEl = featureState ? (
19      <>
20        <div className={styles.badge}>
21          <FeatureBadge featureState={featureState} />
22        </div>
23        <h3>{title}</h3>
24      </>
25    ) : (
26      <h3>{title}</h3>
27    );
28    return <InfoBox branded title={titleEl} urlTitle="Read documentation" ref={ref} {...otherProps} />;
29  })
30);
31
32FeatureInfoBox.displayName = 'FeatureInfoBox';
33
34const getFeatureInfoBoxStyles = stylesFactory((theme: GrafanaTheme) => {
35  return {
36    badge: css`
37      margin-bottom: ${theme.spacing.sm};
38    `,
39  };
40});
41
42interface FeatureBadgeProps {
43  featureState: FeatureState;
44  tooltip?: string;
45}
46
47export const FeatureBadge: React.FC<FeatureBadgeProps> = ({ featureState, tooltip }) => {
48  const display = getPanelStateBadgeDisplayModel(featureState);
49  return <Badge text={display.text} color={display.color} icon={display.icon} tooltip={tooltip} />;
50};
51
52function getPanelStateBadgeDisplayModel(featureState: FeatureState): BadgeProps {
53  switch (featureState) {
54    case FeatureState.alpha:
55      return {
56        text: 'Alpha',
57        icon: 'exclamation-triangle',
58        color: 'orange',
59      };
60  }
61
62  return {
63    text: 'Beta',
64    icon: 'rocket',
65    color: 'blue',
66  };
67}
68