From 81fac772f727a42bcbd8988371a9e299d813357a Mon Sep 17 00:00:00 2001 From: Vitaly Pinchuk <146737590+vitPinchuk@users.noreply.github.com> Date: Tue, 6 Feb 2024 06:08:05 +0300 Subject: [PATCH] Add context to non-visual mode (#245) * ft Add context to non-visual mode * Update CHANGELOG.md * Add code editor suggestions * Add panel options migration for editor mode --------- Co-authored-by: Mikhail Volkov Co-authored-by: asimonok --- CHANGELOG.md | 3 +- .../EchartsEditor/EchartsEditor.tsx | 2 +- src/components/EchartsPanel/EchartsPanel.tsx | 1 + src/constants/editor.ts | 131 +++++++++++++----- src/migration.test.ts | 29 ++++ src/migration.ts | 32 +++++ src/module.ts | 2 + 7 files changed, 163 insertions(+), 37 deletions(-) create mode 100644 src/migration.test.ts create mode 100644 src/migration.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ce165a..caf73d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Change Log -## 5.2.0 (IN PROGRESS) +## 5.2.0 (2024-02-05) ### Features / Enhancements @@ -8,6 +8,7 @@ - Add visual editor for working with data sources (#211) - Update ESLint configuration and refactoring (#237) - Update dependencies and Actions (#238) +- Add context parameter to non-visual mode (#245) ## 5.1.0 (2023-08-11) diff --git a/src/components/EchartsEditor/EchartsEditor.tsx b/src/components/EchartsEditor/EchartsEditor.tsx index 74de773..c0e9248 100644 --- a/src/components/EchartsEditor/EchartsEditor.tsx +++ b/src/components/EchartsEditor/EchartsEditor.tsx @@ -57,7 +57,7 @@ export const EchartsEditor: React.FC = ({ value, onChange, context, item }); if (item.id === Editor.VISUALCODE) { - return [...CODE_EDITOR_SUGGESTIONS, ...VISUAL_CODE_EDITOR_SUGGESTIONS, ...suggestions]; + return [...VISUAL_CODE_EDITOR_SUGGESTIONS, ...suggestions]; } return [...CODE_EDITOR_SUGGESTIONS, ...suggestions]; diff --git a/src/components/EchartsPanel/EchartsPanel.tsx b/src/components/EchartsPanel/EchartsPanel.tsx index f53d07c..bba9964 100644 --- a/src/components/EchartsPanel/EchartsPanel.tsx +++ b/src/components/EchartsPanel/EchartsPanel.tsx @@ -174,6 +174,7 @@ export const EchartsPanel: React.FC = ({ options, data, width, height, re 'locationService', 'notifySuccess', 'notifyError', + 'context', options.getOption ); diff --git a/src/constants/editor.ts b/src/constants/editor.ts index b10dfac..db7bf90 100644 --- a/src/constants/editor.ts +++ b/src/constants/editor.ts @@ -49,6 +49,89 @@ export const FORMAT_OPTIONS = [ { value: Format.NONE, label: 'Disabled' }, ]; +/** + * Editor Base Context Suggestions + */ +const EDITOR_BASE_CONTEXT_SUGGESTIONS: CodeEditorSuggestionItem[] = [ + { + label: 'context', + kind: CodeEditorSuggestionItemKind.Constant, + detail: 'All passed possible properties and methods.', + }, + + /** + * Panel + */ + { + label: 'context.panel', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'Panel instance properties.', + }, + { + label: 'context.panel.data', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'Panel data.', + }, + { + label: 'context.panel.chart', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'ECharts instance.', + }, + + /** + * Grafana + */ + { + label: 'context.grafana', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'Grafana properties and methods.', + }, + { + label: 'context.grafana.theme', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'Grafana theme.', + }, + { + label: 'context.grafana.replaceVariables', + kind: CodeEditorSuggestionItemKind.Method, + detail: 'Interpolate variables.', + }, + { + label: 'context.grafana.eventBus', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'Panels events.', + }, + { + label: 'context.grafana.locationService', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'Location service.', + }, + { + label: 'context.grafana.notifySuccess', + kind: CodeEditorSuggestionItemKind.Method, + detail: 'Show success notification.', + }, + { + label: 'context.grafana.notifyError', + kind: CodeEditorSuggestionItemKind.Method, + detail: 'Show error notification.', + }, + + /** + * Echarts + */ + { + label: 'context.echarts', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'ECharts library.', + }, + { + label: 'context.ecStat', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'A statistical and data mining tool.', + }, +]; + /** * Suggestions */ @@ -103,47 +186,25 @@ export const CODE_EDITOR_SUGGESTIONS: CodeEditorSuggestionItem[] = [ kind: CodeEditorSuggestionItemKind.Method, detail: 'Display error notification.', }, - { - label: 'context', - kind: CodeEditorSuggestionItemKind.Constant, - detail: 'All passed possible properties and methods.', - }, - { - label: 'context.panel', - kind: CodeEditorSuggestionItemKind.Property, - detail: 'Panel instance properties.', - }, - { - label: 'context.panel.data', - kind: CodeEditorSuggestionItemKind.Property, - detail: 'Panel data.', - }, - { - label: 'context.panel.chart', - kind: CodeEditorSuggestionItemKind.Property, - detail: 'ECharts instance.', - }, - { - label: 'context.grafana', - kind: CodeEditorSuggestionItemKind.Property, - detail: 'Grafana properties and methods.', - }, - { - label: 'context.echarts', - kind: CodeEditorSuggestionItemKind.Property, - detail: 'ECharts library.', - }, - { - label: 'context.ecStat', - kind: CodeEditorSuggestionItemKind.Property, - detail: 'A statistical and data mining tool.', - }, + + /** + * Context + */ + ...EDITOR_BASE_CONTEXT_SUGGESTIONS, ]; /** * Visual Code Editor Suggestions */ export const VISUAL_CODE_EDITOR_SUGGESTIONS: CodeEditorSuggestionItem[] = [ + /** + * Context + */ + ...EDITOR_BASE_CONTEXT_SUGGESTIONS, + + /** + * Visual Editor + */ { label: 'context.editor', kind: CodeEditorSuggestionItemKind.Property, diff --git a/src/migration.test.ts b/src/migration.test.ts new file mode 100644 index 0000000..18f85d4 --- /dev/null +++ b/src/migration.test.ts @@ -0,0 +1,29 @@ +import { EditorMode } from './constants'; +import { getMigratedOptions } from './migration'; +import { PanelOptions } from './types'; + +describe('Migrations', () => { + it('Should return panel options', () => { + const options: Partial = { + editorMode: EditorMode.VISUAL, + }; + + expect( + getMigratedOptions({ + options: options, + } as any) + ).toEqual(options); + }); + + describe('5.2.0', () => { + it('Should set code to editor mode if not defined', () => { + expect( + getMigratedOptions({ + options: {}, + } as any) + ).toEqual({ + editorMode: EditorMode.CODE, + }); + }); + }); +}); diff --git a/src/migration.ts b/src/migration.ts new file mode 100644 index 0000000..5ad12bc --- /dev/null +++ b/src/migration.ts @@ -0,0 +1,32 @@ +import { PanelModel } from '@grafana/data'; + +import { EditorMode } from './constants'; +import { PanelOptions } from './types'; + +/** + * Outdated Panel Options + */ +interface OutdatedPanelOptions extends Omit { + /** + * Editor Mode introduced in 5.2.0 + */ + editorMode?: EditorMode; +} + +/** + * Get Migrated Options + * + * @param panel + */ +export const getMigratedOptions = (panel: PanelModel): PanelOptions => { + const { ...options } = panel.options; + + /** + * Set code editor mode if not defined + */ + if (!options.editorMode) { + options.editorMode = EditorMode.CODE; + } + + return options; +}; diff --git a/src/module.ts b/src/module.ts index 8b8eaf1..5a7398a 100644 --- a/src/module.ts +++ b/src/module.ts @@ -13,6 +13,7 @@ import { Theme, THEME_OPTIONS, } from './constants'; +import { getMigratedOptions } from './migration'; import { PanelOptions } from './types'; /** @@ -20,6 +21,7 @@ import { PanelOptions } from './types'; */ export const plugin = new PanelPlugin(EchartsPanel) .setNoPadding() + .setMigrationHandler(getMigratedOptions) .setPanelOptions((builder) => { const isCodeEditor = (config: PanelOptions) => config.editorMode !== EditorMode.VISUAL; const isVisualEditor = (config: PanelOptions) => config.editorMode === EditorMode.VISUAL;