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 @@