Transform Advanced Templating (#13908)

* updates regex-validator component to optionally show pattern input and adds capture groups support

* adds form-field-label component

* adds autocomplete-input component

* updates kv-object-editor component to yield block for value and glimmerizes

* updates transform template model

* adds transform-advanced-templating component

* updates form-field with child component changes

* updates transform template serializer to handle differences in regex named capture groups

* fixes regex-validator test

* adds changelog entry

* updates for pr review feedback

* reverts kv-object-editor guidFor removal

ui/tests/integration/components/kv-object-editor-test.js

@@ -9,26 +9,26 @@ import kvObjectEditor from '../../pages/components/kv-object-editor';
 import sinon from 'sinon';
 const component = create(kvObjectEditor);
 
-module('Integration | Component | kv object editor', function (hooks) {
+module('Integration | Component | kv-object-editor', function (hooks) {
   setupRenderingTest(hooks);
 
+  hooks.beforeEach(function () {
+    this.spy = sinon.spy();
+  });
+
   test('it renders with no initial value', async function (assert) {
-    let spy = sinon.spy();
-    this.set('onChange', spy);
-    await render(hbs`{{kv-object-editor onChange=onChange}}`);
+    await render(hbs`{{kv-object-editor onChange=this.spy}}`);
     assert.equal(component.rows.length, 1, 'renders a single row');
     await component.addRow();
     assert.equal(component.rows.length, 1, 'will only render row with a blank key');
   });
 
   test('it calls onChange when the val changes', async function (assert) {
-    let spy = sinon.spy();
-    this.set('onChange', spy);
-    await render(hbs`{{kv-object-editor onChange=onChange}}`);
+    await render(hbs`{{kv-object-editor onChange=this.spy}}`);
     await component.rows.objectAt(0).kvKey('foo').kvVal('bar');
-    assert.equal(spy.callCount, 2, 'calls onChange each time change is triggered');
+    assert.equal(this.spy.callCount, 2, 'calls onChange each time change is triggered');
     assert.deepEqual(
-      spy.lastCall.args[0],
+      this.spy.lastCall.args[0],
       { foo: 'bar' },
       'calls onChange with the JSON respresentation of the data'
     );
@@ -48,26 +48,42 @@ module('Integration | Component | kv object editor', function (hooks) {
   });
 
   test('it deletes a row', async function (assert) {
-    let spy = sinon.spy();
-    this.set('onChange', spy);
-    await render(hbs`{{kv-object-editor onChange=onChange}}`);
+    await render(hbs`{{kv-object-editor onChange=this.spy}}`);
     await component.rows.objectAt(0).kvKey('foo').kvVal('bar');
     await component.addRow();
     assert.equal(component.rows.length, 2);
-    assert.equal(spy.callCount, 2, 'calls onChange for editing');
+    assert.equal(this.spy.callCount, 2, 'calls onChange for editing');
     await component.rows.objectAt(0).deleteRow();
 
     assert.equal(component.rows.length, 1, 'only the blank row left');
-    assert.equal(spy.callCount, 3, 'calls onChange deleting row');
-    assert.deepEqual(spy.lastCall.args[0], {}, 'last call to onChange is an empty object');
+    assert.equal(this.spy.callCount, 3, 'calls onChange deleting row');
+    assert.deepEqual(this.spy.lastCall.args[0], {}, 'last call to onChange is an empty object');
   });
 
   test('it shows a warning if there are duplicate keys', async function (assert) {
     let metadata = { foo: 'bar', baz: 'bop' };
     this.set('value', metadata);
-    await render(hbs`{{kv-object-editor value=value}}`);
+    await render(hbs`{{kv-object-editor value=value onChange=this.spy}}`);
     await component.rows.objectAt(0).kvKey('foo');
 
     assert.ok(component.showsDuplicateError, 'duplicate keys are allowed but an error message is shown');
   });
+
+  test('it supports custom placeholders', async function (assert) {
+    await render(hbs`<KvObjectEditor @keyPlaceholder="foo" @valuePlaceholder="bar" />`);
+    assert.dom('input').hasAttribute('placeholder', 'foo', 'Placeholder applied to key input');
+    assert.dom('textarea').hasAttribute('placeholder', 'bar', 'Placeholder applied to value input');
+  });
+
+  test('it yields block in place of value input', async function (assert) {
+    await render(
+      hbs`
+        <KvObjectEditor>
+          <span data-test-yield></span>
+        </KvObjectEditor>
+      `
+    );
+    assert.dom('textarea').doesNotExist('Value input hidden when block is provided');
+    assert.dom('[data-test-yield]').exists('Component yields block');
+  });
 });