Update TTL picker on add replication secondary (#9271)

* Update TTL picker on add replication secondary

This change updates the TTL picker to the new version to match most updated designs. The component also allows the default value to be more obvious

* Remove erroneous else

* Add changeOnInit param for TtlPicker2 and use it on add secondary page

* Update ttlPicker2 docs and add tests for new param

* Calculate value in unit provided on init for ttl-picker2, with tests

* Cleanup and make ttl-picker2 test more specific

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

@@ -18,6 +18,7 @@
  * @param recalculationTimeout=5000 {Number} - This is the time, in milliseconds, that `recalculateSeconds` will be be true after time is updated
  * @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
  */
 
 import Ember from 'ember';
@@ -34,6 +35,7 @@ const secondsMap = {
   h: 3600,
   d: 86400,
 };
+const validUnits = ['s', 'm', 'h', 'd'];
 const convertToSeconds = (time, unit) => {
   return time * secondsMap[unit];
 };
@@ -52,37 +54,54 @@ export default Component.extend({
   unit: 's',
   recalculationTimeout: 5000,
   initialValue: null,
+  changeOnInit: false,
 
   init() {
     this._super(...arguments);
     const value = this.initialValue;
     const enable = this.initialEnabled;
+    const changeOnInit = this.changeOnInit;
     // if initial value is unset use params passed in as defaults
     if (!value && value !== 0) {
       return;
     }
 
-    let seconds = 30;
+    let time = 30;
+    let unit = 's';
     let setEnable = this.enableTTL;
     if (!!enable || typeOf(enable) === 'boolean') {
       // This allows non-boolean values passed in to be evaluated for truthiness
       setEnable = !!enable;
     }
+
     if (typeOf(value) === 'number') {
-      seconds = value;
+      // if the passed value is a number, assume unit is seconds
+      time = value;
     } else {
       try {
-        seconds = Duration.parse(value).seconds();
+        const seconds = Duration.parse(value).seconds();
+        const lastDigit = value.toString().substring(value.length - 1);
+        if (validUnits.indexOf(lastDigit) >= 0 && lastDigit !== 's') {
+          time = convertFromSeconds(seconds, lastDigit);
+          unit = lastDigit;
+        } else {
+          time = seconds;
+        }
       } catch (e) {
         console.error(e);
-        // if parsing fails leave as default 30
+        // if parsing fails leave as default 30s
       }
     }
+
     this.setProperties({
-      time: seconds,
-      unit: 's',
+      time,
+      unit,
       enableTTL: setEnable,
     });
+
+    if (changeOnInit) {
+      this.handleChange();
+    }
   },
 
   unitOptions: computed(function() {