Update to ttl component (#15648)

* Update to ttl component

- Allow the ttl component to work without displaying toggle
- Used in mfa method totp form

* Added tooltip if toggle is not present

- Fixed MFA delete message

ui/app/controllers/vault/cluster/access/mfa/methods/method/index.js

@@ -13,7 +13,7 @@ export default class MfaMethodController extends Controller {
   async deleteMethod() {
     try {
       await this.model.method.destroyRecord();
-      this.flashMessages.success('MFA method deleted successfully deleted.');
+      this.flashMessages.success('MFA method deleted successfully.');
       this.router.transitionTo('vault.cluster.access.mfa.methods');
     } catch (error) {
       this.flashMessages.danger(`There was an error deleting this MFA method.`);

ui/app/models/mfa-method.js

@@ -121,7 +121,8 @@ export default class MfaMethod extends Model {
   @attr({
     label: 'Period',
     editType: 'ttl',
-    subText: 'How long each generated TOTP is valid.',
+    helperTextEnabled: 'How long each generated TOTP is valid.',
+    hideToggle: true,
   })
   period;
   @attr('number', {

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

@@ -113,6 +113,7 @@
           @description={{@attr.helpText}}
           @initialValue={{initialValue}}
           @initialEnabled={{if (eq initialValue "0s") false initialValue}}
+          @hideToggle={{@attr.options.hideToggle}}
         />
       {{/let}}
     </div>

ui/lib/core/addon/components/ttl-picker2.js

@@ -19,6 +19,7 @@
  * @param initialValue=null {String} - This is the value set initially (particularly from a string like '30h')
  * @param initialEnabled=null {Boolean} - Set this value if you want the toggle on when component is mounted
  * @param changeOnInit=false {Boolean} - set this value if you'd like the passed onChange function to be called on component initialization
+ * @param hideToggle=false {Boolean} - set this value if you'd like to hide the toggle and just leverage the input field
  */
 
 import { computed } from '@ember/object';
@@ -53,6 +54,7 @@ export default TtlForm.extend({
   unit: 's',
   initialValue: null,
   changeOnInit: false,
+  hideToggle: false,
 
   init() {
     this._super(...arguments);
@@ -140,8 +142,9 @@ export default TtlForm.extend({
     'helperTextEnabled',
     'helperTextSet',
     'helperTextUnset',
+    'hideToggle',
     function () {
-      return this.enableTTL ? this.helperTextEnabled : this.helperTextDisabled;
+      return this.enableTTL || this.hideToggle ? this.helperTextEnabled : this.helperTextDisabled;
     }
   ),
 

ui/lib/core/addon/templates/components/ttl-picker2.hbs

@@ -1,13 +1,6 @@
-<Toggle
-  @name={{this.label}}
-  @status="success"
-  @size="small"
-  @onChange={{action "toggleEnabled"}}
-  @checked={{this.enableTTL}}
-  data-test-ttl-toggle
->
-  <span class="ttl-picker-label is-large">{{this.label}}</span><br />
-  <div class="description has-text-grey">
+{{#if this.hideToggle}}
+  <span class="ttl-picker-label">{{this.label}}</span><br />
+  <div class="sub-text">
     <span>{{this.helperText}}</span>
     {{#if this.description}}
       <ToolTip @verticalPosition="below" as |T|>
@@ -22,9 +15,35 @@
       </ToolTip>
     {{/if}}
   </div>
-</Toggle>
-{{#if this.enableTTL}}
-  <div class="ttl-show-picker" data-test-ttl-picker-group={{this.label}}>
+{{else}}
+  <Toggle
+    @name={{this.label}}
+    @status="success"
+    @size="small"
+    @onChange={{action "toggleEnabled"}}
+    @checked={{this.enableTTL}}
+    data-test-ttl-toggle
+  >
+    <span class="ttl-picker-label is-large">{{this.label}}</span><br />
+    <div class="description has-text-grey">
+      <span>{{this.helperText}}</span>
+      {{#if this.description}}
+        <ToolTip @verticalPosition="below" as |T|>
+          <T.Trigger data-test-tooltip-trigger tabindex="-1">
+            <Icon @name="info" aria-label="description" />
+          </T.Trigger>
+          <T.Content @defaultClass="tool-tip">
+            <div class="box" data-test-hover-copy-tooltip-text>
+              {{this.description}}
+            </div>
+          </T.Content>
+        </ToolTip>
+      {{/if}}
+    </div>
+  </Toggle>
+{{/if}}
+{{#if (or this.enableTTL this.hideToggle)}}
+  <div class={{unless this.hideToggle "ttl-show-picker"}} data-test-ttl-picker-group={{this.label}}>
     <div class="field is-grouped is-marginless">
       <div class="control is-marginless">
         <input