@grafana/k6-test-builder 0.3.1 → 0.3.2

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, FocusEventHandler, AnchorHTMLAttributes, ReactNode, ElementType, ReactElement, FunctionComponent } from "react";
+import { FocusEventHandler, AnchorHTMLAttributes, ReactNode, ElementType, ReactElement, FunctionComponent } from "react";
 import { InvalidArchiveError } from "har-to-k6";
 import { ThemeOptions } from "@material-ui/core/styles/createTheme";
 /** @todo move this type */
@@ -276,10 +276,11 @@ interface ConstrainedRange {
     value: string;
 }
 declare const CONSTRAINED_RANGE_BODY = "CONSTRAINED_RANGE_BODY";
-type ScriptEditorMode = 'test' | 'scenario';
+type ScriptEditorMode = 'test' | 'scenario' | 'body.json' | 'body.text';
+type ValueChangeHandler = (value: string) => void;
 /** @todo Create interface that fits cloud app and plugin */
 export interface ScriptEditorProps {
-    mode?: ScriptEditorMode;
+    mode: ScriptEditorMode;
     scenario?: ScriptScenarioConfig;
     imports?: string[];
     filename?: string;
@@ -288,12 +289,13 @@ export interface ScriptEditorProps {
     value: string;
     template?: string;
     constrainedRanges?: ConstrainedRange[];
-    onChange?: ChangeEventHandler<HTMLTextAreaElement> | ConstrainedRangeChange;
-    onBodyChange?: (value: string) => void;
+    onChange?: ValueChangeHandler;
+    onBodyChange?: ConstrainedRangeChange;
     onBlur?: FocusEventHandler<HTMLTextAreaElement>;
     error?: Error;
     readOnly?: boolean;
     onImportsChange?: (imports: string[]) => void;
+    nodeId?: string;
 }
 interface DocsLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
     article: DocsArticleLink;
@@ -330,8 +332,9 @@ interface TestBuilderStandaloneProps {
     StagesVirtualizationComponent?: (props: StagesVirtualizationComponentProps) => ReactElement;
     ScriptEditorComponent?: (props: ScriptEditorProps) => ReactElement;
     TestBuilderIconComponent?: typeof TestBuilderIcon;
+    readonlyScriptScenarios?: boolean;
 }
-export function TestBuilder({ loading, saving, k6Test, hasCloudExecution, availableLoadZones, DocsLinkComponent, onViewChange, StagesVirtualizationComponent, ScriptEditorComponent, TestBuilderIconComponent }: TestBuilderStandaloneProps): JSX.Element;
+export function TestBuilder({ loading, saving, k6Test, hasCloudExecution, availableLoadZones, DocsLinkComponent, onViewChange, StagesVirtualizationComponent, ScriptEditorComponent, TestBuilderIconComponent, readonlyScriptScenarios, }: TestBuilderStandaloneProps): JSX.Element;
 interface TestMetaInformationProps {
     className?: string;
 }

package/dist/index.js

@@ -551,15 +551,9 @@ function $40f0f8d1d1c69699$export$18972e718224868c(template, constrainedRanges)
 }
 
 
-function $ab0bf6ee71c94953$export$32efa5142ae8aa01({ value: value , onChange: onChange , onBlur: onBlur , error: error , mode: mode = "test" , template: template = "" , constrainedRanges: constrainedRanges  }) {
-    const [proxyValue, setProxyValue] = (0, $gkIgo$react.useState)(value || "");
+function $ab0bf6ee71c94953$export$32efa5142ae8aa01({ value: value , onChange: onChange , onBlur: onBlur , error: error , mode: mode = "test" , template: template = "" , constrainedRanges: constrainedRanges , readOnly: readOnly = false  }) {
     const [script, setScript] = (0, $gkIgo$react.useState)("");
     if (!onChange && !onBlur) (0, $1c4cc247633c6592$export$af88d00dbe7f521).warn("Using fallback ScriptEditor");
-    (0, $gkIgo$react.useEffect)(()=>{
-        if (value !== proxyValue) setProxyValue(value);
-    }, [
-        value
-    ]);
     (0, $gkIgo$react.useEffect)(()=>{
         if (mode === "scenario") {
             if (constrainedRanges && typeof template === "string") setScript((0, $40f0f8d1d1c69699$export$18972e718224868c)(template, constrainedRanges));
@@ -569,9 +563,9 @@ function $ab0bf6ee71c94953$export$32efa5142ae8aa01({ value: value , onChange: on
         constrainedRanges,
         template
     ]);
-    const editorValue = mode === "scenario" ? script : proxyValue;
+    const editorValue = mode === "scenario" ? script : value;
     const handleOnChange = (event)=>{
-        setProxyValue(event.target.value);
+        if (mode !== "scenario") onChange && onChange(event.target.value);
     };
     return /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsxs)((0, $gkIgo$reactjsxruntime.Fragment), {
         children: [
@@ -591,7 +585,7 @@ function $ab0bf6ee71c94953$export$32efa5142ae8aa01({ value: value , onChange: on
             /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $10c3bf49b890a81c$export$ad9254163fa4ee24), {
                 defaultValue: editorValue,
                 onChange: handleOnChange,
-                readOnly: true
+                readOnly: readOnly
             })
         ]
     });
@@ -1397,52 +1391,27 @@ const $37e9b7f5f658460f$export$a86f095b9b6dae = /*#__PURE__*/ (0, ($parcel$inter
 })([
     "grid-column:1 / span 3;position:sticky;bottom:-10px;"
 ]);
-const $37e9b7f5f658460f$export$50590ad6c03e5bd7 = /*#__PURE__*/ (0, ($parcel$interopDefault($gkIgo$styledcomponents)))($37e9b7f5f658460f$export$f86d68f7ed25f5bb).withConfig({
-    displayName: "styled__AdvancedSettingsContainer",
-    componentId: "sc-78krzf-7"
-})([
-    ""
-]);
-const $37e9b7f5f658460f$export$e5c1a6ed3fbdc322 = /*#__PURE__*/ (0, ($parcel$interopDefault($gkIgo$styledcomponents))).div.withConfig({
-    displayName: "styled__LabelColumn",
-    componentId: "sc-78krzf-8"
-})([
-    "display:flex;flex-direction:column;"
-]);
-const $37e9b7f5f658460f$export$ce4908ada21f6533 = /*#__PURE__*/ (0, ($parcel$interopDefault($gkIgo$styledcomponents)))($37e9b7f5f658460f$export$e5c1a6ed3fbdc322).withConfig({
-    displayName: "styled__InputColumn",
-    componentId: "sc-78krzf-9"
-})([
-    "flex:1 1 100%;"
-]);
 const $37e9b7f5f658460f$export$b04be29aa201d4f5 = /*#__PURE__*/ (0, ($parcel$interopDefault($gkIgo$styledcomponents)))((0, $8c4e1b935d327ac5$export$842aba50ed0ce9d7)).withConfig({
     displayName: "styled__Label",
-    componentId: "sc-78krzf-10"
+    componentId: "sc-78krzf-7"
 })([
     "display:flex;justify-self:right;align-self:center;"
 ]);
-const $37e9b7f5f658460f$export$e7a98f51c6efe634 = /*#__PURE__*/ (0, ($parcel$interopDefault($gkIgo$styledcomponents)))($37e9b7f5f658460f$export$b04be29aa201d4f5).withConfig({
-    displayName: "styled__ErrorLabel",
-    componentId: "sc-78krzf-11"
-})([
-    "opacity:1;color:",
-    ";"
-], ({ theme: theme  })=>theme.palette.error.main);
 const $37e9b7f5f658460f$export$3f6e3839f387b50 = /*#__PURE__*/ (0, ($parcel$interopDefault($gkIgo$styledcomponents))).div.withConfig({
     displayName: "styled__RequestInputContainer",
-    componentId: "sc-78krzf-12"
+    componentId: "sc-78krzf-8"
 })([
     "display:flex;position:relative;& > :nth-child(1){flex-basis:150px;}"
 ]);
 const $37e9b7f5f658460f$export$93e9fa14a08d2dd1 = /*#__PURE__*/ (0, ($parcel$interopDefault($gkIgo$styledcomponents))).span.withConfig({
     displayName: "styled__EndAdornmentContainer",
-    componentId: "sc-78krzf-13"
+    componentId: "sc-78krzf-9"
 })([
     "padding-left:8px;"
 ]);
 const $37e9b7f5f658460f$export$e7e6b99c949fd18a = /*#__PURE__*/ (0, ($parcel$interopDefault($gkIgo$styledcomponents)))((0, ($parcel$interopDefault($gkIgo$materialuicoreSelect)))).withConfig({
     displayName: "styled__StyledSelect",
-    componentId: "sc-78krzf-14"
+    componentId: "sc-78krzf-10"
 })([
     "align-self:stretch;display:flex;align-items:center;[class*='MuiSelect-icon']{color:currentColor;}[class*='MuiInputBase-root']{height:auto;}[class*='MuiOutlinedInput-input']{padding:0 10px;color:#fff !important;}[class*='MuiOutlinedInput-root']{border:0 !important;}",
     ";"
@@ -1456,14 +1425,14 @@ const $37e9b7f5f658460f$export$e7e6b99c949fd18a = /*#__PURE__*/ (0, ($parcel$int
 });
 const $37e9b7f5f658460f$export$2191b9da168c6cf0 = /*#__PURE__*/ (0, ($parcel$interopDefault($gkIgo$styledcomponents))).span.withConfig({
     displayName: "styled__ValidationError",
-    componentId: "sc-78krzf-15"
+    componentId: "sc-78krzf-11"
 })([
     "font-size:13px;color:",
     ";"
 ], ({ theme: theme  })=>theme.palette.error.main);
 const $37e9b7f5f658460f$export$d7a2349e1b0bdcb7 = /*#__PURE__*/ (0, ($parcel$interopDefault($gkIgo$styledcomponents))).div.withConfig({
     displayName: "styled__NodeContainer",
-    componentId: "sc-78krzf-16"
+    componentId: "sc-78krzf-12"
 })([
     "display:flex;flex-direction:column;position:relative;"
 ]);
@@ -5196,6 +5165,7 @@ function $cdee3562a1fa264f$export$9cc0a26cbe829bcb() {
             }
         };
     }, [
+        dispatch,
         tab
     ]);
 }
@@ -5205,6 +5175,7 @@ function $cdee3562a1fa264f$export$e3a1a4f1e85dc208() {
     (0, $gkIgo$react.useEffect)(()=>{
         dispatch((0, $eeeed770fbbe0766$export$f89a1b8f393b8bb6)(Boolean(hasCloudExecution)));
     }, [
+        dispatch,
         hasCloudExecution
     ]);
     (0, $gkIgo$react.useEffect)(()=>{
@@ -5218,11 +5189,13 @@ function $cdee3562a1fa264f$export$e3a1a4f1e85dc208() {
         const [firstScenario] = scenarios;
         if (firstScenario) dispatch((0, $eeeed770fbbe0766$export$78fa5045d0400717)(`scenario/${firstScenario.id}`));
     }, [
+        dispatch,
         k6Test
     ]);
     (0, $gkIgo$react.useEffect)(()=>{
         dispatch((0, $eeeed770fbbe0766$export$9f9f33201c1586de)(availableLoadZones));
     }, [
+        dispatch,
         availableLoadZones
     ]);
 }
@@ -6433,7 +6406,9 @@ function $d760132412dc68e3$export$fb4216da1f591b95({ name: name = (0, $gkIgo$red
     null
 ] , checked: checked , onChange: onChange , className: className , disabled: disabled = false  }) {
     const [labelOff, labelOn] = labels;
-    const id = (0, $gkIgo$react.useMemo)(()=>`id_${name}`, []);
+    const id = (0, $gkIgo$react.useMemo)(()=>`id_${name}`, [
+        name
+    ]);
     return /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsxs)($d760132412dc68e3$var$StyledWrapper, {
         className: className,
         $disabled: disabled,
@@ -7273,13 +7248,13 @@ const $ac2f6d2ef648627b$var$LoadZoneItem = /*#__PURE__*/ (0, ($parcel$interopDef
 })([
     "display:inline-flex;align-items:center;> svg{margin-right:8px;}"
 ]);
-function $ac2f6d2ef648627b$export$a977df6ccef00812({ disabledValues: disabledValues = [] , ...props }) {
+function $ac2f6d2ef648627b$export$a977df6ccef00812({ disabledValues: disabledValues , ...props }) {
     const { availableLoadZones: availableLoadZones  } = (0, $b0053bc75d27f892$export$8bcb3cb1ba0d67a7)();
     const options = (0, $gkIgo$react.useMemo)(()=>{
         return availableLoadZones.map((loadZone)=>{
             const { k6_load_zone_id: k6_load_zone_id , city: city , country: country  } = loadZone;
             return {
-                disabled: disabledValues.includes(k6_load_zone_id),
+                disabled: (disabledValues || []).includes(k6_load_zone_id),
                 value: k6_load_zone_id,
                 label: /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsxs)($ac2f6d2ef648627b$var$LoadZoneItem, {
                     children: [
@@ -7296,6 +7271,7 @@ function $ac2f6d2ef648627b$export$a977df6ccef00812({ disabledValues: disabledVal
             };
         });
     }, [
+        disabledValues,
         availableLoadZones
     ]);
     return /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $df621c65e95d0d5b$export$ef9b1a59e592288f), {
@@ -7794,7 +7770,10 @@ const $4efcda42d6ce57af$export$9a75ed5a99cf0511 = (props)=>{
         // Set URL to default '' if the request with the selected URL has been deleted/modified
         if (url !== "" && url !== "all" && !requestsURLs.includes(url)) dispatch((0, $f51ad74c1a393c6c$export$7a98fbd10fd8a51f)(index, "url", ""));
     }, [
-        requestsURLs
+        dispatch,
+        index,
+        requestsURLs,
+        url
     ]);
     return /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsxs)((0, $gkIgo$reactjsxruntime.Fragment), {
         children: [
@@ -8515,9 +8494,7 @@ class $f7cba0d85787755d$export$410b0c854570d131 extends (0, $gkIgo$react.Compone
 const $047232ddaddc0727$export$b7aa9722688888e1 = ({ id: id  })=>{
     const getGroupMeta = (0, $gkIgo$react.useMemo)(()=>{
         return (0, $c5bb589de61e43ba$export$169ad5bffc8504d4)();
-    }, [
-        id
-    ]);
+    }, []);
     const scenarioId = (0, $cdee3562a1fa264f$export$9b8881d67105457d)((0, $c5bb589de61e43ba$export$3f88dbdbd24ab19e));
     const { requestCount: requestCount , sleepAmount: sleepAmount  } = (0, $cdee3562a1fa264f$export$9b8881d67105457d)((state)=>getGroupMeta(state, {
             scenarioId: scenarioId,
@@ -9457,13 +9434,15 @@ const $aa77c4b166f6d3da$export$909904bdb4cb4458 = ({ value: value = "" , suggest
             placeholder: placeholder,
             inputProps: params.inputProps,
             variant: theme.keyValueInputVariant
-        }), []);
+        }), // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     const normalizedValue = String(currentValue).toLowerCase();
     const filteredOptions = (0, $gkIgo$react.useMemo)(()=>{
         return suggestions.filter((suggestion, index)=>normalizedSuggestions[index].includes(normalizedValue) && suggestion !== normalizedValue);
     }, [
-        normalizedValue,
-        normalizedSuggestions
+        suggestions,
+        normalizedSuggestions,
+        normalizedValue
     ]);
     const handleOnBlur = ({ target: target  })=>{
         if (onBlur) onBlur(target.value);
@@ -10421,15 +10400,13 @@ const $ab4876a2c16b3c35$export$f348fa2be2f68942 = /*#__PURE__*/ (0, ($parcel$int
 
 const $473b9ed3fed6b67a$export$73be308c62ac8dac = ({ labelMap: labelMap , index: index , variable: variable , onChange: onChange , deleteCheck: deleteCheck , showAttributeColumn: showAttributeColumn  })=>{
     const [itemState, setItemState] = (0, $bc2668a655363c50$export$64bcfd5faff4adc3)(variable);
-    (0, $gkIgo$react.useEffect)(()=>{
-        updateVariable();
+    const hasChanged = (0, $gkIgo$react.useCallback)(()=>{
+        return !(0, $gkIgo$lodashes.isEqual)(variable, itemState);
     }, [
-        itemState.attribute
+        itemState,
+        variable
     ]);
-    const hasChanged = ()=>{
-        return !(0, $gkIgo$lodashes.isEqual)(variable, itemState);
-    };
-    const updateVariable = ()=>{
+    const updateVariable = (0, $gkIgo$react.useCallback)(()=>{
         if (hasChanged()) {
             const newAttribute = {
                 ...itemState
@@ -10437,7 +10414,18 @@ const $473b9ed3fed6b67a$export$73be308c62ac8dac = ({ labelMap: labelMap , index:
             if (newAttribute.attribute === undefined) delete newAttribute.attribute;
             onChange(index, newAttribute);
         }
-    };
+    }, [
+        hasChanged,
+        index,
+        itemState,
+        onChange
+    ]);
+    (0, $gkIgo$react.useEffect)(()=>{
+        updateVariable();
+    }, [
+        itemState.attribute,
+        updateVariable
+    ]);
     const handleDelete = ()=>{
         deleteCheck(index);
     };
@@ -10769,16 +10757,24 @@ const $736e8da9e5879b4f$export$c0ee4c2a5005a714 = /*#__PURE__*/ (0, ($parcel$int
 
 
 
-const $e4daa807821f8f92$export$e287c41c9a585ac7 = ({ data: data , onChange: onChange  })=>{
+
+const $e4daa807821f8f92$export$e287c41c9a585ac7 = ({ data: data , onChange: onChange , nodeId: nodeId  })=>{
     const value = data || "{}";
-    const handleChange = (event)=>{
+    const { ScriptEditorComponent: ScriptEditorComponent  } = (0, $b0053bc75d27f892$export$8bcb3cb1ba0d67a7)();
+    const handleChange = (editorValue)=>{
         onChange({
             type: "json",
-            data: event.target.value
+            data: editorValue
         });
     };
+    if (!ScriptEditorComponent) {
+        (0, $1c4cc247633c6592$export$af88d00dbe7f521).error("ScriptEditor was not defined in TestBuilderContext");
+        return null;
+    }
     return /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $736e8da9e5879b4f$export$c0ee4c2a5005a714), {
-        children: /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $ab0bf6ee71c94953$export$32efa5142ae8aa01), {
+        children: /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)(ScriptEditorComponent, {
+            nodeId: nodeId,
+            mode: "body.json",
             value: value,
             onChange: handleChange
         })
@@ -10789,16 +10785,30 @@ const $e4daa807821f8f92$export$e287c41c9a585ac7 = ({ data: data , onChange: onCh
 
 
 
-const $e5fb49fa16a50d9e$export$54d6c984d47f87b5 = ({ data: data , onChange: onChange  })=>{
+
+
+const $e5fb49fa16a50d9e$export$54d6c984d47f87b5 = ({ data: data , onChange: onChange , nodeId: nodeId  })=>{
     const value = data || "";
-    const handleChange = (event)=>{
-        onChange({
-            type: "text",
-            data: event.target.value
-        });
-    };
+    const { ScriptEditorComponent: ScriptEditorComponent  } = (0, $b0053bc75d27f892$export$8bcb3cb1ba0d67a7)();
+    const handleChange = (0, $gkIgo$react.useMemo)(()=>{
+        return (editorValue)=>{
+            if (value !== editorValue) onChange({
+                type: "text",
+                data: editorValue
+            });
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        onChange
+    ]);
+    if (!ScriptEditorComponent) {
+        (0, $1c4cc247633c6592$export$af88d00dbe7f521).error("ScriptEditor was not defined in TestBuilderContext");
+        return null;
+    }
     return /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $736e8da9e5879b4f$export$c0ee4c2a5005a714), {
-        children: /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $ab0bf6ee71c94953$export$32efa5142ae8aa01), {
+        children: /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)(ScriptEditorComponent, {
+            nodeId: nodeId,
+            mode: "body.text",
             value: value,
             onChange: handleChange
         })
@@ -11084,10 +11094,11 @@ const $a4a08906aac0fd62$export$c6874ada35a1ff76 = ({ data: data , onChange: onCh
 };
 
 
-const $bd95d9b208b0b55f$export$6a3b5760ae228af1 = ({ postData: postData , onChange: onChange  })=>{
+const $bd95d9b208b0b55f$export$6a3b5760ae228af1 = ({ nodeId: nodeId , postData: postData , onChange: onChange  })=>{
     switch(postData.type){
         case "json":
             return /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $e4daa807821f8f92$export$e287c41c9a585ac7), {
+                nodeId: nodeId,
                 data: postData.data,
                 onChange: onChange
             });
@@ -11103,6 +11114,7 @@ const $bd95d9b208b0b55f$export$6a3b5760ae228af1 = ({ postData: postData , onChan
             });
         default:
             return /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $e5fb49fa16a50d9e$export$54d6c984d47f87b5), {
+                nodeId: nodeId,
                 data: postData.data,
                 onChange: onChange
             });
@@ -11182,12 +11194,15 @@ const $c85189fe5ae8daca$export$dff7993a3790e254 = ({ node: node  })=>{
             setModalOpen(true);
         });
     };
-    const handleChange = (newData)=>{
+    const handleChange = (0, $gkIgo$react.useCallback)((newData)=>{
         dispatch((0, $1dc6187db9ccd62b$export$6bb6f70f4b0d3a5e)({
             nodeId: node.id,
             postData: newData
         }));
-    };
+    }, [
+        dispatch,
+        node.id
+    ]);
     const [modalOpen, setModalOpen] = (0, $gkIgo$react.useState)(false);
     const handleOnClose = ()=>{
         setModalOpen(false);
@@ -11256,6 +11271,7 @@ const $c85189fe5ae8daca$export$dff7993a3790e254 = ({ node: node  })=>{
                 })
             }),
             /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $bd95d9b208b0b55f$export$6a3b5760ae228af1), {
+                nodeId: node.id,
                 postData: postData,
                 onChange: handleChange
             }, node.id)
@@ -11290,7 +11306,7 @@ function $d1015cc70984f4e6$export$41c187750335d211({ node: node  }) {
         if (advancedOptionsTab.active === "body" && !enableBodyTag) advancedOptionsTab.changeTab("");
     }, [
         enableBodyTag,
-        advancedOptionsTab.active
+        advancedOptionsTab
     ]);
     const ActiveTab = $d1015cc70984f4e6$var$tabMap[advancedOptionsTab.active] || (0, $feaa0c3a4375cb8c$export$152722cb1db8279d);
     const headersCount = (0, $2e34f056aa056dbe$export$cf7368191a3143bd)(node.request.headers);
@@ -11499,7 +11515,9 @@ const $81db16838431060c$export$970c2db48345af40 = ({ scenarioId: scenarioId , no
         if (!node) return;
         dispatch((0, $fb13d3d78074f465$export$ecdadd8158499ba9)(scenarioId, node.id, key, value));
     }, [
-        node
+        dispatch,
+        node,
+        scenarioId
     ]);
     const NodeComponent = (0, $gkIgo$react.useMemo)(()=>{
         if (!node) return;
@@ -11624,11 +11642,12 @@ function $cb1d23fc6fcde89c$export$a1713ae2a4cf01b3({ scenario: scenario  }) {
     ]);
     (0, $gkIgo$react.useEffect)(()=>{
         setEditableRange($cb1d23fc6fcde89c$var$createConstrainedRanges(functionDefinition, scenario.body));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         scriptTemplate,
         scenario.body
     ]);
-    const onChange = (changeMap)=>{
+    const onBodyChange = (changeMap)=>{
         const value = changeMap[$cb1d23fc6fcde89c$var$CONSTRAINED_RANGE_BODY];
         if (value === undefined) {
             (0, $1c4cc247633c6592$export$af88d00dbe7f521).warn("ScenarioScript.tsx:onBodyChange should not receive `undefined` as value for key `CONSTRAINED_RANGE_BODY`.");
@@ -11650,6 +11669,7 @@ function $cb1d23fc6fcde89c$export$a1713ae2a4cf01b3({ scenario: scenario  }) {
                 children: "Script (readonly)"
             }),
             /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)(ScriptEditorComponent, {
+                mode: "scenario",
                 readOnly: true,
                 value: (0, $40f0f8d1d1c69699$export$18972e718224868c)(scriptTemplate, editableRange)
             })
@@ -11663,12 +11683,12 @@ function $cb1d23fc6fcde89c$export$a1713ae2a4cf01b3({ scenario: scenario  }) {
             /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)(ScriptEditorComponent, {
                 scenario: scenario,
                 mode: "scenario",
-                imports: importJS,
+                imports: scenario.imports,
                 template: scriptTemplate,
                 value: scenario.body,
                 functionName: functionName,
                 constrainedRanges: editableRange,
-                onChange: onChange,
+                onBodyChange: onBodyChange,
                 onImportsChange: handleImportsChange
             })
         ]
@@ -12902,7 +12922,6 @@ function $efe94139ad83ff2c$export$9fcfd118dd8900ea({ options: options , errorMap
         default:
             return null;
     }
-    return null;
 }
 
 
@@ -13254,8 +13273,10 @@ function $fc44f623ed4abf47$export$9debbb9998750ca4() {
                 ]
             }),
             /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)(ScriptEditorComponent, {
+                mode: "test",
                 value: script,
-                error: scriptError
+                error: scriptError,
+                readOnly: true
             })
         ]
     });
@@ -13268,15 +13289,19 @@ function $51462fa9d6a79d0b$export$daf800c33be5eb7e({ loading: loading , saving:
     const dispatch = (0, $cdee3562a1fa264f$export$371624ce4da5e319)();
     (0, $gkIgo$react.useEffect)(()=>{
         dispatch((0, $eeeed770fbbe0766$export$2cd8252107eb640b)());
-    }, []);
+    }, [
+        dispatch
+    ]);
     (0, $gkIgo$react.useEffect)(()=>{
         dispatch((0, $eeeed770fbbe0766$export$9eaa806651dd33f0)(loading));
     }, [
+        dispatch,
         loading
     ]);
     (0, $gkIgo$react.useEffect)(()=>{
         dispatch((0, $eeeed770fbbe0766$export$ad10cacbaf4608fe)(saving));
     }, [
+        dispatch,
         saving
     ]);
     return /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $gkIgo$reactjsxruntime.Fragment), {
@@ -13347,7 +13372,7 @@ function $00b916e228a936f5$export$f290710bbb710efa({ loading: loading , saving:
         k6_load_zone_id: "amazon:us:ashburn",
         city: "Ashburn"
     }
-] , DocsLinkComponent: DocsLinkComponent = (0, $cd402c1b3ca4b836$export$e816d7af81d48a79) , onViewChange: onViewChange , StagesVirtualizationComponent: StagesVirtualizationComponent , ScriptEditorComponent: ScriptEditorComponent = (0, $ab0bf6ee71c94953$export$32efa5142ae8aa01) , TestBuilderIconComponent: TestBuilderIconComponent = (0, $924f96bd0d5c630d$export$cc0ae9a5c96bcd6f)  }) {
+] , DocsLinkComponent: DocsLinkComponent = (0, $cd402c1b3ca4b836$export$e816d7af81d48a79) , onViewChange: onViewChange , StagesVirtualizationComponent: StagesVirtualizationComponent , ScriptEditorComponent: ScriptEditorComponent = (0, $ab0bf6ee71c94953$export$32efa5142ae8aa01) , TestBuilderIconComponent: TestBuilderIconComponent = (0, $924f96bd0d5c630d$export$cc0ae9a5c96bcd6f) , readonlyScriptScenarios: readonlyScriptScenarios = true  }) {
     // create test builder context
     const context = {
         k6Test: k6Test,
@@ -13357,7 +13382,8 @@ function $00b916e228a936f5$export$f290710bbb710efa({ loading: loading , saving:
         onViewChange: onViewChange,
         StagesVirtualizationComponent: StagesVirtualizationComponent,
         ScriptEditorComponent: ScriptEditorComponent,
-        TestBuilderIconComponent: TestBuilderIconComponent
+        TestBuilderIconComponent: TestBuilderIconComponent,
+        readonlyScriptScenarios: readonlyScriptScenarios
     };
     return /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $1ae39e1e435a2397$export$9bb8a8c9de09825e), {
         children: /*#__PURE__*/ (0, $gkIgo$reactjsxruntime.jsx)((0, $b0053bc75d27f892$export$b224d382e54e6ba1), {

package/dist/module.js

@@ -530,15 +530,9 @@ function $7f2d99330ea6daa2$export$18972e718224868c(template, constrainedRanges)
 }
 
 
-function $b60f5acc8283b9c9$export$32efa5142ae8aa01({ value: value , onChange: onChange , onBlur: onBlur , error: error , mode: mode = "test" , template: template = "" , constrainedRanges: constrainedRanges  }) {
-    const [proxyValue, setProxyValue] = (0, $b7VBt$useState)(value || "");
+function $b60f5acc8283b9c9$export$32efa5142ae8aa01({ value: value , onChange: onChange , onBlur: onBlur , error: error , mode: mode = "test" , template: template = "" , constrainedRanges: constrainedRanges , readOnly: readOnly = false  }) {
     const [script, setScript] = (0, $b7VBt$useState)("");
     if (!onChange && !onBlur) (0, $77857f570335d7ae$export$af88d00dbe7f521).warn("Using fallback ScriptEditor");
-    (0, $b7VBt$useEffect)(()=>{
-        if (value !== proxyValue) setProxyValue(value);
-    }, [
-        value
-    ]);
     (0, $b7VBt$useEffect)(()=>{
         if (mode === "scenario") {
             if (constrainedRanges && typeof template === "string") setScript((0, $7f2d99330ea6daa2$export$18972e718224868c)(template, constrainedRanges));
@@ -548,9 +542,9 @@ function $b60f5acc8283b9c9$export$32efa5142ae8aa01({ value: value , onChange: on
         constrainedRanges,
         template
     ]);
-    const editorValue = mode === "scenario" ? script : proxyValue;
+    const editorValue = mode === "scenario" ? script : value;
     const handleOnChange = (event)=>{
-        setProxyValue(event.target.value);
+        if (mode !== "scenario") onChange && onChange(event.target.value);
     };
     return /*#__PURE__*/ (0, $b7VBt$jsxs)((0, $b7VBt$Fragment), {
         children: [
@@ -570,7 +564,7 @@ function $b60f5acc8283b9c9$export$32efa5142ae8aa01({ value: value , onChange: on
             /*#__PURE__*/ (0, $b7VBt$jsx)((0, $c1a62b9f39018e78$export$ad9254163fa4ee24), {
                 defaultValue: editorValue,
                 onChange: handleOnChange,
-                readOnly: true
+                readOnly: readOnly
             })
         ]
     });
@@ -1376,52 +1370,27 @@ const $0af4923191cf0fd3$export$a86f095b9b6dae = /*#__PURE__*/ (0, $b7VBt$styledc
 })([
     "grid-column:1 / span 3;position:sticky;bottom:-10px;"
 ]);
-const $0af4923191cf0fd3$export$50590ad6c03e5bd7 = /*#__PURE__*/ (0, $b7VBt$styledcomponents)($0af4923191cf0fd3$export$f86d68f7ed25f5bb).withConfig({
-    displayName: "styled__AdvancedSettingsContainer",
-    componentId: "sc-78krzf-7"
-})([
-    ""
-]);
-const $0af4923191cf0fd3$export$e5c1a6ed3fbdc322 = /*#__PURE__*/ (0, $b7VBt$styledcomponents).div.withConfig({
-    displayName: "styled__LabelColumn",
-    componentId: "sc-78krzf-8"
-})([
-    "display:flex;flex-direction:column;"
-]);
-const $0af4923191cf0fd3$export$ce4908ada21f6533 = /*#__PURE__*/ (0, $b7VBt$styledcomponents)($0af4923191cf0fd3$export$e5c1a6ed3fbdc322).withConfig({
-    displayName: "styled__InputColumn",
-    componentId: "sc-78krzf-9"
-})([
-    "flex:1 1 100%;"
-]);
 const $0af4923191cf0fd3$export$b04be29aa201d4f5 = /*#__PURE__*/ (0, $b7VBt$styledcomponents)((0, $8e10f6d2c60dae58$export$842aba50ed0ce9d7)).withConfig({
     displayName: "styled__Label",
-    componentId: "sc-78krzf-10"
+    componentId: "sc-78krzf-7"
 })([
     "display:flex;justify-self:right;align-self:center;"
 ]);
-const $0af4923191cf0fd3$export$e7a98f51c6efe634 = /*#__PURE__*/ (0, $b7VBt$styledcomponents)($0af4923191cf0fd3$export$b04be29aa201d4f5).withConfig({
-    displayName: "styled__ErrorLabel",
-    componentId: "sc-78krzf-11"
-})([
-    "opacity:1;color:",
-    ";"
-], ({ theme: theme  })=>theme.palette.error.main);
 const $0af4923191cf0fd3$export$3f6e3839f387b50 = /*#__PURE__*/ (0, $b7VBt$styledcomponents).div.withConfig({
     displayName: "styled__RequestInputContainer",
-    componentId: "sc-78krzf-12"
+    componentId: "sc-78krzf-8"
 })([
     "display:flex;position:relative;& > :nth-child(1){flex-basis:150px;}"
 ]);
 const $0af4923191cf0fd3$export$93e9fa14a08d2dd1 = /*#__PURE__*/ (0, $b7VBt$styledcomponents).span.withConfig({
     displayName: "styled__EndAdornmentContainer",
-    componentId: "sc-78krzf-13"
+    componentId: "sc-78krzf-9"
 })([
     "padding-left:8px;"
 ]);
 const $0af4923191cf0fd3$export$e7e6b99c949fd18a = /*#__PURE__*/ (0, $b7VBt$styledcomponents)((0, $b7VBt$materialuicoreSelect)).withConfig({
     displayName: "styled__StyledSelect",
-    componentId: "sc-78krzf-14"
+    componentId: "sc-78krzf-10"
 })([
     "align-self:stretch;display:flex;align-items:center;[class*='MuiSelect-icon']{color:currentColor;}[class*='MuiInputBase-root']{height:auto;}[class*='MuiOutlinedInput-input']{padding:0 10px;color:#fff !important;}[class*='MuiOutlinedInput-root']{border:0 !important;}",
     ";"
@@ -1435,14 +1404,14 @@ const $0af4923191cf0fd3$export$e7e6b99c949fd18a = /*#__PURE__*/ (0, $b7VBt$style
 });
 const $0af4923191cf0fd3$export$2191b9da168c6cf0 = /*#__PURE__*/ (0, $b7VBt$styledcomponents).span.withConfig({
     displayName: "styled__ValidationError",
-    componentId: "sc-78krzf-15"
+    componentId: "sc-78krzf-11"
 })([
     "font-size:13px;color:",
     ";"
 ], ({ theme: theme  })=>theme.palette.error.main);
 const $0af4923191cf0fd3$export$d7a2349e1b0bdcb7 = /*#__PURE__*/ (0, $b7VBt$styledcomponents).div.withConfig({
     displayName: "styled__NodeContainer",
-    componentId: "sc-78krzf-16"
+    componentId: "sc-78krzf-12"
 })([
     "display:flex;flex-direction:column;position:relative;"
 ]);
@@ -5175,6 +5144,7 @@ function $f33bf9327a1ab3ee$export$9cc0a26cbe829bcb() {
             }
         };
     }, [
+        dispatch,
         tab
     ]);
 }
@@ -5184,6 +5154,7 @@ function $f33bf9327a1ab3ee$export$e3a1a4f1e85dc208() {
     (0, $b7VBt$useEffect)(()=>{
         dispatch((0, $8592aa8dcb3902ac$export$f89a1b8f393b8bb6)(Boolean(hasCloudExecution)));
     }, [
+        dispatch,
         hasCloudExecution
     ]);
     (0, $b7VBt$useEffect)(()=>{
@@ -5197,11 +5168,13 @@ function $f33bf9327a1ab3ee$export$e3a1a4f1e85dc208() {
         const [firstScenario] = scenarios;
         if (firstScenario) dispatch((0, $8592aa8dcb3902ac$export$78fa5045d0400717)(`scenario/${firstScenario.id}`));
     }, [
+        dispatch,
         k6Test
     ]);
     (0, $b7VBt$useEffect)(()=>{
         dispatch((0, $8592aa8dcb3902ac$export$9f9f33201c1586de)(availableLoadZones));
     }, [
+        dispatch,
         availableLoadZones
     ]);
 }
@@ -6412,7 +6385,9 @@ function $5912e581c38b22dd$export$fb4216da1f591b95({ name: name = (0, $b7VBt$nan
     null
 ] , checked: checked , onChange: onChange , className: className , disabled: disabled = false  }) {
     const [labelOff, labelOn] = labels;
-    const id = (0, $b7VBt$useMemo)(()=>`id_${name}`, []);
+    const id = (0, $b7VBt$useMemo)(()=>`id_${name}`, [
+        name
+    ]);
     return /*#__PURE__*/ (0, $b7VBt$jsxs)($5912e581c38b22dd$var$StyledWrapper, {
         className: className,
         $disabled: disabled,
@@ -7252,13 +7227,13 @@ const $d11389a8752f23d8$var$LoadZoneItem = /*#__PURE__*/ (0, $b7VBt$styledcompon
 })([
     "display:inline-flex;align-items:center;> svg{margin-right:8px;}"
 ]);
-function $d11389a8752f23d8$export$a977df6ccef00812({ disabledValues: disabledValues = [] , ...props }) {
+function $d11389a8752f23d8$export$a977df6ccef00812({ disabledValues: disabledValues , ...props }) {
     const { availableLoadZones: availableLoadZones  } = (0, $4cf6d05a57acd1d1$export$8bcb3cb1ba0d67a7)();
     const options = (0, $b7VBt$useMemo)(()=>{
         return availableLoadZones.map((loadZone)=>{
             const { k6_load_zone_id: k6_load_zone_id , city: city , country: country  } = loadZone;
             return {
-                disabled: disabledValues.includes(k6_load_zone_id),
+                disabled: (disabledValues || []).includes(k6_load_zone_id),
                 value: k6_load_zone_id,
                 label: /*#__PURE__*/ (0, $b7VBt$jsxs)($d11389a8752f23d8$var$LoadZoneItem, {
                     children: [
@@ -7275,6 +7250,7 @@ function $d11389a8752f23d8$export$a977df6ccef00812({ disabledValues: disabledVal
             };
         });
     }, [
+        disabledValues,
         availableLoadZones
     ]);
     return /*#__PURE__*/ (0, $b7VBt$jsx)((0, $7b2e34940da063e7$export$ef9b1a59e592288f), {
@@ -7773,7 +7749,10 @@ const $d221d46810783302$export$9a75ed5a99cf0511 = (props)=>{
         // Set URL to default '' if the request with the selected URL has been deleted/modified
         if (url !== "" && url !== "all" && !requestsURLs.includes(url)) dispatch((0, $a6a312292842f1bc$export$7a98fbd10fd8a51f)(index, "url", ""));
     }, [
-        requestsURLs
+        dispatch,
+        index,
+        requestsURLs,
+        url
     ]);
     return /*#__PURE__*/ (0, $b7VBt$jsxs)((0, $b7VBt$Fragment), {
         children: [
@@ -8494,9 +8473,7 @@ class $2c990e9e09ef6ae6$export$410b0c854570d131 extends (0, $b7VBt$Component) {
 const $c8e4ca4b91cb140c$export$b7aa9722688888e1 = ({ id: id  })=>{
     const getGroupMeta = (0, $b7VBt$useMemo)(()=>{
         return (0, $d7b1b7c6f96b1d0a$export$169ad5bffc8504d4)();
-    }, [
-        id
-    ]);
+    }, []);
     const scenarioId = (0, $f33bf9327a1ab3ee$export$9b8881d67105457d)((0, $d7b1b7c6f96b1d0a$export$3f88dbdbd24ab19e));
     const { requestCount: requestCount , sleepAmount: sleepAmount  } = (0, $f33bf9327a1ab3ee$export$9b8881d67105457d)((state)=>getGroupMeta(state, {
             scenarioId: scenarioId,
@@ -9436,13 +9413,15 @@ const $791a660a9528967f$export$909904bdb4cb4458 = ({ value: value = "" , suggest
             placeholder: placeholder,
             inputProps: params.inputProps,
             variant: theme.keyValueInputVariant
-        }), []);
+        }), // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     const normalizedValue = String(currentValue).toLowerCase();
     const filteredOptions = (0, $b7VBt$useMemo)(()=>{
         return suggestions.filter((suggestion, index)=>normalizedSuggestions[index].includes(normalizedValue) && suggestion !== normalizedValue);
     }, [
-        normalizedValue,
-        normalizedSuggestions
+        suggestions,
+        normalizedSuggestions,
+        normalizedValue
     ]);
     const handleOnBlur = ({ target: target  })=>{
         if (onBlur) onBlur(target.value);
@@ -10400,15 +10379,13 @@ const $bc03e5cfae4eab78$export$f348fa2be2f68942 = /*#__PURE__*/ (0, $b7VBt$style
 
 const $811fb252c4c3a84c$export$73be308c62ac8dac = ({ labelMap: labelMap , index: index , variable: variable , onChange: onChange , deleteCheck: deleteCheck , showAttributeColumn: showAttributeColumn  })=>{
     const [itemState, setItemState] = (0, $7e9300d00e06714c$export$64bcfd5faff4adc3)(variable);
-    (0, $b7VBt$useEffect)(()=>{
-        updateVariable();
+    const hasChanged = (0, $b7VBt$useCallback)(()=>{
+        return !(0, $b7VBt$isEqual)(variable, itemState);
     }, [
-        itemState.attribute
+        itemState,
+        variable
     ]);
-    const hasChanged = ()=>{
-        return !(0, $b7VBt$isEqual)(variable, itemState);
-    };
-    const updateVariable = ()=>{
+    const updateVariable = (0, $b7VBt$useCallback)(()=>{
         if (hasChanged()) {
             const newAttribute = {
                 ...itemState
@@ -10416,7 +10393,18 @@ const $811fb252c4c3a84c$export$73be308c62ac8dac = ({ labelMap: labelMap , index:
             if (newAttribute.attribute === undefined) delete newAttribute.attribute;
             onChange(index, newAttribute);
         }
-    };
+    }, [
+        hasChanged,
+        index,
+        itemState,
+        onChange
+    ]);
+    (0, $b7VBt$useEffect)(()=>{
+        updateVariable();
+    }, [
+        itemState.attribute,
+        updateVariable
+    ]);
     const handleDelete = ()=>{
         deleteCheck(index);
     };
@@ -10748,16 +10736,24 @@ const $f2ecedac970556da$export$c0ee4c2a5005a714 = /*#__PURE__*/ (0, $b7VBt$style
 
 
 
-const $8c981c823427f6dd$export$e287c41c9a585ac7 = ({ data: data , onChange: onChange  })=>{
+
+const $8c981c823427f6dd$export$e287c41c9a585ac7 = ({ data: data , onChange: onChange , nodeId: nodeId  })=>{
     const value = data || "{}";
-    const handleChange = (event)=>{
+    const { ScriptEditorComponent: ScriptEditorComponent  } = (0, $4cf6d05a57acd1d1$export$8bcb3cb1ba0d67a7)();
+    const handleChange = (editorValue)=>{
         onChange({
             type: "json",
-            data: event.target.value
+            data: editorValue
         });
     };
+    if (!ScriptEditorComponent) {
+        (0, $77857f570335d7ae$export$af88d00dbe7f521).error("ScriptEditor was not defined in TestBuilderContext");
+        return null;
+    }
     return /*#__PURE__*/ (0, $b7VBt$jsx)((0, $f2ecedac970556da$export$c0ee4c2a5005a714), {
-        children: /*#__PURE__*/ (0, $b7VBt$jsx)((0, $b60f5acc8283b9c9$export$32efa5142ae8aa01), {
+        children: /*#__PURE__*/ (0, $b7VBt$jsx)(ScriptEditorComponent, {
+            nodeId: nodeId,
+            mode: "body.json",
             value: value,
             onChange: handleChange
         })
@@ -10768,16 +10764,30 @@ const $8c981c823427f6dd$export$e287c41c9a585ac7 = ({ data: data , onChange: onCh
 
 
 
-const $153fe8a8bfbab7dd$export$54d6c984d47f87b5 = ({ data: data , onChange: onChange  })=>{
+
+
+const $153fe8a8bfbab7dd$export$54d6c984d47f87b5 = ({ data: data , onChange: onChange , nodeId: nodeId  })=>{
     const value = data || "";
-    const handleChange = (event)=>{
-        onChange({
-            type: "text",
-            data: event.target.value
-        });
-    };
+    const { ScriptEditorComponent: ScriptEditorComponent  } = (0, $4cf6d05a57acd1d1$export$8bcb3cb1ba0d67a7)();
+    const handleChange = (0, $b7VBt$useMemo)(()=>{
+        return (editorValue)=>{
+            if (value !== editorValue) onChange({
+                type: "text",
+                data: editorValue
+            });
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        onChange
+    ]);
+    if (!ScriptEditorComponent) {
+        (0, $77857f570335d7ae$export$af88d00dbe7f521).error("ScriptEditor was not defined in TestBuilderContext");
+        return null;
+    }
     return /*#__PURE__*/ (0, $b7VBt$jsx)((0, $f2ecedac970556da$export$c0ee4c2a5005a714), {
-        children: /*#__PURE__*/ (0, $b7VBt$jsx)((0, $b60f5acc8283b9c9$export$32efa5142ae8aa01), {
+        children: /*#__PURE__*/ (0, $b7VBt$jsx)(ScriptEditorComponent, {
+            nodeId: nodeId,
+            mode: "body.text",
             value: value,
             onChange: handleChange
         })
@@ -11063,10 +11073,11 @@ const $af761f16d5ba2843$export$c6874ada35a1ff76 = ({ data: data , onChange: onCh
 };
 
 
-const $830434c708449e62$export$6a3b5760ae228af1 = ({ postData: postData , onChange: onChange  })=>{
+const $830434c708449e62$export$6a3b5760ae228af1 = ({ nodeId: nodeId , postData: postData , onChange: onChange  })=>{
     switch(postData.type){
         case "json":
             return /*#__PURE__*/ (0, $b7VBt$jsx)((0, $8c981c823427f6dd$export$e287c41c9a585ac7), {
+                nodeId: nodeId,
                 data: postData.data,
                 onChange: onChange
             });
@@ -11082,6 +11093,7 @@ const $830434c708449e62$export$6a3b5760ae228af1 = ({ postData: postData , onChan
             });
         default:
             return /*#__PURE__*/ (0, $b7VBt$jsx)((0, $153fe8a8bfbab7dd$export$54d6c984d47f87b5), {
+                nodeId: nodeId,
                 data: postData.data,
                 onChange: onChange
             });
@@ -11161,12 +11173,15 @@ const $225f70896300809f$export$dff7993a3790e254 = ({ node: node  })=>{
             setModalOpen(true);
         });
     };
-    const handleChange = (newData)=>{
+    const handleChange = (0, $b7VBt$useCallback)((newData)=>{
         dispatch((0, $2f4834fb0198982c$export$6bb6f70f4b0d3a5e)({
             nodeId: node.id,
             postData: newData
         }));
-    };
+    }, [
+        dispatch,
+        node.id
+    ]);
     const [modalOpen, setModalOpen] = (0, $b7VBt$useState)(false);
     const handleOnClose = ()=>{
         setModalOpen(false);
@@ -11235,6 +11250,7 @@ const $225f70896300809f$export$dff7993a3790e254 = ({ node: node  })=>{
                 })
             }),
             /*#__PURE__*/ (0, $b7VBt$jsx)((0, $830434c708449e62$export$6a3b5760ae228af1), {
+                nodeId: node.id,
                 postData: postData,
                 onChange: handleChange
             }, node.id)
@@ -11269,7 +11285,7 @@ function $de850654afaf3319$export$41c187750335d211({ node: node  }) {
         if (advancedOptionsTab.active === "body" && !enableBodyTag) advancedOptionsTab.changeTab("");
     }, [
         enableBodyTag,
-        advancedOptionsTab.active
+        advancedOptionsTab
     ]);
     const ActiveTab = $de850654afaf3319$var$tabMap[advancedOptionsTab.active] || (0, $7ab4a1d499d86854$export$152722cb1db8279d);
     const headersCount = (0, $7ca6f2ffa5b7437e$export$cf7368191a3143bd)(node.request.headers);
@@ -11478,7 +11494,9 @@ const $afaadb717d6ddc79$export$970c2db48345af40 = ({ scenarioId: scenarioId , no
         if (!node) return;
         dispatch((0, $406997178a55b94e$export$ecdadd8158499ba9)(scenarioId, node.id, key, value));
     }, [
-        node
+        dispatch,
+        node,
+        scenarioId
     ]);
     const NodeComponent = (0, $b7VBt$useMemo)(()=>{
         if (!node) return;
@@ -11603,11 +11621,12 @@ function $e03f8d47f42842f8$export$a1713ae2a4cf01b3({ scenario: scenario  }) {
     ]);
     (0, $b7VBt$useEffect)(()=>{
         setEditableRange($e03f8d47f42842f8$var$createConstrainedRanges(functionDefinition, scenario.body));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         scriptTemplate,
         scenario.body
     ]);
-    const onChange = (changeMap)=>{
+    const onBodyChange = (changeMap)=>{
         const value = changeMap[$e03f8d47f42842f8$var$CONSTRAINED_RANGE_BODY];
         if (value === undefined) {
             (0, $77857f570335d7ae$export$af88d00dbe7f521).warn("ScenarioScript.tsx:onBodyChange should not receive `undefined` as value for key `CONSTRAINED_RANGE_BODY`.");
@@ -11629,6 +11648,7 @@ function $e03f8d47f42842f8$export$a1713ae2a4cf01b3({ scenario: scenario  }) {
                 children: "Script (readonly)"
             }),
             /*#__PURE__*/ (0, $b7VBt$jsx)(ScriptEditorComponent, {
+                mode: "scenario",
                 readOnly: true,
                 value: (0, $7f2d99330ea6daa2$export$18972e718224868c)(scriptTemplate, editableRange)
             })
@@ -11642,12 +11662,12 @@ function $e03f8d47f42842f8$export$a1713ae2a4cf01b3({ scenario: scenario  }) {
             /*#__PURE__*/ (0, $b7VBt$jsx)(ScriptEditorComponent, {
                 scenario: scenario,
                 mode: "scenario",
-                imports: importJS,
+                imports: scenario.imports,
                 template: scriptTemplate,
                 value: scenario.body,
                 functionName: functionName,
                 constrainedRanges: editableRange,
-                onChange: onChange,
+                onBodyChange: onBodyChange,
                 onImportsChange: handleImportsChange
             })
         ]
@@ -12881,7 +12901,6 @@ function $6d89f95b52119dea$export$9fcfd118dd8900ea({ options: options , errorMap
         default:
             return null;
     }
-    return null;
 }
 
 
@@ -13233,8 +13252,10 @@ function $02c83340f381657e$export$9debbb9998750ca4() {
                 ]
             }),
             /*#__PURE__*/ (0, $b7VBt$jsx)(ScriptEditorComponent, {
+                mode: "test",
                 value: script,
-                error: scriptError
+                error: scriptError,
+                readOnly: true
             })
         ]
     });
@@ -13247,15 +13268,19 @@ function $dfa81ce2249b0d37$export$daf800c33be5eb7e({ loading: loading , saving:
     const dispatch = (0, $f33bf9327a1ab3ee$export$371624ce4da5e319)();
     (0, $b7VBt$useEffect)(()=>{
         dispatch((0, $8592aa8dcb3902ac$export$2cd8252107eb640b)());
-    }, []);
+    }, [
+        dispatch
+    ]);
     (0, $b7VBt$useEffect)(()=>{
         dispatch((0, $8592aa8dcb3902ac$export$9eaa806651dd33f0)(loading));
     }, [
+        dispatch,
         loading
     ]);
     (0, $b7VBt$useEffect)(()=>{
         dispatch((0, $8592aa8dcb3902ac$export$ad10cacbaf4608fe)(saving));
     }, [
+        dispatch,
         saving
     ]);
     return /*#__PURE__*/ (0, $b7VBt$jsx)((0, $b7VBt$Fragment), {
@@ -13326,7 +13351,7 @@ function $045b658c7184976c$export$f290710bbb710efa({ loading: loading , saving:
         k6_load_zone_id: "amazon:us:ashburn",
         city: "Ashburn"
     }
-] , DocsLinkComponent: DocsLinkComponent = (0, $a2bbc3b49e805484$export$e816d7af81d48a79) , onViewChange: onViewChange , StagesVirtualizationComponent: StagesVirtualizationComponent , ScriptEditorComponent: ScriptEditorComponent = (0, $b60f5acc8283b9c9$export$32efa5142ae8aa01) , TestBuilderIconComponent: TestBuilderIconComponent = (0, $a80b21e889559c22$export$cc0ae9a5c96bcd6f)  }) {
+] , DocsLinkComponent: DocsLinkComponent = (0, $a2bbc3b49e805484$export$e816d7af81d48a79) , onViewChange: onViewChange , StagesVirtualizationComponent: StagesVirtualizationComponent , ScriptEditorComponent: ScriptEditorComponent = (0, $b60f5acc8283b9c9$export$32efa5142ae8aa01) , TestBuilderIconComponent: TestBuilderIconComponent = (0, $a80b21e889559c22$export$cc0ae9a5c96bcd6f) , readonlyScriptScenarios: readonlyScriptScenarios = true  }) {
     // create test builder context
     const context = {
         k6Test: k6Test,
@@ -13336,7 +13361,8 @@ function $045b658c7184976c$export$f290710bbb710efa({ loading: loading , saving:
         onViewChange: onViewChange,
         StagesVirtualizationComponent: StagesVirtualizationComponent,
         ScriptEditorComponent: ScriptEditorComponent,
-        TestBuilderIconComponent: TestBuilderIconComponent
+        TestBuilderIconComponent: TestBuilderIconComponent,
+        readonlyScriptScenarios: readonlyScriptScenarios
     };
     return /*#__PURE__*/ (0, $b7VBt$jsx)((0, $59eb99f127c45ea7$export$9bb8a8c9de09825e), {
         children: /*#__PURE__*/ (0, $b7VBt$jsx)((0, $4cf6d05a57acd1d1$export$b224d382e54e6ba1), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/k6-test-builder",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "license": "AGPL-3.0",
   "main": "dist/index.js",
   "module": "dist/module.js",