UI/tools partial #11672
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| ```release-note:improvement | ||
| ui: Replace tool partials with components. | ||
| ``` | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. | ||
|
There was a problem hiding this comment. Nice job with js doc, I should add it as well 😄 |
||
| */ | ||
| export default class ToolHash extends Component { | ||
| @action | ||
| onClear() { | ||
| this.args.onClear(); | ||
|
There was a problem hiding this comment. for all new components the |
||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
|
There was a problem hiding this comment. Can codemirror be undefined or null? There was a problem hiding this comment. This is also how we handle it in other parts of the app. |
||
| const hasErrors = codemirror?.state.lint.marked?.length > 0; | ||
| this.data = val; | ||
| this.buttonDisabled = hasErrors; | ||
| this.args.codemirrorUpdated(val, hasErrors); | ||
|
There was a problem hiding this comment. now we call the parent's codemirrorUpdated function and instead of passing in |
||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,63 @@ | ||
| <form onsubmit={{action "doSubmit"}}> | ||
| {{#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')}} | ||
|
There was a problem hiding this comment. notice these are all There was a problem hiding this comment. I think this is the right call, unless we want to add an empty state (which would most likely be viewed by a developer updating this space) There was a problem hiding this comment. Good idea with the empty state. It feels strange to have no else so I'll go ahead and add it. |
||
| <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> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the ttl is determined in the tool-wrap component.