Modify query buttons into header buttons (#10)

* Release 0.1.4

Author: idastambuk

.gitignore

@@ -6,4 +6,6 @@ cypress/screenshots/actual
 cypress/videos/
 dist/
 compiled/
-yarn-error.log
+yarn-error.log
+.DS_Store
+.idea/

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

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": {

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();
   });
 });

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>
+        }
+      </>
   );
 };