Update code editor from business components (#89)

* update code editor

* Updates

* Updates

* Update datasources.yaml

---------

Co-authored-by: Mikhail Volkov <mikhail@volkovlabs.io>

Author: vitPinchuk

CHANGELOG.md

@@ -1,12 +1,13 @@
 # Changelog
 
-## 4.3.0 (IN PROGRESS)
+## 4.3.0 (2024-09-13)
 
 ### Features / Enhancements
 
 - Updated "Add a row" below the rows list (#83, #84)
 - Added toDataFrame helper to code parameters (#86)
 - Updated to Grafana 11.2 and dependencies (#87)
+- Updated code editor from business components (#89)
 
 ## 4.2.0 (2024-07-24)
 

package-lock.json

@@ -8,7 +8,7 @@
     "@grafana/schema": "^11.2.0",
     "@grafana/ui": "^11.2.0",
     "@hello-pangea/dnd": "^16.6.0",
-    "@volkovlabs/components": "^3.0.0",
+    "@volkovlabs/components": "^3.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tslib": "^2.7.0",
@@ -20,7 +20,7 @@
     "@grafana/eslint-config": "^7.0.0",
     "@grafana/plugin-e2e": "^1.8.0",
     "@grafana/tsconfig": "^2.0.0",
-    "@playwright/test": "^1.47.0",
+    "@playwright/test": "^1.47.1",
     "@swc/core": "^1.7.26",
     "@swc/helpers": "^0.5.13",
     "@swc/jest": "^0.2.36",

package.json

@@ -1,11 +1,12 @@
 apiVersion: 1
 
 datasources:
-  - name: Static
+  - name: Business Input
     type: marcusolsson-static-datasource
     access: proxy
     isDefault: true
     orgId: 1
+    uid: P1D2C73DC01F2359B
     version: 1
     editable: true
     jsonData:

provisioning/datasources/datasources.yaml

@@ -12,6 +12,14 @@ import { CustomValuesEditor } from './CustomValuesEditor';
 jest.mock('@grafana/ui', () => ({
   ...jest.requireActual('@grafana/ui'),
   CodeEditor: jest.fn(() => null),
+  PageToolbar: jest.fn(({ leftItems, children }) => {
+    return (
+      <>
+        {leftItems}
+        {children}
+      </>
+    );
+  }),
 }));
 
 /**
@@ -148,7 +156,7 @@ describe('Custom Values Editor', () => {
       () =>
         ({
           getVariables: jest.fn().mockImplementation(() => variables),
-        } as any)
+        }) as any
     );
 
     render(getComponent({}));

src/components/CustomValuesEditor/CustomValuesEditor.test.tsx

@@ -1,5 +1,6 @@
 import { getTemplateSrv } from '@grafana/runtime';
-import { CodeEditor, CodeEditorSuggestionItem, CodeEditorSuggestionItemKind, InlineField } from '@grafana/ui';
+import { CodeEditorSuggestionItem, CodeEditorSuggestionItemKind, InlineField } from '@grafana/ui';
+import { AutosizeCodeEditor } from '@volkovlabs/components';
 /**
  * Monaco
  */
@@ -85,7 +86,7 @@ export const CustomValuesEditor = ({ model, onChange }: Props) => {
   return (
     <>
       <InlineField grow={true} data-testid={TEST_IDS.customValuesEditor.root}>
-        <CodeEditor
+        <AutosizeCodeEditor
           value={model?.meta?.custom?.customCode || CUSTOM_CODE}
           language={CodeLanguage.JAVASCRIPT}
           height={300}
@@ -95,6 +96,9 @@ export const CustomValuesEditor = ({ model, onChange }: Props) => {
           showLineNumbers={true}
           getSuggestions={getSuggestions}
           onEditorDidMount={onEditorMount}
+          modalTitle="JavaScript Values Editor"
+          modalButtonTooltip="Expand JavaScript Values Editor"
+          showMiniMap={true}
         />
       </InlineField>
     </>

src/components/CustomValuesEditor/CustomValuesEditor.tsx

@@ -14,6 +14,14 @@ import { QueryEditor } from './QueryEditor';
 jest.mock('@grafana/ui', () => ({
   ...jest.requireActual('@grafana/ui'),
   CodeEditor: jest.fn(() => null),
+  PageToolbar: jest.fn(({ leftItems, children }) => {
+    return (
+      <>
+        {leftItems}
+        {children}
+      </>
+    );
+  }),
   Select: jest.fn().mockImplementation(({ options, onChange, value, isClearable, ...restProps }) => (
     <select
       onChange={(event: any) => {

src/components/QueryEditor/QueryEditor.test.tsx

@@ -12,7 +12,7 @@
       "url": "https://volkovlabs.io"
     },
     "description": "Store and create your data",
-    "keywords": ["static", "test", "development", "mock", "javascript"],
+    "keywords": ["input", "test", "development", "mock", "javascript"],
     "links": [
       {
         "name": "Documentation",