Make onCancelQuery optional (#5)

* Make onCancelQuery optional

* add test to check stop button is rendered

Author: kevinwcyu

src/RunQueryButtons.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import { DataQuery } from '@grafana/data';
 import { RunQueryButtons, RunQueryButtonsProps } from './RunQueryButtons';
 
-const getDefaultProps = (overrides: Partial<RunQueryButtonsProps<DataQuery>>) => {
+const getDefaultProps = (overrides?: Partial<RunQueryButtonsProps<DataQuery>>) => {
   return {
     onRunQuery: jest.fn(),
     onCancelQuery: jest.fn(),
@@ -28,4 +28,22 @@ describe('RunQueryButtons', () => {
     const runButton = screen.getByRole('button', { name: 'Run' });
     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' });
+    expect(runButton).toBeInTheDocument();
+    const stopButton = screen.queryByRole('button', { name: 'Stop' });
+    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' });
+    expect(runButton).toBeInTheDocument();
+    const stopButton = screen.queryByRole('button', { name: 'Stop' });
+    expect(stopButton).toBeInTheDocument();
+  });
 });

src/RunQueryButtons.tsx

@@ -4,7 +4,7 @@ import { DataQuery, LoadingState } from '@grafana/data';
 
 export interface RunQueryButtonsProps<TQuery extends DataQuery> {
   onRunQuery: () => void;
-  onCancelQuery: (query: TQuery) => void;
+  onCancelQuery?: (query: TQuery) => void;
   isQueryValid: (query: TQuery) => boolean;
   query: TQuery;
   state?: LoadingState;
@@ -32,10 +32,12 @@ export const RunQueryButtons = <TQuery extends DataQuery>(props: RunQueryButtons
     props.onRunQuery();
   };
 
-  const onCancelQuery = () => {
-    props.onCancelQuery(lastQuery);
-    setStopping(true);
-  };
+  const onCancelQuery = props.onCancelQuery
+    ? () => {
+        props.onCancelQuery?.(lastQuery);
+        setStopping(true);
+      }
+    : undefined;
 
   const isQueryValid = props.isQueryValid(props.query);
 
@@ -50,15 +52,17 @@ export const RunQueryButtons = <TQuery extends DataQuery>(props: RunQueryButtons
           'Run'
         )}
       </Button>
-      <Button icon={running ? undefined : 'square-shape'} disabled={!running || stopping} onClick={onCancelQuery}>
-        {stopping ? (
-          <HorizontalGroup>
-            <Spinner /> Stopping
-          </HorizontalGroup>
-        ) : (
-          'Stop'
-        )}
-      </Button>
+      {onCancelQuery && (
+        <Button icon={running ? undefined : 'square-shape'} disabled={!running || stopping} onClick={onCancelQuery}>
+          {stopping ? (
+            <HorizontalGroup>
+              <Spinner /> Stopping
+            </HorizontalGroup>
+          ) : (
+            'Stop'
+          )}
+        </Button>
+      )}
     </HorizontalGroup>
   );
 };