sql editor (#50)

Author: scottlepp

package.json

@@ -15,19 +15,23 @@
   },
   "dependencies": {
     "@grafana/data": "^8.4.7",
+    "@grafana/experimental": "^0.0.2-canary.39",
     "@grafana/runtime": "^8.4.7",
     "@grafana/toolkit": "^8.4.7",
-    "@grafana/ui": "^8.4.7",
     "@grafana/tsconfig": "1.2.0-rc1",
+    "@grafana/ui": "^8.4.7",
     "@types/chance": "^1.1.0",
     "@types/memoize-one": "^5.1.2",
     "@types/react-calendar": "^3.1.2",
-    "react-use": "17.3.1",
     "chance": "^1.1.7",
     "copyfiles": "^2.4.1",
     "memoize-one": "^5.1.1",
     "rc-cascader": "1.0.1",
+    "react-awesome-query-builder": "^5.3.1",
+    "react-use": "17.3.1",
+    "react-virtualized-auto-sizer": "^1.0.6",
     "semver": "^7.3.5",
+    "sql-formatter-plus": "^1.3.6",
     "typescript": "^4.7.4"
   },
   "devDependencies": {

src/components/QueryEditor/AccessoryButton.tsx

@@ -0,0 +1,21 @@
+import { css, cx } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, ButtonProps, stylesFactory, useTheme2 } from '@grafana/ui';
+
+interface AccessoryButtonProps extends ButtonProps {}
+
+export const AccessoryButton: React.FC<AccessoryButtonProps> = ({ className, ...props }) => {
+  const theme = useTheme2();
+  const styles = getButtonStyles(theme);
+
+  return <Button {...props} className={cx(className, styles.button)} />;
+};
+
+const getButtonStyles = stylesFactory((theme: GrafanaTheme2) => ({
+  button: css({
+    paddingLeft: theme.spacing(3 / 2),
+    paddingRight: theme.spacing(3 / 2),
+  }),
+}));

src/components/QueryEditor/ConfirmModal.tsx

@@ -0,0 +1,51 @@
+import React, { useRef, useEffect } from 'react';
+
+import { Button, Icon, Modal } from '@grafana/ui';
+
+type ConfirmModalProps = {
+  isOpen: boolean;
+  onCancel?: () => void;
+  onDiscard?: () => void;
+  onCopy?: () => void;
+};
+export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmModalProps) {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  // Moved from grafana/ui
+  useEffect(() => {
+    // for some reason autoFocus property did no work on this button, but this does
+    if (isOpen) {
+      buttonRef.current?.focus();
+    }
+  }, [isOpen]);
+
+  return (
+    <Modal
+      title={
+        <div className="modal-header-title">
+          <Icon name="exclamation-triangle" size="lg" />
+          <span className="p-l-1">Warning</span>
+        </div>
+      }
+      onDismiss={onCancel}
+      isOpen={isOpen}
+    >
+      <p>
+        Builder mode does not display changes made in code. The query builder will display the last changes you made in
+        builder mode.
+      </p>
+      <p>Do you want to copy your code to the clipboard?</p>
+      <Modal.ButtonRow>
+        <Button type="button" variant="secondary" onClick={onCancel} fill="outline">
+          Cancel
+        </Button>
+        <Button variant="destructive" type="button" onClick={onDiscard} ref={buttonRef}>
+          Discard code and switch
+        </Button>
+        <Button variant="primary" onClick={onCopy}>
+          Copy code and switch
+        </Button>
+      </Modal.ButtonRow>
+    </Modal>
+  );
+}

src/components/QueryEditor/ConnectionLimits.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { FieldSet, InlineField } from '@grafana/ui';
+import { SQLConnectionLimits } from './types';
+import { NumberInput } from './NumberInput';
+
+interface Props<T> {
+  onPropertyChanged: (property: keyof T, value?: number) => void;
+  labelWidth: number;
+  jsonData: SQLConnectionLimits;
+}
+
+export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>) => {
+  const { onPropertyChanged, labelWidth, jsonData } = props;
+
+  const onJSONDataNumberChanged = (property: keyof SQLConnectionLimits) => {
+    return (number?: number) => {
+      if (onPropertyChanged) {
+        onPropertyChanged(property, number);
+      }
+    };
+  };
+
+  return (
+    <FieldSet label="Connection limits">
+      <InlineField
+        tooltip={
+          <span>
+            The maximum number of open connections to the database.If <i>Max idle connections</i> is greater than 0 and
+            the <i>Max open connections</i> is less than <i>Max idle connections</i>, then
+            <i>Max idle connections</i> will be reduced to match the <i>Max open connections</i> limit. If set to 0,
+            there is no limit on the number of open connections.
+          </span>
+        }
+        labelWidth={labelWidth}
+        label="Max open"
+      >
+        <NumberInput
+          placeholder="unlimited"
+          value={jsonData.maxOpenConns}
+          onChange={onJSONDataNumberChanged('maxOpenConns')}
+        ></NumberInput>
+      </InlineField>
+      <InlineField
+        tooltip={
+          <span>
+            The maximum number of connections in the idle connection pool.If <i>Max open connections</i> is greater than
+            0 but less than the <i>Max idle connections</i>, then the <i>Max idle connections</i> will be reduced to
+            match the <i>Max open connections</i> limit. If set to 0, no idle connections are retained.
+          </span>
+        }
+        labelWidth={labelWidth}
+        label="Max idle"
+      >
+        <NumberInput
+          placeholder="2"
+          value={jsonData.maxIdleConns}
+          onChange={onJSONDataNumberChanged('maxIdleConns')}
+        ></NumberInput>
+      </InlineField>
+      <InlineField
+        tooltip="The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever."
+        labelWidth={labelWidth}
+        label="Max lifetime"
+      >
+        <NumberInput
+          placeholder="14400"
+          value={jsonData.connMaxLifetime}
+          onChange={onJSONDataNumberChanged('connMaxLifetime')}
+        ></NumberInput>
+      </InlineField>
+    </FieldSet>
+  );
+};

src/components/QueryEditor/DatasetSelector.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import { useAsync } from 'react-use';
+
+import { SelectableValue } from '@grafana/data';
+import { Select } from '@grafana/ui';
+
+import { DB, ResourceSelectorProps, toOption } from './types';
+
+interface DatasetSelectorProps extends ResourceSelectorProps {
+  db: DB;
+  value: string | null;
+  applyDefault?: boolean;
+  disabled?: boolean;
+  onChange: (v: SelectableValue) => void;
+}
+
+export const DatasetSelector: React.FC<DatasetSelectorProps> = ({
+  db,
+  value,
+  onChange,
+  disabled,
+  className,
+  applyDefault,
+}) => {
+  const state = useAsync(async () => {
+    const datasets = await db.datasets();
+    return datasets.map(toOption);
+  }, []);
+
+  useEffect(() => {
+    if (!applyDefault) {
+      return;
+    }
+    // Set default dataset when values are fetched
+    if (!value) {
+      if (state.value && state.value[0]) {
+        onChange(state.value[0]);
+      }
+    } else {
+      if (state.value && state.value.find((v) => v.value === value) === undefined) {
+        // if value is set and newly fetched values does not contain selected value
+        if (state.value.length > 0) {
+          onChange(state.value[0]);
+        }
+      }
+    }
+  }, [state.value, value, applyDefault, onChange]);
+
+  return (
+    <Select
+      className={className}
+      aria-label="Dataset selector"
+      value={value}
+      options={state.value}
+      onChange={onChange}
+      disabled={disabled}
+      isLoading={state.loading}
+      menuShouldPortal={true}
+    />
+  );
+};

src/components/QueryEditor/EditorField.tsx

@@ -0,0 +1,73 @@
+import { css } from '@emotion/css';
+import React, { ComponentProps } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Space } from './Space';
+import { Field, Icon, PopoverContent, ReactUtils, stylesFactory, Tooltip, useTheme2 } from '@grafana/ui';
+
+interface EditorFieldProps extends ComponentProps<typeof Field> {
+  label: string;
+  children: React.ReactElement;
+  width?: number | string;
+  optional?: boolean;
+  tooltip?: PopoverContent;
+}
+
+export const EditorField: React.FC<EditorFieldProps> = (props) => {
+  const { label, optional, tooltip, children, width, ...fieldProps } = props;
+
+  const theme = useTheme2();
+  const styles = getStyles(theme, width);
+
+  // Null check for backward compatibility
+  const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);
+
+  const labelEl = (
+    <>
+      <label className={styles.label} htmlFor={childInputId}>
+        {label}
+        {optional && <span className={styles.optional}> - optional</span>}
+        {tooltip && (
+          <Tooltip placement="top" content={tooltip} theme="info">
+            <Icon name="info-circle" size="sm" className={styles.icon} />
+          </Tooltip>
+        )}
+      </label>
+      <Space v={0.5} />
+    </>
+  );
+
+  return (
+    <div className={styles.root}>
+      <Field className={styles.field} label={labelEl} {...fieldProps}>
+        {children}
+      </Field>
+    </div>
+  );
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme2, width?: number | string) => {
+  return {
+    root: css({
+      minWidth: theme.spacing(width ?? 0),
+    }),
+    label: css({
+      fontSize: 12,
+      fontWeight: theme.typography.fontWeightMedium,
+    }),
+    optional: css({
+      fontStyle: 'italic',
+      color: theme.colors.text.secondary,
+    }),
+    field: css({
+      marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove
+    }),
+    icon: css({
+      color: theme.colors.text.secondary,
+      marginLeft: theme.spacing(1),
+      ':hover': {
+        color: theme.colors.text.primary,
+      },
+    }),
+  };
+});

src/components/QueryEditor/EditorFieldGroup.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Stack } from './Stack';
+
+interface EditorFieldGroupProps {}
+
+export const EditorFieldGroup: React.FC<EditorFieldGroupProps> = ({ children }) => {
+  return <Stack gap={1}>{children}</Stack>;
+};

src/components/QueryEditor/EditorHeader.tsx

@@ -0,0 +1,24 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useTheme2, stylesFactory } from '@grafana/ui';
+
+interface EditorHeaderProps {}
+
+export const EditorHeader: React.FC<EditorHeaderProps> = ({ children }) => {
+  const theme = useTheme2();
+  const styles = getStyles(theme);
+
+  return <div className={styles.root}>{children}</div>;
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
+  root: css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: theme.spacing(3),
+    minHeight: theme.spacing(4),
+  }),
+}));

src/components/QueryEditor/EditorList.tsx

@@ -0,0 +1,48 @@
+import { Button } from '@grafana/ui';
+import React from 'react';
+
+import { Stack } from './Stack';
+
+interface EditorListProps<T> {
+  items: Array<Partial<T>>;
+  renderItem: (
+    item: Partial<T>,
+    onChangeItem: (item: Partial<T>) => void,
+    onDeleteItem: () => void
+  ) => React.ReactElement;
+  onChange: (items: Array<Partial<T>>) => void;
+}
+
+export function EditorList<T>({ items, renderItem, onChange }: EditorListProps<T>) {
+  const onAddItem = () => {
+    const newItems = [...items, {}];
+
+    onChange(newItems);
+  };
+
+  const onChangeItem = (itemIndex: number, newItem: Partial<T>) => {
+    const newItems = [...items];
+    newItems[itemIndex] = newItem;
+    onChange(newItems);
+  };
+
+  const onDeleteItem = (itemIndex: number) => {
+    const newItems = [...items];
+    newItems.splice(itemIndex, 1);
+    onChange(newItems);
+  };
+  return (
+    <Stack>
+      {items.map((item, index) => (
+        <div key={index}>
+          {renderItem(
+            item,
+            (newItem) => onChangeItem(index, newItem),
+            () => onDeleteItem(index)
+          )}
+        </div>
+      ))}
+      <Button onClick={onAddItem} variant="secondary" size="md" icon="plus" aria-label="Add" type="button" />
+    </Stack>
+  );
+}