Chore: add new FeatureState (#101228)

add new featurestate

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

@@ -179,4 +179,6 @@ export enum FeatureState {
   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',
+  /** used to mark new GA features */
+  new = 'new',
 }

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

@@ -79,7 +79,7 @@ const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {
       border: `1px solid ${borderColor}`,
       color: textColor,
       fontWeight: theme.typography.fontWeightRegular,
-      gap: '2px',
+      gap: theme.spacing(0.5),
       fontSize: theme.typography.bodySmall.fontSize,
       lineHeight: theme.typography.bodySmall.lineHeight,
       alignItems: 'center',

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

@@ -1,5 +1,6 @@
 import { FeatureState } from '@grafana/data';
 
+import { t } from '../../utils/i18n';
 import { Badge, BadgeProps } from '../Badge/Badge';
 
 export interface FeatureBadgeProps {
@@ -30,21 +31,28 @@ function getPanelStateBadgeDisplayModel(featureState: FeatureState): BadgeProps
 
     case FeatureState.experimental:
       return {
-        text: 'Experimental',
+        text: t('grafana-ui.feature-badge.experimental', 'Experimental'),
         icon: 'exclamation-triangle',
         color: 'orange',
       };
 
     case FeatureState.preview:
       return {
-        text: 'Preview',
+        text: t('grafana-ui.feature-badge.preview', 'Preview'),
         icon: 'rocket',
         color: 'blue',
       };
 
     case FeatureState.privatePreview:
       return {
-        text: 'Private preview',
+        text: t('grafana-ui.feature-badge.private-preview', 'Private preview'),
+        icon: 'rocket',
+        color: 'blue',
+      };
+
+    case FeatureState.new:
+      return {
+        text: t('grafana-ui.feature-badge.new', 'New!'),
         icon: 'rocket',
         color: 'blue',
       };

public/app/core/components/AppChrome/MegaMenu/MegaMenuItem.tsx

@@ -4,10 +4,9 @@ import * as React from 'react';
 import { useLocation } from 'react-router-dom-v5-compat';
 import { useLocalStorage } from 'react-use';
 
-import { GrafanaTheme2, NavModelItem, toIconName } from '@grafana/data';
-import { useStyles2, Text, IconButton, Icon, Stack, Badge } from '@grafana/ui';
+import { FeatureState, GrafanaTheme2, NavModelItem, toIconName } from '@grafana/data';
+import { useStyles2, Text, IconButton, Icon, Stack, FeatureBadge } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
-import { t } from 'app/core/internationalization';
 
 import { Indent } from '../../Indent/Indent';
 
@@ -108,7 +107,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick, onPin, isPi
             >
               {level === 0 && iconElement && <FeatureHighlightWrapper>{iconElement}</FeatureHighlightWrapper>}
               <Text truncate>{link.text}</Text>
-              {link.isNew && <Badge text={t('navigation.megamenu.new', 'New!')} color={'blue'} />}
+              {link.isNew && <FeatureBadge featureState={FeatureState.new} />}
             </div>
           </MegaMenuItemText>
         </div>

public/locales/en-US/grafana.json

@@ -1750,6 +1750,12 @@
     "drawer": {
       "close": "Close"
     },
+    "feature-badge": {
+      "experimental": "Experimental",
+      "new": "New!",
+      "preview": "Preview",
+      "private-preview": "Private preview"
+    },
     "field-link-list": {
       "external-links-heading": "External links"
     },
@@ -2756,7 +2762,6 @@
       "close": "Close menu",
       "dock": "Dock menu",
       "list-label": "Navigation",
-      "new": "New!",
       "open": "Open menu",
       "undock": "Undock menu"
     },

public/locales/pseudo-LOCALE/grafana.json

@@ -1750,6 +1750,12 @@
     "drawer": {
       "close": "Cľőşę"
     },
+    "feature-badge": {
+      "experimental": "Ēχpęřįmęʼnŧäľ",
+      "new": "Ńęŵ!",
+      "preview": "Přęvįęŵ",
+      "private-preview": "Přįväŧę přęvįęŵ"
+    },
     "field-link-list": {
       "external-links-heading": "Ēχŧęřʼnäľ ľįʼnĸş"
     },
@@ -2756,7 +2762,6 @@
       "close": "Cľőşę męʼnū",
       "dock": "Đőčĸ męʼnū",
       "list-label": "Ńävįģäŧįőʼn",
-      "new": "Ńęŵ!",
       "open": "Øpęʼn męʼnū",
       "undock": "Ůʼnđőčĸ męʼnū"
     },