Skip to content

N
nexpie-grafana-theme
Commit 3e8c00da by kay delaney Committed by David
Options

Chore: Moves QueryField to @grafana/ui (#19678) 

Closes #19626
parent 69906f73
Showing with 357 additions and 332 deletions
packages/grafana-ui/src/components/QueryField/QueryField.story.tsx 0 → 100644
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { QueryField } from './QueryField';
const QueryFieldStories = storiesOf('UI/QueryField', module);
QueryFieldStories.addDecorator(withCenteredStory);
QueryFieldStories.add('default', () => {
return <QueryField portalOrigin="mock-origin" query="" />;
});
public/app/features/explore/QueryField.test.tsx → packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
......@@ -4,17 +4,17 @@ import { QueryField } from './QueryField';
describe('<QueryField />', () => {
it('should render with null initial value', () => {
const wrapper = shallow(<QueryField query={null} />);
const wrapper = shallow(<QueryField query={null} onTypeahead={jest.fn()} portalOrigin="mock-origin" />);
expect(wrapper.find('div').exists()).toBeTruthy();
});
it('should render with empty initial value', () => {
const wrapper = shallow(<QueryField query="" />);
const wrapper = shallow(<QueryField query="" onTypeahead={jest.fn()} portalOrigin="mock-origin" />);
expect(wrapper.find('div').exists()).toBeTruthy();
});
it('should render with initial value', () => {
const wrapper = shallow(<QueryField query="my query" />);
const wrapper = shallow(<QueryField query="my query" onTypeahead={jest.fn()} portalOrigin="mock-origin" />);
expect(wrapper.find('div').exists()).toBeTruthy();
});
});
public/app/features/explore/QueryField.tsx → packages/grafana-ui/src/components/QueryField/QueryField.tsx
......@@ -6,16 +6,17 @@ import { Editor, Plugin } from '@grafana/slate-react';
import Plain from 'slate-plain-serializer';
import classnames from 'classnames';
import { CompletionItemGroup, TypeaheadOutput } from 'app/types/explore';
import ClearPlugin from './slate-plugins/clear';
import NewlinePlugin from './slate-plugins/newline';
import SelectionShortcutsPlugin from './slate-plugins/selection_shortcuts';
import IndentationPlugin from './slate-plugins/indentation';
import ClipboardPlugin from './slate-plugins/clipboard';
import RunnerPlugin from './slate-plugins/runner';
import SuggestionsPlugin, { SuggestionsState } from './slate-plugins/suggestions';
import { makeValue, SCHEMA } from '@grafana/ui';
import {
ClearPlugin,
NewlinePlugin,
SelectionShortcutsPlugin,
IndentationPlugin,
ClipboardPlugin,
RunnerPlugin,
SuggestionsPlugin,
} from '../../slate-plugins';
import { makeValue, SCHEMA, CompletionItemGroup, TypeaheadOutput, TypeaheadInput, SuggestionsState } from '../..';
export interface QueryFieldProps {
additionalPlugins?: Plugin[];
......@@ -30,7 +31,7 @@ export interface QueryFieldProps {
onTypeahead?: (typeahead: TypeaheadInput) => Promise<TypeaheadOutput>;
onWillApplySuggestion?: (suggestion: string, state: SuggestionsState) => string;
placeholder?: string;
portalOrigin?: string;
portalOrigin: string;
syntax?: string;
syntaxLoaded?: boolean;
}
......@@ -43,15 +44,6 @@ export interface QueryFieldState {
value: Value;
}
export interface TypeaheadInput {
prefix: string;
selection?: Selection;
text: string;
value: Value;
wrapperClasses: string[];
labelKey?: string;
}
/**
* Renders an editor field.
* Pass initial value as initialQuery and listen to changes in props.onValueChanged.
......@@ -60,11 +52,10 @@ export interface TypeaheadInput {
*/
export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldState> {
plugins: Plugin[];
resetTimer: NodeJS.Timer;
mounted: boolean;
runOnChangeDebounced: Function;
editor: Editor;
lastExecutedValue: Value | null = null;
mounted = false;
editor: Editor | null = null;
constructor(props: QueryFieldProps, context: Context<any>) {
super(props, context);
......@@ -100,7 +91,6 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
componentWillUnmount() {
this.mounted = false;
clearTimeout(this.resetTimer);
}
componentDidUpdate(prevProps: QueryFieldProps, prevState: QueryFieldState) {
......@@ -119,6 +109,10 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
UNSAFE_componentWillReceiveProps(nextProps: QueryFieldProps) {
if (nextProps.syntaxLoaded && !this.props.syntaxLoaded) {
if (!this.editor) {
return;
}
// Need a bogus edit to re-render the editor after syntax has fully loaded
const editor = this.editor.insertText(' ').deleteBackward(1);
this.onChange(editor.value, true);
......@@ -196,7 +190,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
<div className={wrapperClassName}>
<div className="slate-query-field">
<Editor
ref={editor => (this.editor = editor)}
ref={editor => (this.editor = editor!)}
schema={SCHEMA}
autoCorrect={false}
readOnly={this.props.disabled}
......
public/app/features/explore/Typeahead.tsx → packages/grafana-ui/src/components/Typeahead/Typeahead.tsx
......@@ -3,16 +3,15 @@ import ReactDOM from 'react-dom';
import _ from 'lodash';
import { FixedSizeList } from 'react-window';
import { Themeable, withTheme } from '@grafana/ui';
import { CompletionItem, CompletionItemKind, CompletionItemGroup } from 'app/types/explore';
import { TypeaheadItem } from './TypeaheadItem';
import { TypeaheadInfo } from './TypeaheadInfo';
import { flattenGroupItems, calculateLongestLabel, calculateListSizes } from './utils/typeahead';
import { TypeaheadItem } from './TypeaheadItem';
import { flattenGroupItems, calculateLongestLabel, calculateListSizes } from '../../utils/typeahead';
import { ThemeContext } from '../../themes/ThemeContext';
import { CompletionItem, CompletionItemGroup, CompletionItemKind } from '../../types/completion';
const modulo = (a: number, n: number) => a - n * Math.floor(a / n);
interface Props extends Themeable {
interface Props {
origin: string;
groupedItems: CompletionItemGroup[];
prefix?: string;
......@@ -26,26 +25,33 @@ interface State {
listWidth: number;
listHeight: number;
itemHeight: number;
hoveredItem: number;
hoveredItem: number | null;
typeaheadIndex: number;
}
export class Typeahead extends React.PureComponent<Props, State> {
static contextType = ThemeContext;
context!: React.ContextType<typeof ThemeContext>;
listRef = createRef<FixedSizeList>();
constructor(props: Props) {
super(props);
const allItems = flattenGroupItems(props.groupedItems);
const longestLabel = calculateLongestLabel(allItems);
const { listWidth, listHeight, itemHeight } = calculateListSizes(props.theme, allItems, longestLabel);
this.state = { listWidth, listHeight, itemHeight, hoveredItem: null, typeaheadIndex: 1, allItems };
}
state: State = { hoveredItem: null, typeaheadIndex: 1, allItems: [], listWidth: -1, listHeight: -1, itemHeight: -1 };
componentDidMount = () => {
if (this.props.menuRef) {
this.props.menuRef(this);
}
document.addEventListener('selectionchange', this.handleSelectionChange);
const allItems = flattenGroupItems(this.props.groupedItems);
const longestLabel = calculateLongestLabel(allItems);
const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context, allItems, longestLabel);
this.setState({
listWidth,
listHeight,
itemHeight,
allItems,
});
};
componentWillUnmount = () => {
......@@ -68,7 +74,7 @@ export class Typeahead extends React.PureComponent<Props, State> {
if (_.isEqual(prevProps.groupedItems, this.props.groupedItems) === false) {
const allItems = flattenGroupItems(this.props.groupedItems);
const longestLabel = calculateLongestLabel(allItems);
const { listWidth, listHeight, itemHeight } = calculateListSizes(this.props.theme, allItems, longestLabel);
const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context, allItems, longestLabel);
this.setState({ listWidth, listHeight, itemHeight, allItems });
}
};
......@@ -89,7 +95,6 @@ export class Typeahead extends React.PureComponent<Props, State> {
const itemCount = this.state.allItems.length;
if (itemCount) {
// Select next suggestion
event.preventDefault();
let newTypeaheadIndex = modulo(this.state.typeaheadIndex + moveAmount, itemCount);
if (this.state.allItems[newTypeaheadIndex].kind === CompletionItemKind.GroupTitle) {
......@@ -105,7 +110,9 @@ export class Typeahead extends React.PureComponent<Props, State> {
};
insertSuggestion = () => {
if (this.props.onSelectSuggestion) {
this.props.onSelectSuggestion(this.state.allItems[this.state.typeaheadIndex]);
}
};
get menuPosition(): string {
......@@ -115,10 +122,10 @@ export class Typeahead extends React.PureComponent<Props, State> {
}
const selection = window.getSelection();
const node = selection.anchorNode;
const node = selection && selection.anchorNode;
// Align menu overlay to editor node
if (node) {
if (node && node.parentElement) {
// Read from DOM
const rect = node.parentElement.getBoundingClientRect();
const scrollX = window.scrollX;
......@@ -133,7 +140,7 @@ export class Typeahead extends React.PureComponent<Props, State> {
}
render() {
const { prefix, theme, isOpen, origin } = this.props;
const { prefix, isOpen = false, origin } = this.props;
const { allItems, listWidth, listHeight, itemHeight, hoveredItem, typeaheadIndex } = this.state;
const showDocumentation = hoveredItem || typeaheadIndex;
......@@ -161,7 +168,7 @@ export class Typeahead extends React.PureComponent<Props, State> {
return (
<TypeaheadItem
onClickItem={() => this.props.onSelectSuggestion(item)}
onClickItem={() => (this.props.onSelectSuggestion ? this.props.onSelectSuggestion(item) : {})}
isSelected={allItems[typeaheadIndex] === item}
item={item}
prefix={prefix}
......@@ -175,20 +182,13 @@ export class Typeahead extends React.PureComponent<Props, State> {
</ul>
{showDocumentation && (
<TypeaheadInfo
width={listWidth}
height={listHeight}
theme={theme}
item={allItems[hoveredItem ? hoveredItem : typeaheadIndex]}
/>
<TypeaheadInfo height={listHeight} item={allItems[hoveredItem ? hoveredItem : typeaheadIndex]} />
)}
</Portal>
);
}
}
export const TypeaheadWithTheme = withTheme(Typeahead);
interface PortalProps {
index?: number;
isOpen: boolean;
......
public/app/features/explore/TypeaheadInfo.tsx → packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
import React, { PureComponent } from 'react';
import React, { useContext } from 'react';
import { css, cx } from 'emotion';
import { Themeable, selectThemeVariant } from '@grafana/ui';
import { CompletionItem } from 'app/types/explore';
interface Props extends Themeable {
item: CompletionItem;
width: number;
height: number;
}
export class TypeaheadInfo extends PureComponent<Props> {
constructor(props: Props) {
super(props);
}
getStyles = (visible: boolean) => {
const { height, theme } = this.props;
import { CompletionItem, selectThemeVariant, ThemeContext, GrafanaTheme } from '../..';
const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => {
return {
typeaheadItem: css`
label: type-ahead-item;
......@@ -43,14 +28,19 @@ export class TypeaheadInfo extends PureComponent<Props> {
position: relative;
`,
};
};
};
interface Props {
item: CompletionItem;
height: number;
}
render() {
const { item } = this.props;
export const TypeaheadInfo: React.FC<Props> = ({ item, height }) => {
const visible = item && !!item.documentation;
const label = item ? item.label : '';
const documentation = item && item.documentation ? item.documentation : '';
const styles = this.getStyles(visible);
const theme = useContext(ThemeContext);
const styles = getStyles(theme, height, visible);
return (
<div className={cx([styles.typeaheadItem])}>
......@@ -59,5 +49,4 @@ export class TypeaheadInfo extends PureComponent<Props> {
<span>{documentation}</span>
</div>
);
}
}
};
public/app/features/explore/TypeaheadItem.tsx → packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
import React, { FunctionComponent, useContext } from 'react';
import React, { useContext } from 'react';
// @ts-ignore
import Highlighter from 'react-highlight-words';
import { css, cx } from 'emotion';
import { GrafanaTheme, ThemeContext, selectThemeVariant } from '@grafana/ui';
import { CompletionItem, CompletionItemKind } from 'app/types/explore';
import { CompletionItem, CompletionItemKind, GrafanaTheme, ThemeContext, selectThemeVariant } from '../..';
interface Props {
isSelected: boolean;
......@@ -57,7 +56,7 @@ const getStyles = (theme: GrafanaTheme) => ({
`,
});
export const TypeaheadItem: FunctionComponent<Props> = (props: Props) => {
export const TypeaheadItem: React.FC<Props> = (props: Props) => {
const theme = useContext(ThemeContext);
const styles = getStyles(theme);
......
packages/grafana-ui/src/components/index.ts
......@@ -38,6 +38,7 @@ export { TimeOfDayPicker } from './TimePicker/TimeOfDayPicker';
export { List } from './List/List';
export { TagsInput } from './TagsInput/TagsInput';
export { Modal } from './Modal/Modal';
export { QueryField } from './QueryField/QueryField';
// Renderless
export { SetInterval } from './SetInterval/SetInterval';
......
public/app/features/explore/slate-plugins/braces.test.tsx → packages/grafana-ui/src/slate-plugins/braces.test.tsx
......@@ -2,7 +2,7 @@ import React from 'react';
import Plain from 'slate-plain-serializer';
import { Editor } from '@grafana/slate-react';
import { shallow } from 'enzyme';
import BracesPlugin from './braces';
import { BracesPlugin } from './braces';
declare global {
interface Window {
......@@ -11,7 +11,7 @@ declare global {
}
describe('braces', () => {
const handler = BracesPlugin().onKeyDown;
const handler = BracesPlugin().onKeyDown!;
const nextMock = () => {};
it('adds closing braces around empty value', () => {
......
public/app/features/explore/slate-plugins/braces.ts → packages/grafana-ui/src/slate-plugins/braces.ts
......@@ -7,16 +7,17 @@ const BRACES: any = {
'(': ')',
};
export default function BracesPlugin(): Plugin {
export function BracesPlugin(): Plugin {
return {
onKeyDown(event: KeyboardEvent, editor: CoreEditor, next: Function) {
onKeyDown(event: Event, editor: CoreEditor, next: Function) {
const keyEvent = event as KeyboardEvent;
const { value } = editor;
switch (event.key) {
switch (keyEvent.key) {
case '(':
case '{':
case '[': {
event.preventDefault();
keyEvent.preventDefault();
const {
start: { offset: startOffset, key: startKey },
end: { offset: endOffset, key: endKey },
......@@ -27,17 +28,17 @@ export default function BracesPlugin(): Plugin {
// If text is selected, wrap selected text in parens
if (value.selection.isExpanded) {
editor
.insertTextByKey(startKey, startOffset, event.key)
.insertTextByKey(endKey, endOffset + 1, BRACES[event.key])
.insertTextByKey(startKey, startOffset, keyEvent.key)
.insertTextByKey(endKey, endOffset + 1, BRACES[keyEvent.key])
.moveEndBackward(1);
} else if (
focusOffset === text.length ||
text[focusOffset] === ' ' ||
Object.values(BRACES).includes(text[focusOffset])
) {
editor.insertText(`${event.key}${BRACES[event.key]}`).moveBackward(1);
editor.insertText(`${keyEvent.key}${BRACES[keyEvent.key]}`).moveBackward(1);
} else {
editor.insertText(event.key);
editor.insertText(keyEvent.key);
}
return true;
......@@ -49,7 +50,7 @@ export default function BracesPlugin(): Plugin {
const previousChar = text[offset - 1];
const nextChar = text[offset];
if (BRACES[previousChar] && BRACES[previousChar] === nextChar) {
event.preventDefault();
keyEvent.preventDefault();
// Remove closing brace if directly following
editor
.deleteBackward(1)
......
public/app/features/explore/slate-plugins/clear.test.tsx → packages/grafana-ui/src/slate-plugins/clear.test.tsx
......@@ -2,10 +2,10 @@ import Plain from 'slate-plain-serializer';
import React from 'react';
import { Editor } from '@grafana/slate-react';
import { shallow } from 'enzyme';
import ClearPlugin from './clear';
import { ClearPlugin } from './clear';
describe('clear', () => {
const handler = ClearPlugin().onKeyDown;
const handler = ClearPlugin().onKeyDown!;
it('does not change the empty value', () => {
const value = Plain.deserialize('');
......
public/app/features/explore/slate-plugins/clear.ts → packages/grafana-ui/src/slate-plugins/clear.ts
......@@ -2,17 +2,18 @@ import { Plugin } from '@grafana/slate-react';
import { Editor as CoreEditor } from 'slate';
// Clears the rest of the line after the caret
export default function ClearPlugin(): Plugin {
export function ClearPlugin(): Plugin {
return {
onKeyDown(event: KeyboardEvent, editor: CoreEditor, next: Function) {
onKeyDown(event: Event, editor: CoreEditor, next: Function) {
const keyEvent = event as KeyboardEvent;
const value = editor.value;
if (value.selection.isExpanded) {
return next();
}
if (event.key === 'k' && event.ctrlKey) {
event.preventDefault();
if (keyEvent.key === 'k' && keyEvent.ctrlKey) {
keyEvent.preventDefault();
const text = value.anchorText.text;
const offset = value.selection.anchor.offset;
const length = text.length;
......
public/app/features/explore/slate-plugins/clipboard.ts → packages/grafana-ui/src/slate-plugins/clipboard.ts
......@@ -10,10 +10,11 @@ const getCopiedText = (textBlocks: string[], startOffset: number, endOffset: num
return textBlocks.join('\n').slice(startOffset, excludingLastLineLength + endOffset);
};
export default function ClipboardPlugin(): Plugin {
const clipboardPlugin = {
onCopy(event: ClipboardEvent, editor: CoreEditor) {
event.preventDefault();
export function ClipboardPlugin(): Plugin {
const clipboardPlugin: Plugin = {
onCopy(event: Event, editor: CoreEditor, next: () => any) {
const clipEvent = event as ClipboardEvent;
clipEvent.preventDefault();
const { document, selection } = editor.value;
const {
......@@ -26,16 +27,18 @@ export default function ClipboardPlugin(): Plugin {
.map(block => block.text);
const copiedText = getCopiedText(selectedBlocks, startOffset, endOffset);
if (copiedText) {
event.clipboardData.setData('Text', copiedText);
if (copiedText && clipEvent.clipboardData) {
clipEvent.clipboardData.setData('Text', copiedText);
}
return true;
},
onPaste(event: ClipboardEvent, editor: CoreEditor) {
event.preventDefault();
const pastedValue = event.clipboardData.getData('Text');
onPaste(event: Event, editor: CoreEditor, next: () => any) {
const clipEvent = event as ClipboardEvent;
clipEvent.preventDefault();
if (clipEvent.clipboardData) {
const pastedValue = clipEvent.clipboardData.getData('Text');
const lines = pastedValue.split('\n');
if (lines.length) {
......@@ -44,6 +47,7 @@ export default function ClipboardPlugin(): Plugin {
editor.splitBlock().insertText(line);
}
}
}
return true;
},
......@@ -51,8 +55,9 @@ export default function ClipboardPlugin(): Plugin {
return {
...clipboardPlugin,
onCut(event: ClipboardEvent, editor: CoreEditor) {
clipboardPlugin.onCopy(event, editor);
onCut(event: Event, editor: CoreEditor, next: () => any) {
const clipEvent = event as ClipboardEvent;
clipboardPlugin.onCopy!(clipEvent, editor, next);
editor.deleteAtRange(editor.value.selection);
return true;
......
public/app/features/explore/slate-plugins/indentation.ts → packages/grafana-ui/src/slate-plugins/indentation.ts
......@@ -21,7 +21,7 @@ const handleTabKey = (event: KeyboardEvent, editor: CoreEditor, next: Function):
const first = startBlock.getFirstText();
const startBlockIsSelected =
startOffset === 0 && startKey === first.key && endOffset === first.text.length && endKey === first.key;
first && startOffset === 0 && startKey === first.key && endOffset === first.text.length && endKey === first.key;
if (startBlockIsSelected || !startBlock.equals(endBlock)) {
handleIndent(editor, 'right');
......@@ -38,7 +38,7 @@ const handleIndent = (editor: CoreEditor, indentDirection: 'left' | 'right') =>
for (const block of selectedBlocks) {
const blockWhitespace = block.text.length - block.text.trimLeft().length;
const textKey = block.getFirstText().key;
const textKey = block.getFirstText()!.key;
const rangeProperties: RangeJSON = {
anchor: {
......@@ -61,7 +61,7 @@ const handleIndent = (editor: CoreEditor, indentDirection: 'left' | 'right') =>
const isWhiteSpace = /^\s*$/.test(textBeforeCaret);
for (const block of selectedBlocks) {
editor.insertTextByKey(block.getFirstText().key, 0, SLATE_TAB);
editor.insertTextByKey(block.getFirstText()!.key, 0, SLATE_TAB);
}
if (isWhiteSpace) {
......@@ -71,18 +71,19 @@ const handleIndent = (editor: CoreEditor, indentDirection: 'left' | 'right') =>
};
// Clears the rest of the line after the caret
export default function IndentationPlugin(): Plugin {
export function IndentationPlugin(): Plugin {
return {
onKeyDown(event: KeyboardEvent, editor: CoreEditor, next: Function) {
if (isIndentLeftHotkey(event) || isShiftTabHotkey(event)) {
event.preventDefault();
onKeyDown(event: Event, editor: CoreEditor, next: Function) {
const keyEvent = event as KeyboardEvent;
if (isIndentLeftHotkey(keyEvent) || isShiftTabHotkey(keyEvent)) {
keyEvent.preventDefault();
handleIndent(editor, 'left');
} else if (isIndentRightHotkey(event)) {
event.preventDefault();
} else if (isIndentRightHotkey(keyEvent)) {
keyEvent.preventDefault();
handleIndent(editor, 'right');
} else if (event.key === 'Tab') {
event.preventDefault();
handleTabKey(event, editor, next);
} else if (keyEvent.key === 'Tab') {
keyEvent.preventDefault();
handleTabKey(keyEvent, editor, next);
} else {
return next();
}
......
packages/grafana-ui/src/slate-plugins/index.ts
export { BracesPlugin } from './braces';
export { ClearPlugin } from './clear';
export { ClipboardPlugin } from './clipboard';
export { IndentationPlugin } from './indentation';
export { NewlinePlugin } from './newline';
export { RunnerPlugin } from './runner';
export { SelectionShortcutsPlugin } from './selection_shortcuts';
export { SlatePrism } from './slate-prism';
export { SuggestionsPlugin } from './suggestions';
public/app/features/explore/slate-plugins/newline.ts → packages/grafana-ui/src/slate-plugins/newline.ts
......@@ -13,17 +13,18 @@ function getIndent(text: string) {
return '';
}
export default function NewlinePlugin(): Plugin {
export function NewlinePlugin(): Plugin {
return {
onKeyDown(event: KeyboardEvent, editor: CoreEditor, next: Function) {
onKeyDown(event: Event, editor: CoreEditor, next: Function) {
const keyEvent = event as KeyboardEvent;
const value = editor.value;
if (value.selection.isExpanded) {
return next();
}
if (event.key === 'Enter' && event.shiftKey) {
event.preventDefault();
if (keyEvent.key === 'Enter' && keyEvent.shiftKey) {
keyEvent.preventDefault();
const { startBlock } = value;
const currentLineText = startBlock.text;
......
public/app/features/explore/slate-plugins/runner.test.tsx → packages/grafana-ui/src/slate-plugins/runner.test.tsx
......@@ -2,11 +2,11 @@ import Plain from 'slate-plain-serializer';
import React from 'react';
import { Editor } from '@grafana/slate-react';
import { shallow } from 'enzyme';
import RunnerPlugin from './runner';
import { RunnerPlugin } from './runner';
describe('runner', () => {
const mockHandler = jest.fn();
const handler = RunnerPlugin({ handler: mockHandler }).onKeyDown;
const handler = RunnerPlugin({ handler: mockHandler }).onKeyDown!;
it('should execute query when enter is pressed and there are no suggestions visible', () => {
const value = Plain.deserialize('');
......
public/app/features/explore/slate-plugins/runner.ts → packages/grafana-ui/src/slate-plugins/runner.ts
import { Editor as SlateEditor } from 'slate';
import { Plugin } from '@grafana/slate-react';
import { Editor as CoreEditor } from 'slate';
export default function RunnerPlugin({ handler }: any) {
export function RunnerPlugin({ handler }: any): Plugin {
return {
onKeyDown(event: KeyboardEvent, editor: SlateEditor, next: Function) {
onKeyDown(event: Event, editor: CoreEditor, next: Function) {
const keyEvent = event as KeyboardEvent;
// Handle enter
if (handler && event.key === 'Enter' && !event.shiftKey) {
if (handler && keyEvent.key === 'Enter' && !keyEvent.shiftKey) {
// Submit on Enter
event.preventDefault();
handler(event);
keyEvent.preventDefault();
handler(keyEvent);
return true;
}
......
public/app/features/explore/slate-plugins/selection_shortcuts.ts → packages/grafana-ui/src/slate-plugins/selection_shortcuts.ts
......@@ -6,11 +6,12 @@ import { isKeyHotkey } from 'is-hotkey';
const isSelectLineHotkey = isKeyHotkey('mod+l');
// Clears the rest of the line after the caret
export default function SelectionShortcutsPlugin(): Plugin {
export function SelectionShortcutsPlugin(): Plugin {
return {
onKeyDown(event: KeyboardEvent, editor: CoreEditor, next: Function) {
if (isSelectLineHotkey(event)) {
event.preventDefault();
onKeyDown(event: Event, editor: CoreEditor, next: () => any) {
const keyEvent = event as KeyboardEvent;
if (isSelectLineHotkey(keyEvent)) {
keyEvent.preventDefault();
const { focusBlock, document } = editor.value;
editor.moveAnchorToStartOfBlock();
......
public/app/features/explore/slate-plugins/suggestions.tsx → packages/grafana-ui/src/slate-plugins/suggestions.tsx
......@@ -4,14 +4,17 @@ import sortBy from 'lodash/sortBy';
import { Editor as CoreEditor } from 'slate';
import { Plugin as SlatePlugin } from '@grafana/slate-react';
import { TypeaheadOutput, CompletionItem, CompletionItemGroup } from 'app/types';
import { TypeaheadInput } from '../QueryField';
import TOKEN_MARK from '@grafana/ui/src/slate-plugins/slate-prism/TOKEN_MARK';
import { TypeaheadWithTheme, Typeahead } from '../Typeahead';
import { makeFragment } from '@grafana/ui';
import TOKEN_MARK from './slate-prism/TOKEN_MARK';
import {
makeFragment,
TypeaheadOutput,
CompletionItem,
TypeaheadInput,
SuggestionsState,
CompletionItemGroup,
} from '..';
import { Typeahead } from '../components/Typeahead/Typeahead';
export const TYPEAHEAD_DEBOUNCE = 100;
// Commands added to the editor by this plugin.
......@@ -27,13 +30,13 @@ export interface SuggestionsState {
typeaheadText: string;
}
export default function SuggestionsPlugin({
export function SuggestionsPlugin({
onTypeahead,
cleanText,
onWillApplySuggestion,
portalOrigin,
}: {
onTypeahead: (typeahead: TypeaheadInput) => Promise<TypeaheadOutput>;
onTypeahead?: (typeahead: TypeaheadInput) => Promise<TypeaheadOutput>;
cleanText?: (text: string) => string;
onWillApplySuggestion?: (suggestion: string, state: SuggestionsState) => string;
portalOrigin: string;
......@@ -73,15 +76,16 @@ export default function SuggestionsPlugin({
return next();
},
onKeyDown: (event: KeyboardEvent, editor, next) => {
onKeyDown: (event: Event, editor, next) => {
const keyEvent = event as KeyboardEvent;
const currentSuggestions = state.groupedItems;
const hasSuggestions = currentSuggestions.length;
switch (event.key) {
switch (keyEvent.key) {
case 'Escape': {
if (hasSuggestions) {
event.preventDefault();
keyEvent.preventDefault();
state = {
...state,
......@@ -98,8 +102,8 @@ export default function SuggestionsPlugin({
case 'ArrowDown':
case 'ArrowUp':
if (hasSuggestions) {
event.preventDefault();
typeaheadRef.moveMenuIndex(event.key === 'ArrowDown' ? 1 : -1);
keyEvent.preventDefault();
typeaheadRef.moveMenuIndex(keyEvent.key === 'ArrowDown' ? 1 : -1);
return;
}
......@@ -108,7 +112,7 @@ export default function SuggestionsPlugin({
case 'Enter':
case 'Tab': {
if (hasSuggestions) {
event.preventDefault();
keyEvent.preventDefault();
return typeaheadRef.insertSuggestion();
}
......@@ -196,8 +200,8 @@ export default function SuggestionsPlugin({
return (
<>
{children}
<TypeaheadWithTheme
menuRef={(el: Typeahead) => (typeaheadRef = el)}
<Typeahead
menuRef={(menu: Typeahead) => (typeaheadRef = menu)}
origin={portalOrigin}
prefix={state.typeaheadPrefix}
isOpen={!!state.groupedItems.length}
......@@ -217,7 +221,7 @@ const handleTypeahead = async (
cleanText?: (text: string) => string
): Promise<void> => {
if (!onTypeahead) {
return null;
return;
}
const { value } = editor;
......@@ -226,24 +230,27 @@ const handleTypeahead = async (
// Get decorations associated with the current line
const parentBlock = value.document.getClosestBlock(value.focusBlock.key);
const myOffset = value.selection.start.offset - 1;
const decorations = parentBlock.getDecorations(editor as any);
const decorations = parentBlock && parentBlock.getDecorations(editor as any);
const filteredDecorations = decorations
? decorations
.filter(
decoration =>
decoration.start.offset <= myOffset && decoration.end.offset > myOffset && decoration.type === TOKEN_MARK
decoration!.start.offset <= myOffset && decoration!.end.offset > myOffset && decoration!.type === TOKEN_MARK
)
.toArray();
.toArray()
: [];
// Find the first label key to the left of the cursor
const labelKeyDec = decorations
.filter(decoration => {
return (
decoration.end.offset <= myOffset &&
decoration.type === TOKEN_MARK &&
decoration.data.get('className').includes('label-key')
);
})
const labelKeyDec =
decorations &&
decorations
.filter(
decoration =>
decoration!.end.offset <= myOffset &&
decoration!.type === TOKEN_MARK &&
decoration!.data.get('className').includes('label-key')
)
.last();
const labelKey = labelKeyDec && value.focusText.text.slice(labelKeyDec.start.offset, labelKeyDec.end.offset);
......@@ -276,7 +283,7 @@ const handleTypeahead = async (
text,
value,
wrapperClasses,
labelKey,
labelKey: labelKey || undefined,
});
const filteredSuggestions = suggestions
......
packages/grafana-ui/src/themes/ThemeContext.tsx
......@@ -9,6 +9,7 @@ type Subtract<T, K> = Omit<T, keyof K>;
// Use Grafana Dark theme by default
export const ThemeContext = React.createContext(getTheme(GrafanaThemeType.Dark));
ThemeContext.displayName = 'ThemeContext';
export const withTheme = <P extends Themeable, S extends {} = {}>(Component: React.ComponentType<P>) => {
const WithTheme: React.FunctionComponent<Subtract<P, Themeable>> = props => {
......
packages/grafana-ui/src/types/completion.ts 0 → 100644
import { Value } from 'slate';
import { Editor } from '@grafana/slate-react';
export interface CompletionItemGroup {
/**
* Label that will be displayed for all entries of this group.
*/
label: string;
/**
* List of suggestions of this group.
*/
items: CompletionItem[];
/**
* If true, match only by prefix (and not mid-word).
*/
prefixMatch?: boolean;
/**
* If true, do not filter items in this group based on the search.
*/
skipFilter?: boolean;
/**
* If true, do not sort items.
*/
skipSort?: boolean;
}
export enum CompletionItemKind {
GroupTitle = 'GroupTitle',
}
export interface CompletionItem {
/**
* The label of this completion item. By default
* this is also the text that is inserted when selecting
* this completion.
*/
label: string;
/**
* The kind of this completion item. An icon is chosen
* by the editor based on the kind.
*/
kind?: CompletionItemKind | string;
/**
* A human-readable string with additional information
* about this item, like type or symbol information.
*/
detail?: string;
/**
* A human-readable string, can be Markdown, that represents a doc-comment.
*/
documentation?: string;
/**
* A string that should be used when comparing this item
* with other items. When `falsy` the `label` is used.
*/
sortText?: string;
/**
* A string that should be used when filtering a set of
* completion items. When `falsy` the `label` is used.
*/
filterText?: string;
/**
* A string or snippet that should be inserted in a document when selecting
* this completion. When `falsy` the `label` is used.
*/
insertText?: string;
/**
* Delete number of characters before the caret position,
* by default the letters from the beginning of the word.
*/
deleteBackwards?: number;
/**
* Number of steps to move after the insertion, can be negative.
*/
move?: number;
}
export interface TypeaheadOutput {
context?: string;
suggestions: CompletionItemGroup[];
}
export interface TypeaheadInput {
text: string;
prefix: string;
wrapperClasses: string[];
labelKey?: string;
value?: Value;
editor?: Editor;
}
export interface SuggestionsState {
groupedItems: CompletionItemGroup[];
typeaheadPrefix: string;
typeaheadContext: string;
typeaheadText: string;
}
packages/grafana-ui/src/types/datasource.ts
......@@ -549,3 +549,19 @@ export interface AnnotationQueryRequest<MoreOptions = {}> {
name: string;
} & MoreOptions;
}
export interface HistoryItem<TQuery extends DataQuery = DataQuery> {
ts: number;
query: TQuery;
}
export abstract class LanguageProvider {
datasource!: DataSourceApi;
request!: (url: string, params?: any) => Promise<any>;
/**
* Returns startTask that resolves with a task list when main syntax is loaded.
* Task list consists of secondary promises that load more detailed language features.
*/
start!: () => Promise<any[]>;
startTask?: Promise<any[]>;
}
packages/grafana-ui/src/types/index.ts
export * from './panel';
export * from './plugin';
export * from './app';
export * from './completion';
export * from './datasource';
export * from './theme';
export * from './input';
export * from './panel';
export * from './plugin';
export * from './theme';
import * as PanelEvents from './events';
export { PanelEvents };
public/app/features/explore/utils/typeahead.ts → packages/grafana-ui/src/utils/typeahead.ts
import { GrafanaTheme } from '@grafana/ui';
import { default as calculateSize } from 'calculate-size';
import { CompletionItemGroup, CompletionItem, CompletionItemKind } from 'app/types';
import { CompletionItemGroup, CompletionItem, CompletionItemKind } from '../types/completion';
import { GrafanaTheme } from '..';
export const flattenGroupItems = (groupedItems: CompletionItemGroup[]): CompletionItem[] => {
return groupedItems.reduce((all, current) => {
......@@ -10,7 +9,7 @@ export const flattenGroupItems = (groupedItems: CompletionItemGroup[]): Completi
kind: CompletionItemKind.GroupTitle,
};
return all.concat(titleItem, current.items);
}, []);
}, new Array<CompletionItem>());
};
export const calculateLongestLabel = (allItems: CompletionItem[]): string => {
......
public/app/core/utils/explore.ts
......@@ -19,9 +19,18 @@ import { renderUrl } from 'app/core/utils/url';
import store from 'app/core/store';
import kbn from 'app/core/utils/kbn';
import { getNextRefIdChar } from './query';
// Types
import { DataQuery, DataSourceApi, DataQueryError, DataQueryRequest, PanelModel, RefreshPicker } from '@grafana/ui';
import { ExploreUrlState, HistoryItem, QueryTransaction, QueryOptions, ExploreMode } from 'app/types/explore';
import {
DataQuery,
DataSourceApi,
DataQueryError,
DataQueryRequest,
PanelModel,
RefreshPicker,
HistoryItem,
} from '@grafana/ui';
import { ExploreUrlState, QueryTransaction, QueryOptions, ExploreMode } from 'app/types/explore';
import { config } from '../config';
import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
......
public/app/features/explore/QueryRow.tsx
......@@ -13,8 +13,8 @@ import { changeQuery, modifyQueries, runQueries, addQueryRow } from './state/act
// Types
import { StoreState } from 'app/types';
import { TimeRange, AbsoluteTimeRange, LoadingState } from '@grafana/data';
import { DataQuery, DataSourceApi, QueryFixAction, PanelData } from '@grafana/ui';
import { HistoryItem, ExploreItemState, ExploreId, ExploreMode } from 'app/types/explore';
import { DataQuery, DataSourceApi, QueryFixAction, PanelData, HistoryItem } from '@grafana/ui';
import { ExploreItemState, ExploreId, ExploreMode } from 'app/types/explore';
import { Emitter } from 'app/core/utils/emitter';
import { highlightLogsExpressionAction, removeQueryRowAction } from './state/actionTypes';
import QueryStatus from './QueryStatus';
......
public/app/features/explore/state/actionTypes.ts
// Types
import { Unsubscribable } from 'rxjs';
import { Emitter } from 'app/core/core';
import { DataQuery, DataSourceSelectItem, DataSourceApi, QueryFixAction, PanelData } from '@grafana/ui';
import { DataQuery, DataSourceSelectItem, DataSourceApi, QueryFixAction, PanelData, HistoryItem } from '@grafana/ui';
import { LogLevel, TimeRange, LoadingState, AbsoluteTimeRange } from '@grafana/data';
import { ExploreId, ExploreItemState, HistoryItem, ExploreUIState, ExploreMode } from 'app/types/explore';
import { ExploreId, ExploreItemState, ExploreUIState, ExploreMode } from 'app/types/explore';
import { actionCreatorFactory, ActionOf } from 'app/core/redux/actionCreatorFactory';
/** Higher order actions
......
public/app/plugins/datasource/elasticsearch/components/ElasticsearchQueryField.tsx
......@@ -4,8 +4,7 @@ import React from 'react';
import { SlatePrism } from '@grafana/ui';
// dom also includes Element polyfills
import QueryField from 'app/features/explore/QueryField';
import { ExploreQueryFieldProps } from '@grafana/ui';
import { QueryField, ExploreQueryFieldProps } from '@grafana/ui';
import { ElasticDatasource } from '../datasource';
import { ElasticsearchOptions, ElasticsearchQuery } from '../types';
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/query_field.tsx
import PluginPrism from 'app/features/explore/slate-plugins/prism';
import BracesPlugin from 'app/features/explore/slate-plugins/braces';
import ClearPlugin from 'app/features/explore/slate-plugins/clear';
import NewlinePlugin from 'app/features/explore/slate-plugins/newline';
import RunnerPlugin from 'app/features/explore/slate-plugins/runner';
import { BracesPlugin, ClearPlugin, RunnerPlugin, NewlinePlugin } from '@grafana/ui';
import Typeahead from './typeahead';
import { getKeybindingSrv, KeybindingSrv } from 'app/core/services/keybindingSrv';
......
public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx
......@@ -3,23 +3,18 @@ import React from 'react';
// @ts-ignore
import Cascader from 'rc-cascader';
import { SlatePrism } from '@grafana/ui';
import { SlatePrism, TypeaheadOutput, SuggestionsState, QueryField, TypeaheadInput, BracesPlugin } from '@grafana/ui';
// Components
import QueryField, { TypeaheadInput } from 'app/features/explore/QueryField';
// Utils & Services
// dom also includes Element polyfills
import BracesPlugin from 'app/features/explore/slate-plugins/braces';
import { Plugin, Node } from 'slate';
// Types
import { LokiQuery } from '../types';
import { TypeaheadOutput } from 'app/types/explore';
import { ExploreQueryFieldProps, DOMUtil } from '@grafana/ui';
import { AbsoluteTimeRange } from '@grafana/data';
import { Grammar } from 'prismjs';
import LokiLanguageProvider, { LokiHistoryItem } from '../language_provider';
import { SuggestionsState } from 'app/features/explore/slate-plugins/suggestions';
import LokiDatasource from '../datasource';
function getChooserText(hasSyntax: boolean, hasLogLabels: boolean) {
......
public/app/plugins/datasource/loki/language_provider.test.ts
......@@ -3,10 +3,10 @@ import { Editor as SlateEditor } from 'slate';
import LanguageProvider, { LABEL_REFRESH_INTERVAL, LokiHistoryItem, rangeToParams } from './language_provider';
import { AbsoluteTimeRange } from '@grafana/data';
import { TypeaheadInput } from '@grafana/ui';
import { advanceTo, clear, advanceBy } from 'jest-date-mock';
import { beforeEach } from 'test/lib/common';
import { TypeaheadInput } from '../../../types';
import { makeMockLokiDatasource } from './mocks';
import LokiDatasource from './datasource';
......
public/app/plugins/datasource/loki/language_provider.ts
......@@ -6,12 +6,12 @@ import { parseSelector, labelRegexp, selectorRegexp } from 'app/plugins/datasour
import syntax from './syntax';
// Types
import { CompletionItem, LanguageProvider, TypeaheadInput, TypeaheadOutput, HistoryItem } from 'app/types/explore';
import { LokiQuery } from './types';
import { dateTime, AbsoluteTimeRange } from '@grafana/data';
import { PromQuery } from '../prometheus/types';
import LokiDatasource from './datasource';
import { CompletionItem, TypeaheadInput, TypeaheadOutput, LanguageProvider, HistoryItem } from '@grafana/ui';
const DEFAULT_KEYS = ['job', 'namespace'];
const EMPTY_SELECTOR = '{}';
......
public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
......@@ -3,21 +3,19 @@ import React from 'react';
// @ts-ignore
import Cascader from 'rc-cascader';
import { SlatePrism } from '@grafana/ui';
import { Plugin } from 'slate';
import { SlatePrism, TypeaheadInput, TypeaheadOutput, QueryField, BracesPlugin, HistoryItem } from '@grafana/ui';
import Prism from 'prismjs';
import { TypeaheadOutput, HistoryItem } from 'app/types/explore';
// dom also includes Element polyfills
import BracesPlugin from 'app/features/explore/slate-plugins/braces';
import QueryField, { TypeaheadInput } from 'app/features/explore/QueryField';
import { PromQuery, PromContext, PromOptions } from '../types';
import { CancelablePromise, makePromiseCancelable } from 'app/core/utils/CancelablePromise';
import { ExploreQueryFieldProps, QueryHint, DOMUtil } from '@grafana/ui';
import { isDataFrame, toLegacyResponseData } from '@grafana/data';
import { SuggestionsState } from '@grafana/ui';
import { PrometheusDatasource } from '../datasource';
import PromQlLanguageProvider from '../language_provider';
import { SuggestionsState } from 'app/features/explore/slate-plugins/suggestions';
const HISTOGRAM_GROUP = '__histograms__';
const METRIC_MARK = 'metric';
......@@ -114,7 +112,7 @@ interface PromQueryFieldState {
}
class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryFieldState> {
plugins: any[];
plugins: Plugin[];
languageProvider: PromQlLanguageProvider;
languageProviderInitializationPromise: CancelablePromise<any>;
......
public/app/plugins/datasource/prometheus/language_provider.ts
import _ from 'lodash';
import { dateTime } from '@grafana/data';
import {
CompletionItem,
CompletionItemGroup,
LanguageProvider,
TypeaheadInput,
TypeaheadOutput,
CompletionItemGroup,
LanguageProvider,
HistoryItem,
} from 'app/types/explore';
} from '@grafana/ui';
import { parseSelector, processLabels, processHistogramLabels } from './language_utils';
import PromqlSyntax, { FUNCTIONS, RATE_RANGES } from './promql';
......
public/app/plugins/datasource/prometheus/promql.ts
/* tslint:disable max-line-length */
import { CompletionItem } from 'app/types/explore';
import { CompletionItem } from '@grafana/ui';
export const RATE_RANGES: CompletionItem[] = [
{ label: '$__interval', sortText: '$__interval' },
......
public/app/plugins/datasource/prometheus/specs/language_provider.test.ts
......@@ -2,7 +2,7 @@ import Plain from 'slate-plain-serializer';
import { Editor as SlateEditor } from 'slate';
import LanguageProvider from '../language_provider';
import { PrometheusDatasource } from '../datasource';
import { HistoryItem } from 'app/types';
import { HistoryItem } from '@grafana/ui';
import { PromQuery } from '../types';
describe('Language completion provider', () => {
......
public/app/types/explore.ts
......@@ -8,6 +8,7 @@ import {
ExploreStartPageProps,
PanelData,
DataQueryRequest,
HistoryItem,
} from '@grafana/ui';
import {
......@@ -23,100 +24,11 @@ import {
import { Emitter } from 'app/core/core';
import TableModel from 'app/core/table_model';
import { Value } from 'slate';
import { Editor } from '@grafana/slate-react';
export enum ExploreMode {
Metrics = 'Metrics',
Logs = 'Logs',
}
export enum CompletionItemKind {
GroupTitle = 'GroupTitle',
}
export interface CompletionItem {
/**
* The label of this completion item. By default
* this is also the text that is inserted when selecting
* this completion.
*/
label: string;
/**
* The kind of this completion item. An icon is chosen
* by the editor based on the kind.
*/
kind?: CompletionItemKind | string;
/**
* A human-readable string with additional information
* about this item, like type or symbol information.
*/
detail?: string;
/**
* A human-readable string, can be Markdown, that represents a doc-comment.
*/
documentation?: string;
/**
* A string that should be used when comparing this item
* with other items. When `falsy` the `label` is used.
*/
sortText?: string;
/**
* A string that should be used when filtering a set of
* completion items. When `falsy` the `label` is used.
*/
filterText?: string;
/**
* A string or snippet that should be inserted in a document when selecting
* this completion. When `falsy` the `label` is used.
*/
insertText?: string;
/**
* Delete number of characters before the caret position,
* by default the letters from the beginning of the word.
*/
deleteBackwards?: number;
/**
* Number of steps to move after the insertion, can be negative.
*/
move?: number;
}
export interface CompletionItemGroup {
/**
* Label that will be displayed for all entries of this group.
*/
label: string;
/**
* List of suggestions of this group.
*/
items: CompletionItem[];
/**
* If true, match only by prefix (and not mid-word).
*/
prefixMatch?: boolean;
/**
* If true, do not filter items in this group based on the search.
*/
skipFilter?: boolean;
/**
* If true, do not sort items.
*/
skipSort?: boolean;
}
export enum ExploreId {
left = 'left',
right = 'right',
......@@ -308,36 +220,6 @@ export interface ExploreUrlState {
context?: string;
}
export interface HistoryItem<TQuery extends DataQuery = DataQuery> {
ts: number;
query: TQuery;
}
export abstract class LanguageProvider {
datasource: DataSourceApi;
request: (url: string, params?: any) => Promise<any>;
/**
* Returns startTask that resolves with a task list when main syntax is loaded.
* Task list consists of secondary promises that load more detailed language features.
*/
start: () => Promise<any[]>;
startTask?: Promise<any[]>;
}
export interface TypeaheadInput {
text: string;
prefix: string;
wrapperClasses: string[];
labelKey?: string;
value?: Value;
editor?: Editor;
}
export interface TypeaheadOutput {
context?: string;
suggestions: CompletionItemGroup[];
}
export interface QueryIntervals {
interval: string;
intervalMs: number;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment