Skip to content
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.

Sign up for GitHub

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

Enable expected Enter/Escape keys on Dashboard rename #1508

Merged
merged 4 commits into from
May 20, 2017
Merged

Enable expected Enter/Escape keys on Dashboard rename #1508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
13ad0ae
Handlers for Dashboard Header Edit events: form submit, and escape ke…
cryptoquick May 19, 2017
890de21
Update CHANGELOG.
cryptoquick May 19, 2017
a901ed6
Add autoComplete disable attribute to input.
cryptoquick May 19, 2017
9a85651
Remove explicit setState.
cryptoquick May 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
## v1.3.2 [unreleased]

### Bug Fixes

### Features

### UI Improvements
1. [#1508](https://github.com/influxdata/chronograf/pull/1508): The enter and escape keys now perform as expected when renaming dashboard headers.

## v1.3.1 [unreleased]

### Bug Fixes
Expand Down
22 changes: 20 additions & 2 deletions ui/src/dashboards/components/DashboardHeaderEdit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,46 @@ class DashboardEditHeader extends Component {
const {dashboard: {name}} = props
this.state = {name}
this.handleChange = ::this.handleChange
this.handleFormSubmit = ::this.handleFormSubmit
this.handleKeyUp = ::this.handleKeyUp
}

handleChange(name) {
this.setState({name})
}

handleFormSubmit(e) {
e.preventDefault()
const name = e.target.name.value
this.props.onSave(name)
}

handleKeyUp(e) {
const {onCancel} = this.props
if (e.key === 'Escape') {
onCancel()
}
}

render() {
const {onSave, onCancel} = this.props
const {name} = this.state

return (
<div className="page-header full-width">
<div className="page-header__container">
<div className="page-header__left">
<form className="page-header__left" onSubmit={this.handleFormSubmit}>
Copy link
Contributor

@jaredscheib jaredscheib May 19, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a fan of using forms as it brings up the HTML5 autocomplete (and tooltips upon validation in the TVM). Either way, we should confirm with @nhaugo and @alexpaxton on the design / usage of HTML5 form validation tooltips + autofill in general in our app (ex. in TVM), as they feel discordant with the visual style and UX for the rest of the app.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've disabled autoComplete, it should help with the UX continuity.

<input
className="page-header--editing"
name="name"
autoFocus={true}
value={name}
placeholder="Name this Dashboard"
onChange={e => this.handleChange(e.target.value)}
onKeyUp={this.handleKeyUp}
autoComplete="off"
/>
</div>
</form>
<ConfirmButtons item={name} onConfirm={onSave} onCancel={onCancel} />
</div>
</div>
Expand Down