@grafana/plugin-ui 0.7.2 → 0.9.0

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

@@ -1,7 +1,7 @@
-import React from 'react';
+/// <reference types="react" />
 interface FlexItemProps {
     grow?: number;
     shrink?: number;
 }
-export declare const FlexItem: React.FC<FlexItemProps>;
+export declare const FlexItem: ({ grow, shrink }: FlexItemProps) => JSX.Element;
 export {};

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

@@ -1,5 +1,10 @@
-import React from 'react';
+import { ReactElement } from 'react';
+type Child = string | undefined | ReactElement<{
+    className?: string;
+    invalid?: unknown;
+}>;
 interface InputGroupProps {
+    children: Child | Child[];
 }
-export declare const InputGroup: React.FC<InputGroupProps>;
+export declare const InputGroup: ({ children }: InputGroupProps) => JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { PopoverContent } from "@grafana/ui";
+/// <reference types="react" />
+import { PopoverContent } from '@grafana/ui';
 type RunQueryButtonProps = {
     ariaLabel?: string;
     queryInvalid?: boolean;
@@ -9,5 +9,5 @@ type RunQueryButtonProps = {
     onClick: () => void;
     dataTestId?: string;
 };
-export declare const RunQueryButton: React.FC<RunQueryButtonProps>;
+export declare const RunQueryButton: ({ ariaLabel, queryRunning, queryInvalid, invalidQueryTooltip, disabled, onClick, dataTestId, }: RunQueryButtonProps) => JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { SelectableValue } from '@grafana/data';
 import { DB, ResourceSelectorProps } from './types';
 import { QueryWithDefaults } from './defaults';
@@ -9,5 +9,5 @@ interface TableSelectorProps extends ResourceSelectorProps {
     query: QueryWithDefaults;
     onChange: (v: SelectableValue) => void;
 }
-export declare const TableSelector: React.FC<TableSelectorProps>;
+export declare const TableSelector: ({ db, dataset, value, className, onChange }: TableSelectorProps) => JSX.Element;
 export {};

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

@@ -8,7 +8,7 @@ export { EditorList } from './EditorList';
 export { EditorRows } from './EditorRows';
 export { EditorSwitch } from './EditorSwitch';
 export { FlexItem } from './FlexItem';
-export { Stack } from './Stack';
+export { EditorStack } from './EditorStack';
 export { InlineSelect } from './InlineSelect';
 export { InputGroup } from './InputGroup';
 export { Space } from './Space';

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { LanguageCompletionProvider } from '@grafana/experimental';
 import { SQLQuery } from '../types';
+import { LanguageCompletionProvider } from '../../SQLEditor';
 type Props = {
     query: SQLQuery;
     onChange: (value: SQLQuery, processQuery: boolean) => void;

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

@@ -1,9 +1,9 @@
-import { JsonTree } from "react-awesome-query-builder";
-import { DataFrame, DataSourceJsonData, MetricFindValue, SelectableValue, TimeRange } from "@grafana/data";
-import { DataQuery } from "@grafana/schema";
-import { QueryWithDefaults } from "./defaults";
-import { QueryEditorFunctionExpression, QueryEditorGroupByExpression, QueryEditorPropertyExpression } from "./expressions";
-import { CompletionItemKind, LanguageCompletionProvider } from "@grafana/experimental";
+import { JsonTree } from 'react-awesome-query-builder';
+import { DataFrame, DataSourceJsonData, MetricFindValue, SelectableValue, TimeRange } from '@grafana/data';
+import { DataQuery } from '@grafana/schema';
+import { QueryWithDefaults } from './defaults';
+import { QueryEditorFunctionExpression, QueryEditorGroupByExpression, QueryEditorPropertyExpression } from './expressions';
+import { CompletionItemKind, LanguageCompletionProvider } from '../SQLEditor';
 export interface SqlQueryForInterpolation {
     dataset?: string;
     alias?: string;
@@ -60,7 +60,7 @@ export interface SQLExpression {
     filters?: SQLFilters;
     groupBy?: QueryEditorGroupByExpression[];
     orderBy?: QueryEditorPropertyExpression;
-    orderByDirection?: "ASC" | "DESC";
+    orderByDirection?: 'ASC' | 'DESC';
     limit?: number;
     offset?: number;
 }
@@ -91,7 +91,7 @@ export interface ResourceSelectorProps {
     className?: string;
     applyDefault?: boolean;
 }
-export type RAQBFieldTypes = "text" | "number" | "boolean" | "datetime" | "date" | "time";
+export type RAQBFieldTypes = 'text' | 'number' | 'boolean' | 'datetime' | 'date' | 'time';
 export interface SQLSelectableValue extends SelectableValue {
     type?: string;
     raqbFieldType?: RAQBFieldTypes;
@@ -116,7 +116,7 @@ export interface DB {
     getSqlCompletionProvider: () => LanguageCompletionProvider;
     toRawSql?: (query: SQLQuery) => string;
     functions: () => Promise<Aggregate[]>;
-    labels?: Map<"dataset", string>;
+    labels?: Map<'dataset', string>;
     disableDatasets?: boolean;
 }
 export interface QueryEditorProps {
@@ -147,8 +147,3 @@ export interface MetaDefinition {
     completion?: string;
     kind: CompletionItemKind;
 }
-export interface SQLConnectionLimits {
-    maxOpenConns: number;
-    maxIdleConns: number;
-    connMaxLifetime: number;
-}

package/dist/src/components/QueryEditor/visual-query-builder/EditorField.d.ts

@@ -7,5 +7,5 @@ interface EditorFieldProps extends ComponentProps<typeof Field> {
     optional?: boolean;
     tooltip?: PopoverContent;
 }
-export declare const EditorField: React.FC<EditorFieldProps>;
+export declare const EditorField: (props: EditorFieldProps) => JSX.Element;
 export {};

package/dist/src/components/QueryEditor/visual-query-builder/EditorRow.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface EditorRowProps {
+    children?: React.ReactNode;
 }
-export declare const EditorRow: React.FC<EditorRowProps>;
+export declare const EditorRow: ({ children }: EditorRowProps) => JSX.Element;
 export {};

package/dist/src/components/QueryEditor/visual-query-builder/EditorRows.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface EditorRowsProps {
+    children?: React.ReactNode;
 }
-export declare const EditorRows: React.FC<EditorRowsProps>;
+export declare const EditorRows: ({ children }: EditorRowsProps) => JSX.Element;
 export {};

package/dist/src/components/QueryEditor/visual-query-builder/VisualEditor.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { DB, QueryEditorProps, QueryRowFilter } from '../types';
-import { SQLQuery } from '../types';
+/// <reference types="react" />
+import { DB, QueryEditorProps, QueryRowFilter, SQLQuery } from '../types';
 import { TimeRange } from '@grafana/data';
 interface VisualEditorProps extends QueryEditorProps {
     query: SQLQuery;
@@ -10,5 +9,5 @@ interface VisualEditorProps extends QueryEditorProps {
     onValidate: (isValid: boolean) => void;
     range?: TimeRange;
 }
-export declare const VisualEditor: React.FC<VisualEditorProps>;
+export declare const VisualEditor: ({ query, db, queryRowFilter, onChange, onValidate, range }: VisualEditorProps) => JSX.Element;
 export {};

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

@@ -0,0 +1,29 @@
+import { Monaco, monacoTypes } from '@grafana/ui';
+import React from 'react';
+import { SQLCompletionItemProvider } from '../types';
+import { SQLMonarchLanguage } from '../standardSql/types';
+export interface LanguageDefinition extends monacoTypes.languages.ILanguageExtensionPoint {
+    loader?: (module: any) => Promise<{
+        language: SQLMonarchLanguage;
+        conf: monacoTypes.languages.LanguageConfiguration;
+    }>;
+    completionProvider?: (m: Monaco, language: SQLMonarchLanguage) => SQLCompletionItemProvider;
+    formatter?: (q: string) => string;
+}
+interface SQLEditorProps {
+    query: string;
+    /**
+     * Use for inspecting the query as it changes. I.e. for validation.
+     */
+    onChange?: (q: string, processQuery: boolean) => void;
+    onBlur?: (text: string) => void;
+    language?: LanguageDefinition;
+    children?: (props: {
+        formatQuery: () => void;
+    }) => React.ReactNode;
+    width?: number;
+    height?: number;
+}
+export declare const SQLEditor: ({ children, onBlur, onChange, query, language, width, height, }: SQLEditorProps) => JSX.Element;
+export declare const registerLanguageAndSuggestions: (monaco: Monaco, l: LanguageDefinition, lid: string) => Promise<void>;
+export {};

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

@@ -0,0 +1,7 @@
+export { SQLEditor, type LanguageDefinition } from './components/SQLEditor';
+export { SQLEditorTestUtils, type TestQueryModel } from './test-utils';
+export { LinkedToken } from './utils/LinkedToken';
+export { language as grafanaStandardSQLLanguage, conf as grafanaStandardSQLLanguageConf } from './standardSql/language';
+export { getStandardSQLCompletionProvider } from './standardSql/standardSQLCompletionItemProvider';
+export type { SQLMonarchLanguage } from './standardSql/types';
+export { type SchemaDefinition, type TableDefinition, type ColumnDefinition, type TableIdentifier, type StatementPlacementProvider, type SuggestionKindProvider, type LanguageCompletionProvider, OperatorType, MacroType, TokenType, StatementPosition, SuggestionKind, CompletionItemKind, CompletionItemPriority, CompletionItemInsertTextRule, type PositionContext, SQLEditorMode, } from './types';

package/dist/src/components/SQLEditor/mocks/Monaco.d.ts

@@ -0,0 +1,3 @@
+import { monacoTypes } from '@grafana/ui';
+declare const getMonacoMock: (testData: Map<string, Array<Array<Pick<monacoTypes.Token, 'language' | 'offset' | 'type'>>>>) => any;
+export { getMonacoMock };

package/dist/src/components/SQLEditor/mocks/TextModel.d.ts

@@ -0,0 +1,7 @@
+import { monacoTypes } from '@grafana/ui';
+declare function TextModel(value: string): {
+    getValue: (eol?: monacoTypes.editor.EndOfLinePreference, preserveBOM?: boolean) => string;
+    getValueInRange: (range: monacoTypes.IRange, eol?: monacoTypes.editor.EndOfLinePreference) => string;
+    getLineLength: (lineNumber: number) => number;
+};
+export { TextModel };

package/dist/src/components/SQLEditor/mocks/queries/multiLineFullQuery.d.ts

@@ -0,0 +1,2 @@
+import { TestQueryModel } from '../../test-utils/types';
+export declare const multiLineFullQuery: TestQueryModel;

package/dist/src/components/SQLEditor/mocks/queries/multiLineFullQueryWithAggregation.d.ts

@@ -0,0 +1,2 @@
+import { TestQueryModel } from '../../test-utils/types';
+export declare const multiLineFullQueryWithAggregation: TestQueryModel;

package/dist/src/components/SQLEditor/mocks/queries/multiLineMultipleColumns.d.ts

@@ -0,0 +1,2 @@
+import { TestQueryModel } from '../../test-utils/types';
+export declare const multiLineMultipleColumns: TestQueryModel;

package/dist/src/components/SQLEditor/mocks/queries/singleLineEmptyQuery.d.ts

@@ -0,0 +1,2 @@
+import { TestQueryModel } from '../../test-utils/types';
+export declare const singleLineEmptyQuery: TestQueryModel;

package/dist/src/components/SQLEditor/mocks/queries/singleLineFullQuery.d.ts

@@ -0,0 +1,2 @@
+import { TestQueryModel } from '../../test-utils/types';
+export declare const singleLineFullQuery: TestQueryModel;

package/dist/src/components/SQLEditor/mocks/queries/singleLineFullQueryWithAggregation.d.ts

@@ -0,0 +1,2 @@
+import { TestQueryModel } from '../../test-utils/types';
+export declare const singleLineFullQueryWithAggregation: TestQueryModel;

package/dist/src/components/SQLEditor/mocks/queries/singleLineMultipleColumns.d.ts

@@ -0,0 +1,2 @@
+import { TestQueryModel } from '../../test-utils/types';
+export declare const singleLineMultipleColumns: TestQueryModel;

package/dist/src/components/SQLEditor/mocks/queries/singleLineTwoQueries.d.ts

@@ -0,0 +1,2 @@
+import { TestQueryModel } from '../../test-utils/types';
+export declare const singleLineTwoQueries: TestQueryModel;

package/dist/src/components/SQLEditor/mocks/queries/singleLineTwoQueriesWithAggregation.d.ts

@@ -0,0 +1,2 @@
+import { TestQueryModel } from '../../test-utils/types';
+export declare const singleLineTwoQueriesWithAggregation: TestQueryModel;

package/dist/src/components/SQLEditor/mocks/testData.d.ts

@@ -0,0 +1,9 @@
+export { singleLineFullQuery } from './queries/singleLineFullQuery';
+export { singleLineFullQueryWithAggregation } from './queries/singleLineFullQueryWithAggregation';
+export { multiLineFullQuery } from './queries/multiLineFullQuery';
+export { multiLineFullQueryWithAggregation } from './queries/multiLineFullQueryWithAggregation';
+export { singleLineEmptyQuery } from './queries/singleLineEmptyQuery';
+export { singleLineTwoQueries } from './queries/singleLineTwoQueries';
+export { singleLineTwoQueriesWithAggregation } from './queries/singleLineTwoQueriesWithAggregation';
+export { singleLineMultipleColumns } from './queries/singleLineMultipleColumns';
+export { multiLineMultipleColumns } from './queries/multiLineMultipleColumns';

package/dist/src/components/SQLEditor/standardSql/definition.d.ts

@@ -0,0 +1,3 @@
+import { LanguageDefinition } from '../components/SQLEditor';
+declare const standardSQLLanguageDefinition: LanguageDefinition;
+export default standardSQLLanguageDefinition;

package/dist/src/components/SQLEditor/standardSql/getStandardSuggestions.d.ts

@@ -0,0 +1,6 @@
+import { Registry } from '@grafana/data';
+import { Monaco, monacoTypes } from '@grafana/ui';
+import { PositionContext, SuggestionKind } from '../types';
+import { LinkedToken } from '../utils/LinkedToken';
+import { SuggestionsRegistryItem } from './types';
+export declare const getStandardSuggestions: (monaco: Monaco, currentToken: LinkedToken | null, suggestionKinds: SuggestionKind[], positionContext: PositionContext, suggestionsRegistry: Registry<SuggestionsRegistryItem>) => Promise<monacoTypes.languages.CompletionItem[]>;

package/dist/src/components/SQLEditor/standardSql/getStatementPosition.d.ts

@@ -0,0 +1,5 @@
+import { StatementPosition } from '../types';
+import { LinkedToken } from '../utils/LinkedToken';
+import { StatementPositionResolversRegistryItem } from './types';
+import { Registry } from '@grafana/data';
+export declare function getStatementPosition(currentToken: LinkedToken | null, statementPositionResolversRegistry: Registry<StatementPositionResolversRegistryItem>): StatementPosition[];

package/dist/src/components/SQLEditor/standardSql/language.d.ts

@@ -0,0 +1,23 @@
+import { monacoTypes } from '@grafana/ui';
+import { SQLMonarchLanguage } from './types';
+export declare const SELECT = "select";
+export declare const FROM = "from";
+export declare const WHERE = "where";
+export declare const GROUP = "group";
+export declare const ORDER = "order";
+export declare const BY = "by";
+export declare const DESC = "desc";
+export declare const ASC = "asc";
+export declare const LIMIT = "limit";
+export declare const WITH = "with";
+export declare const AS = "as";
+export declare const SCHEMA = "schema";
+export declare const AND = "AND";
+export declare const OR = "OR";
+export declare const LOGICAL_OPERATORS: string[];
+export declare const EQUALS = "=";
+export declare const NOT_EQUALS = "!=";
+export declare const COMPARISON_OPERATORS: string[];
+export declare const STD_OPERATORS: string[];
+export declare const conf: monacoTypes.languages.LanguageConfiguration;
+export declare const language: SQLMonarchLanguage;

package/dist/src/components/SQLEditor/standardSql/macros.d.ts

@@ -0,0 +1,2 @@
+import { MacrosRegistryItem } from './types';
+export declare const MACROS: MacrosRegistryItem[];

package/dist/src/components/SQLEditor/standardSql/standardSQLCompletionItemProvider.d.ts

@@ -0,0 +1,4 @@
+import { Monaco } from '@grafana/ui';
+import { SQLCompletionItemProvider } from '../types';
+import { SQLMonarchLanguage } from './types';
+export declare function getStandardSQLCompletionProvider(monaco: Monaco, language: SQLMonarchLanguage): SQLCompletionItemProvider;

package/dist/src/components/SQLEditor/standardSql/standardSuggestionsRegistry.d.ts

@@ -0,0 +1,7 @@
+import { Registry } from '@grafana/data';
+import { FunctionsRegistryItem, MacrosRegistryItem, OperatorsRegistryItem, SuggestionsRegistryItem } from './types';
+/**
+ * This registry glues particular SuggestionKind with an async function that provides completion items for it.
+ * To add a new suggestion kind, SQLEditor should be configured with a provider that implements customSuggestionKinds.
+ */
+export declare const initStandardSuggestions: (functions: Registry<FunctionsRegistryItem>, operators: Registry<OperatorsRegistryItem>, macros: Registry<MacrosRegistryItem>) => () => SuggestionsRegistryItem[];

package/dist/src/components/SQLEditor/standardSql/statementPositionResolversRegistry.d.ts

@@ -0,0 +1,2 @@
+import { StatementPositionResolversRegistryItem } from './types';
+export declare function initStatementPositionResolvers(): StatementPositionResolversRegistryItem[];

package/dist/src/components/SQLEditor/standardSql/suggestionsKindRegistry.d.ts

@@ -0,0 +1,7 @@
+import { RegistryItem } from '@grafana/data';
+import { StatementPosition, SuggestionKind } from '../types';
+export interface SuggestionKindRegistryItem extends RegistryItem {
+    id: StatementPosition;
+    kind: SuggestionKind[];
+}
+export declare const initSuggestionsKindRegistry: () => SuggestionKindRegistryItem[];

package/dist/src/components/SQLEditor/standardSql/types.d.ts

@@ -0,0 +1,33 @@
+import { RegistryItem } from '@grafana/data';
+import { monacoTypes } from '@grafana/ui';
+import { CustomSuggestion, MacroType, OperatorType, PositionContext, StatementPosition, SuggestionKind } from '../types';
+import { LinkedToken } from '../utils/LinkedToken';
+export interface SuggestionsRegistryItem extends RegistryItem {
+    id: SuggestionKind;
+    suggestions: (position: PositionContext, m: typeof monacoTypes) => Promise<CustomSuggestion[]>;
+}
+export interface MacrosRegistryItem extends RegistryItem {
+    type: MacroType;
+    text: string;
+    args: string[];
+}
+export interface FunctionsRegistryItem extends RegistryItem {
+}
+export interface OperatorsRegistryItem extends RegistryItem {
+    operator: string;
+    type: OperatorType;
+}
+export type StatementPositionResolver = (currentToken: LinkedToken | null, previousKeyword: LinkedToken | null, previousNonWhiteSpace: LinkedToken | null, previousIsSlash: Boolean) => Boolean;
+export interface StatementPositionResolversRegistryItem extends RegistryItem {
+    id: StatementPosition;
+    resolve: StatementPositionResolver;
+}
+export type SuggestionsResolver = <T extends PositionContext = PositionContext>(positionContext: T) => Promise<CustomSuggestion[]>;
+export interface SQLMonarchLanguage extends monacoTypes.languages.IMonarchLanguage {
+    keywords?: string[];
+    builtinFunctions?: string[];
+    logicalOperators?: string[];
+    comparisonOperators?: string[];
+    /** Used by basic languages in the monaco registry **/
+    operators?: string[];
+}

package/dist/src/components/SQLEditor/test-utils/index.d.ts

@@ -0,0 +1,7 @@
+import * as testData from '../mocks/testData';
+import { TestQueryModel } from './types';
+export declare const SQLEditorTestUtils: {
+    testData: typeof testData;
+    testStatementPosition: (expected: string, cases: import("./types").StatementPositionResolverTestCase[], resolvers: () => import("../types").CustomStatementPlacement[]) => void;
+};
+export type { TestQueryModel };

package/dist/src/components/SQLEditor/test-utils/statementPosition.d.ts

@@ -0,0 +1,3 @@
+import { CustomStatementPlacement, StatementPosition } from '../types';
+import { StatementPositionResolverTestCase } from './types';
+export declare const testStatementPosition: (expected: StatementPosition | string, cases: StatementPositionResolverTestCase[], resolvers: () => CustomStatementPlacement[]) => void;

package/dist/src/components/SQLEditor/test-utils/types.d.ts

@@ -0,0 +1,12 @@
+import { monacoTypes } from '@grafana/ui';
+export interface TestQueryModel {
+    query: string;
+    tokens: Array<Array<Pick<monacoTypes.Token, 'language' | 'offset' | 'type'>>>;
+}
+export interface StatementPositionResolverTestCase {
+    query: TestQueryModel;
+    position: {
+        line: number;
+        column: number;
+    };
+}