From 105fb9cab75326d42ab348d537b07b23b6416ff5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ida=20=C5=A0tambuk?= <ida.stambuk@grafana.com>
Date: Tue, 7 Feb 2023 18:14:56 +0100
Subject: [PATCH] Modify query buttons into header buttons (#10)

* Release 0.1.4
---
 .gitignore                   |  4 ++-
 CHANGELOG.md                 |  4 +++
 package.json                 |  2 +-
 src/RunQueryButtons.test.tsx | 22 ++++++++---------
 src/RunQueryButtons.tsx      | 48 +++++++++++++++++-------------------
 5 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/.gitignore b/.gitignore
index 5b932b4..ea3b4d4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,6 @@ cypress/screenshots/actual
 cypress/videos/
 dist/
 compiled/
-yarn-error.log
\ No newline at end of file
+yarn-error.log
+.DS_Store
+.idea/
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39196ba..51b6238 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## v0.1.4
+
+- Modify query buttons into header buttons
+
 ## v0.0.1
 
 - Add `DatasourceWithAsyncBackend` class to handle async query flow on the frontend
diff --git a/package.json b/package.json
index 087f8de..84ee6dc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@grafana/async-query-data",
-  "version": "0.0.4",
+  "version": "0.1.4",
   "description": "Async query support for Grafana",
   "main": "dist/index.js",
   "scripts": {
diff --git a/src/RunQueryButtons.test.tsx b/src/RunQueryButtons.test.tsx
index b381d4a..0cf477f 100644
--- a/src/RunQueryButtons.test.tsx
+++ b/src/RunQueryButtons.test.tsx
@@ -8,42 +8,42 @@ const getDefaultProps = (overrides?: Partial<RunQueryButtonsProps<DataQuery>>) =
   return {
     onRunQuery: jest.fn(),
     onCancelQuery: jest.fn(),
-    isQueryValid: jest.fn(),
+    enableRun: true,
     query: { refId: 'refId' },
     ...overrides,
   };
 };
 
 describe('RunQueryButtons', () => {
-  it('disable the run button if the query is invalid', () => {
-    const props = getDefaultProps({ isQueryValid: jest.fn().mockReturnValue(false) });
+  it('disable the run button if the if the enableRun button is false', () => {
+    const props = getDefaultProps({ enableRun: false});
     render(<RunQueryButtons {...props} />);
-    const runButton = screen.getByRole('button', { name: 'Run' });
+    const runButton = screen.getByRole('button', { name: 'Run query' });
     expect(runButton).toBeDisabled();
   });
 
-  it('run button should be enabled if the query is valid', () => {
-    const props = getDefaultProps({ isQueryValid: jest.fn().mockReturnValue(true) });
+  it('run button should be enabled if the enableRun button is true', () => {
+    const props = getDefaultProps({ enableRun: true});
     render(<RunQueryButtons {...props} />);
-    const runButton = screen.getByRole('button', { name: 'Run' });
+    const runButton = screen.getByRole('button', { name: 'Run query' });
     expect(runButton).not.toBeDisabled();
   });
 
   it('only renders the `Run` button if onCancelQuery is undefined', () => {
     const props = getDefaultProps({ onCancelQuery: undefined });
     render(<RunQueryButtons {...props} />);
-    const runButton = screen.getByRole('button', { name: 'Run' });
+    const runButton = screen.getByRole('button', { name: 'Run query' });
     expect(runButton).toBeInTheDocument();
-    const stopButton = screen.queryByRole('button', { name: 'Stop' });
+    const stopButton = screen.queryByRole('button', { name: 'Stop query' });
     expect(stopButton).not.toBeInTheDocument();
   });
 
   it('renders the `Run` and `Stop` buttons if onCancelQuery defined', () => {
     const props = getDefaultProps();
     render(<RunQueryButtons {...props} />);
-    const runButton = screen.getByRole('button', { name: 'Run' });
+    const runButton = screen.getByRole('button', { name: 'Run query' });
     expect(runButton).toBeInTheDocument();
-    const stopButton = screen.queryByRole('button', { name: 'Stop' });
+    const stopButton = screen.queryByRole('button', { name: 'Stop query' });
     expect(stopButton).toBeInTheDocument();
   });
 });
diff --git a/src/RunQueryButtons.tsx b/src/RunQueryButtons.tsx
index 424ee5c..eb2e10d 100644
--- a/src/RunQueryButtons.tsx
+++ b/src/RunQueryButtons.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { HorizontalGroup, Button, Spinner } from '@grafana/ui';
+import { Button } from '@grafana/ui';
 import { DataQuery, LoadingState } from '@grafana/data';
 
 export interface RunQueryButtonsProps<TQuery extends DataQuery> {
+  enableRun?: boolean;
   onRunQuery: () => void;
   onCancelQuery?: (query: TQuery) => void;
-  isQueryValid: (query: TQuery) => boolean;
   query: TQuery;
   state?: LoadingState;
 }
@@ -39,30 +39,28 @@ export const RunQueryButtons = <TQuery extends DataQuery>(props: RunQueryButtons
       }
     : undefined;
 
-  const isQueryValid = props.isQueryValid(props.query);
-
   return (
-    <HorizontalGroup>
-      <Button icon={running ? undefined : 'play'} disabled={running || !isQueryValid} onClick={onRunQuery}>
-        {running && !stopping ? (
-          <HorizontalGroup>
-            <Spinner /> Running
-          </HorizontalGroup>
-        ) : (
-          'Run'
-        )}
-      </Button>
-      {onCancelQuery && (
-        <Button icon={running ? undefined : 'square-shape'} disabled={!running || stopping} onClick={onCancelQuery}>
-          {stopping ? (
-            <HorizontalGroup>
-              <Spinner /> Stopping
-            </HorizontalGroup>
-          ) : (
-            'Stop'
-          )}
+      <>
+        <Button
+            variant={props.enableRun ? 'primary' : 'secondary'}
+            size="sm"
+            onClick={onRunQuery}
+            icon={running && !stopping ? 'fa fa-spinner' : undefined}
+            disabled={state === LoadingState.Loading || !props.enableRun}
+        >
+          Run query
         </Button>
-      )}
-    </HorizontalGroup>
+        {onCancelQuery &&
+            <Button
+                variant={running && !stopping ? 'primary' : 'secondary'}
+                size="sm"
+                disabled={!running || stopping}
+                icon={stopping ? 'fa fa-spinner' : undefined}
+                onClick={onCancelQuery}
+            >
+              Stop query
+            </Button>
+        }
+      </>
   );
 };