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/app/components/kv-object-editor.js

@@ -1,3 +1,11 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { isNone } from '@ember/utils';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import KVObject from 'vault/lib/kv-object';
+
 /**
  * @module KvObjectEditor
  * KvObjectEditor components are called in FormFields when the editType on the model is kv.  They are used to show a key-value input field.
@@ -12,91 +20,59 @@
  * ```
  * @param {string} value - the value is captured from the model.
  * @param {function} onChange - function that captures the value on change
- * @param {function} onKeyUp - function passed in that handles the dom keyup event. Used for validation on the kv custom metadata.
+ * @param {function} [onKeyUp] - function passed in that handles the dom keyup event. Used for validation on the kv custom metadata.
  * @param {string} [label] - label displayed over key value inputs
+ * @param {string} [labelClass] - override default label class in FormFieldLabel component
  * @param {string} [warning] - warning that is displayed
  * @param {string} [helpText] - helper text. In tooltip.
  * @param {string} [subText] - placed under label.
- * @param {boolean} [small-label]- change label size.
- * @param {boolean} [formSection] - if false the component is meant to live outside of a form, like in the customMetadata which is nested already inside a form-section.
+ * @param {string} [keyPlaceholder] - placeholder for key input
+ * @param {string} [valuePlaceholder] - placeholder for value input
  */
 
-import { isNone } from '@ember/utils';
-import { assert } from '@ember/debug';
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { guidFor } from '@ember/object/internals';
-import KVObject from 'vault/lib/kv-object';
+export default class KvObjectEditor extends Component {
+  @tracked kvData;
 
-export default Component.extend({
-  'data-test-component': 'kv-object-editor',
-  classNames: ['field'],
-  classNameBindings: ['formSection:form-section'],
-  formSection: true,
-  // public API
-  // Ember Object to mutate
-  value: null,
-  label: null,
-  helpText: null,
-  subText: null,
-  // onChange will be called with the changed Value
-  onChange() {},
-
-  init() {
-    this._super(...arguments);
-    const data = KVObject.create({ content: [] }).fromJSON(this.value);
-    this.set('kvData', data);
+  constructor() {
+    super(...arguments);
+    this.kvData = KVObject.create({ content: [] }).fromJSON(this.args.value);
     this.addRow();
-  },
+  }
 
-  kvData: null,
-
-  kvDataAsJSON: computed('kvData', 'kvData.[]', function () {
-    return this.kvData.toJSON();
-  }),
-
-  kvDataIsAdvanced: computed('kvData', 'kvData.[]', function () {
-    return this.kvData.isAdvanced();
-  }),
-
-  kvHasDuplicateKeys: computed('kvData', 'kvData.@each.name', function () {
-    let data = this.kvData;
-    return data.uniqBy('name').length !== data.get('length');
-  }),
+  get placeholders() {
+    return {
+      key: this.args.keyPlaceholder || 'key',
+      value: this.args.valuePlaceholder || 'value',
+    };
+  }
+  get hasDuplicateKeys() {
+    return this.kvData.uniqBy('name').length !== this.kvData.get('length');
+  }
 
+  @action
   addRow() {
-    let data = this.kvData;
-    let newObj = { name: '', value: '' };
-    if (!isNone(data.findBy('name', ''))) {
+    if (!isNone(this.kvData.findBy('name', ''))) {
       return;
     }
+    const newObj = { name: '', value: '' };
     guidFor(newObj);
-    data.addObject(newObj);
-  },
-  actions: {
-    addRow() {
-      this.addRow();
-    },
-
-    updateRow() {
-      let data = this.kvData;
-      this.onChange(data.toJSON());
-    },
-
-    deleteRow(object, index) {
-      let data = this.kvData;
-      let oldObj = data.objectAt(index);
-
-      assert('object guids match', guidFor(oldObj) === guidFor(object));
-      data.removeAt(index);
-      this.onChange(data.toJSON());
-    },
-
-    handleKeyUp(name, value) {
-      if (!this.onKeyUp) {
-        return;
-      }
-      this.onKeyUp(name, value);
-    },
-  },
-});
+    this.kvData.addObject(newObj);
+  }
+  @action
+  updateRow() {
+    this.args.onChange(this.kvData.toJSON());
+  }
+  @action
+  deleteRow(object, index) {
+    const oldObj = this.kvData.objectAt(index);
+    assert('object guids match', guidFor(oldObj) === guidFor(object));
+    this.kvData.removeAt(index);
+    this.args.onChange(this.kvData.toJSON());
+  }
+  @action
+  handleKeyUp(event) {
+    if (this.args.onKeyUp) {
+      this.args.onKeyUp(event.target.value);
+    }
+  }
+}