UI: Create enable input component (#24427)

* enable input component

* add more stars

* update css comments

* Update ui/app/styles/helper-classes/flexbox-and-grid.scss

* make attrOptions optional

* add subtext to textfile

* add docLink arg to form field textfile

* update form field test

* add test

* add comment

* update jsdoc

* remove unused class

* Update ui/tests/integration/components/enable-input-test.js

Co-authored-by: Jordan Reimer <zofskeez@gmail.com>

---------

Co-authored-by: Jordan Reimer <zofskeez@gmail.com>

ui/lib/core/addon/components/enable-input.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+interface Args {
+  attr?: AttrData;
+}
+interface AttrData {
+  name: string; // required if @attr is passed
+  options?: {
+    label?: string;
+    helpText?: string;
+    subText?: string;
+    possibleValues?: string[];
+  };
+}
+
+/**
+ * @module EnableInput
+ * EnableInput components render a disabled input with a hardcoded masked value beside an "Edit" button to "enable" the input.
+ * Clicking "Edit" hides the disabled input and renders the yielded component. This way any data management is handled by the parent.
+ * These are useful for editing inputs of sensitive values not returned by the API. The extra click ensures the user is intentionally editing the field.
+ *
+ * @example
+ <EnableInput class="field" @attr={{attr}}>
+  <FormField @attr={{attr}} @model={{@destination}} @modelValidations={{this.modelValidations}} />
+ </EnableInput>
+ 
+// without passing @attr
+ <EnableInput>
+  <Input @type="text" />
+ </EnableInput>
+ 
+ * @param {object} [attr] - used to generate label for `ReadonlyFormField`, `name` key is required. Can be an attribute from a model exported with expandAttributeMeta.
+ */
+
+export default class EnableInputComponent extends Component<Args> {
+  @tracked enable = false;
+}