From cf511a895bd304e6d2713a9c5642c31483cd8a4a Mon Sep 17 00:00:00 2001 From: Angel Garbarino Date: Mon, 24 May 2021 10:45:35 -0600 Subject: [PATCH] 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 | 4 ++ ui/app/components/tool-actions-form.js | 8 +-- ui/app/components/tool-hash.js | 28 +++++++++ ui/app/components/tool-lookup.js | 34 ++++++++++ ui/app/components/tool-random.js | 29 +++++++++ ui/app/components/tool-rewrap.js | 31 ++++++++++ ui/app/components/tool-unwrap.js | 31 ++++++++++ ui/app/components/tool-wrap.js | 51 +++++++++++++++ .../components/tool-actions-form.hbs | 62 ++++++++++++++++++- .../hash.hbs => components/tool-hash.hbs} | 22 +++---- ui/app/templates/components/tool-lookup.hbs | 44 +++++++++++++ .../random.hbs => components/tool-random.hbs} | 16 ++--- .../rewrap.hbs => components/tool-rewrap.hbs} | 14 ++--- .../unwrap.hbs => components/tool-unwrap.hbs} | 26 ++++---- .../wrap.hbs => components/tool-wrap.hbs} | 20 +++--- ui/app/templates/partials/tools/lookup.hbs | 44 ------------- 16 files changed, 364 insertions(+), 100 deletions(-) create mode 100644 changelog/11672.txt create mode 100644 ui/app/components/tool-hash.js create mode 100644 ui/app/components/tool-lookup.js create mode 100644 ui/app/components/tool-random.js create mode 100644 ui/app/components/tool-rewrap.js create mode 100644 ui/app/components/tool-unwrap.js create mode 100644 ui/app/components/tool-wrap.js rename ui/app/templates/{partials/tools/hash.hbs => components/tool-hash.hbs} (71%) create mode 100644 ui/app/templates/components/tool-lookup.hbs rename ui/app/templates/{partials/tools/random.hbs => components/tool-random.hbs} (73%) rename ui/app/templates/{partials/tools/rewrap.hbs => components/tool-rewrap.hbs} (61%) rename ui/app/templates/{partials/tools/unwrap.hbs => components/tool-unwrap.hbs} (61%) rename ui/app/templates/{partials/tools/wrap.hbs => components/tool-wrap.hbs} (64%) delete mode 100644 ui/app/templates/partials/tools/lookup.hbs diff --git a/changelog/11672.txt b/changelog/11672.txt new file mode 100644 index 000000000..2d019cec1 --- /dev/null +++ b/changelog/11672.txt @@ -0,0 +1,4 @@ +```release-note:improvement +ui: Replace tool partials with components. +``` + diff --git a/ui/app/components/tool-actions-form.js b/ui/app/components/tool-actions-form.js index fd9f3df9a..f57fc1bf4 100644 --- a/ui/app/components/tool-actions-form.js +++ b/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) { - const ttl = evt.enabled ? `${evt.seconds}s` : '30m'; + updateTtl(ttl) { set(this, 'wrapTTL', ttl); }, - codemirrorUpdated(val, codemirror) { - codemirror.performLint(); - const hasErrors = codemirror.state.lint.marked.length > 0; + codemirrorUpdated(val, hasErrors) { setProperties(this, { buttonDisabled: hasErrors, data: val, diff --git a/ui/app/components/tool-hash.js b/ui/app/components/tool-hash.js new file mode 100644 index 000000000..7d1f9e316 --- /dev/null +++ b/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 + * + * ``` + * @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(); + } +} diff --git a/ui/app/components/tool-lookup.js b/ui/app/components/tool-lookup.js new file mode 100644 index 000000000..a9220f86d --- /dev/null +++ b/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 + * + * ``` + * @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(); + } +} diff --git a/ui/app/components/tool-random.js b/ui/app/components/tool-random.js new file mode 100644 index 000000000..c3e876e81 --- /dev/null +++ b/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 + * + * ``` + * @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(); + } +} diff --git a/ui/app/components/tool-rewrap.js b/ui/app/components/tool-rewrap.js new file mode 100644 index 000000000..c711b2ac1 --- /dev/null +++ b/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 + * + * ``` + * @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(); + } +} diff --git a/ui/app/components/tool-unwrap.js b/ui/app/components/tool-unwrap.js new file mode 100644 index 000000000..acfafc94c --- /dev/null +++ b/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 + * + * ``` + * @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(); + } +} diff --git a/ui/app/components/tool-wrap.js b/ui/app/components/tool-wrap.js new file mode 100644 index 000000000..360cfcaff --- /dev/null +++ b/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 + * + * ``` + * @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); + } +} diff --git a/ui/app/templates/components/tool-actions-form.hbs b/ui/app/templates/components/tool-actions-form.hbs index 7a29fd8bd..e45e4f445 100644 --- a/ui/app/templates/components/tool-actions-form.hbs +++ b/ui/app/templates/components/tool-actions-form.hbs @@ -1,3 +1,63 @@
- {{partial (concat "partials/tools/" selectedAction)}} + {{#if (eq selectedAction 'hash')}} + + {{else if (eq selectedAction 'random')}} + + {{else if (eq selectedAction 'rewrap')}} + + {{else if (eq selectedAction 'unwrap')}} + + {{else if (eq selectedAction 'lookup')}} + + {{else if (eq selectedAction 'wrap')}} + + {{else}} + + {{/if}} diff --git a/ui/app/templates/partials/tools/hash.hbs b/ui/app/templates/components/tool-hash.hbs similarity index 71% rename from ui/app/templates/partials/tools/hash.hbs rename to ui/app/templates/components/tool-hash.hbs index c051fa5d8..b9ca925de 100644 --- a/ui/app/templates/partials/tools/hash.hbs +++ b/ui/app/templates/components/tool-hash.hbs @@ -6,37 +6,37 @@ -{{#if sum}} +{{#if @sum}}
- +
- + Copy
-
{{else}}
- +
- +
- + Copy
-
{{else}}
- +
@@ -33,7 +33,7 @@ Number of bytes
- +
@@ -45,10 +45,10 @@