Ui/transform cleanup 2 (#9789)

* amend encode/decode commands for now until design gets back with more details

* restrict character count on masking input field

* clean up selectLimit

* show backend instead of transform in cli copy command

ui/app/models/transform.js

@@ -58,6 +58,7 @@ const Model = DS.Model.extend({
     subText: `A tweak value is used when performing FPE transformations. This can be supplied, generated, or internal.`, // TODO: I do not include the link here.  Need to figure out the best way to approach this.
   }),
   masking_character: attr('string', {
+    characterLimit: 1,
     defaultValue: '*',
     label: 'Masking character',
     subText: 'Specify which character you’d like to mask your data.',

ui/app/templates/components/transform-create-form.hbs

@@ -11,7 +11,6 @@
           data-test-field
           @attr={{attr}}
           @model={{model}}
-          @selectLimit={{selectLimit}}
         />
        {{else}}
         <FormField

ui/app/templates/components/transform-edit-form.hbs

@@ -31,7 +31,6 @@
           @attr={{attr}}
           @model={{model}}
           @initialSelected={{model.templates}}
-          @selectLimit={{selectLimit}}
         />
       {{else if (eq attr.name 'templates')}}
         {{!-- TODO: for now don't show until backend makes api changes. --}}

ui/app/templates/components/transform-show-transformation.hbs

@@ -18,8 +18,8 @@
       </span>
     </div>
     <div class="copy-text level">
-      {{#let "vault write transform/encode/payments value=<enter your value here>" as |copyEncodeCommand|}}
-        <code>vault write transform/encode/payments value=&lt;enter your value here&gt;</code>
+      {{#let "vault write <backend>/encode/<your role name> value=<enter your value here> tweak=<base-64-string>" as |copyEncodeCommand|}}
+        <code>vault write &lt;backend&gt;/encode/&lt;your role name&gt; value=&lt;enter your value here&gt; tweak=&lt;base-64 string&gt;</code>
         <CopyButton class="button is-transparent level-right" @clipboardText={{copyEncodeCommand}}
           @buttonType="button" @success={{action (set-flash-message 'Command copied!')}}>
           <Icon @size='l' @glyph="copy-action" aria-label="Copy" />
@@ -35,8 +35,8 @@
       </span>
     </div>
     <div class="copy-text level">
-      {{#let "vault write transform/decode/payments value=<enter your value here>" as |copyDecodeCommand|}}
-        <code>vault write transform/decode/payments value=&lt;enter your value here&gt;</code>
+      {{#let "vault write <backend>/decode/<your role name> value=<enter your value here> tweak=<base-64-string>" as |copyDecodeCommand|}}
+        <code>vault write &lt;backend&gt;/decode/&lt;your role name&gt; value=&lt;enter your value here&gt; tweak=&lt;base-64 string&gt;</code>
         <CopyButton class="button is-transparent level-right" @clipboardText={{copyDecodeCommand}}
           @buttonType="button" @success={{action (set-flash-message 'Command copied!')}}>
           <Icon @size='l' @glyph="copy-action" aria-label="Copy" />

ui/lib/core/addon/components/search-select.js

@@ -136,11 +136,6 @@ export default Component.extend({
       this.handleChange();
     },
     selectOption(option) {
-      if (this.selectLimit) {
-        if (this.selectLimit <= this.selectedOptions.length) {
-          return;
-        }
-      }
       this.selectedOptions.pushObject(option);
       this.options.removeObject(option);
       this.handleChange();

ui/lib/core/addon/templates/components/form-field.hbs

@@ -155,7 +155,7 @@
         value={{or (get model valuePath) attr.options.defaultValue}} oninput={{action
           (action "setAndBroadcast" valuePath)
           value="target.value"
-        }} class="input" />
+        }} class="input" maxLength={{attr.options.characterLimit}} />
 
       {{#if attr.options.validationAttr}}
         {{#if