UI: TTL picker cleanup (#18114)

ui/app/components/wrap-ttl.js

@@ -1,49 +1,26 @@
 import { assert } from '@ember/debug';
-import Component from '@ember/component';
-import { set, computed } from '@ember/object';
-import hbs from 'htmlbars-inline-precompile';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
-export default Component.extend({
-  // passed from outside
-  onChange: null,
-  wrapResponse: true,
+export default class WrapTtlComponent extends Component {
+  @tracked
+  wrapResponse = true;
 
-  ttl: '30m',
+  constructor() {
+    super(...arguments);
+    assert('`onChange` handler is a required attr in `' + this.toString() + '`.', this.args.onChange);
+  }
 
-  wrapTTL: computed('wrapResponse', 'ttl', function () {
+  get wrapTTL() {
     const { wrapResponse, ttl } = this;
     return wrapResponse ? ttl : null;
-  }),
+  }
 
-  didRender() {
-    this._super(...arguments);
-    this.onChange(this.wrapTTL);
-  },
-
-  init() {
-    this._super(...arguments);
-    assert('`onChange` handler is a required attr in `' + this.toString() + '`.', this.onChange);
-  },
-
-  layout: hbs`
-    <div class="field">
-      {{ttl-picker2
-        data-test-wrap-ttl-picker=true
-        label='Wrap response'
-        helperTextDisabled='Will not wrap response'
-        helperTextEnabled='Will wrap response with a lease of'
-        enableTTL=this.wrapResponse
-        initialValue=this.ttl
-        onChange=(action 'changedValue')
-      }}
-    </div>
-  `,
-
-  actions: {
-    changedValue(ttlObj) {
-      set(this, 'wrapResponse', ttlObj.enabled);
-      set(this, 'ttl', `${ttlObj.seconds}s`);
-      this.onChange(this.wrapTTL);
-    },
-  },
-});
+  @action
+  changedValue(ttlObj) {
+    this.wrapResponse = ttlObj.enabled;
+    this.ttl = ttlObj.goSafeTimeString;
+    this.args.onChange(this.wrapTTL);
+  }
+}