-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
UI: Add copy button for client/allocation UUIDs #5926
Merged
Merged
Changes from 27 commits
Commits
Show all changes
28 commits
Select commit
Hold shift + click to select a range
e671478
Add Structure icons
backspace fbf729d
Add ember-cli-clipboard
backspace 40dcfe2
Add qunit-dom
backspace e92b316
Add prototype copy button for client UUID
backspace 398daec
Add hackish styling
backspace 935c577
Add auto-reset after success
backspace 042cf83
Fix size of success “button”
backspace 8611562
Add copy button for allocation id
backspace 190a20a
Move class name into component
backspace 11afd99
Add always-showing success tooltip
backspace 5b532ba
Change button to only hide when asked to
backspace 827d086
Add button wrapper for error icon
backspace e584232
Change success/error “button”s to be static
backspace fb8e716
Move copy button up slightly
backspace 4b08c30
Remove show-on-hover functionality
backspace b2d9e0c
Add default state
backspace a28e9de
Add tooltip for copy error
backspace fe30164
Rename component
backspace a1dd378
Move copy-button styling into its own file
backspace 5270bec
Add copy button to styleguide
backspace 9475188
Rename missed file
backspace 3d46b61
Add another default property
backspace 9180fbe
Add explanation of re-export
backspace a826034
Remove outdated FIXME
backspace f9f405c
Remove trailing newline
backspace 5e302ee
Add changelog entry
backspace e8a1ae0
Convert success action to task
backspace 5db4a87
Remove run.later in favour of timeout
backspace File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
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,2 @@ | ||
// This lets us use copy-button to wrap ember-cli-clipboard’s component | ||
export { default } from 'ember-cli-clipboard/components/copy-button'; |
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,18 @@ | ||
import Component from '@ember/component'; | ||
import { run } from '@ember/runloop'; | ||
import { task } from 'ember-concurrency'; | ||
|
||
export default Component.extend({ | ||
classNames: ['copy-button'], | ||
|
||
clipboardText: null, | ||
state: null, | ||
|
||
indicateSuccess: task(function*() { | ||
this.set('state', 'success'); | ||
|
||
yield run.later(() => { | ||
this.set('state', null); | ||
}, 2000); | ||
}), | ||
}); |
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,16 @@ | ||
.copy-button { | ||
padding-left: 0.5rem; | ||
margin-bottom: 2px; | ||
|
||
.button { | ||
color: inherit; | ||
|
||
&.is-static { | ||
background-color: inherit; | ||
} | ||
|
||
svg { | ||
fill: currentColor; | ||
} | ||
} | ||
} |
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
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
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,22 @@ | ||
{{#if (eq state 'success')}} | ||
<div class='button is-borderless is-small is-static'> | ||
<span class="tooltip text-center always-active" role="tooltip" aria-label="Copied!"> | ||
{{x-icon 'copy-success'}} | ||
</span> | ||
</div> | ||
{{else if (eq state 'error')}} | ||
<div class='button is-borderless is-small is-static'> | ||
<span class="tooltip text-center" role="tooltip" aria-label="Error copying"> | ||
{{x-icon 'alert-triangle'}} | ||
</span> | ||
</div> | ||
{{else}} | ||
{{#addon-copy-button | ||
class='button is-borderless is-small' | ||
clipboardText=clipboardText | ||
success=(perform indicateSuccess) | ||
error=(action (mut state) 'error') | ||
}} | ||
{{x-icon 'copy-action'}} | ||
{{/addon-copy-button}} | ||
{{/if}} |
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,6 @@ | ||
{{#freestyle-usage "copy-button" title="Copy Button"}} | ||
<span class="tag is-hollow is-small no-text-transform"> | ||
e8c898a0-794b-9063-7a7f-bf0c4a405f83 | ||
{{copy-button clipboardText="e8c898a0-794b-9063-7a7f-bf0c4a405f83"}} | ||
</span> | ||
{{/freestyle-usage}} |
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
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,45 @@ | ||
import { module, test } from 'qunit'; | ||
import { setupRenderingTest } from 'ember-qunit'; | ||
import { click, render } from '@ember/test-helpers'; | ||
import hbs from 'htmlbars-inline-precompile'; | ||
|
||
import sinon from 'sinon'; | ||
|
||
import { triggerCopyError, triggerCopySuccess } from 'ember-cli-clipboard/test-support'; | ||
|
||
module('Integration | Component | copy-button', function(hooks) { | ||
setupRenderingTest(hooks); | ||
|
||
test('it shows the copy icon by default', async function(assert) { | ||
await render(hbs`{{copy-button class='copy-button'}}`); | ||
|
||
assert.dom('.copy-button .icon-is-copy-action').exists(); | ||
}); | ||
|
||
test('it shows the success icon on success and resets afterward', async function(assert) { | ||
const clock = sinon.useFakeTimers(); | ||
|
||
await render(hbs`{{copy-button class='copy-button'}}`); | ||
|
||
await click('.copy-button button'); | ||
await triggerCopySuccess('.copy-button button'); | ||
|
||
assert.dom('.copy-button .icon-is-copy-success').exists(); | ||
|
||
clock.runAll(); | ||
|
||
assert.dom('.copy-button .icon-is-copy-success').doesNotExist(); | ||
assert.dom('.copy-button .icon-is-copy-action').exists(); | ||
|
||
clock.restore(); | ||
}); | ||
|
||
test('it shows the error icon on error', async function(assert) { | ||
await render(hbs`{{copy-button class='copy-button'}}`); | ||
|
||
await click('.copy-button button'); | ||
await triggerCopyError('.copy-button button'); | ||
|
||
assert.dom('.copy-button .icon-is-alert-triangle').exists(); | ||
}); | ||
}); |
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.
Unfortunately, I think this implementation is still subject to the same bug. I just reproduced it on the Netlify preview, at least:
Here's one way to avoid the issue:
This works because on cancelation, the
timeout
is aborted, and the rest of the task is not executed.Edit: the
run.later
approach doesn't work because it's not cancellable: once the work is scheduled on the queue, you can't remove it.(I also added
restartable
to make sure we don't have multiple concurrent version of this task running if the user clicks a few times.)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.
goodness, yes, much better, thanks!