mirror of https://github.com/grafana/grafana
Loki: Make label browser accessible in query builder (#58525)
* add label browser button to query editor header * add dynamic button label text * add LabelBrowserModal.tsx * toggle label browser modal on click * pass required props to LabelBrowserModal * add placeholder to text input * render label browser inside of the modal * change button based on label status * remove label browser button from code mode * fix element overlap in label browser * fix undefined app in feature tracking * remove all any types * add tests for label browser button * update modal component width * update label loading function * add tests to LabelBrowserModal * fix broken mock datasource * update test names * use stack component for button spacing * revert modal width * update label search placeholder * remove unused import * add test assertion for closed modal * remove redundant if statement * remove unnecessary code * update error message and fix position * fix input placeholder textpull/58101/head
Gareth Dawson
3 years ago
committed by
GitHub
parent
ed72b02b27
commit
a098bdef58
@ -0,0 +1,42 @@ |
||||
import { render, screen } from '@testing-library/react'; |
||||
import React from 'react'; |
||||
|
||||
import { LokiDatasource } from '../../datasource'; |
||||
import { createLokiDatasource } from '../../mocks'; |
||||
import { LokiQuery } from '../../types'; |
||||
|
||||
import { LabelBrowserModal, Props } from './LabelBrowserModal'; |
||||
|
||||
jest.mock('@grafana/runtime', () => ({ |
||||
...jest.requireActual('@grafana/runtime'), |
||||
reportInteraction: jest.fn(), |
||||
})); |
||||
|
||||
describe('LabelBrowserModal', () => { |
||||
let datasource: LokiDatasource, props: Props; |
||||
|
||||
beforeEach(() => { |
||||
datasource = createLokiDatasource(); |
||||
|
||||
props = { |
||||
isOpen: true, |
||||
languageProvider: datasource.languageProvider, |
||||
query: {} as LokiQuery, |
||||
onClose: jest.fn(), |
||||
onChange: jest.fn(), |
||||
onRunQuery: jest.fn(), |
||||
}; |
||||
|
||||
jest.spyOn(datasource, 'metadataRequest').mockResolvedValue({}); |
||||
}); |
||||
|
||||
it('renders the label browser modal when open', () => { |
||||
render(<LabelBrowserModal {...props} />); |
||||
expect(screen.getByRole('heading', { name: /label browser/i })).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it("doesn't render the label browser modal when closed", () => { |
||||
render(<LabelBrowserModal {...props} isOpen={false} />); |
||||
expect(screen.queryByRole('heading', { name: /label browser/i })).toBeNull(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,57 @@ |
||||
import React from 'react'; |
||||
|
||||
import { CoreApp } from '@grafana/data'; |
||||
import { Modal } from '@grafana/ui'; |
||||
import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider'; |
||||
|
||||
import LanguageProvider from '../../LanguageProvider'; |
||||
import { LokiLabelBrowser } from '../../components/LokiLabelBrowser'; |
||||
import { LokiQuery } from '../../types'; |
||||
|
||||
export interface Props { |
||||
isOpen: boolean; |
||||
languageProvider: LanguageProvider; |
||||
query: LokiQuery; |
||||
app?: CoreApp; |
||||
onClose: () => void; |
||||
onChange: (query: LokiQuery) => void; |
||||
onRunQuery: () => void; |
||||
} |
||||
|
||||
export const LabelBrowserModal = (props: Props) => { |
||||
const { isOpen, onClose, languageProvider, app } = props; |
||||
|
||||
const LAST_USED_LABELS_KEY = 'grafana.datasources.loki.browser.labels'; |
||||
|
||||
const changeQuery = (value: string) => { |
||||
const { query, onChange, onRunQuery } = props; |
||||
|
||||
const nextQuery = { ...query, expr: value }; |
||||
onChange(nextQuery); |
||||
onRunQuery(); |
||||
}; |
||||
|
||||
const onChange = (selector: string) => { |
||||
changeQuery(selector); |
||||
onClose(); |
||||
}; |
||||
|
||||
return ( |
||||
<Modal isOpen={isOpen} title="Label browser" onDismiss={onClose}> |
||||
<LocalStorageValueProvider<string[]> storageKey={LAST_USED_LABELS_KEY} defaultValue={[]}> |
||||
{(lastUsedLabels, onLastUsedLabelsSave, onLastUsedLabelsDelete) => { |
||||
return ( |
||||
<LokiLabelBrowser |
||||
languageProvider={languageProvider} |
||||
onChange={onChange} |
||||
lastUsedLabels={lastUsedLabels} |
||||
storeLastUsedLabels={onLastUsedLabelsSave} |
||||
deleteLastUsedLabels={onLastUsedLabelsDelete} |
||||
app={app} |
||||
/> |
||||
); |
||||
}} |
||||
</LocalStorageValueProvider> |
||||
</Modal> |
||||
); |
||||
}; |
||||
Loading…
Reference in new issue