Add context to non-visual mode

CHANGELOG.md

@@ -1,13 +1,14 @@
 # Change Log
 
-## 5.2.0 (IN PROGRESS)
+## 5.2.0 (2024-02-05)
 
 ### Features / Enhancements
 
 - Updated README and documentation (#214)
 - 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)
 

src/components/EchartsEditor/EchartsEditor.tsx

@@ -57,7 +57,7 @@ export const EchartsEditor: React.FC<Props> = ({ 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];

src/components/EchartsPanel/EchartsPanel.tsx

@@ -174,6 +174,7 @@ export const EchartsPanel: React.FC<Props> = ({ options, data, width, height, re
               'locationService',
               'notifySuccess',
               'notifyError',
+              'context',
               options.getOption
             );
 

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,

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<PanelOptions> = {
+      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,
+      });
+    });
+  });
+});

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<PanelOptions, 'editorMode'> {
+  /**
+   * Editor Mode introduced in 5.2.0
+   */
+  editorMode?: EditorMode;
+}
+
+/**
+ * Get Migrated Options
+ *
+ * @param panel
+ */
+export const getMigratedOptions = (panel: PanelModel<OutdatedPanelOptions>): PanelOptions => {
+  const { ...options } = panel.options;
+
+  /**
+   * Set code editor mode if not defined
+   */
+  if (!options.editorMode) {
+    options.editorMode = EditorMode.CODE;
+  }
+
+  return options;
+};

src/module.ts

@@ -13,13 +13,15 @@ import {
   Theme,
   THEME_OPTIONS,
 } from './constants';
+import { getMigratedOptions } from './migration';
 import { PanelOptions } from './types';
 
 /**
  * Panel Plugin
  */
 export const plugin = new PanelPlugin<PanelOptions>(EchartsPanel)
   .setNoPadding()
+  .setMigrationHandler(getMigratedOptions)
   .setPanelOptions((builder) => {
     const isCodeEditor = (config: PanelOptions) => config.editorMode !== EditorMode.VISUAL;
     const isVisualEditor = (config: PanelOptions) => config.editorMode === EditorMode.VISUAL;