@grafana/plugin-ui 0.1.10

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateOptions = exports.selectOption = exports.SqlDatasource = void 0;
+const tslib_1 = require("tslib");
+/**
+ * A library containing the different design components of the Grafana plugins ecosystem.
+ *
+ * @packageDocumentation
+ */
+tslib_1.__exportStar(require("./components"), exports);
+tslib_1.__exportStar(require("./unreleasedComponents"), exports);
+tslib_1.__exportStar(require("./test/mocks"), exports);
+tslib_1.__exportStar(require("./utils"), exports);
+var SqlDatasource_1 = require("./datasource/SqlDatasource");
+Object.defineProperty(exports, "SqlDatasource", { enumerable: true, get: function () { return SqlDatasource_1.SqlDatasource; } });
+var _8x_1 = require("./8x");
+Object.defineProperty(exports, "selectOption", { enumerable: true, get: function () { return _8x_1.selectOption; } });
+Object.defineProperty(exports, "generateOptions", { enumerable: true, get: function () { return _8x_1.generateOptions; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA;;;;GAIG;AACH,uDAA6B;AAC7B,iEAAuC;AACvC,uDAA6B;AAC7B,kDAAwB;AACxB,4DAA2D;AAAlD,8GAAA,aAAa,OAAA;AACtB,4BAAqD;AAA5C,mGAAA,YAAY,OAAA;AAAE,sGAAA,eAAe,OAAA"}

package/dist/src/8x/fixtures/index.d.ts

@@ -0,0 +1 @@
+export { selectOption, generateOptions } from './select';

package/dist/src/8x/fixtures/select.d.ts

@@ -0,0 +1,11 @@
+import { SelectableValue } from '@grafana/data';
+export declare const generateOptions: () => Array<SelectableValue<string>>;
+/**
+ * react-select (used by @grafana/ui) renders very differently from the native Select HTML element
+ * and because they do not pass data-testid down, it is difficult to grab the
+ * correct element and simulate selecting different options
+ * created a helper function to click and select a different option manually
+ * @param optionLabel
+ * @param index If there are multiple inputs and you don't want the first one taken, then pass in the index
+ */
+export declare const selectOption: (optionLabel: string, index?: number, role?: string) => Promise<void>;

package/dist/src/8x/index.d.ts

@@ -0,0 +1 @@
+export * from './fixtures';

package/dist/src/components/AsyncButtonCascader/AsyncButtonCascader.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CascaderOption } from 'rc-cascader';
+export interface AsyncButtonCascaderProps {
+    options: CascaderOption[];
+    children: string;
+    disabled?: boolean;
+    value: string[];
+    fieldNames?: {
+        label: string;
+        value: string;
+        children: string;
+    };
+    loadData?: (selectedOptions: CascaderOption[]) => void;
+    onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
+    onPopupVisibleChange?: (visible: boolean) => void;
+    className?: string;
+}
+export declare const AsyncButtonCascader: React.FC<AsyncButtonCascaderProps>;

package/dist/src/components/Cascader/Cascader.d.ts

@@ -0,0 +1 @@
+export { Cascader } from '@grafana/ui';

package/dist/src/components/DataLinks/DataLink.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { VariableSuggestion, DataSourceInstanceSettings, DataSourceJsonData } from '@grafana/data';
+import { DataLinkConfig } from './types';
+declare type Props = {
+    value: DataLinkConfig;
+    datasources?: DataSourceInstanceSettings<DataSourceJsonData>[];
+    onChange: (value: DataLinkConfig) => void;
+    onDelete: () => void;
+    suggestions: VariableSuggestion[];
+    className?: string;
+};
+export declare const DataLink: (props: Props) => JSX.Element;
+export {};

package/dist/src/components/DataLinks/DataLinks.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DataLinkConfig } from './types';
+declare type Props = {
+    value?: DataLinkConfig[];
+    onChange: (value: DataLinkConfig[]) => void;
+};
+export declare const DataLinks: (props: Props) => JSX.Element;
+export {};

package/dist/src/components/DataLinks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './DataLinks';
+export * from './DataLink';

package/dist/src/components/DataLinks/types.d.ts

@@ -0,0 +1,7 @@
+export declare type DataLinkConfig = {
+    field: string;
+    label: string;
+    matcherRegex: string;
+    url: string;
+    datasourceUid?: string;
+};

package/dist/src/components/DataSourcePicker/DataSourcePicker.d.ts

@@ -0,0 +1,34 @@
+import { PureComponent } from 'react';
+import { DataSourceInstanceSettings, SelectableValue } from '@grafana/data';
+import { DataSourceSrv } from '@grafana/runtime';
+export interface Props {
+    onChange: (ds: DataSourceInstanceSettings) => void;
+    current: string | null;
+    hideTextValue?: boolean;
+    onBlur?: () => void;
+    autoFocus?: boolean;
+    openMenuOnFocus?: boolean;
+    placeholder?: string;
+    tracing?: boolean;
+    mixed?: boolean;
+    dashboard?: boolean;
+    metrics?: boolean;
+    annotations?: boolean;
+    variables?: boolean;
+    pluginId?: string;
+    noDefault?: boolean;
+}
+export interface State {
+    error?: string;
+}
+export declare class DataSourcePicker extends PureComponent<Props, State> {
+    dataSourceSrv: DataSourceSrv;
+    static defaultProps: Partial<Props>;
+    state: State;
+    constructor(props: Props);
+    componentDidMount(): void;
+    onChange: (item: SelectableValue<string>) => void;
+    private getCurrentValue;
+    getDataSourceOptions(): Array<SelectableValue<string>>;
+    render(): JSX.Element;
+}

package/dist/src/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface DatePickerProps {
+    isOpen?: boolean;
+    onClose: () => void;
+    onChange: (value: Date) => void;
+    value?: Date;
+}
+export declare const DatePicker: React.NamedExoticComponent<DatePickerProps>;

package/dist/src/components/DatePicker/styles.d.ts

@@ -0,0 +1,11 @@
+import { GrafanaTheme2 } from '@grafana/data';
+export declare const getStyles: (theme: GrafanaTheme2) => {
+    container: string;
+    modal: string;
+    content: string;
+    backdrop: string;
+};
+export declare const getBodyStyles: (theme: GrafanaTheme2) => {
+    title: string;
+    body: string;
+};

package/dist/src/components/DatePickerWithInput/DatePickerWithInput.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Props as InputProps } from '@grafana/ui/components/Input/Input';
+import './style.css';
+export declare const formatDate: (date: Date) => string;
+export interface DatePickerWithInputProps extends Omit<InputProps, 'ref' | 'value' | 'onChange'> {
+    value?: Date;
+    onChange: (value: Date) => void;
+}
+export declare const DatePickerWithInput: (props: DatePickerWithInputProps) => JSX.Element;

package/dist/src/components/DebounceInput/DebounceInput.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Props as InputProps } from '@grafana/ui/components/Input/Input';
+export interface DebounceInputProps extends Omit<InputProps, 'ref'> {
+    value: string;
+    onDebounce: (debouncedInput?: string) => void;
+    delay?: number;
+}
+export declare const DebounceInput: (props: DebounceInputProps) => JSX.Element;

package/dist/src/components/Plugins/PluginSignatureBadge.d.ts

@@ -0,0 +1,9 @@
+import React, { HTMLAttributes } from 'react';
+import { PluginErrorCode, PluginSignatureStatus } from '@grafana/data';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    status?: PluginSignatureStatus;
+}
+export declare const PluginSignatureBadge: React.FC<Props>;
+export declare function isUnsignedPluginSignature(signature?: PluginSignatureStatus): boolean | undefined;
+export declare function mapPluginErrorCodeToSignatureStatus(code: PluginErrorCode): PluginSignatureStatus.invalid | PluginSignatureStatus.modified | PluginSignatureStatus.missing;
+export {};

package/dist/src/components/QueryEditor/AccessoryButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ButtonProps } from '@grafana/ui';
+interface AccessoryButtonProps extends ButtonProps {
+}
+export declare const AccessoryButton: React.FC<AccessoryButtonProps>;
+export {};

package/dist/src/components/QueryEditor/ConfirmModal.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type ConfirmModalProps = {
+    isOpen: boolean;
+    onCancel?: () => void;
+    onDiscard?: () => void;
+    onCopy?: () => void;
+};
+export declare function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmModalProps): JSX.Element;
+export {};

package/dist/src/components/QueryEditor/DatasetSelector.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SelectableValue } from '@grafana/data';
+import { DB, ResourceSelectorProps } from './types';
+interface DatasetSelectorProps extends ResourceSelectorProps {
+    db: DB;
+    value: string | null;
+    applyDefault?: boolean;
+    disabled?: boolean;
+    onChange: (v: SelectableValue) => void;
+}
+export declare const DatasetSelector: React.FC<DatasetSelectorProps>;
+export {};

package/dist/src/components/QueryEditor/EditorField.d.ts

@@ -0,0 +1,11 @@
+import React, { ComponentProps } from 'react';
+import { Field, PopoverContent } from '@grafana/ui';
+interface EditorFieldProps extends ComponentProps<typeof Field> {
+    label: string;
+    children: React.ReactElement;
+    width?: number | string;
+    optional?: boolean;
+    tooltip?: PopoverContent;
+}
+export declare const EditorField: React.FC<EditorFieldProps>;
+export {};

package/dist/src/components/QueryEditor/EditorFieldGroup.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface EditorFieldGroupProps {
+}
+export declare const EditorFieldGroup: React.FC<EditorFieldGroupProps>;
+export {};

package/dist/src/components/QueryEditor/EditorHeader.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface EditorHeaderProps {
+}
+export declare const EditorHeader: React.FC<EditorHeaderProps>;
+export {};

package/dist/src/components/QueryEditor/EditorList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+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 declare function EditorList<T>({ items, renderItem, onChange }: EditorListProps<T>): JSX.Element;
+export {};

package/dist/src/components/QueryEditor/EditorRow.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface EditorRowProps {
+}
+export declare const EditorRow: React.FC<EditorRowProps>;
+export {};

package/dist/src/components/QueryEditor/EditorRows.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface EditorRowsProps {
+}
+export declare const EditorRows: React.FC<EditorRowsProps>;
+export {};

package/dist/src/components/QueryEditor/EditorSwitch.d.ts

@@ -0,0 +1,3 @@
+import { Switch } from '@grafana/ui';
+import React, { ComponentProps } from 'react';
+export declare const EditorSwitch: React.FC<ComponentProps<typeof Switch>>;

package/dist/src/components/QueryEditor/ErrorBoundary.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+declare type Props = {
+    fallBackComponent?: React.ReactNode;
+};
+export declare class ErrorBoundary extends React.Component<Props, {
+    hasError: boolean;
+}> {
+    constructor(props: Props);
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    render(): React.ReactNode;
+}
+export {};

package/dist/src/components/QueryEditor/FlexItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FlexItemProps {
+    grow?: number;
+    shrink?: number;
+}
+export declare const FlexItem: React.FC<FlexItemProps>;
+export {};

package/dist/src/components/QueryEditor/InlineSelect.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SelectCommonProps } from '@grafana/ui';
+interface InlineSelectProps<T> extends SelectCommonProps<T> {
+    label?: string;
+}
+export declare function InlineSelect<T>({ label: labelProp, ...props }: InlineSelectProps<T>): JSX.Element;
+export {};

package/dist/src/components/QueryEditor/InputGroup.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface InputGroupProps {
+}
+export declare const InputGroup: React.FC<InputGroupProps>;
+export {};

package/dist/src/components/QueryEditor/QueryEditor.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { QueryEditorProps } from '@grafana/data';
+import { SQLQuery, SQLOptions } from './types';
+import { SqlDatasource } from '../../datasource/SqlDatasource';
+declare type Props = QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions>;
+export declare function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }: Props): JSX.Element | null;
+export {};

package/dist/src/components/QueryEditor/QueryHeader.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { QueryWithDefaults } from './defaults';
+import { DB, SQLQuery, QueryRowFilter } from './types';
+interface QueryHeaderProps {
+    db: DB;
+    query: QueryWithDefaults;
+    onChange: (query: SQLQuery) => void;
+    onRunQuery: () => void;
+    onQueryRowChange: (queryRowFilter: QueryRowFilter) => void;
+    queryRowFilter: QueryRowFilter;
+    isQueryRunnable: boolean;
+    labels?: Map<string, string>;
+}
+export declare function QueryHeader({ db, query, queryRowFilter, onChange, onRunQuery, onQueryRowChange, isQueryRunnable, labels, }: QueryHeaderProps): JSX.Element;
+export {};

package/dist/src/components/QueryEditor/Space.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface SpaceProps {
+    v?: number;
+    h?: number;
+    layout?: 'block' | 'inline';
+}
+export declare const Space: {
+    (props: SpaceProps): JSX.Element;
+    defaultProps: {
+        v: number;
+        h: number;
+        layout: string;
+    };
+};

package/dist/src/components/QueryEditor/Stack.d.ts

@@ -0,0 +1,9 @@
+import React, { CSSProperties } from 'react';
+interface StackProps {
+    direction?: CSSProperties['flexDirection'];
+    alignItems?: CSSProperties['alignItems'];
+    wrap?: boolean;
+    gap?: number;
+}
+export declare const Stack: React.FC<StackProps>;
+export {};

package/dist/src/components/QueryEditor/TableSelector.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SelectableValue } from '@grafana/data';
+import { DB, ResourceSelectorProps } from './types';
+import { QueryWithDefaults } from './defaults';
+interface TableSelectorProps extends ResourceSelectorProps {
+    db: DB;
+    value: string | null;
+    query: QueryWithDefaults;
+    onChange: (v: SelectableValue) => void;
+}
+export declare const TableSelector: React.FC<TableSelectorProps>;
+export {};

package/dist/src/components/QueryEditor/defaults.d.ts

@@ -0,0 +1,3 @@
+import { SQLQuery } from './types';
+export declare function applyQueryDefaults(q?: SQLQuery): SQLQuery;
+export declare type QueryWithDefaults = ReturnType<typeof applyQueryDefaults>;

package/dist/src/components/QueryEditor/expressions.d.ts

@@ -0,0 +1,50 @@
+export declare enum QueryEditorPropertyType {
+    String = "string"
+}
+export interface QueryEditorProperty {
+    type: QueryEditorPropertyType;
+    name?: string;
+}
+export declare type QueryEditorOperatorType = string | boolean | number;
+declare type QueryEditorOperatorValueType = QueryEditorOperatorType | QueryEditorOperatorType[];
+export interface QueryEditorOperator<T extends QueryEditorOperatorValueType> {
+    name?: string;
+    value?: T;
+}
+export interface QueryEditorOperatorExpression {
+    type: QueryEditorExpressionType.Operator;
+    property: QueryEditorProperty;
+    operator: QueryEditorOperator<QueryEditorOperatorValueType>;
+}
+export interface QueryEditorArrayExpression {
+    type: QueryEditorExpressionType.And | QueryEditorExpressionType.Or;
+    expressions: QueryEditorExpression[] | QueryEditorArrayExpression[];
+}
+export interface QueryEditorPropertyExpression {
+    type: QueryEditorExpressionType.Property;
+    property: QueryEditorProperty;
+}
+export declare enum QueryEditorExpressionType {
+    Property = "property",
+    Operator = "operator",
+    Or = "or",
+    And = "and",
+    GroupBy = "groupBy",
+    Function = "function",
+    FunctionParameter = "functionParameter"
+}
+export declare type QueryEditorExpression = QueryEditorArrayExpression | QueryEditorPropertyExpression | QueryEditorGroupByExpression | QueryEditorFunctionExpression | QueryEditorFunctionParameterExpression | QueryEditorOperatorExpression;
+export interface QueryEditorGroupByExpression {
+    type: QueryEditorExpressionType.GroupBy;
+    property: QueryEditorProperty;
+}
+export interface QueryEditorFunctionExpression {
+    type: QueryEditorExpressionType.Function;
+    name?: string;
+    parameters?: QueryEditorFunctionParameterExpression[];
+}
+export interface QueryEditorFunctionParameterExpression {
+    type: QueryEditorExpressionType.FunctionParameter;
+    name?: string;
+}
+export {};

package/dist/src/components/QueryEditor/index.d.ts

@@ -0,0 +1,16 @@
+export * from './visual-query-builder';
+export { AccessoryButton } from './AccessoryButton';
+export { EditorFieldGroup } from './EditorFieldGroup';
+export { EditorHeader } from './EditorHeader';
+export { EditorField } from './EditorField';
+export { EditorRow } from './EditorRow';
+export { EditorList } from './EditorList';
+export { EditorRows } from './EditorRows';
+export { EditorSwitch } from './EditorSwitch';
+export { FlexItem } from './FlexItem';
+export { Stack } from './Stack';
+export { InlineSelect } from './InlineSelect';
+export { InputGroup } from './InputGroup';
+export { Space } from './Space';
+export { SqlQueryEditor } from './QueryEditor';
+export * from './types';

package/dist/src/components/QueryEditor/query-editor-raw/QueryEditorRaw.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LanguageCompletionProvider } from '@grafana/experimental';
+import { SQLQuery } from '../types';
+declare type Props = {
+    query: SQLQuery;
+    onChange: (value: SQLQuery, processQuery: boolean) => void;
+    children?: (props: {
+        formatQuery: () => void;
+    }) => React.ReactNode;
+    width?: number;
+    height?: number;
+    completionProvider: LanguageCompletionProvider;
+};
+export declare function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }: Props): JSX.Element;
+export {};

package/dist/src/components/QueryEditor/query-editor-raw/QueryToolbox.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { QueryValidatorProps } from './QueryValidator';
+interface QueryToolboxProps extends Omit<QueryValidatorProps, 'onValidate'> {
+    showTools?: boolean;
+    isExpanded?: boolean;
+    onFormatCode?: () => void;
+    onExpand?: (expand: boolean) => void;
+    onValidate?: (isValid: boolean) => void;
+}
+export declare function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }: QueryToolboxProps): JSX.Element;
+export {};

package/dist/src/components/QueryEditor/query-editor-raw/QueryValidator.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TimeRange } from '@grafana/data';
+import { DB, SQLQuery } from '../types';
+export interface QueryValidatorProps {
+    db: DB;
+    query: SQLQuery;
+    range?: TimeRange;
+    onValidate: (isValid: boolean) => void;
+}
+export declare function QueryValidator({ db, query, onValidate, range }: QueryValidatorProps): JSX.Element | null;

package/dist/src/components/QueryEditor/query-editor-raw/RawEditor.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { QueryEditorProps, SQLQuery } from '../types';
+interface RawEditorProps extends Omit<QueryEditorProps, 'onChange'> {
+    onRunQuery: () => void;
+    onChange: (q: SQLQuery, processQuery: boolean) => void;
+    onValidate: (isValid: boolean) => void;
+    queryToValidate: SQLQuery;
+}
+export declare function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }: RawEditorProps): JSX.Element;
+export {};