From 5b64af57818ddc57167079d16d8ea929c62c2be9 Mon Sep 17 00:00:00 2001
From: SB-virendrasolanke <virendra.solanke@smartbear.com>
Date: Wed, 10 Dec 2025 15:24:25 +0530
Subject: [PATCH 1/3] fix : enum selector for try block

---
 .../TryIt/Parameters/parameter-utils.ts       | 28 +++++++++++--------
 .../TryIt/Servers/VariableEditor.tsx          |  2 +-
 packages/elements-dev-portal/src/version.ts   |  2 +-
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts b/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts
index 625fb9cfd..1c9169b56 100644
--- a/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts
+++ b/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts
@@ -14,7 +14,12 @@ const booleanOptions = [
 ];
 
 function enumOptions(enumValues: JSONSchema7Type[], required?: boolean) {
-  const options = map(enumValues, v => ({ value: typeof v === 'number' ? v : String(v) }));
+  const options = map(enumValues, v => {
+    // Handle objects and arrays by stringifying them
+    const value =
+      typeof v === 'object' && v !== null ? safeStringify(v) ?? String(v) : typeof v === 'number' ? v : String(v);
+    return { value, label: String(value) };
+  });
   return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
 
@@ -48,7 +53,10 @@ export function parameterSupportsFileUpload(parameter?: Pick<ParameterSpec, 'sch
 }
 
 function stringifyValue(value: unknown) {
-  return typeof value === 'object' ? JSON.stringify(value) : escapeQuotes(String(value));
+  if (typeof value === 'object' && value !== null) {
+    return safeStringify(value) ?? String(value);
+  }
+  return String(value);
 }
 
 function exampleValue(example: Omit<INodeExample, 'id'> | Omit<INodeExternalExample, 'id'>) {
@@ -56,10 +64,6 @@ function exampleValue(example: Omit<INodeExample, 'id'> | Omit<INodeExternalExam
   return stringifyValue(value);
 }
 
-function escapeQuotes(value: string) {
-  return value.replace(/"/g, '\\"');
-}
-
 export function getPlaceholderForParameter(parameter: ParameterSpec) {
   const { value: parameterValue, isDefault } = getValueForParameter(parameter);
 
@@ -89,16 +93,18 @@ const getValueForParameter = (parameter: ParameterSpec) => {
     return { value: stringifyValue(defaultValue), isDefault: true };
   }
 
-  const examples = parameter.examples ?? [];
-  if (examples.length > 0) {
-    return { value: exampleValue(examples[0]) };
-  }
-
+  // If the parameter has enums, prioritize using the first enum value
+  // over examples, as examples might not match the enum values
   const enums = parameter.schema?.enum ?? [];
   if (enums.length > 0) {
     return { value: stringifyValue(enums[0]) };
   }
 
+  const examples = parameter.examples ?? [];
+  if (examples.length > 0) {
+    return { value: exampleValue(examples[0]) };
+  }
+
   return { value: '' };
 };
 
diff --git a/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx b/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx
index d1206d04b..855982f7a 100644
--- a/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx
+++ b/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx
@@ -25,7 +25,7 @@ export const VariableEditor: React.FC<VariableProps> = ({ variable, value, onCha
           <Select
             flex={1}
             aria-label={variable.name}
-            options={variable.enum.map(s => ({ value: s }))}
+            options={variable.enum.map(s => ({ value: s, label: String(s) }))}
             value={value || variable.default}
             onChange={onChange}
           />
diff --git a/packages/elements-dev-portal/src/version.ts b/packages/elements-dev-portal/src/version.ts
index b27501da2..0474ae308 100644
--- a/packages/elements-dev-portal/src/version.ts
+++ b/packages/elements-dev-portal/src/version.ts
@@ -1,2 +1,2 @@
 // auto-updated during build
-export const appVersion = '3.0.10';
+export const appVersion = '3.0.13';

From acbba31f9b02597dd90caec9fcf06e519662184a Mon Sep 17 00:00:00 2001
From: SB-virendrasolanke <virendra.solanke@smartbear.com>
Date: Fri, 12 Dec 2025 23:37:57 +0530
Subject: [PATCH 2/3] fix : special char enum values

---
 .../TryIt/Parameters/ParameterEditor.tsx      | 14 ++++-
 .../TryIt/Parameters/parameter-utils.ts       | 57 ++++++++++++++++-
 .../TryIt/Servers/VariableEditor.tsx          | 61 ++++++++++++++++++-
 3 files changed, 125 insertions(+), 7 deletions(-)

diff --git a/packages/elements-core/src/components/TryIt/Parameters/ParameterEditor.tsx b/packages/elements-core/src/components/TryIt/Parameters/ParameterEditor.tsx
index 69488d184..d77e61a21 100644
--- a/packages/elements-core/src/components/TryIt/Parameters/ParameterEditor.tsx
+++ b/packages/elements-core/src/components/TryIt/Parameters/ParameterEditor.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { useUniqueId } from '../../../hooks/useUniqueId';
 import {
+  decodeSafeSelectorValue,
   exampleOptions,
   getPlaceholderForParameter,
   getPlaceholderForSelectedParameter,
@@ -37,6 +38,15 @@ export const ParameterEditor: React.FC<ParameterProps> = ({
   const selectedExample = examples?.find(e => e.value === value) ?? selectExampleOption;
   const parameterDisplayName = `${parameter.name}${parameter.required ? '*' : ''}`;
 
+  // Find the encoded value that matches the current (decoded) value
+  const encodedValue = React.useMemo(() => {
+    if (!value || !parameterValueOptions) return value || '';
+    const matchingOption = parameterValueOptions.find(opt => {
+      return String(decodeSafeSelectorValue(opt.value as string | number)) === value;
+    });
+    return matchingOption ? String(matchingOption.value) : value;
+  }, [value, parameterValueOptions]);
+
   const requiredButEmpty = validate && parameter.required && !value;
 
   return (
@@ -51,8 +61,8 @@ export const ParameterEditor: React.FC<ParameterProps> = ({
             flex={1}
             aria-label={parameter.name}
             options={parameterValueOptions}
-            value={value || ''}
-            onChange={onChange}
+            value={encodedValue}
+            onChange={val => onChange && onChange(String(decodeSafeSelectorValue(val as string | number)))}
             placeholder={getPlaceholderForSelectedParameter(parameter)}
           />
         ) : (
diff --git a/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts b/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts
index 1c9169b56..a4e0f1211 100644
--- a/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts
+++ b/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts
@@ -13,12 +13,65 @@ const booleanOptions = [
   { label: 'True', value: 'true' },
 ];
 
+/**
+ * Encodes a value to be safe for use in CSS selectors (data-key attributes).
+ * Special characters like quotes, brackets, etc. can break querySelector,
+ * so we encode them using base64.
+ */
+function encodeSafeSelectorValue(value: string | number): string | number {
+  // Numbers are safe to use as-is
+  if (typeof value === 'number') {
+    return value;
+  }
+  // Check if the value contains characters that would break CSS selectors
+  // This includes quotes, brackets, backslashes, etc.
+  const hasSpecialChars = /["'\[\]\\(){}]/.test(value);
+  if (!hasSpecialChars) {
+    return value;
+  }
+  // Encode to base64 to make it safe for CSS selectors
+  // We prefix with 'b64:' so we can decode it later if needed
+  try {
+    return 'b64:' + btoa(value);
+  } catch (e) {
+    // If btoa fails (e.g., with unicode), fallback to encodeURIComponent
+    return 'enc:' + encodeURIComponent(value);
+  }
+}
+
+/**
+ * Decodes a value that was encoded by encodeSafeSelectorValue
+ */
+export function decodeSafeSelectorValue(value: string | number): string | number {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  if (value.startsWith('b64:')) {
+    try {
+      return atob(value.substring(4));
+    } catch (e) {
+      return value;
+    }
+  }
+  if (value.startsWith('enc:')) {
+    try {
+      return decodeURIComponent(value.substring(4));
+    } catch (e) {
+      return value;
+    }
+  }
+  return value;
+}
+
 function enumOptions(enumValues: JSONSchema7Type[], required?: boolean) {
   const options = map(enumValues, v => {
     // Handle objects and arrays by stringifying them
-    const value =
+    const stringValue =
       typeof v === 'object' && v !== null ? safeStringify(v) ?? String(v) : typeof v === 'number' ? v : String(v);
-    return { value, label: String(value) };
+    // Encode the value to be safe for CSS selectors, but keep the original label
+    const safeValue = encodeSafeSelectorValue(stringValue);
+    return { value: safeValue, label: String(stringValue) };
   });
   return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
diff --git a/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx b/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx
index 855982f7a..7fd038ac7 100644
--- a/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx
+++ b/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx
@@ -4,6 +4,49 @@ import * as React from 'react';
 import { useUniqueId } from '../../../hooks/useUniqueId';
 import { ServerVariable } from '../../../utils/http-spec/IServer';
 
+/**
+ * Encodes a value to be safe for use in CSS selectors (data-key attributes).
+ * Special characters like quotes, brackets, etc. can break querySelector.
+ */
+function encodeSafeSelectorValue(value: string): string {
+  // Check if the value contains characters that would break CSS selectors
+  const hasSpecialChars = /["'\[\]\\(){}]/.test(value);
+  if (!hasSpecialChars) {
+    return value;
+  }
+
+  // Encode to base64 to make it safe for CSS selectors
+  try {
+    return 'b64:' + btoa(value);
+  } catch (e) {
+    // If btoa fails (e.g., with unicode), fallback to encodeURIComponent
+    return 'enc:' + encodeURIComponent(value);
+  }
+}
+
+/**
+ * Decodes a value that was encoded by encodeSafeSelectorValue
+ */
+function decodeSafeSelectorValue(value: string): string {
+  if (value.startsWith('b64:')) {
+    try {
+      return atob(value.substring(4));
+    } catch (e) {
+      return value;
+    }
+  }
+
+  if (value.startsWith('enc:')) {
+    try {
+      return decodeURIComponent(value.substring(4));
+    } catch (e) {
+      return value;
+    }
+  }
+
+  return value;
+}
+
 interface VariableProps {
   variable: ServerVariable;
   value?: string;
@@ -14,6 +57,18 @@ interface VariableProps {
 export const VariableEditor: React.FC<VariableProps> = ({ variable, value, onChange }) => {
   const inputId = useUniqueId(`id_${variable.name}_`);
 
+  // Find the encoded value that matches the current (decoded) value
+  const encodedOptions = React.useMemo(
+    () => (variable.enum ? variable.enum.map(s => ({ value: encodeSafeSelectorValue(s), label: String(s) })) : []),
+    [variable.enum],
+  );
+
+  const encodedValue = React.useMemo(() => {
+    if (!value || !variable.enum) return value || variable.default;
+    const matchingOption = encodedOptions.find(opt => decodeSafeSelectorValue(String(opt.value)) === value);
+    return matchingOption ? String(matchingOption.value) : value;
+  }, [value, variable.enum, variable.default, encodedOptions]);
+
   return (
     <>
       <Text as="label" aria-hidden="true" data-testid="param-label" htmlFor={inputId} fontSize="base">
@@ -25,9 +80,9 @@ export const VariableEditor: React.FC<VariableProps> = ({ variable, value, onCha
           <Select
             flex={1}
             aria-label={variable.name}
-            options={variable.enum.map(s => ({ value: s, label: String(s) }))}
-            value={value || variable.default}
-            onChange={onChange}
+            options={encodedOptions}
+            value={encodedValue}
+            onChange={val => onChange && onChange(decodeSafeSelectorValue(String(val)))}
           />
         ) : (
           <Flex flex={1}>

From 864f33e5f13e8b87281d55b3ee2597e17fd1904f Mon Sep 17 00:00:00 2001
From: SB-virendrasolanke <virendra.solanke@smartbear.com>
Date: Fri, 19 Dec 2025 15:58:22 +0530
Subject: [PATCH 3/3] fix : removed redundunt code

---
 .../TryIt/Parameters/parameter-utils.ts       |  2 +-
 .../TryIt/Servers/VariableEditor.tsx          | 44 +------------------
 2 files changed, 2 insertions(+), 44 deletions(-)

diff --git a/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts b/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts
index a4e0f1211..8182e5bf7 100644
--- a/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts
+++ b/packages/elements-core/src/components/TryIt/Parameters/parameter-utils.ts
@@ -18,7 +18,7 @@ const booleanOptions = [
  * Special characters like quotes, brackets, etc. can break querySelector,
  * so we encode them using base64.
  */
-function encodeSafeSelectorValue(value: string | number): string | number {
+export function encodeSafeSelectorValue(value: string | number): string | number {
   // Numbers are safe to use as-is
   if (typeof value === 'number') {
     return value;
diff --git a/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx b/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx
index 7fd038ac7..428eb4648 100644
--- a/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx
+++ b/packages/elements-core/src/components/TryIt/Servers/VariableEditor.tsx
@@ -3,49 +3,7 @@ import * as React from 'react';
 
 import { useUniqueId } from '../../../hooks/useUniqueId';
 import { ServerVariable } from '../../../utils/http-spec/IServer';
-
-/**
- * Encodes a value to be safe for use in CSS selectors (data-key attributes).
- * Special characters like quotes, brackets, etc. can break querySelector.
- */
-function encodeSafeSelectorValue(value: string): string {
-  // Check if the value contains characters that would break CSS selectors
-  const hasSpecialChars = /["'\[\]\\(){}]/.test(value);
-  if (!hasSpecialChars) {
-    return value;
-  }
-
-  // Encode to base64 to make it safe for CSS selectors
-  try {
-    return 'b64:' + btoa(value);
-  } catch (e) {
-    // If btoa fails (e.g., with unicode), fallback to encodeURIComponent
-    return 'enc:' + encodeURIComponent(value);
-  }
-}
-
-/**
- * Decodes a value that was encoded by encodeSafeSelectorValue
- */
-function decodeSafeSelectorValue(value: string): string {
-  if (value.startsWith('b64:')) {
-    try {
-      return atob(value.substring(4));
-    } catch (e) {
-      return value;
-    }
-  }
-
-  if (value.startsWith('enc:')) {
-    try {
-      return decodeURIComponent(value.substring(4));
-    } catch (e) {
-      return value;
-    }
-  }
-
-  return value;
-}
+import { decodeSafeSelectorValue, encodeSafeSelectorValue } from '../Parameters/parameter-utils';
 
 interface VariableProps {
   variable: ServerVariable;