UI: glimmerize masked input (#20431)

* Glimmerize masked-input

* Update secret-create-or-update to change masked-input value

* Use maskedInput for ssh configure privateKey

* Add download button to masked input and v2 secrets. Resolves #6364

* Add changelog

ui/lib/core/addon/components/masked-input.js

@@ -3,9 +3,12 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@ember/component';
+import { debug } from '@ember/debug';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import autosize from 'autosize';
-import layout from '../templates/components/masked-input';
 
 /**
  * @module MaskedInput
@@ -13,53 +16,50 @@ import layout from '../templates/components/masked-input';
  *
  * @example
  * <MaskedInput
- *  @value={{attr.options.defaultValue}}
+ *  @value={{get @model attr.name}}
  *  @allowCopy={{true}}
- *  @onChange={{action "someAction"}}
- *  @onKeyUp={{action "onKeyUp"}}
+ *  @allowDownload={{true}}
+ *  @onChange={{this.handleChange}}
+ *  @onKeyUp={{this.handleKeyUp}}
  * />
  *
- * @param [value] {String} - The value to display in the input.
- * @param [allowCopy=null] {bool} - Whether or not the input should render with a copy button.
+ * @param value {String} - The value to display in the input.
+ * @param name {String} - The key correlated to the value. Used for the download file name.
+ * @param [onChange=Callback] {Function|action} - Callback triggered on change, sends new value. Must set the value of @value
+ * @param [allowCopy=false] {bool} - Whether or not the input should render with a copy button.
  * @param [displayOnly=false] {bool} - Whether or not to display the value as a display only `pre` element or as an input.
- * @param [onChange=Function.prototype] {Function|action} - A function to call when the value of the input changes.
- * @param [onKeyUp=Function.prototype] {Function|action} - A function to call whenever on the dom event onkeyup. Generally passed down from higher level parent.
- * @param [isCertificate=false] {bool} - If certificate display the label and icons differently.
  *
  */
-export default Component.extend({
-  layout,
-  value: null,
-  showValue: false,
-  didInsertElement() {
-    this._super(...arguments);
-    autosize(this.element.querySelector('textarea'));
-  },
-  didUpdate() {
-    this._super(...arguments);
-    autosize.update(this.element.querySelector('textarea'));
-  },
-  willDestroyElement() {
-    this._super(...arguments);
-    autosize.destroy(this.element.querySelector('textarea'));
-  },
-  displayOnly: false,
-  onKeyDown() {},
-  onKeyUp() {},
-  onChange() {},
-  actions: {
-    toggleMask() {
-      this.toggleProperty('showValue');
-    },
-    updateValue(e) {
-      const value = e.target.value;
-      this.set('value', value);
-      this.onChange(value);
-    },
-    handleKeyUp(name, value) {
-      if (this.onKeyUp) {
-        this.onKeyUp(name, value);
-      }
-    },
-  },
-});
+export default class MaskedInputComponent extends Component {
+  textareaId = 'textarea-' + guidFor(this);
+  @tracked showValue = false;
+
+  constructor() {
+    super(...arguments);
+    if (!this.args.onChange && !this.args.displayOnly) {
+      debug('onChange is required for editable Masked Input!');
+    }
+    this.updateSize();
+  }
+
+  updateSize() {
+    autosize(document.getElementById(this.textareaId));
+  }
+
+  @action onChange(evt) {
+    const value = evt.target.value;
+    if (this.args.onChange) {
+      this.args.onChange(value);
+    }
+  }
+
+  @action handleKeyUp(name, value) {
+    this.updateSize();
+    if (this.onKeyUp) {
+      this.onKeyUp(name, value);
+    }
+  }
+  @action toggleMask() {
+    this.showValue = !this.showValue;
+  }
+}