[App Search] Success toast polish pass by cee-chen · Pull Request #103410 · elastic/kibana

cee-chen · 2021-06-26T03:02:59Z

Summary

This PR does the following: (follow along by commit, etc.)

Moves our <Toasts /> render to just after the main <App />
- So unfortunately with the recent KibanaPageTemplate changes, our layout/FlashMessages now rerender on every page navigation. This means toasts were stuttering/rerendering/resetting their dismiss timeout (oof) between each page nav, which was frankly terrible UX. Moving the EuiGlobalToastList component outside of individual pages solves that issue and toasts go back to behaving beautifully.
- Hilariously enough, this change also solved z-index issues we were having with toasts behaving weirdly when flyouts and modals are open 🤦‍♀️ Who woulda thought!
Updates the copy of all success messages to follow EUI's toast guidelines, significantly:
- For common actions such as create, add, delete, remove, and save, include the object type, the object name if available, and the past tense of the action.
- Use single quotation marks around the object name if it helps clarify meaning.
- Don’t. Include "successfully."
- In some cases with multi-sentence success messages, I split up the 2nd sentence into the toast body.
Updates all instances of setSuccessMessage and setQueuedSuccessMessage in App Search to flashSuccessToast. 🍞

Sorry to the WS folks, I didn't have time to take a look at your app before 7.14. It's on my list though!

Screencaps

There's too many to fully take gifs of, but definitely feel free to pull this locally and check it out!

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)

^ Side note - I tested toasts on VO and it works awesome and way better than our flash messages just IMO! Also of course less issues with callouts not being visible on smaller screens or getting scrolled off the page. All in all IMO toasts are excellent.

…ssues - note: I opted to delete the `<Callouts>` component in favor of just reverting it to the old `<FlashMessages>`, now that FlashMessages is no longer responsible for toasts

- to use a toast instead of a callout - update copy to match EUI guidelines

- to use a toast (+ toast message) instead of a callout - update copy to match EUI guidelines

- to use a toast instead of a callout (+ split additional text) - update copy to match EUI guidelines

- to use a toast instead of a callout - update copy to match EUI guidelines

- per localization team guidelines - strings that have been changed should get deleted/scheduled to be re-translated

byronhulcher

This fix is amazing, thank you for your thoroughness. I'm glad we're swapped over to using success toasts now. And you updated copy universally 😅 Thank you @constancecchen!

byronhulcher · 2021-06-26T12:22:54Z

x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/flash_messages.tsx

+ * NOTE: Toasts are rendered at the highest app level (@see public/applications/index.tsx)
+ * so that they don't rerender/reset their timers when navigating between pages,
+ * and also to prevent z-index issues with flyouts and modals
+ */


👍 extremely good comment

cee-chen · 2021-06-28T02:22:26Z

@elasticmachine merge upstream

kibanamachine · 2021-06-28T04:28:10Z

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`enterpriseSearch`	2.1MB	2.1MB	+261.0B

History

💚 Build #134391 succeeded b934dc0
💔 Build #134387 failed 2dc4826

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

kibanamachine · 2021-06-28T04:31:13Z

💔 Backport failed

Status	Branch	Result
❌	7.x	Commit could not be cherrypicked due to conflicts

To backport manually run:
node scripts/backport --pr 103410

* Fix toasts rerendering/resetting between page navigations + z-index issues - note: I opted to delete the `<Callouts>` component in favor of just reverting it to the old `<FlashMessages>`, now that FlashMessages is no longer responsible for toasts * Update engine creation success messages - to use a toast instead of a callout - update copy to match EUI guidelines * Update engine deletion success message - to use a toast instead of a callout - update copy to match EUI guidelines * Update source engines add/delete success messages - to use a toast instead of a callout - update copy to match EUI guidelines * Update crawler domain delete message - to use a toast instead of a callout - update copy to match EUI guidelines * Update API key create/update/delete sucess messages - to use a toast instead of a callout - update copy to match EUI guidelines * Update curations delete success message - to use a toast instead of a callout - update copy to match EUI guidelines * Update results settings success message - to use a toast instead of a callout - update copy to match EUI guidelines * Update relevance tuning success/reset messages - to use a toast (+ toast message) instead of a callout - update copy to match EUI guidelines * Update document deletion success message - to use a toast instead of a callout (+ split additional text) - update copy to match EUI guidelines * Update role mappings create/update/delete success messages - to use a toast instead of a callout - update copy to match EUI guidelines * Run i18n_check --fix - per localization team guidelines - strings that have been changed should get deleted/scheduled to be re-translated Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> # Conflicts: # x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_overview_logic.test.ts # x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_overview_logic.ts

…-png-pdf-report-type * 'master' of github.com:elastic/kibana: (253 commits) [Enterprise Search] Test coverage pass (elastic#103406) [App Search] Success toast polish pass (elastic#103410) Role mappings: remove deprecated reset copy (elastic#103411) [Fleet] Add a message when log collection is disabled on the log details page (elastic#103166) [Query] Remove es query dependency on format.convert (elastic#103174) Home & Kibana Overview Page Template Update (elastic#103003) [ML] Converts management app jobs list pages to new layout (elastic#103117) Allow additive csp configuration (elastic#102059) [Lens] Document common formulas in product and add formula tutorial (elastic#103154) [Lens] Enable actions on Lens Embeddable (elastic#102038) [Osquery] Return proper indices permissions for osquery_manager package (elastic#103363) Dashboard locator (elastic#102854) Maps locators (elastic#102810) [Fleet] Add support for constant_keyword "value" in package field definitions (elastic#103000) [Maps] Add capability to delete features from layer & index (elastic#103145) [Security Solution] Correct linux OS lookup for Endpoint Exceptions (elastic#103038) [Enterprise Search] Add notices for deactivated users and SMTP callout (elastic#103285) [canvas] Reduce bundle size by combining SCSS imports (elastic#102822) [Enterprise Search] Final KibanaPageTemplate cleanup (elastic#103355) [docs][migrations v2] Update SO migration docs to include removal of index write block when handling corrupt SOs. (elastic#103014) ...

…-policy-2 * 'master' of github.com:elastic/kibana: (190 commits) [Enterprise Search] Test coverage pass (elastic#103406) [App Search] Success toast polish pass (elastic#103410) Role mappings: remove deprecated reset copy (elastic#103411) [Fleet] Add a message when log collection is disabled on the log details page (elastic#103166) [Query] Remove es query dependency on format.convert (elastic#103174) Home & Kibana Overview Page Template Update (elastic#103003) [ML] Converts management app jobs list pages to new layout (elastic#103117) Allow additive csp configuration (elastic#102059) [Lens] Document common formulas in product and add formula tutorial (elastic#103154) [Lens] Enable actions on Lens Embeddable (elastic#102038) [Osquery] Return proper indices permissions for osquery_manager package (elastic#103363) Dashboard locator (elastic#102854) Maps locators (elastic#102810) [Fleet] Add support for constant_keyword "value" in package field definitions (elastic#103000) [Maps] Add capability to delete features from layer & index (elastic#103145) [Security Solution] Correct linux OS lookup for Endpoint Exceptions (elastic#103038) [Enterprise Search] Add notices for deactivated users and SMTP callout (elastic#103285) [canvas] Reduce bundle size by combining SCSS imports (elastic#102822) [Enterprise Search] Final KibanaPageTemplate cleanup (elastic#103355) [docs][migrations v2] Update SO migration docs to include removal of index write block when handling corrupt SOs. (elastic#103014) ... # Conflicts: # x-pack/plugins/reporting/server/lib/store/store.test.ts # x-pack/plugins/reporting/server/lib/store/store.ts

cee-chen added 11 commits June 25, 2021 19:31

Fix toasts rerendering/resetting between page navigations + z-index i…

04da1fb

…ssues - note: I opted to delete the `<Callouts>` component in favor of just reverting it to the old `<FlashMessages>`, now that FlashMessages is no longer responsible for toasts

Update engine creation success messages

1542304

- to use a toast instead of a callout - update copy to match EUI guidelines

Update engine deletion success message

6d08e1e

- to use a toast instead of a callout - update copy to match EUI guidelines

Update source engines add/delete success messages

2881a26

- to use a toast instead of a callout - update copy to match EUI guidelines

Update crawler domain delete message

2c02aba

- to use a toast instead of a callout - update copy to match EUI guidelines

Update API key create/update/delete sucess messages

eadc068

- to use a toast instead of a callout - update copy to match EUI guidelines

Update curations delete success message

b8fe43d

- to use a toast instead of a callout - update copy to match EUI guidelines

Update results settings success message

6c20f65

- to use a toast instead of a callout - update copy to match EUI guidelines

Update relevance tuning success/reset messages

f8f8696

- to use a toast (+ toast message) instead of a callout - update copy to match EUI guidelines

Update document deletion success message

8f5957c

- to use a toast instead of a callout (+ split additional text) - update copy to match EUI guidelines

Update role mappings create/update/delete success messages

2dc4826

- to use a toast instead of a callout - update copy to match EUI guidelines

cee-chen added release_note:skip Skip the PR/issue when compiling release notes v7.14.0 auto-backport Deprecated - use backport:version if exact versions are needed labels Jun 26, 2021

cee-chen requested review from a team June 26, 2021 03:02

Run i18n_check --fix

b934dc0

- per localization team guidelines - strings that have been changed should get deleted/scheduled to be re-translated

byronhulcher reviewed Jun 26, 2021

View reviewed changes

byronhulcher approved these changes Jun 26, 2021

View reviewed changes

Merge branch 'master' into as-success-toasts

54c74ec

cee-chen enabled auto-merge (squash) June 28, 2021 02:27

cee-chen merged commit d339479 into elastic:master Jun 28, 2021

cee-chen deleted the as-success-toasts branch June 28, 2021 04:30

cee-chen mentioned this pull request Jun 28, 2021

[7.x] [App Search] Success toast polish pass (#103410) #103432

Merged

This was referenced Aug 9, 2021

[App Search] use setSuccessMessage instead of flashSuccessToast for successful crawler domain deletes #107926

Closed

[7.x] [App Search] Use flashSuccessToast when deleting a domain #107948

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[App Search] Success toast polish pass #103410

[App Search] Success toast polish pass #103410
cee-chen merged 13 commits intoelastic:masterfrom
cee-chen:as-success-toasts

cee-chen commented Jun 26, 2021 •

edited

Loading

Uh oh!

byronhulcher left a comment

Uh oh!

byronhulcher Jun 26, 2021

Uh oh!

cee-chen commented Jun 28, 2021

Uh oh!

kibanamachine commented Jun 28, 2021

Uh oh!

kibanamachine commented Jun 28, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

cee-chen commented Jun 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screencaps

Checklist

Uh oh!

byronhulcher left a comment

Choose a reason for hiding this comment

Uh oh!

byronhulcher Jun 26, 2021

Choose a reason for hiding this comment

Uh oh!

cee-chen commented Jun 28, 2021

Uh oh!

kibanamachine commented Jun 28, 2021

💚 Build Succeeded

Metrics [docs]

Async chunks

History

Uh oh!

kibanamachine commented Jun 28, 2021

💔 Backport failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cee-chen commented Jun 26, 2021 •

edited

Loading