From 3e80e637ba1ae7489eb133fabaa9e8c8aacd04d0 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Wed, 14 Jul 2021 18:55:35 +0100
Subject: [PATCH] ui: [BUGFIX] Fix KV Code Editor syntax loading (#10605)

This commit adds a bit of string wrangling to avoid the keys in our javascript source file also being transformed. Additionally, whilst looking at this we decided that Maps are a better dictionary than javascript objects, so we moved to use those here also (but this doesn't affect the issue)
---
 .changelog/10605.txt                                 |  3 +++
 .../app/instance-initializers/ivy-codemirror.js      | 12 +++++++-----
 .../consul-ui/lib/startup/templates/body.html.js     |  2 +-
 ui/packages/consul-ui/vendor/init.js                 | 10 ++++++----
 4 files changed, 17 insertions(+), 10 deletions(-)
 create mode 100644 .changelog/10605.txt

diff --git a/.changelog/10605.txt b/.changelog/10605.txt
new file mode 100644
index 0000000000..9d60fb4229
--- /dev/null
+++ b/.changelog/10605.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix KV editor syntax highlighting
+```
diff --git a/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js b/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js
index f347060efe..7c17b7ba80 100644
--- a/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js
+++ b/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js
@@ -3,17 +3,19 @@ export function initialize(application) {
   const appName = application.application.name;
   const doc = application.lookup('service:-document');
   // pick codemirror syntax highlighting paths out of index.html
-  const fs = JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent);
+  const fs = new Map(
+    Object.entries(JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent))
+  );
   // configure syntax highlighting for CodeMirror
   CodeMirror.modeURL = {
     replace: function(n, mode) {
-      switch (mode) {
+      switch (mode.trim()) {
         case 'javascript':
-          return fs['codemirror/mode/javascript/javascript.js'];
+          return fs.get(['codemirror', 'mode', 'javascript', 'javascript.js'].join('/'));
         case 'ruby':
-          return fs['codemirror/mode/ruby/ruby.js'];
+          return fs.get(['codemirror', 'mode', 'ruby', 'ruby.js'].join('/'));
         case 'yaml':
-          return fs['codemirror/mode/yaml/yaml.js'];
+          return fs.get(['codemirror', 'mode', 'yaml', 'yaml.js'].join('/'));
       }
     },
   };
diff --git a/ui/packages/consul-ui/lib/startup/templates/body.html.js b/ui/packages/consul-ui/lib/startup/templates/body.html.js
index 3187b90b99..975cbd6506 100644
--- a/ui/packages/consul-ui/lib/startup/templates/body.html.js
+++ b/ui/packages/consul-ui/lib/startup/templates/body.html.js
@@ -34,7 +34,7 @@ ${environment === 'production' ? `{{jsonEncode .}}` : JSON.stringify(config.oper
   <script type="application/json" data-consul-ui-fs>
   {
     "text-encoding/encoding-indexes.js": "${rootURL}assets/encoding-indexes.js",
-    "text-encoding/encoding.js": "${rootURL}assets/encoding-indexes.js",
+    "text-encoding/encoding.js": "${rootURL}assets/encoding.js",
     "css.escape/css.escape.js": "${rootURL}assets/css.escape.js",
     "codemirror/mode/javascript/javascript.js": "${rootURL}assets/codemirror/mode/javascript/javascript.js",
     "codemirror/mode/ruby/ruby.js": "${rootURL}assets/codemirror/mode/ruby/ruby.js",
diff --git a/ui/packages/consul-ui/vendor/init.js b/ui/packages/consul-ui/vendor/init.js
index 7852b86490..cefbbb81f7 100644
--- a/ui/packages/consul-ui/vendor/init.js
+++ b/ui/packages/consul-ui/vendor/init.js
@@ -1,5 +1,7 @@
 (function(doc, appName) {
-  const fs = JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent);
+  const fs = new Map(
+    Object.entries(JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent))
+  );
   const appendScript = function(src) {
     var $script = doc.createElement('script');
     $script.src = src;
@@ -8,11 +10,11 @@
 
   // polyfills
   if (!('TextDecoder' in window)) {
-    appendScript(fs['text-encoding/encoding-indexes.js']);
-    appendScript(fs['text-encoding/encoding.js']);
+    appendScript(fs.get(`${['text-encoding', 'encoding-indexes'].join('/')}.js`));
+    appendScript(fs.get(`${['text-encoding', 'encoding'].join('/')}.js`));
   }
   if (!(window.CSS && window.CSS.escape)) {
-    appendScript(fs['css.escape/css.escape.js']);
+    appendScript(fs.get(`${['css.escape', 'css.escape'].join('/')}.js`));
   }
 
   try {