Loki: Rename Labels to Label filter and update placeholders (#53446)

* Loki: Rename Labels to Label filter and update placeholders

* Update label

* Replace Label filter with Label filters based on suggestion
This commit is contained in:
Ivana Huckova 2022-08-12 13:38:34 +02:00 committed by GitHub
parent 91ef08de68
commit f34a03b2f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 12 additions and 7 deletions

View File

@ -44,7 +44,7 @@ describe('LokiQueryBuilder', () => {
render(<LokiQueryBuilder {...props} query={defaultQuery} />);
await userEvent.click(screen.getByLabelText('Add'));
const labels = screen.getByText(/Labels/);
const labels = screen.getByText(/Label filters/);
const selects = getAllByRole(labels.parentElement!.parentElement!.parentElement!, 'combobox');
await userEvent.click(selects[3]);
await waitFor(() => expect(screen.getByText('job')).toBeInTheDocument());

View File

@ -179,7 +179,7 @@ function expectCodeEditor() {
}
async function expectBuilder() {
expect(await screen.findByText('Labels')).toBeInTheDocument();
expect(await screen.findByText('Label filters')).toBeInTheDocument();
}
async function switchToMode(mode: QueryEditorMode) {

View File

@ -50,6 +50,7 @@ export function LabelFilterItem({ item, defaultOp, onChange, onDelete, onGetLabe
<div data-testid="prometheus-dimensions-filter-item">
<InputGroup>
<Select
placeholder="Select label"
aria-label={selectors.components.QueryBuilder.labelSelect}
inputId="prometheus-dimensions-filter-item-key"
width="auto"
@ -86,6 +87,7 @@ export function LabelFilterItem({ item, defaultOp, onChange, onDelete, onGetLabe
/>
<Select
placeholder="Select value"
aria-label={selectors.components.QueryBuilder.valueSelect}
inputId="prometheus-dimensions-filter-item-value"
width="auto"

View File

@ -11,7 +11,8 @@ import { QueryBuilderLabelFilter } from './types';
describe('LabelFilters', () => {
it('renders empty input without labels', async () => {
setup();
expect(screen.getAllByText(/Choose/)).toHaveLength(2);
expect(screen.getAllByText('Select label')).toHaveLength(1);
expect(screen.getAllByText('Select value')).toHaveLength(1);
expect(screen.getByText(/=/)).toBeInTheDocument();
expect(getAddButton()).toBeInTheDocument();
});
@ -49,7 +50,8 @@ describe('LabelFilters', () => {
it('adds new label', async () => {
const { onChange } = setup([{ label: 'foo', op: '=', value: 'bar' }]);
await userEvent.click(getAddButton());
expect(screen.getAllByText(/Choose/)).toHaveLength(2);
expect(screen.getAllByText('Select label')).toHaveLength(1);
expect(screen.getAllByText('Select value')).toHaveLength(1);
const { name, value } = getLabelSelects(1);
await selectOptionInTest(name, 'baz');
await selectOptionInTest(value, 'qux');
@ -72,7 +74,8 @@ describe('LabelFilters', () => {
rerender(
<LabelFilters onChange={jest.fn()} onGetLabelNames={jest.fn()} onGetLabelValues={jest.fn()} labelsFilters={[]} />
);
expect(screen.getAllByText(/Choose/)).toHaveLength(2);
expect(screen.getAllByText('Select label')).toHaveLength(1);
expect(screen.getAllByText('Select value')).toHaveLength(1);
expect(screen.getByText(/=/)).toBeInTheDocument();
expect(getAddButton()).toBeInTheDocument();
});

View File

@ -40,7 +40,7 @@ export function LabelFilters({ labelsFilters, onChange, onGetLabelNames, onGetLa
return (
<EditorFieldGroup>
<EditorField label="Labels" error={error} invalid={!!error}>
<EditorField label="Label filters" error={error} invalid={!!error}>
<EditorList
items={items}
onChange={onLabelsChange}

View File

@ -1,7 +1,7 @@
import { screen, getAllByRole } from '@testing-library/react';
export function getLabelSelects(index = 0) {
const labels = screen.getByText(/Labels/);
const labels = screen.getByText(/Label filters/);
const selects = getAllByRole(labels.parentElement!.parentElement!.parentElement!, 'combobox');
return {
name: selects[3 * index],