From 0d3879d1c1f2c5fb564069cf5d4cb1da986fe48e Mon Sep 17 00:00:00 2001
From: Andrej Ocenas <mr.ocenas@gmail.com>
Date: Wed, 6 Apr 2022 11:50:12 +0200
Subject: [PATCH] Prometheus: Add beta tag to mode switch for Builder mode
 (#47376)

* Add beta tag to mode switch

* Fix selectors
---
 .../RadioButtonGroup/RadioButtonGroup.tsx     |  2 +-
 .../LokiQueryEditorSelector.test.tsx          |  6 +++---
 .../PromQueryEditorSelector.test.tsx          |  6 +++---
 .../shared/QueryEditorModeToggle.tsx          | 19 +++++++++++++++++--
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
index 17134a109e7..c817ef4d391 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
@@ -87,7 +87,7 @@ export function RadioButtonGroup<T>({
           >
             {o.icon && <Icon name={o.icon as IconName} className={styles.icon} />}
             {o.imgUrl && <img src={o.imgUrl} alt={o.label} className={styles.img} />}
-            {o.label}
+            {o.label} {o.component ? <o.component /> : null}
           </RadioButton>
         );
       })}
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.test.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.test.tsx
index 61d05aabcb7..46e6fa8a22e 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.test.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.test.tsx
@@ -187,9 +187,9 @@ function expectExplain() {
 
 function switchToMode(mode: QueryEditorMode) {
   const label = {
-    [QueryEditorMode.Code]: 'Code',
-    [QueryEditorMode.Explain]: 'Explain',
-    [QueryEditorMode.Builder]: 'Builder',
+    [QueryEditorMode.Code]: /Code/,
+    [QueryEditorMode.Explain]: /Explain/,
+    [QueryEditorMode.Builder]: /Builder/,
   }[mode];
 
   const switchEl = screen.getByLabelText(label);
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx
index 3c7666c9c3a..bb92ec241d0 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx
@@ -189,9 +189,9 @@ function expectExplain() {
 
 function switchToMode(mode: QueryEditorMode) {
   const label = {
-    [QueryEditorMode.Code]: 'Code',
-    [QueryEditorMode.Explain]: 'Explain',
-    [QueryEditorMode.Builder]: 'Builder',
+    [QueryEditorMode.Code]: /Code/,
+    [QueryEditorMode.Explain]: /Explain/,
+    [QueryEditorMode.Builder]: /Builder/,
   }[mode];
 
   const switchEl = screen.getByLabelText(label);
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryEditorModeToggle.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryEditorModeToggle.tsx
index 725e608130a..ae44a01e4da 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryEditorModeToggle.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryEditorModeToggle.tsx
@@ -1,5 +1,6 @@
-import { RadioButtonGroup } from '@grafana/ui';
+import { RadioButtonGroup, Tag } from '@grafana/ui';
 import React from 'react';
+import { css } from '@emotion/css';
 import { QueryEditorMode } from './types';
 
 export interface Props {
@@ -9,7 +10,21 @@ export interface Props {
 
 const editorModes = [
   { label: 'Explain', value: QueryEditorMode.Explain },
-  { label: 'Builder', value: QueryEditorMode.Builder },
+  {
+    label: 'Builder',
+    value: QueryEditorMode.Builder,
+    component: () => (
+      <Tag
+        className={css({
+          fontSize: 10,
+          padding: '1px 5px',
+          verticalAlign: 'text-bottom',
+        })}
+        name={'Beta'}
+        colorIndex={1}
+      />
+    ),
+  },
   { label: 'Code', value: QueryEditorMode.Code },
 ];