Update auto size code editor (#263)

* Add auto size code editor * Update CHANGELOG.md --------- Co-authored-by: Mikhail Volkov <[email protected]>
VolkovLabs · Mar 7, 2024 · f6e5cde · f6e5cde
1 parent 267e6a5
commit f6e5cde
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 96 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - Updated to Apache ECharts 5.5.0 (#257)
 - Updated code parameters with Code Parameters Builder (#261)
+- Updated auto size code editor (#263)
 
 ## 5.2.0 (2024-02-15)
 
@@ -16,24 +17,24 @@
 ### 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)
-- Add refresh function using Application Event Bus (#247)
-- Update to disallow to choose already selected fields (#251)
-- Update echarts.volkovlabs.io to use visual editor and data sources (#248)
-- Update draggable handler in Visual editor (#256)
+- Added visual editor for working with data sources (#211)
+- Updated ESLint configuration and refactoring (#237)
+- Updated dependencies and Actions (#238)
+- Added context parameter to non-visual mode (#245)
+- Added refresh function using Application Event Bus (#247)
+- Updated to disallow to choose already selected fields (#251)
+- Updated echarts.volkovlabs.io to use visual editor and data sources (#248)
+- Updated draggable handler in Visual editor (#256)
 
 ## 5.1.0 (2023-08-11)
 
 ### Features / Enhancements
 
-- Update to Grafana 10.0.3 (#206)
+- Updated to Grafana 10.0.3 (#206)
 
 ### Bugfixes
 
-- Fix Memory Leak on resubscribing to restore event (#208)
+- Fixed Memory Leak on resubscribing to restore event (#208)
 
 ## 5.0.0 (2023-07-19)
 
@@ -43,17 +44,17 @@
 
 ### Features / Enhancements
 
-- Update Documentation (#182)
-- Update Examples to Grafana 10 (#190)
-- Add Result v2 with unsubscribe function (#188)
-- Update Streaming to redraw charts (#188)
-- Update to Grafana 10.0.0 (#191)
-- Update README and panel options (#192)
-- Remove Grafana 8.5 support (#193)
-- Update to Grafana 10.0.2 dependencies (#195)
-- Update ESLint configuration (#196)
-- Add Wordcloud Extension (#198)
-- Update to Apache ECharts 5.4.3 (#199)
+- Updated Documentation (#182)
+- Updated Examples to Grafana 10 (#190)
+- Added Result v2 with unsubscribe function (#188)
+- Updated Streaming to redraw charts (#188)
+- Updated to Grafana 10.0.0 (#191)
+- Updated README and panel options (#192)
+- Removed Grafana 8.5 support (#193)
+- Updated to Grafana 10.0.2 dependencies (#195)
+- Updated ESLint configuration (#196)
+- Added Wordcloud Extension (#198)
+- Updated to Apache ECharts 5.4.3 (#199)
 
 ## 4.5.0 (2023-06-03)
 

diff --git a/src/components/EchartsEditor/EchartsEditor.tsx b/src/components/EchartsEditor/EchartsEditor.tsx
@@ -1,6 +1,7 @@
 import { StandardEditorProps } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
 import { CodeEditor, CodeEditorSuggestionItem, CodeEditorSuggestionItemKind } from '@grafana/ui';
+import { AutosizeCodeEditor } from '@volkovlabs/components';
 import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
 import React from 'react';
 
@@ -81,7 +82,6 @@ export const EchartsEditor: React.FC<Props> = ({ value, onChange, context, item
     if (item.id === Editor.THEME) {
       return {
         language: CodeLanguage.JSON,
-        height: context.options?.themeEditor.height,
       };
     }
 
@@ -91,7 +91,6 @@ export const EchartsEditor: React.FC<Props> = ({ value, onChange, context, item
     if (item.id === Editor.VISUALCODE) {
       return {
         language: CodeLanguage.JAVASCRIPT,
-        height: context.options?.visualEditor.codeHeight,
         getSuggestions,
       };
     }
@@ -101,19 +100,17 @@ export const EchartsEditor: React.FC<Props> = ({ value, onChange, context, item
      */
     return {
       language: CodeLanguage.JAVASCRIPT,
-      height: context.options?.editor.height,
       getSuggestions,
     };
   };
 
   return (
     <div data-testid={TEST_IDS.editor.root}>
-      <CodeEditor
+      <AutosizeCodeEditor
         language={CodeLanguage.JAVASCRIPT}
         showLineNumbers={true}
         showMiniMap={value.length > 100}
         value={value}
-        height={context.options?.editor.height}
         onBlur={onChange}
         onSave={onChange}
         monacoOptions={monacoOptions}

diff --git a/src/constants/default.ts b/src/constants/default.ts
@@ -104,8 +104,8 @@ return {
 export const DEFAULT_OPTIONS: PanelOptions = {
   getOption: GET_OPTION,
   renderer: Renderer.CANVAS,
-  themeEditor: { name: Theme.DEFAULT, config: '{}', height: 400 },
-  editor: { height: 600, format: Format.AUTO },
+  themeEditor: { name: Theme.DEFAULT, config: '{}' },
+  editor: { format: Format.AUTO },
   map: Map.NONE,
   baidu: {
     key: '',
@@ -123,6 +123,5 @@ export const DEFAULT_OPTIONS: PanelOptions = {
     dataset: [],
     series: [],
     code: VISUAL_EDITOR_CODE,
-    codeHeight: 600,
   },
 };
diff --git a/src/module.test.ts b/src/module.test.ts
@@ -47,7 +47,6 @@ describe('plugin', () => {
      * Inputs
      */
     expect(builder.addCustomEditor).toHaveBeenCalled();
-    expect(builder.addSliderInput).toHaveBeenCalled();
     expect(builder.addRadio).toHaveBeenCalled();
     expect(builder.addTextInput).toHaveBeenCalled();
   });
@@ -105,7 +104,6 @@ describe('plugin', () => {
 
       plugin['optionsSupplier'](builder);
 
-      expect(shownSliderInputPaths).toEqual(expect.arrayContaining(['themeEditor.height']));
       expect(shownEditorPaths).toEqual(expect.arrayContaining(['themeEditor.config']));
     });
   });

diff --git a/src/module.ts b/src/module.ts
@@ -143,17 +143,6 @@ export const plugin = new PanelPlugin<PanelOptions>(EchartsPanel)
         category: ['Visual Editor'],
         showIf: isVisualEditor,
       })
-      .addSliderInput({
-        path: 'visualEditor.codeHeight',
-        name: 'Height, px',
-        defaultValue: DEFAULT_OPTIONS.visualEditor.codeHeight,
-        settings: {
-          min: 100,
-          max: 2000,
-        },
-        category: ['Visual Editor'],
-        showIf: isVisualEditor,
-      })
       .addCustomEditor({
         id: Editor.VISUALCODE,
         path: 'visualEditor.code',
@@ -169,17 +158,6 @@ export const plugin = new PanelPlugin<PanelOptions>(EchartsPanel)
      * Code Editor
      */
     builder
-      .addSliderInput({
-        path: 'editor.height',
-        name: 'Height, px',
-        defaultValue: DEFAULT_OPTIONS.editor.height,
-        settings: {
-          min: 100,
-          max: 2000,
-        },
-        category: ['Code'],
-        showIf: isCodeEditor,
-      })
       .addRadio({
         path: 'editor.format',
         name: 'Formatting',
@@ -204,28 +182,16 @@ export const plugin = new PanelPlugin<PanelOptions>(EchartsPanel)
     /**
      * Theme
      */
-    builder
-      .addSliderInput({
-        path: 'themeEditor.height',
-        name: 'Height, px',
-        defaultValue: DEFAULT_OPTIONS.themeEditor.height,
-        settings: {
-          min: 100,
-          max: 2000,
-        },
-        category: ['Theme'],
-        showIf: (config) => config.themeEditor.name === Theme.CUSTOM,
-      })
-      .addCustomEditor({
-        id: Editor.THEME,
-        path: 'themeEditor.config',
-        name: 'Configuration',
-        description: 'Custom Theme from the Theme Builder.',
-        defaultValue: DEFAULT_OPTIONS.themeEditor.config,
-        editor: EchartsEditor,
-        category: ['Theme'],
-        showIf: (config) => config.themeEditor.name === Theme.CUSTOM,
-      });
+    builder.addCustomEditor({
+      id: Editor.THEME,
+      path: 'themeEditor.config',
+      name: 'Configuration',
+      description: 'Custom Theme from the Theme Builder.',
+      defaultValue: DEFAULT_OPTIONS.themeEditor.config,
+      editor: EchartsEditor,
+      category: ['Theme'],
+      showIf: (config) => config.themeEditor.name === Theme.CUSTOM,
+    });
 
     return builder;
   })

diff --git a/src/types/editor.ts b/src/types/editor.ts
@@ -6,13 +6,6 @@ import { Format } from '../constants';
  * Editor Options
  */
 export interface EditorOptions {
-  /**
-   * Height
-   *
-   * @type {number}
-   */
-  height: number;
-
   /**
    * Format
    *

diff --git a/src/types/theme-editor.ts b/src/types/theme-editor.ts
@@ -11,13 +11,6 @@ export interface ThemeEditorOptions {
    */
   name: Theme;
 
-  /**
-   * Height
-   *
-   * @type {number}
-   */
-  height: number;
-
   /**
    * Config
    *

diff --git a/src/types/visual-editor.ts b/src/types/visual-editor.ts
@@ -150,13 +150,6 @@ export interface VisualEditorOptions {
    * @type {string}
    */
   code: string;
-
-  /**
-   * Code Height
-   *
-   * @type {number}
-   */
-  codeHeight: number;
 }
 
 /**