ui: Add 'Scenario' debug function for easy saving debug scenarios (#9675

)
hashicorp · Feb 1, 2021 · 0b7d676 · 0b7d676
1 parent a33ff40
commit 0b7d676
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/ui/packages/consul-ui/README.md b/ui/packages/consul-ui/README.md
@@ -128,9 +128,7 @@ token/secret.
 | `CONSUL_EXPOSED_COUNT` | (random) | Configure the number of exposed paths that the API returns. |
 | `CONSUL_CHECK_COUNT` | (random) | Configure the number of health checks that the API returns. |
 | `CONSUL_OIDC_PROVIDER_COUNT` | (random) | Configure the number of OIDC providers that the API returns. |
-| `DEBUG_ROUTES_ENDPOINT` | undefined | When using the window.Routes() debug
-utility ([see utility functions](#browser-debug-utility-functions)), use a URL to pass the route DSL to. %s in the URL will be replaced
-with the route DSL - http://url.com?routes=%s  |
+| `DEBUG_ROUTES_ENDPOINT` | undefined | When using the window.Routes() debug utility ([see utility functions](#browser-debug-utility-functions)), use a URL to pass the route DSL to. %s in the URL will be replaced with the route DSL - http://url.com?routes=%s  |
 
 See `./mock-api` for more details.
 
@@ -144,6 +142,7 @@ URLs i.e. `javascript:Routes()`
 | Variable | Arguments | Description |
 | -------- | --------- | ----------- |
 | `Routes(url)` | url: The url to pass the DSL to, if left `undefined` just use a blank tab | Provides a way to easily print out Embers Route DSL for the application or to pass it straight to any third party utility such as ember-diagonal |
+| `Scenario(str)` | str: 'Cookie formatted' string, if left `undefined` open a new tab with a link/bookmarklet to the current Scenario | Provides a way to easily save and reload scenarios of configurations via URLs or bookmarklets |
 
 ### Code Generators
 

diff --git a/ui/packages/consul-ui/app/utils/get-environment.js b/ui/packages/consul-ui/app/utils/get-environment.js
@@ -11,12 +11,37 @@ export default function(config = {}, win = window, doc = document) {
   // look at the hash in the URL and transfer anything after the hash into
   // cookies to enable linking of the UI with various settings enabled
   runInDebug(() => {
+    const cookies = function(str) {
+      return str
+        .split(';')
+        .map(item => item.trim())
+        .filter(item => item !== '')
+        .filter(item =>
+          item
+            .split('=')
+            .shift()
+            .startsWith('CONSUL_')
+        );
+    };
+    win.Scenario = function(str = '') {
+      if (str.length > 0) {
+        cookies(str).forEach(item => (doc.cookie = `${item};Path=/`));
+        win.location.hash = '';
+        location.reload();
+      } else {
+        str = cookies(doc.cookie).join(';');
+        const tab = win.open('', '_blank');
+        tab.document.write(
+          `<body><pre>${location.href}#${str}</pre><br /><a href="javascript:Scenario('${str}')">Scenario</a></body>`
+        );
+      }
+    };
     if (
       typeof win.location !== 'undefined' &&
       typeof win.location.hash === 'string' &&
       win.location.hash.length > 0
     ) {
-      doc.cookie = win.location.hash.substr(1);
+      win.Scenario(win.location.hash.substr(1));
     }
   });
   const dev = function(str = doc.cookie) {