Prometheus: Add beta tag to mode switch for Builder mode (#47376)

* Add beta tag to mode switch

* Fix selectors
This commit is contained in:
Andrej Ocenas 2022-04-06 11:50:12 +02:00 committed by GitHub
parent caa82a124d
commit 0d3879d1c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 9 deletions

View File

@ -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>
);
})}

View File

@ -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);

View File

@ -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);

View File

@ -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 },
];