From f34a03b2f17798cb67716809b3e8547d61d0d8d6 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Fri, 12 Aug 2022 13:38:34 +0200
Subject: [PATCH] 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
---
 .../querybuilder/components/LokiQueryBuilder.test.tsx    | 2 +-
 .../components/LokiQueryEditorSelector.test.tsx          | 2 +-
 .../prometheus/querybuilder/shared/LabelFilterItem.tsx   | 2 ++
 .../prometheus/querybuilder/shared/LabelFilters.test.tsx | 9 ++++++---
 .../prometheus/querybuilder/shared/LabelFilters.tsx      | 2 +-
 .../datasource/prometheus/querybuilder/testUtils.ts      | 2 +-
 6 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.test.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.test.tsx
index fbbd7470011..b417a4e4c21 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.test.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.test.tsx
@@ -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());
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 749ca6a0634..8b727426566 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.test.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.test.tsx
@@ -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) {
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
index 6fefc2dceea..ee4cdccdc7f 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
@@ -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"
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.test.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.test.tsx
index fb7d8154ee7..a675052237b 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.test.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.test.tsx
@@ -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();
   });
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
index 0b7622dff90..bea7aca2183 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
@@ -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}
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/testUtils.ts b/public/app/plugins/datasource/prometheus/querybuilder/testUtils.ts
index 8fe90238744..c27db4f68ff 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/testUtils.ts
+++ b/public/app/plugins/datasource/prometheus/querybuilder/testUtils.ts
@@ -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],