Merge pull request #11546 from hashicorp/ui/bug/revert-11328

ui: Revert #11328 allow-${}-style-interpolation due, to browser support

.changelog/11328.txt

@@ -1,3 +0,0 @@
-```release-note:improvement
-config: Allow ${} style interpolation for UI Dashboard template URLs
-```

ui/packages/consul-ui/app/helpers/render-template.js

@@ -1,15 +1,8 @@
 import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
 
-// regexp that matches {{item.Name}} or ${item.Name}
+// simple mustache regexp `/{{item.Name}}/`
-// what this regex does
+const templateRe = /{{([A-Za-z.0-9_-]+)}}/g;
-// (?:\$|\{)            - Match either $ or {
-// \{                   - Match {
-// ([a-z.0-9_-]+)       - Capturing group
-// (?:(?<=\$\{[^{]+)    - Use a positive lookbehind to assert that ${ was matched previously
-//   |\}            )   - or match a }
-// \}                   - Match }
-const templateRe = /(?:\$|\{)\{([a-z.0-9_-]+)(?:(?<=\$\{[^{]+)|\})\}/gi;
 let render;
 export default class RenderTemplateHelper extends Helper {
   @service('encoder') encoder;

ui/packages/consul-ui/tests/integration/helpers/render-template-test.js

@@ -94,133 +94,7 @@ module('Integration | Helper | render-template', function(hooks) {
       result: 'http://localhost/?=%23Na%2Fme',
     },
   ].forEach(item => {
-    test('it renders {{}} style interpolation`', async function(assert) {
+    test('it renders', async function(assert) {
-      this.set('template', item.href);
-      this.set('vars', item.vars);
-
-      await render(hbs`{{render-template template vars}}`);
-
-      assert.equal(this.element.textContent.trim(), item.result);
-    });
-  });
-
-  [
-    {
-      href: 'http://localhost/?=${Name}/${ID}',
-      vars: {
-        Name: 'name',
-        ID: 'id',
-      },
-      result: 'http://localhost/?=name/id',
-    },
-    {
-      href: 'http://localhost/?=${Name}/${ID}',
-      vars: {
-        Name: '{{Name}}',
-        ID: '{{ID}}',
-      },
-      result: 'http://localhost/?=%7B%7BName%7D%7D/%7B%7BID%7D%7D',
-    },
-    {
-      href: 'http://localhost/?=${deep.Name}/${deep.ID}',
-      vars: {
-        deep: {
-          Name: '{{Name}}',
-          ID: '{{ID}}',
-        },
-      },
-      result: 'http://localhost/?=%7B%7BName%7D%7D/%7B%7BID%7D%7D',
-    },
-    {
-      href: 'http://localhost/?=${}/${}',
-      vars: {
-        Name: 'name',
-        ID: 'id',
-      },
-      // If you don't pass actual variables then nothing
-      // gets replaced and nothing is URL encoded
-      result: 'http://localhost/?=${}/${}',
-    },
-    {
-      href: 'http://localhost/?=${Service_Name}/${Meta-Key}',
-      vars: {
-        Service_Name: 'name',
-        ['Meta-Key']: 'id',
-      },
-      result: 'http://localhost/?=name/id',
-    },
-    {
-      href: 'http://localhost/?=${Service_Name}/${Meta-Key}',
-      vars: {
-        WrongPropertyName: 'name',
-        ['Meta-Key']: 'id',
-      },
-      result: 'http://localhost/?=/id',
-    },
-    {
-      href: 'http://localhost/?=${.Name}',
-      vars: {
-        ['.Name']: 'name',
-      },
-      result: 'http://localhost/?=',
-    },
-    {
-      href: 'http://localhost/?=${.}',
-      vars: {
-        ['.']: 'name',
-      },
-      result: 'http://localhost/?=',
-    },
-    {
-      href: 'http://localhost/?=${deep..Name}',
-      vars: {
-        deep: {
-          Name: 'Name',
-          ID: 'ID',
-        },
-      },
-      result: 'http://localhost/?=',
-    },
-    {
-      href: 'http://localhost/?=${deep.Name}',
-      vars: {
-        deep: {
-          Name: '#Na/me',
-          ID: 'ID',
-        },
-      },
-      result: 'http://localhost/?=%23Na%2Fme',
-    },
-  ].forEach(item => {
-    test('it renders ${} style interpolation', async function(assert) {
-      this.set('template', item.href);
-      this.set('vars', item.vars);
-
-      await render(hbs`{{render-template template vars}}`);
-
-      assert.equal(this.element.textContent.trim(), item.result);
-    });
-  });
-
-  [
-    {
-      href: 'http://localhost/?=${Name}/{{ID}}',
-      vars: {
-        Name: 'name',
-        ID: 'id',
-      },
-      result: 'http://localhost/?=name/id',
-    },
-    {
-      href: 'http://localhost/?=${Name}}/{{ID}',
-      vars: {
-        Name: 'name',
-        ID: 'id',
-      },
-      result: 'http://localhost/?=name}/{{ID}',
-    },
-  ].forEach(item => {
-    test('it renders both styles of interpolation when used together', async function(assert) {
       this.set('template', item.href);
       this.set('vars', item.vars);
 

website/content/docs/agent/options.mdx

@@ -2189,10 +2189,9 @@ bind_addr = "{{ GetPrivateInterfaces | include \"network\" \"10.0.0.0/8\" | attr
 
       The placeholders available are:
 
-      - `${Service.Name}` or `{{Service.Name}}` - Replaced with the current service's name.
+      - `{{Service.Name}}` - Replaced with the current service's name.
-      - `${Service.Namespace}` or `{{Service.Namespace}}` - Replaced with the current
+      - `{{Service.Namespace}}` - Replaced with the current service's namespace or empty if namespaces are not enabled.
-        service's namespace or empty if namespaces are not enabled.
+      - `{{Datacenter}}` - Replaced with the current service's datacenter.
-      - `${Datacenter}` or `{{Datacenter}}` - Replaced with the current service's datacenter.
 
 - `ui_dir` - **This field is deprecated in Consul 1.9.0. See the [`ui_config.dir`](#ui_config_dir) field instead.**
   Equivalent to the [`-ui-dir`](#_ui_dir) command-line