Add isQueryValid prop for RunQueryButtons (#3)

* Add isQueryValid prop for RunQueryButtons

* add test

Author: kevinwcyu

src/RunQueryButtons.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { DataQuery } from '@grafana/data';
+import { RunQueryButtons, RunQueryButtonsProps } from './RunQueryButtons';
+
+const getDefaultProps = (overrides: Partial<RunQueryButtonsProps<DataQuery>>) => {
+  return {
+    onRunQuery: jest.fn(),
+    onCancelQuery: jest.fn(),
+    isQueryValid: jest.fn(),
+    query: { refId: 'refId' },
+    ...overrides,
+  };
+};
+
+describe('RunQueryButtons', () => {
+  it('disable the run button if the query is invalid', () => {
+    const props = getDefaultProps({ isQueryValid: jest.fn().mockReturnValue(false) });
+    render(<RunQueryButtons {...props} />);
+    const runButton = screen.getByRole('button', { name: 'Run' });
+    expect(runButton).toBeDisabled();
+  });
+
+  it('run button should be enabled if the query is valid', () => {
+    const props = getDefaultProps({ isQueryValid: jest.fn().mockReturnValue(true) });
+    render(<RunQueryButtons {...props} />);
+    const runButton = screen.getByRole('button', { name: 'Run' });
+    expect(runButton).not.toBeDisabled();
+  });
+});

src/RunQueryButtons.tsx

@@ -2,9 +2,10 @@ import React, { useEffect, useState } from 'react';
 import { HorizontalGroup, Button, Spinner } from '@grafana/ui';
 import { DataQuery, LoadingState } from '@grafana/data';
 
-interface RunQueryButtonsProps<TQuery extends DataQuery> {
+export interface RunQueryButtonsProps<TQuery extends DataQuery> {
   onRunQuery: () => void;
   onCancelQuery: (query: TQuery) => void;
+  isQueryValid: (query: TQuery) => boolean;
   query: TQuery;
   state?: LoadingState;
 }
@@ -36,9 +37,11 @@ export const RunQueryButtons = <TQuery extends DataQuery>(props: RunQueryButtons
     setStopping(true);
   };
 
+  const isQueryValid = props.isQueryValid(props.query);
+
   return (
     <HorizontalGroup>
-      <Button icon={running ? undefined : 'play'} disabled={running} onClick={onRunQuery}>
+      <Button icon={running ? undefined : 'play'} disabled={running || !isQueryValid} onClick={onRunQuery}>
         {running && !stopping ? (
           <HorizontalGroup>
             <Spinner /> Running