Save ready
Saving within Grafana is a multi-tiered pattern that varies depending on the required amount of friction (see: Design Principle: Tasteful Friction) and importance of the item being saved.
Tiers
To ensure the appropriate save pattern is used, we’ve provided definitions and use cases for each below
Autosave
This pattern has the least amount of user friction from all save patterns. The user does not have to explicitly tell the system to save, the system automatically saves the value on a change, waiting a specified amount of time to trigger the request. Autosave relies on an inline toast notification to indicate to users that the save was successful.
Implementation
Autosave fields are only to be implemented in areas that are considered low impact. With this being such a friction-free pattern, it’s important to only enable this in areas where users will do no harm. Things like changing team or display names are great candidates for this component. Because currently Grafana does not have a concept of “undo,” only uses autosave for items that a user can easily undo manually.
Each autosave field is required to come with inline validation and a loading state to ensure that users are aware of the system updating their adjustments. Each field will also check for changes before saving to minimize the number of saves being pushed. Note that this is the newest save pattern for Grafana, and so adding loading and invalid states is a work in progress for some input types.
Usage
Do
- Use autosave when the changes aren’t sensitive and don’t need added friction.
- Use autosave when the user expects an instant response to the change they have made.
- Ensure an inline toast appears to confirm the save has happened.
Don't
- Use autosave on a page that also uses other save patterns
- Use autosave for an action that will affect other users (default language for orgs, dashboard changes)