Loki: Change run query button text based on number of queries (#76196)

Loki: Change run query button name based on number of queries

public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx

@@ -88,21 +88,26 @@ describe('LokiQueryEditorSelector', () => {
     await expectBuilder();
   });
 
-  it('shows Run Queries button in Dashboards', async () => {
+  it('shows Run Query button in Dashboards', async () => {
     renderWithProps({}, { app: CoreApp.Dashboard });
-    await expectRunQueriesButton();
+    await expectRunQueryButton();
   });
 
-  it('hides Run Queries button in Explore', async () => {
+  it('hides Run Query button in Explore', async () => {
     renderWithProps({}, { app: CoreApp.Explore });
     await expectCodeEditor();
-    expectNoRunQueriesButton();
+    expectNoRunQueryButton();
   });
 
-  it('hides Run Queries button in Correlations Page', async () => {
+  it('hides Run Query button in Correlations Page', async () => {
     renderWithProps({}, { app: CoreApp.Correlations });
     await expectCodeEditor();
-    expectNoRunQueriesButton();
+    expectNoRunQueryButton();
+  });
+
+  it('shows Run Queries button in Dashboards when multiple queries', async () => {
+    renderWithProps({}, { app: CoreApp.Dashboard, queries: [defaultQuery, defaultQuery] });
+    await expectRunQueriesButton();
   });
 
   it('changes to builder mode', async () => {
@@ -204,8 +209,12 @@ async function expectRunQueriesButton() {
   expect(await screen.findByRole('button', { name: /run queries/i })).toBeInTheDocument();
 }
 
-function expectNoRunQueriesButton() {
-  expect(screen.queryByRole('button', { name: /run queries/i })).not.toBeInTheDocument();
+async function expectRunQueryButton() {
+  expect(await screen.findByRole('button', { name: /run query/i })).toBeInTheDocument();
+}
+
+function expectNoRunQueryButton() {
+  expect(screen.queryByRole('button', { name: /run query/i })).not.toBeInTheDocument();
 }
 
 async function switchToMode(mode: QueryEditorMode) {

public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx

@@ -179,7 +179,7 @@ export const LokiQueryEditor = React.memo<LokiQueryEditorProps>((props) => {
             icon={data?.state === LoadingState.Loading ? 'fa fa-spinner' : undefined}
             disabled={data?.state === LoadingState.Loading}
           >
-            Run queries
+            {queries && queries.length > 1 ? `Run queries` : `Run query`}
           </Button>
         )}
         <QueryEditorModeToggle mode={editorMode!} onChange={onEditorModeChange} />