Add Query Editor Header component (#38)

* Add Query Editor Header component

* Prepare release 0.0.43

.gitignore

@@ -7,4 +7,5 @@ cypress/videos/
 dist/
 compiled/
 yarn-error.log
-.idea/
+.idea/
+.DS_Store

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Change Log
 
 All notable changes to this project will be documented in this file.
+
+## v0.0.43
+
+- Query Editor: Add `QueryEditorHeader` component
+- UI: Export default label width for Configs
+
 ## v0.0.42
 
 - Export DEFAULT_LABEL_WIDTH for Config Editor components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/aws-sdk",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "Common AWS features for grafana",
   "main": "dist/index.js",
   "publishConfig": {
@@ -26,11 +26,15 @@
   "repository": "github:grafana/grafana-aws-sdk-react",
   "author": "Grafana Labs <[email protected]> (https://grafana.com)",
   "license": "Apache-2.0",
-  "dependencies": {},
+  "dependencies": {
+    "@grafana/async-query-data": "0.1.4",
+    "@grafana/experimental": "1.1.0"
+  },
   "devDependencies": {
-    "@grafana/data": "9.2.3",
-    "@grafana/toolkit": "9.2.3",
-    "@grafana/ui": "9.2.3",
+    "@grafana/data": "9.3.2",
+    "@grafana/runtime": "9.3.2",
+    "@grafana/toolkit": "9.3.2",
+    "@grafana/ui": "9.3.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",

src/index.ts

@@ -3,7 +3,7 @@ export { SIGV4ConnectionConfig } from './SIGV4ConnectionConfig';
 export { ConfigSelect, InlineInput } from './sql/ConfigEditor';
 export { ResourceSelector, type ResourceSelectorProps } from './sql/ResourceSelector';
 export { type SQLQuery } from './sql/types';
-export { QueryCodeEditor, FormatSelect, FillValueSelect, FillValueOptions } from './sql/QueryEditor';
+export { QueryEditorHeader, QueryCodeEditor, FormatSelect, FillValueSelect, FillValueOptions } from './sql/QueryEditor';
 export * from './sql/utils';
 export * from './types';
 export * from './regions';

src/sql/QueryEditor/QueryEditorHeader.test.tsx

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { render } from '@testing-library/react';
+import { mockQuery } from './__mocks__/query';
+import { Props as QueryEditorHeaderProps, QueryEditorHeader } from './QueryEditorHeader';
+import { DataQuery, DataSourceApi, DataSourceJsonData } from '@grafana/data';
+import { RunQueryButtons } from '@grafana/async-query-data';
+import { Button } from '@grafana/ui';
+
+const props: QueryEditorHeaderProps<DataSourceApi, DataQuery, DataSourceJsonData> = {
+  query: mockQuery,
+  onChange: jest.fn(),
+  onRunQuery: jest.fn(),
+  enableRunButton: false,
+  datasource: {} as DataSourceApi,
+};
+jest.mock('@grafana/async-query-data', () => ({
+  RunQueryButtons: jest.fn(() => <div>Buttons</div>),
+}));
+jest.mock('@grafana/ui', () => ({
+  ...jest.requireActual('@grafana/ui'),
+  Button: jest.fn(() => <div>Button</div>),
+}));
+
+describe('QueryEditorHeader', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should display RunQueryButtons if showAsyncQueryButtons prop is true', async () => {
+    render(<QueryEditorHeader {...props} showAsyncQueryButtons={true} />);
+    expect(RunQueryButtons).toHaveBeenCalled();
+  });
+  it('should display the run button if showAsyncQueryButtons prop is false', async () => {
+    render(<QueryEditorHeader {...props} showAsyncQueryButtons={false} />);
+    expect(Button).toHaveBeenCalled();
+    expect(RunQueryButtons).not.toHaveBeenCalled();
+  });
+});

src/sql/QueryEditor/QueryEditorHeader.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { DataQuery, DataSourceApi, DataSourceJsonData, LoadingState, QueryEditorProps } from '@grafana/data';
+import { EditorHeader, FlexItem } from '@grafana/experimental';
+import { Button } from '@grafana/ui';
+import { RunQueryButtons } from '@grafana/async-query-data';
+
+export interface Props<
+  Datasource extends DataSourceApi<TQuery, JsonData>,
+  TQuery extends DataQuery,
+  JsonData extends DataSourceJsonData
+> extends QueryEditorProps<Datasource, TQuery, JsonData> {
+  showAsyncQueryButtons?: boolean;
+  extraHeaderElementLeft?: JSX.Element;
+  extraHeaderElementRight?: JSX.Element;
+  enableRunButton: boolean;
+  cancel?: (target: TQuery) => void;
+  onRunQuery: () => void;
+}
+
+export function QueryEditorHeader<
+  Datasource extends DataSourceApi<TQuery, JsonData>,
+  TQuery extends DataQuery,
+  JsonData extends DataSourceJsonData
+>({
+  query,
+  showAsyncQueryButtons,
+  extraHeaderElementLeft,
+  extraHeaderElementRight,
+  enableRunButton,
+  onRunQuery,
+  data,
+  cancel,
+}: Props<Datasource, TQuery, JsonData>): JSX.Element {
+  return (
+    <EditorHeader>
+      {extraHeaderElementLeft}
+      <FlexItem grow={1} />
+      {showAsyncQueryButtons ? (
+        <RunQueryButtons
+          onRunQuery={onRunQuery}
+          enableRun={enableRunButton}
+          query={query}
+          onCancelQuery={cancel}
+          state={data?.state}
+        />
+      ) : (
+        <Button
+          variant={enableRunButton ? 'primary' : 'secondary'}
+          size="sm"
+          onClick={onRunQuery}
+          icon={data?.state === LoadingState.Loading ? 'fa fa-spinner' : undefined}
+          disabled={data?.state === LoadingState.Loading}
+        >
+          Run query
+        </Button>
+      )}
+      {extraHeaderElementRight}
+    </EditorHeader>
+  );
+}

src/sql/QueryEditor/index.ts

@@ -1,3 +1,4 @@
 export { QueryCodeEditor } from './QueryCodeEditor';
+export { QueryEditorHeader } from './QueryEditorHeader';
 export { FormatSelect } from './FormatSelect';
 export { FillValueSelect, FillValueOptions } from './FillValueSelect';