fix(ui): env var with hyphen doesn't get highlighted (fixes #211)

flawiddsouza · Aug 10, 2024 · e633978 · e633978
1 parent 7568b72
commit e633978
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/packages/ui/src/utils/codemirror-extensions.spec.ts b/packages/ui/src/utils/codemirror-extensions.spec.ts
@@ -65,7 +65,40 @@ test('validate variableMatchingRegex', async() => {
         },
         {
             var: '{{ cat! }}',
-            valid: false,
+            valid: true,
+            extract: [
+                'cat!'
+            ]
+        },
+        {
+            // this one doesn't actually substitute in our env substitution, but it's a valid variable path actually
+            var: '{{ API["URL"] }}',
+            valid: true,
+            extract: [
+                'API["URL"]'
+            ]
+        },
+        {
+            var: '{{ API[0].cat }}',
+            valid: true,
+            extract: [
+                'API[0].cat'
+            ]
+        },
+        {
+            var: '{{API[0].cat!}}',
+            valid: true,
+            extract: [
+                'API[0].cat!'
+            ]
+        },
+        {
+            // GH Issue #211
+            var: '{{my-key}}',
+            valid: true,
+            extract: [
+                'my-key'
+            ]
         },
     ]
 
@@ -74,7 +107,8 @@ test('validate variableMatchingRegex', async() => {
         let i = 0
         while ((match = variableMatchingRegex.exec(testValue.var))) {
             const varName = match[1] || match[2]
-            expect(varName).toBe(testValue.extract![i])
+            const expectedVarName = testValue.extract ? testValue.extract[i] : 'extract array not defined for valid true case!'
+            expect(varName).toBe(expectedVarName)
             i++
         }
 

diff --git a/packages/ui/src/utils/codemirror-extensions.ts b/packages/ui/src/utils/codemirror-extensions.ts
@@ -1,7 +1,7 @@
 import { ViewPlugin, Decoration, EditorView, ViewUpdate } from '@codemirror/view'
 import { RangeSetBuilder } from '@codemirror/state'
 
-export const variableMatchingRegex = /{{ ([.|\w]*?) }}|{{([.|\w]*?)}}/g
+export const variableMatchingRegex = /{{ ([^\s]*?) }}|{{([^\s]*?)}}/g
 
 export function envVarDecoration(envVariables: any) {
     return ViewPlugin.fromClass(class {