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.icon && <Icon name={o.icon as IconName} className={styles.icon} />}
{o.imgUrl && <img src={o.imgUrl} alt={o.label} className={styles.img} />} {o.imgUrl && <img src={o.imgUrl} alt={o.label} className={styles.img} />}
{o.label} {o.label} {o.component ? <o.component /> : null}
</RadioButton> </RadioButton>
); );
})} })}

View File

@ -187,9 +187,9 @@ function expectExplain() {
function switchToMode(mode: QueryEditorMode) { function switchToMode(mode: QueryEditorMode) {
const label = { const label = {
[QueryEditorMode.Code]: 'Code', [QueryEditorMode.Code]: /Code/,
[QueryEditorMode.Explain]: 'Explain', [QueryEditorMode.Explain]: /Explain/,
[QueryEditorMode.Builder]: 'Builder', [QueryEditorMode.Builder]: /Builder/,
}[mode]; }[mode];
const switchEl = screen.getByLabelText(label); const switchEl = screen.getByLabelText(label);

View File

@ -189,9 +189,9 @@ function expectExplain() {
function switchToMode(mode: QueryEditorMode) { function switchToMode(mode: QueryEditorMode) {
const label = { const label = {
[QueryEditorMode.Code]: 'Code', [QueryEditorMode.Code]: /Code/,
[QueryEditorMode.Explain]: 'Explain', [QueryEditorMode.Explain]: /Explain/,
[QueryEditorMode.Builder]: 'Builder', [QueryEditorMode.Builder]: /Builder/,
}[mode]; }[mode];
const switchEl = screen.getByLabelText(label); 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 React from 'react';
import { css } from '@emotion/css';
import { QueryEditorMode } from './types'; import { QueryEditorMode } from './types';
export interface Props { export interface Props {
@ -9,7 +10,21 @@ export interface Props {
const editorModes = [ const editorModes = [
{ label: 'Explain', value: QueryEditorMode.Explain }, { 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 }, { label: 'Code', value: QueryEditorMode.Code },
]; ];