FeatureBadge: Update FeatureBadge to support current release stages (#87555)

* FeatureBadge: Update avalaiable FeatureState

* Move to separate folder

* Add private preview state

packages/grafana-data/src/types/app.ts

@@ -126,6 +126,14 @@ export class AppPlugin<T extends KeyValue = KeyValue> extends GrafanaPlugin<AppP
  * @internal
  */
 export enum FeatureState {
+  /** @deprecated in favor of experimental */
   alpha = 'alpha',
+  /** @deprecated in favor of preview */
   beta = 'beta',
+  /** used to mark experimental features with high/unknown risk */
+  experimental = 'experimental',
+  /** used to mark features that are in public preview with medium/hight risk */
+  privatePreview = 'private preview',
+  /** used to mark features that are in public preview with low/medium risk, or as a shared badge for public and private previews */
+  preview = 'preview',
 }

packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.mdx

@@ -0,0 +1,10 @@
+import { Meta, ArgTypes } from '@storybook/blocks';
+import { FeatureBadge } from './FeatureBadge';
+
+<Meta title="MDX|FeatureBadge" component={FeatureBadge} />
+
+## FeatureBadge
+
+A component for displaying information about different release stages of features, in accordance with the guidelines provided at [Grafana's Release Life Cycle](https://grafana.com/docs/release-life-cycle).
+
+<ArgTypes of={FeatureBadge} />

packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.story.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { FeatureState } from '@grafana/data';
+import { FeatureBadge } from '@grafana/ui';
+
+import mdx from './FeatureBadge.mdx';
+
+const meta: Meta<typeof FeatureBadge> = {
+  title: 'Data Display/FeatureBadge',
+  component: FeatureBadge,
+  parameters: {
+    docs: { page: mdx },
+  },
+  argTypes: {
+    featureState: { control: { type: 'select', options: ['experimental', 'private preview', 'preview'] } },
+    tooltip: { control: 'text' },
+  },
+};
+
+const Template: StoryFn<typeof FeatureBadge> = (args) => <FeatureBadge {...args} />;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  featureState: FeatureState.preview,
+  tooltip: `This feature is in selected mode`,
+};
+
+export default meta;

packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { FeatureState } from '@grafana/data';
+
+import { Badge, BadgeProps } from '../Badge/Badge';
+
+interface FeatureBadgeProps {
+  featureState: FeatureState;
+  tooltip?: string;
+}
+
+export const FeatureBadge = ({ featureState, tooltip }: FeatureBadgeProps) => {
+  const display = getPanelStateBadgeDisplayModel(featureState);
+  return <Badge text={display.text} color={display.color} icon={display.icon} tooltip={tooltip} />;
+};
+
+function getPanelStateBadgeDisplayModel(featureState: FeatureState): BadgeProps {
+  switch (featureState) {
+    case FeatureState.alpha:
+      return {
+        text: 'Alpha',
+        icon: 'exclamation-triangle',
+        color: 'orange',
+      };
+
+    case FeatureState.beta:
+      return {
+        text: 'Beta',
+        icon: 'rocket',
+        color: 'blue',
+      };
+
+    case FeatureState.experimental:
+      return {
+        text: 'Experimental',
+        icon: 'exclamation-triangle',
+        color: 'orange',
+      };
+
+    case FeatureState.preview:
+      return {
+        text: 'Preview',
+        icon: 'rocket',
+        color: 'blue',
+      };
+
+    case FeatureState.privatePreview:
+      return {
+        text: 'Private preview',
+        icon: 'rocket',
+        color: 'blue',
+      };
+  }
+}

packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { FeatureState, GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
-import { Badge, BadgeProps } from '../Badge/Badge';
+import { FeatureBadge } from '../FeatureBadge/FeatureBadge';
 
 import { InfoBox, InfoBoxProps } from './InfoBox';
 
@@ -41,30 +41,3 @@ const getFeatureInfoBoxStyles = (theme: GrafanaTheme2) => {
     }),
   };
 };
-
-interface FeatureBadgeProps {
-  featureState: FeatureState;
-  tooltip?: string;
-}
-
-export const FeatureBadge = ({ featureState, tooltip }: FeatureBadgeProps) => {
-  const display = getPanelStateBadgeDisplayModel(featureState);
-  return <Badge text={display.text} color={display.color} icon={display.icon} tooltip={tooltip} />;
-};
-
-function getPanelStateBadgeDisplayModel(featureState: FeatureState): BadgeProps {
-  switch (featureState) {
-    case FeatureState.alpha:
-      return {
-        text: 'Alpha',
-        icon: 'exclamation-triangle',
-        color: 'orange',
-      };
-  }
-
-  return {
-    text: 'Beta',
-    icon: 'rocket',
-    color: 'blue',
-  };
-}

packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx

@@ -24,7 +24,7 @@ const meta: Meta = {
   },
   argTypes: {
     featureState: {
-      control: { type: 'select', options: ['alpha', 'beta', undefined] },
+      control: { type: 'select', options: ['experimental', 'preview'] },
     },
   },
 };
@@ -33,7 +33,7 @@ const defaultProps: FeatureInfoBoxProps = {
   title: 'A title',
   severity: 'info',
   url: 'http://www.grafana.com',
-  featureState: FeatureState.beta,
+  featureState: FeatureState.preview,
 
   children: (
     <p>

packages/grafana-ui/src/components/index.ts

@@ -175,7 +175,8 @@ export {
 } from './DataLinks/DataLinksContextMenu';
 export { SeriesIcon } from './VizLegend/SeriesIcon';
 export { InfoBox } from './InfoBox/InfoBox';
-export { FeatureBadge, FeatureInfoBox } from './InfoBox/FeatureInfoBox';
+export { FeatureInfoBox } from './InfoBox/FeatureInfoBox';
+export { FeatureBadge } from './FeatureBadge/FeatureBadge';
 
 export { JSONFormatter } from './JSONFormatter/JSONFormatter';
 export { JsonExplorer } from './JSONFormatter/json_explorer/json_explorer';