-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Monaco for RedisGears panel editor (#39)
* Add monaco editor for gears panel * Update dashboard * Add @monaco-editor/react package * Format * Update language Co-authored-by: Mikhail <[email protected]>
- Loading branch information
Showing
10 changed files
with
243 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
src/redis-gears-panel/components/code-editor/code-editor.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import React from 'react'; | ||
| import { shallow } from 'enzyme'; | ||
| import Editor from '@monaco-editor/react'; | ||
| import { UnthemedCodeEditor } from './code-editor'; | ||
|
|
||
| /** | ||
| * Unthemed Code Editor | ||
| */ | ||
| describe('UnthemedCodeEditor', () => { | ||
| it('Should pass correct props', () => { | ||
| const onChange = jest.fn(); | ||
| const wrapper = shallow( | ||
| <UnthemedCodeEditor width={100} height={200} value="hello" onChange={onChange} theme={{ isDark: true } as any} /> | ||
| ); | ||
| const component = wrapper.find(Editor); | ||
| expect(component.prop('width')).toEqual(100); | ||
| expect(component.prop('height')).toEqual(200); | ||
| expect(component.prop('value')).toEqual('hello'); | ||
| expect(component.prop('theme')).toEqual('vs-dark'); | ||
| expect(component.prop('onChange')).toEqual(onChange); | ||
| expect(component.prop('options')).toEqual({ | ||
| wordWrap: 'off', | ||
| codeLens: false, | ||
| minimap: { | ||
| enabled: undefined, | ||
| renderCharacters: false, | ||
| }, | ||
| readOnly: false, | ||
| overviewRulerBorder: false, | ||
| automaticLayout: true, | ||
| glyphMargin: false, | ||
| folding: false, | ||
| lineNumbers: 'off', | ||
| lineDecorationsWidth: 5, | ||
| lineNumbersMinChars: 0, | ||
| }); | ||
| }); | ||
|
|
||
| it('Should pass correct props when lineNumbers are shown', () => { | ||
| const onChange = jest.fn(); | ||
| const value = | ||
| "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."; | ||
| const wrapper = shallow( | ||
| <UnthemedCodeEditor | ||
| width={100} | ||
| height={200} | ||
| value={value} | ||
| onChange={onChange} | ||
| theme={{ isDark: false } as any} | ||
| language="python" | ||
| showMiniMap | ||
| showLineNumbers | ||
| /> | ||
| ); | ||
| const component = wrapper.find(Editor); | ||
| expect(component.prop('theme')).toEqual('vs-light'); | ||
| expect(component.prop('language')).toEqual('python'); | ||
| expect(component.prop('options')).toEqual({ | ||
| wordWrap: 'off', | ||
| codeLens: false, | ||
| minimap: { | ||
| enabled: true, | ||
| renderCharacters: false, | ||
| }, | ||
| readOnly: false, | ||
| overviewRulerBorder: false, | ||
| automaticLayout: true, | ||
| lineDecorationsWidth: 0, | ||
| lineNumbersMinChars: 4, | ||
| }); | ||
| }); | ||
|
|
||
| it('Should use correctly if value is undefined', () => { | ||
| const onChange = jest.fn(); | ||
| const wrapper = shallow( | ||
| <UnthemedCodeEditor | ||
| width={100} | ||
| height={200} | ||
| value={undefined} | ||
| onChange={onChange} | ||
| theme={{ isDark: false } as any} | ||
| language="python" | ||
| showMiniMap | ||
| showLineNumbers | ||
| /> | ||
| ); | ||
| const component = wrapper.find(Editor); | ||
| expect(component.prop('value')).toEqual(''); | ||
| }); | ||
| }); |
115 changes: 115 additions & 0 deletions
115
src/redis-gears-panel/components/code-editor/code-editor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import React, { PureComponent } from 'react'; | ||
| import { Themeable, withTheme } from '@grafana/ui'; | ||
| import Editor from '@monaco-editor/react'; | ||
|
|
||
| /** | ||
| * Properties | ||
| */ | ||
| interface Props { | ||
| /** | ||
| * Width | ||
| * | ||
| * @type {number} | ||
| */ | ||
| width: number; | ||
|
|
||
| /** | ||
| * Height | ||
| * | ||
| * @type {number} | ||
| */ | ||
| height: number; | ||
|
|
||
| /** | ||
| * Value | ||
| * | ||
| * @type {string} | ||
| */ | ||
| value?: string; | ||
|
|
||
| /** | ||
| * Show Mini map | ||
| * | ||
| * @type {boolean} | ||
| */ | ||
| showMiniMap?: boolean; | ||
|
|
||
| /** | ||
| * Show Line numbers | ||
| * | ||
| * @type {boolean} | ||
| */ | ||
| showLineNumbers?: boolean; | ||
|
|
||
| /** | ||
| * Language | ||
| * | ||
| * @type {string} | ||
| */ | ||
| language?: string; | ||
|
|
||
| /** | ||
| * Read-only | ||
| * | ||
| * @type {boolean} | ||
| */ | ||
| readOnly?: boolean; | ||
|
|
||
| /** | ||
| * On Change | ||
| */ | ||
| onChange: (value?: string) => void; | ||
| } | ||
|
|
||
| /** | ||
| * Unthemed Code Editor | ||
| * | ||
| * @see https://github.com/suren-atoyan/monaco-react | ||
| */ | ||
| export class UnthemedCodeEditor extends PureComponent<Props & Themeable, {}> { | ||
| render() { | ||
| const { width, height, theme, showMiniMap, showLineNumbers, language = 'python', onChange, readOnly } = this.props; | ||
|
|
||
| /** | ||
| * Options similar to Grafana | ||
| */ | ||
| const options: any = { | ||
| wordWrap: 'off', | ||
| codeLens: false, // not included in the bundle | ||
| minimap: { | ||
| enabled: showMiniMap, | ||
| renderCharacters: false, | ||
| }, | ||
| readOnly: !!readOnly, | ||
| lineNumbersMinChars: 4, | ||
| lineDecorationsWidth: 0, | ||
| overviewRulerBorder: false, | ||
| automaticLayout: true, | ||
| }; | ||
|
|
||
| /** | ||
| * Line numbers similar to Grafana | ||
| */ | ||
| if (!showLineNumbers) { | ||
| options.glyphMargin = false; | ||
| options.folding = false; | ||
| options.lineNumbers = 'off'; | ||
| options.lineDecorationsWidth = 5; // left margin when not showing line numbers | ||
| options.lineNumbersMinChars = 0; | ||
| } | ||
|
|
||
| return ( | ||
| <Editor | ||
| width={width} | ||
| height={height} | ||
| theme={theme.isDark ? 'vs-dark' : 'vs-light'} | ||
| onChange={onChange} | ||
| language={language} | ||
| options={options} | ||
| value={this.props.value ?? ''} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export const CodeEditor = withTheme(UnthemedCodeEditor); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { CodeEditor } from './code-editor'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export * from './code-editor'; | ||
| export * from './redis-gears-panel'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| /** | ||
| * Default script | ||
| */ | ||
| export const DefaultScript = 'GB().run()'; | ||
| export const DefaultScript = 'gb = GearsBuilder()'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters