UI/tools partial (#11672)

* hash tools from partial to component

* initial setup of tools random, but issue remaining with bytes

* rewrap

* unwrap

* final two partials

* fix issues with actions on tool wrap

* fix hash

* changelog

* address pr comments

* fix onClear

* trigger run

* triggering test suite

changelog/11672.txt

@@ -0,0 +1,4 @@
+```release-note:improvement
+ui: Replace tool partials with components.
+```
+

ui/app/components/tool-actions-form.js

@@ -106,7 +106,6 @@ export default Component.extend(DEFAULTS, {
     if (action === 'random') {
       return { bytes: this.bytes, format: this.format };
     }
-
     if (action === 'hash') {
       return { input: this.input, format: this.format, algorithm: this.algorithm };
     }
@@ -135,14 +134,11 @@ export default Component.extend(DEFAULTS, {
       this.reset();
     },
 
-    updateTtl(evt) {
+    updateTtl(ttl) {
-      const ttl = evt.enabled ? `${evt.seconds}s` : '30m';
       set(this, 'wrapTTL', ttl);
     },
 
-    codemirrorUpdated(val, codemirror) {
+    codemirrorUpdated(val, hasErrors) {
-      codemirror.performLint();
-      const hasErrors = codemirror.state.lint.marked.length > 0;
       setProperties(this, {
         buttonDisabled: hasErrors,
         data: val,

ui/app/components/tool-hash.js

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+/**
+ * @module ToolHash
+ * ToolHash components are components that sys/wrapping/hash functionality.  Most of the functionality is passed through as actions from the tool-actions-form and then called back with properties.
+ *
+ * @example
+ * ```js
+ * <ToolHash
+ *  @onClear={{action "onClear"}}
+ *  @sum={{sum}}
+ *  @algorithm={{algorithm}}
+ *  @format={{format}}
+ *  @errors={{errors}}/>
+ * ```
+ * @param onClear {Function} - parent action that is passed through. Must be passed as {{action "onClear"}}
+ * @param sum=null {String} - property passed from parent to child and then passed back up to parent.
+ * @param algorithm {String} - property returned from parent.
+ * @param format {String} - property returned from parent.
+ * @param error=null {Object} - errors passed from parent as default then from child back to parent.
+ */
+export default class ToolHash extends Component {
+  @action
+  onClear() {
+    this.args.onClear();
+  }
+}

ui/app/components/tool-lookup.js

@@ -0,0 +1,34 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+/**
+ * @module ToolLookup
+ * ToolLookup components are components that sys/wrapping/lookup functionality.  Most of the functionality is passed through as actions from the tool-actions-form and then called back with properties.
+ *
+ * @example
+ * ```js
+ * <ToolLookup
+ *  @creation_time={{creation_time}}
+ *  @creation_ttl={{creation_ttl}}
+ *  @creation_path={{creation_path}}
+ *  @expirationDate={{expirationDate}}
+ *  @selectedAction={{selectedAction}}
+ *  @token={{token}}
+ *  @onClear={{action "onClear"}}
+ *  @errors={{errors}}/>
+ * ```
+ * @param creation_time {Function} - parent action that is passed through.
+ * @param creation_ttl {Function} - parent action that is passed through.
+ * @param creation_path {Function} - parent action that is passed through.
+ * @param expirationDate='' {String} - value returned from lookup.
+ * @param selectedAction="wrap" - passed in from parent.  This is the wrap action, others include hash, etc.
+ * @param token=null {String} - property passed from parent to child and then passed back up to parent
+ * @param onClear {Function} - parent action that is passed through. Must be passed as {{action "onClear"}}
+ * @param error=null {Object} - errors passed from parent as default then from child back to parent.
+ */
+export default class ToolLookup extends Component {
+  @action
+  onClear() {
+    this.args.onClear();
+  }
+}

ui/app/components/tool-random.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+/**
+ * @module ToolRandom
+ * ToolRandom components are components that sys/wrapping/random functionality.  Most of the functionality is passed through as actions from the tool-actions-form and then called back with properties.
+ *
+ * @example
+ * ```js
+ * <ToolRandom
+ *  @onClear={{action "onClear"}}
+ *  @format={{format}}
+ *  @bytes={{bytes}}
+ *  @random_bytes={{random_bytes}}
+ *  @errors={{errors}}/>
+ * ```
+ * @param onClear {Function} - parent action that is passed through. Must be passed as {{action "onClear"}}
+ * @param format {String} - property returned from parent.
+ * @param bytes {String} - property returned from parent.
+ * @param random_bytes {String} - property returned from parent.
+ * @param error=null {Object} - errors passed from parent as default then from child back to parent.
+ */
+
+export default class ToolRandom extends Component {
+  @action
+  onClear() {
+    this.args.onClear();
+  }
+}

ui/app/components/tool-rewrap.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+/**
+ * @module ToolRewrap
+ * ToolRewrap components are components that sys/wrapping/rewrap functionality.  Most of the functionality is passed through as actions from the tool-actions-form and then called back with properties.
+ *
+ * @example
+ * ```js
+ * <ToolRewrap
+ *  @onClear={{action "onClear"}}
+ *  @token={{token}}
+ *  @rewrap_token={{rewrap_token}}
+ *  @selectedAction={{selectedAction}}
+ *  @bytes={{bytes}}
+ *  @errors={{errors}}/>
+ * ```
+ * @param onClear {Function} - parent action that is passed through. Must be passed as {{action "onClear"}}
+ * @param token=null {String} - property passed from parent to child and then passed back up to parent
+ * @param rewrap_token {String} - property returned from parent.
+ * @param selectedAction {String} - property returned from parent.
+ * @param bytes {String} - property returned from parent.
+ * @param error=null {Object} - errors passed from parent as default then from child back to parent.
+ */
+
+export default class ToolRewrap extends Component {
+  @action
+  onClear() {
+    this.args.onClear();
+  }
+}

ui/app/components/tool-unwrap.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+/**
+ * @module ToolUnwrap
+ * ToolUnwrap components are components that sys/wrapping/unwrap functionality.  Most of the functionality is passed through as actions from the tool-actions-form and then called back with properties.
+ *
+ * @example
+ * ```js
+ * <ToolUnwrap
+ *  @onClear={{action "onClear"}}
+ *  @token={{token}}
+ *  @unwrap_data={{unwrap_data}}
+ *  @unwrapActiveTab={{unwrapActiveTab}}
+ *  @details={{details}}
+ *  @errors={{errors}}/>
+ * ```
+ * @param onClear {Function} - parent action that is passed through. Must be passed as {{action "onClear"}}
+ * @param token=null {String} - property passed from parent to child and then passed back up to parent
+ * @param unwrap_data {String} - property returned from parent.
+ * @param unwrapActiveTab {String} - property returned from parent.
+ * @param details {String} - property returned from parent.
+ * @param error=null {Object} - errors passed from parent as default then from child back to parent.
+ */
+
+export default class ToolUnwrap extends Component {
+  @action
+  onClear() {
+    this.args.onClear();
+  }
+}

ui/app/components/tool-wrap.js

@@ -0,0 +1,51 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+/**
+ * @module ToolWrap
+ * ToolWrap components are components that sys/wrapping/wrap functionality.  Most of the functionality is passed through as actions from the tool-actions-form and then called back with properties.
+ *
+ * @example
+ * ```js
+ * <ToolWrap
+ *  @onClear={{action "onClear"}}
+ *  @token={{token}}
+ *  @selectedAction="wrap"
+ *  @codemirrorUpdated={{action "codemirrorUpdated"}}
+ *  @updateTtl={{action "updateTtl"}}
+ *  @buttonDisabled={{buttonDisabled}}
+ *  @errors={{errors}}/>
+ * ```
+ * @param onClear {Function} - parent action that is passed through. Must be passed as {{action "onClear"}}
+ * @param token=null {String} - property passed from parent to child and then passed back up to parent
+ * @param selectedAction="wrap" - passed in from parent.  This is the wrap action, others include hash, etc.
+ * @param codemirrorUpdated {Function} - parent action that is passed through. Must be passed as {{action "codemirrorUpdated"}}.
+ * @param updateTtl {Function} - parent action that is passed through. Must be passed as {{action "updateTtl"}}
+ * @param buttonDisabled=false {Boolean} - false default and if there is an error on codemirror it turns to true.
+ * @param error=null {Object} - errors passed from parent as default then from child back to parent.
+ */
+
+export default class ToolWrap extends Component {
+  @tracked data = '{\n}';
+  @tracked buttonDisabled = false;
+
+  @action
+  onClear() {
+    this.args.onClear();
+  }
+  @action
+  updateTtl(evt) {
+    if (!evt) return;
+    const ttl = evt.enabled ? `${evt.seconds}s` : '30m';
+    this.args.updateTtl(ttl);
+  }
+  @action
+  codemirrorUpdated(val, codemirror) {
+    codemirror.performLint();
+    const hasErrors = codemirror?.state.lint.marked?.length > 0;
+    this.data = val;
+    this.buttonDisabled = hasErrors;
+    this.args.codemirrorUpdated(val, hasErrors);
+  }
+}

ui/app/templates/components/tool-actions-form.hbs

@@ -1,3 +1,63 @@
 <form onsubmit={{action "doSubmit"}}>
-  {{partial (concat "partials/tools/" selectedAction)}}
+  {{#if (eq selectedAction 'hash')}}
+    <ToolHash
+      @onClear={{action "onClear"}}
+      @sum={{sum}}
+      @algorithm={{algorithm}}
+      @errors={{errors}}
+      @format={{format}}
+      @input={{input}}
+    />
+  {{else if (eq selectedAction 'random')}}
+    <ToolRandom
+      @onClear={{action "onClear"}}
+      @random_bytes={{random_bytes}}
+      @errors={{errors}}
+      @format={{format}}
+      @bytes={{bytes}}
+    />
+  {{else if (eq selectedAction 'rewrap')}}
+    <ToolRewrap
+      @onClear={{action "onClear"}}
+      @rewrap_token={{rewrap_token}}
+      @selectedAction={{selectedAction}}
+      @errors={{errors}}
+      @token={{token}}
+      @bytes={{bytes}}
+    />
+  {{else if (eq selectedAction 'unwrap')}}
+    <ToolUnwrap
+      @onClear={{action "onClear"}}
+      @unwrap_data={{unwrap_data}}
+      @unwrapActiveTab={{unwrapActiveTab}}
+      @details={{details}}
+      @errors={{errors}}
+      @token={{token}}
+    />
+  {{else if (eq selectedAction 'lookup')}}
+    <ToolLookup
+      @creation_time={{creation_time}}
+      @creation_ttl={{creation_ttl}}
+      @creation_path={{creation_path}}
+      @expirationDate={{expirationDate}}
+      @selectedAction={{selectedAction}}
+      @token={{token}}
+      @onClear={{action "onClear"}}
+      @errors={{errors}}
+    />
+  {{else if (eq selectedAction 'wrap')}}
+    <ToolWrap
+      @token={{token}}
+      @selectedAction={{selectedAction}}
+      @onClear={{action "onClear"}}
+      @codemirrorUpdated={{action "codemirrorUpdated"}}
+      @updateTtl={{action "updateTtl"}}
+      @buttonDisabled={{buttonDisabled}}
+      @errors={{errors}}
+    />
+  {{else}}
+    <EmptyState
+      @title="Tool not available"
+    />
+  {{/if}}
 </form>

ui/app/templates/components/tool-hash.hbs

@@ -6,37 +6,37 @@
   </p.levelLeft>
 </PageHeader>
 
-{{#if sum}}
+{{#if @sum}}
   <div class="box is-sideless is-fullwidth is-marginless">
     <div class="field">
       <label for="sum" class="is-input">Sum</label>
       <div class="control">
-        <textarea readonly class="textarea" id="sum" data-test-tools-input="sum">{{sum}}</textarea>
+        <textarea readonly class="textarea" id="sum" data-test-tools-input="sum">{{@sum}}</textarea>
       </div>
     </div>
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <CopyButton @clipboardText={{sum}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Hashed data copied!")}}>
+      <CopyButton @clipboardText={{@sum}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Hashed data copied!")}}>
       Copy
       </CopyButton>
     </div>
     <div class="control">
-      <button {{action 'onClear'}} type="button" class="button" data-test-tools-back=true>
+      <button {{on "click" this.onClear}} type="button" class="button" data-test-tools-back=true>
         Back
       </button>
     </div>
   </div>
 {{else}}
   <div class="box is-sideless is-fullwidth is-marginless">
-    <MessageError @errors={{errors}} />
+    <MessageError @errors={{@errors}} />
     <div class="field">
       <label for="input" class="is-label">
         Input
       </label>
       <div class="control">
-        <Textarea @id="input" @name="input" @value={{input}} class="textarea" data-test-tools-input="hash-input" />
+        <Textarea @id="input-hash" @name="input" @value={{@input}} class="textarea" data-test-tools-input="hash-input" />
-        <B64Toggle @value={{input}} @isInput={{false}} @data-test-tools-b64-toggle="input" />
+        <B64Toggle @value={{@input}} @isInput={{false}} @data-test-tools-b64-toggle="input" />
       </div>
     </div>
     <div class="field is-horizontal">
@@ -48,10 +48,10 @@
               <select
                 name="algorithm"
                 id="algorithm"
-                onchange={{action (mut algorithm) value="target.value"}}
+                onchange={{action (mut @algorithm) value="target.value"}}
               >
                 {{#each (sha2-digest-sizes) as |algo|}}
-                  <option selected={{if algorithm (eq algorithm algo)}} value={{algo}}>
+                  <option selected={{if @algorithm (eq @algorithm algo)}} value={{algo}}>
                     {{algo}}
                   </option>
                 {{/each}}
@@ -66,10 +66,10 @@
               <select
                  name="format"
                  id="format"
-                 onchange={{action (mut format) value="target.value"}}
+                 onchange={{action (mut @format) value="target.value"}}
               >
                 {{#each (array 'base64' 'hex') as |formatOption|}}
-                  <option selected={{if format (eq format formatOption)}} value={{formatOption}}>
+                  <option selected={{if @format (eq @format formatOption)}} value={{formatOption}}>
                     {{formatOption}}
                   </option>
                 {{/each}}

ui/app/templates/components/tool-lookup.hbs

@@ -0,0 +1,44 @@
+<PageHeader as |p|>
+  <p.levelLeft>
+    <h1 class="title is-3">
+      Lookup token
+    </h1>
+  </p.levelLeft>
+</PageHeader>
+
+{{#if (or @creation_time @creation_ttl)}}
+  <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
+    <InfoTableRow @label="Creation path" @value={{@creation_path}} @data-test-tools="token-lookup-row" />
+    <InfoTableRow @label="Creation time" @value={{@creation_time}} @data-test-tools="token-lookup-row" />
+    <InfoTableRow @label="Creation TTL" @value={{@creation_ttl}} @data-test-tools="token-lookup-row" />
+    {{#if @expirationDate}}
+      <InfoTableRow @label="Expiration date" @value={{@expirationDate}} @data-test-tools="token-lookup-row" />
+      <InfoTableRow @label="Expires in" @value={{date-from-now @expirationDate}} @data-test-tools="token-lookup-row" />
+    {{/if}}
+  </div>
+  <div class="field is-grouped box is-fullwidth is-bottomless">
+    <div class="control">
+      <button {{on "click" this.onClear}} type="button" class="button">
+        Back
+      </button>
+    </div>
+  </div>
+{{else}}
+  <div class="box is-sideless is-fullwidth is-marginless">
+    <NamespaceReminder @mode="perform" @noun={{@selectedAction}} />
+    <MessageError @errors={{@errors}} />
+    <div class="field">
+      <label for="token" class="is-label">Wrapping token</label>
+      <div class="control">
+        <Input @value={{@token}} class="input" @id="token" @name="token" data-test-tools-input="wrapping-token" />
+      </div>
+    </div>
+  </div>
+  <div class="field is-grouped box is-fullwidth is-bottomless">
+    <div class="control">
+      <button type="submit" data-test-tools-submit="true" class="button is-primary">
+        Lookup token
+      </button>
+    </div>
+  </div>
+{{/if}}

ui/app/templates/components/tool-random.hbs

@@ -6,26 +6,26 @@
   </p.levelLeft>
 </PageHeader>
 
-{{#if random_bytes}}
+{{#if @random_bytes}}
   <div class="box is-sideless is-fullwidth is-marginless">
     <label for="rand" class="is-label">Random bytes</label>
-    <textarea readonly class="textarea" id="rand" data-test-tools-input="random-bytes">{{random_bytes}}</textarea>
+    <textarea readonly class="textarea" id="rand" data-test-tools-input="random-bytes">{{@random_bytes}}</textarea>
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <CopyButton @clipboardText={{random_bytes}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Random bytes copied!")}}>
+      <CopyButton @clipboardText={{@random_bytes}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Random bytes copied!")}}>
         Copy
       </CopyButton>
     </div>
     <div class="control">
-      <button {{action 'onClear'}} type="button" class="button">
+      <button {{on "click" this.onClear}} type="button" class="button">
         Back
       </button>
     </div>
   </div>
 {{else}}
   <div class="box is-sideless is-fullwidth is-marginless">
-    <MessageError @errors={{errors}} />
+    <MessageError @errors={{@errors}} />
     <div class="field is-horizontal">
       <div class="field-body">
         <div class="field">
@@ -33,7 +33,7 @@
             Number of bytes
           </label>
           <div class="control">
-            <Input @id="bytes" class="input" @value={{bytes}} data-test-tools-input="bytes" />
+            <Input @id="bytes" class="input" @value={{@bytes}} data-test-tools-input="bytes" />
           </div>
         </div>
         <div class="field">
@@ -45,10 +45,10 @@
               <select
                  name="format"
                  id="format"
-                 onchange={{action (mut format) value="target.value"}}
+                 onchange={{action (mut @format) value="target.value"}}
               >
                 {{#each (array 'base64' 'hex') as |formatOption|}}
-                  <option selected={{if format (eq format formatOption)}} value={{formatOption}}>
+                  <option selected={{if @format (eq @format formatOption)}} value={{formatOption}}>
                     {{formatOption}}
                   </option>
                 {{/each}}

ui/app/templates/components/tool-rewrap.hbs

@@ -6,35 +6,35 @@
   </p.levelLeft>
 </PageHeader>
 
-{{#if rewrap_token}}
+{{#if @rewrap_token}}
   <div class="box is-sideless is-fullwidth is-marginless">
     <div class="field">
       <label for="wrap-info" class="is-label">Rewrapped token</label>
       <div class="control">
-        <Textarea @value={{rewrap_token}} @readonly={{true}} class="textarea" @id="wrap-info" @name="wrap-info" data-test-tools-input="rewrapped-token" />
+        <Textarea @value={{@rewrap_token}} @readonly={{true}} class="textarea" @id="wrap-info" @name="wrap-info" data-test-tools-input="rewrapped-token" />
       </div>
     </div>
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <CopyButton @clipboardText={{rewrap_token}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Token copied!")}}>
+      <CopyButton @clipboardText={{@rewrap_token}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Token copied!")}}>
         Copy
       </CopyButton>
     </div>
     <div class="control">
-      <button {{action 'onClear'}} type="button" class="button">
+      <button {{on "click" this.onClear}} type="button" class="button">
         Back
       </button>
     </div>
   </div>
 {{else}}
   <div class="box is-sideless is-fullwidth is-marginless">
-    <NamespaceReminder @mode="perform" @noun={{selectedAction}} />
+    <NamespaceReminder @mode="perform" @noun={{@selectedAction}} />
-    <MessageError @errors={{errors}} />
+    <MessageError @errors={{@errors}} />
     <div class="field">
       <label for="token" class="is-label">Wrapping token</label>
       <div class="control">
-        <Input @value={{token}} class="input" @id="token" @name="token" data-test-tools-input="wrapping-token" />
+        <Input @value={{@token}} class="input" @id="token" @name="token" data-test-tools-input="wrapping-token" />
       </div>
     </div>
   </div>

ui/app/templates/components/tool-unwrap.hbs

@@ -6,29 +6,29 @@
   </p.levelLeft>
 </PageHeader>
 
-{{#if unwrap_data}}
+{{#if @unwrap_data}}
   <div class="box is-sideless is-fullwidth is-marginless">
     <nav class="tabs">
       <ul>
-        <li role="tab" aria-selected={{if (eq unwrapActiveTab "data") "true" "false"}} class="{{if (eq unwrapActiveTab "data") "is-active"}}">
+        <li role="tab" aria-selected={{if (eq @unwrapActiveTab "data") "true" "false"}} class="{{if (eq @unwrapActiveTab "data") "is-active"}}">
-          <button type="button" class="link link-plain tab has-text-weight-semibold" {{action (mut unwrapActiveTab) "data"}} data-test-button-data>Data</button>
+          <button type="button" class="link link-plain tab has-text-weight-semibold" {{action (mut @unwrapActiveTab) "data"}} data-test-button-data>Data</button>
         </li>
-        <li role="tab" aria-selected={{if (eq unwrapActiveTab "data") "true" "false"}} class="{{if (eq unwrapActiveTab "details") "is-active"}}">
+        <li role="tab" aria-selected={{if (eq @unwrapActiveTab "data") "true" "false"}} class="{{if (eq @unwrapActiveTab "details") "is-active"}}">
-          <button type="button" class="link link-plain tab has-text-weight-semibold" {{action (mut unwrapActiveTab) "details"}} data-test-button-details>Wrap Details</button>
+          <button type="button" class="link link-plain tab has-text-weight-semibold" {{action (mut @unwrapActiveTab) "details"}} data-test-button-details>Wrap Details</button>
         </li>
       </ul>
     </nav>
-    {{#if (eq unwrapActiveTab "data")}}
+    {{#if (eq @unwrapActiveTab "data")}}
       <div class="field">
         <div class="control">
-          <JsonEditor @title="Unwrapped Data" @value={{stringify unwrap_data}} @options={{hash
+          <JsonEditor @title="Unwrapped Data" @value={{stringify @unwrap_data}} @options={{hash
               readOnly=true
             }} />
         </div>
       </div>
     {{else}}
       <div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">
-        {{#each-in details as |key detail|}}
+        {{#each-in @details as |key detail|}}
           <InfoTableRow @label={{key}} @value={{key}}>
             {{#if (or (eq detail "No") (eq detail "None"))}}
               <Icon class="has-text-grey" @glyph="cancel-square-outline" /> {{detail}}
@@ -45,24 +45,24 @@
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <CopyButton @clipboardText={{stringify unwrap_data}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Data copied!")}}>
+      <CopyButton @clipboardText={{stringify @unwrap_data}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Data copied!")}}>
         Copy
       </CopyButton>
     </div>
     <div class="control">
-      <button {{action 'onClear'}} type="button" class="button">
+      <button {{on "click" this.onClear}} type="button" class="button">
         Back
       </button>
     </div>
   </div>
 {{else}}
   <div class="box is-sideless is-fullwidth is-marginless">
-    <NamespaceReminder @mode="perform" @noun={{selectedAction}} />
+    <NamespaceReminder @mode="perform" @noun={{@selectedAction}} />
-    <MessageError @errors={{errors}} />
+    <MessageError @errors={{@errors}} />
     <div class="field">
       <label for="token" class="is-label">Wrapping token</label>
       <div class="control">
-        <Input @value={{token}} class="input" @id="token" @name="token" @autocomplete="off" @spellcheck="false" data-test-tools-input="wrapping-token" />
+        <Input @value={{@token}} class="input" @id="token" @name="token" @autocomplete="off" @spellcheck="false" data-test-tools-input="wrapping-token" />
       </div>
     </div>
   </div>

ui/app/templates/components/tool-wrap.hbs

@@ -6,43 +6,43 @@
   </p.levelLeft>
 </PageHeader>
 
-{{#if token}}
+{{#if @token}}
   <div class="box is-sideless is-fullwidth is-marginless">
     <div class="field">
       <label for="wrap-info" class="is-label">Wrapping token</label>
       <div class="control">
-        <Textarea @value={{token}} @readonly={{true}} class="textarea" @id="wrap-info" @name="wrap-info" data-test-tools-input="wrapping-token" />
+        <Textarea @value={{@token}} @readonly={{true}} class="textarea" @id="wrap-info" @name="wrap-info" data-test-tools-input="wrapping-token" />
       </div>
     </div>
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
      <div class="control">
-      <CopyButton @clipboardText={{token}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Token copied!")}}>
+      <CopyButton @clipboardText={{@token}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Token copied!")}}>
         Copy
       </CopyButton>
     </div>
     <div class="control">
-      <button {{action 'onClear'}} type="button" class="button">
+      <button {{on "click" this.onClear}} type="button" class="button">
         Back
       </button>
     </div>
   </div>
 {{else}}
   <div class="box is-sideless is-fullwidth is-marginless">
-    <NamespaceReminder @mode="perform" @noun={{selectedAction}} />
+    <NamespaceReminder @mode="perform" @noun={{@selectedAction}} />
-    <MessageError @errors={{errors}} />
+    <MessageError @errors={{@errors}} />
     <div class="field">
       <div class="control">
         <JsonEditor @title="Data to wrap" 
           @subTitle="json-formatted"
-          @value={{data}} 
+          @value={{this.data}} 
-          @valueUpdated={{action "codemirrorUpdated"}} />
+          @valueUpdated={{action this.codemirrorUpdated}} />
       </div>
     </div>
     <TtlPicker2
       @label="Wrap TTL"
       @initialValue="30m"
-      @onChange={{action 'updateTtl'}}
+      @onChange={{action "updateTtl"}}
       @helperTextDisabled="Vault will use the default (30m)"
       @helperTextEnabled="Wrap will expire after"
       @changeOnInit={{true}}
@@ -50,7 +50,7 @@
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <button type="submit" class="button is-primary" data-test-tools-submit="true" disabled={{buttonDisabled}}>
+      <button type="submit" class="button is-primary" data-test-tools-submit="true" disabled={{@buttonDisabled}}>
         Wrap data
       </button>
     </div>

ui/app/templates/partials/tools/lookup.hbs

@@ -1,44 +0,0 @@
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Lookup token
-    </h1>
-  </p.levelLeft>
-</PageHeader>
-
-{{#if (or creation_time creation_ttl)}}
-  <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
-    <InfoTableRow @label="Creation path" @value={{creation_path}} @data-test-tools="token-lookup-row" />
-    <InfoTableRow @label="Creation time" @value={{creation_time}} @data-test-tools="token-lookup-row" />
-    <InfoTableRow @label="Creation TTL" @value={{creation_ttl}} @data-test-tools="token-lookup-row" />
-    {{#if expirationDate}}
-      <InfoTableRow @label="Expiration date" @value={{expirationDate}} @data-test-tools="token-lookup-row" />
-      <InfoTableRow @label="Expires in" @value={{date-from-now expirationDate}} @data-test-tools="token-lookup-row" />
-    {{/if}}
-  </div>
-  <div class="field is-grouped box is-fullwidth is-bottomless">
-    <div class="control">
-      <button {{action 'onClear'}} type="button" class="button">
-        Back
-      </button>
-    </div>
-  </div>
-{{else}}
-  <div class="box is-sideless is-fullwidth is-marginless">
-    <NamespaceReminder @mode="perform" @noun={{selectedAction}} />
-    <MessageError @errors={{errors}} />
-    <div class="field">
-      <label for="token" class="is-label">Wrapping token</label>
-      <div class="control">
-        <Input @value={{token}} class="input" @id="token" @name="token" data-test-tools-input="wrapping-token" />
-      </div>
-    </div>
-  </div>
-  <div class="field is-grouped box is-fullwidth is-bottomless">
-    <div class="control">
-      <button type="submit" data-test-tools-submit="true" class="button is-primary">
-        Lookup token
-      </button>
-    </div>
-  </div>
-{{/if}}