From e633978e09df40b19f07b7c0e5fbf7e96f3314b9 Mon Sep 17 00:00:00 2001
From: Flawid DSouza <me@flawiddsouza.com>
Date: Sat, 10 Aug 2024 12:31:25 +0530
Subject: [PATCH] fix(ui): env var with hyphen doesn't get highlighted (fixes
 #211)

---
 .../src/utils/codemirror-extensions.spec.ts   | 38 ++++++++++++++++++-
 .../ui/src/utils/codemirror-extensions.ts     |  2 +-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/utils/codemirror-extensions.spec.ts b/packages/ui/src/utils/codemirror-extensions.spec.ts
index f12d09cd..16282f31 100644
--- 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
index 5946803f..8d56cf67 100644
--- 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 {