[Shared UX] Implement side nav v2 feedback snippet by angeles-mb · Pull Request #234187 · elastic/kibana

angeles-mb · 2025-09-05T13:04:57Z

Closes https://github.com/elastic/eui-private/issues/385

Summary

Added a feedback snippet to the new side nav (v2) which can take the shape of:
- A panel when seen for the first time
- A button after any interaction with the panel occurs (dismiss, thumb up or thumb down)
- Test it here in a solution specific space: https://angeles-mb-pr-234187-385-implement-side-nav-feedback-snippe.kbndev.co/
Its goal is to gather user feedback in the form of:
- Tracked click events (on this first iteration: EBT out of the box support to record clicks based on id on dismiss, thumb up, thumb down and open survey)
- Qualtrics surveys
User interaction is stored in local storage
Feedback panel has 3 views: prompt, positive and negative
Added confetti functionality to the positive view from canvas-confetti library
- Included license notice and ran node scripts/notice to update NOTICE.txt
- Purpose: adds confetti functionality to meet the design expectations for this component
- Justification: ready to use confetti functionality to surprise and congratulate the user
- Alternatives explored: this library was recommended by the team and lightweight
- Existing dependencies: I didn't find anything similar
Still TODO:
- Write UTs [SideNav] Add UTs for feedback snippet #234445

Visuals

Video contains following scenarios:

Dismiss panel on 'x' -> feedback button appears -> navigate to survey
Click on Thumb Up -> positive view -> feedback button appears -> navigate to survey
Click on Thumb Down -> negative view -> navigate away closing secondary menu -> open a secondary menu again -> feedback button appears
Click on Thumb Down -> negative view -> navigate to survey

Screen.Recording.2025-09-05.at.14.46.46.mov

angeles-mb · 2025-09-05T15:25:57Z

@elasticmachine run docs-build

angeles-mb · 2025-09-09T11:07:00Z

/ci

x-pack/solutions/search/test/serverless/functional/test_suites/navigation.ts

kibanamachine · 2025-09-09T13:31:30Z

Dependency Review Bot Analysis 🔍

Found 2 new third-party dependencies:

Package	Version	Vulnerabilities	Health Score
canvas-confetti	^1.9.3	🔴 C: 0, 🟠 H: 0, 🟡 M: 0, 🟢 L: 0
@types/canvas-confetti	^1.9.0	🔴 C: 0, 🟠 H: 0, 🟡 M: 0, 🟢 L: 0

Self Checklist

To help with the review, please update the PR description to address the following points for each new third-party dependency listed above:

Purpose: What is this dependency used for? Briefly explain its role in your changes.
Justification: Why is adding this dependency the best approach?
Alternatives explored: Were other options considered (e.g., using existing internal libraries/utilities, implementing the functionality directly)? If so, why was this dependency chosen over them?
Existing dependencies: Does Kibana have a dependency providing similar functionality? If so, why is the new one preferred?

Thank you for providing this information!

elasticmachine · 2025-09-09T13:37:46Z

Pinging @elastic/appex-sharedux (Team:SharedUX)

TattdCodeMonkey

search changes seem fine to me.

Dosant · 2025-09-10T09:03:44Z

NOTICE.txt

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+---
+This code is based on the `canvas-confetti` library under the ISC license.


@elastic/kibana-security, the lib is single file 1000loc, would you prefer to copy into a package instead (while preserving the author notice)?

We prefer keeping this as a dependency for now. Thanks for bringing this up! It lead to a good discussion. Summary - the maintenance burden of a 3rd party dependency is preferable over that of additional codebase.

src/core/packages/chrome/navigation/src/components/feedback_snippet/confetti.tsx

src/core/packages/chrome/navigation/src/components/side_nav/panel.tsx

x-pack/solutions/search/test/serverless/functional/test_suites/navigation.ts

weronikaolejniczak · 2025-09-10T11:24:20Z

src/core/packages/chrome/navigation/src/components/feedback_snippet/confetti.tsx

non-blocking:

This component is highly reusable and should ideally live outside of specific UI elements like the navigation, e.g. in a shared location such as shared/packages/shared-ux, as @Dosant suggested for the feedback snippet. We can make the component consume canvasConfetti options through props.

I also see a potential to promote this to EUI but that's not for now.

src/platform/packages/shared/shared-ux/feedback_snippet/impl/src/feedback_snippet.tsx

jeramysoucy · 2025-09-11T18:52:47Z

NOTICE.txt

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+---
+This code is based on the `canvas-confetti` library under the ISC license.


We prefer keeping this as a dependency for now. Thanks for bringing this up! It lead to a good discussion. Summary - the maintenance burden of a 3rd party dependency is preferable over that of additional codebase.

.buildkite/scripts/steps/security/third_party_packages.txt

src/platform/packages/shared/shared-ux/feedback_snippet/impl/src/confetti.tsx

src/core/packages/chrome/navigation/src/components/side_nav/panel.tsx

…earch feedback test

…ation solutionId prop

…gle prop

Dosant · 2025-09-12T13:51:47Z

src/platform/packages/shared/shared-ux/feedback_snippet/impl/README.md

@@ -0,0 +1,23 @@
+# @kbn/shared-ux-feedback-snippet


we don't really need /impl/ filepath for the pacakge. the impl and types separation is unnecessary with the current setup and was added when we had a more constrained package system

Good to know, I can remove it in an upcoming PR 👍

renovate.json

elasticmachine · 2025-09-15T16:05:24Z

💚 Build Succeeded

Buildkite Build
Commit: 0b7538f

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`core`	555	562	+7

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/shared-ux-feedback-snippet`	-	1	+1

Async chunks

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

id	before	after	diff
`core`	115.1KB	130.6KB	+15.5KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`core`	511.2KB	511.2KB	-3.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/core-chrome-navigation`	44	45	+1
`@kbn/shared-ux-feedback-snippet`	-	2	+2
total			+3

async chunk count

id	before	after	diff
`core`	3	4	+1

ESLint disabled line counts

id	before	after	diff
`@kbn/shared-ux-feedback-snippet`	-	1	+1

Total ESLint disabled count

id	before	after	diff
`@kbn/shared-ux-feedback-snippet`	-	1	+1

History

💚 Build #339208 succeeded fe6e4c4
💚 Build #338809 succeeded b68df9b
💚 Build #338724 succeeded 140c6c8
💚 Build #338393 succeeded ed67a21
💔 Build #338387 failed 33d7704
💚 Build #337925 succeeded 942504a

cc @angeles-mb

## Summary - Following security team advice and updating our backport strategy for recently added `canvas-confetti` dependency to `current-major`. - Once me move to `9.3` we should update this once again to `previous-minor`. Related PR: #234187

## Summary - Restructured feedback snippet dirs before making any more changes to this shared component so it matches our current structure - Based on a [suggestion](#234187 (comment)) on this PR #234187 ## Testing - Manually tested that the snippet is displayed correctly

Closes elastic/eui-private#385 ## Summary - Added a feedback snippet to the new side nav (v2) which can take the shape of: - A panel when seen for the first time - A button after any interaction with the panel occurs (dismiss, thumb up or thumb down) - Test it here in a solution specific space: https://angeles-mb-pr-234187-385-implement-side-nav-feedback-snippe.kbndev.co/ - Its goal is to gather user feedback in the form of: - Tracked click events (on this first iteration: EBT out of the box support to record clicks based on id on dismiss, thumb up, thumb down and open survey) - Qualtrics surveys - User interaction is stored in local storage - Feedback panel has 3 views: prompt, positive and negative - Added `confetti` functionality to the positive view from [canvas-confetti](https://www.npmjs.com/package/canvas-confetti) library - Included license notice and ran `node scripts/notice` to update NOTICE.txt - Purpose: adds confetti functionality to meet the design expectations for this component - Justification: ready to use confetti functionality to surprise and congratulate the user - Alternatives explored: this library was recommended by the team and lightweight - Existing dependencies: I didn't find anything similar - **Still TODO**: - Write UTs elastic#234445 ## Visuals Video contains following scenarios: 1. Dismiss panel on 'x' -> feedback button appears -> navigate to survey 2. Click on Thumb Up -> positive view -> feedback button appears -> navigate to survey 3. Click on Thumb Down -> negative view -> navigate away closing secondary menu -> open a secondary menu again -> feedback button appears 4. Click on Thumb Down -> negative view -> navigate to survey https://github.com/user-attachments/assets/8eb43915-71d9-479d-9360-2396a637bae2 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

…#235175) ## Summary - Following security team advice and updating our backport strategy for recently added `canvas-confetti` dependency to `current-major`. - Once me move to `9.3` we should update this once again to `previous-minor`. Related PR: elastic#234187

## Summary - Restructured feedback snippet dirs before making any more changes to this shared component so it matches our current structure - Based on a [suggestion](elastic#234187 (comment)) on this PR elastic#234187 ## Testing - Manually tested that the snippet is displayed correctly

Closes elastic/eui-private#385 ## Summary - Added a feedback snippet to the new side nav (v2) which can take the shape of: - A panel when seen for the first time - A button after any interaction with the panel occurs (dismiss, thumb up or thumb down) - Test it here in a solution specific space: https://angeles-mb-pr-234187-385-implement-side-nav-feedback-snippe.kbndev.co/ - Its goal is to gather user feedback in the form of: - Tracked click events (on this first iteration: EBT out of the box support to record clicks based on id on dismiss, thumb up, thumb down and open survey) - Qualtrics surveys - User interaction is stored in local storage - Feedback panel has 3 views: prompt, positive and negative - Added `confetti` functionality to the positive view from [canvas-confetti](https://www.npmjs.com/package/canvas-confetti) library - Included license notice and ran `node scripts/notice` to update NOTICE.txt - Purpose: adds confetti functionality to meet the design expectations for this component - Justification: ready to use confetti functionality to surprise and congratulate the user - Alternatives explored: this library was recommended by the team and lightweight - Existing dependencies: I didn't find anything similar - **Still TODO**: - Write UTs #234445 ## Visuals Video contains following scenarios: 1. Dismiss panel on 'x' -> feedback button appears -> navigate to survey 2. Click on Thumb Up -> positive view -> feedback button appears -> navigate to survey 3. Click on Thumb Down -> negative view -> navigate away closing secondary menu -> open a secondary menu again -> feedback button appears 4. Click on Thumb Down -> negative view -> navigate to survey https://github.com/user-attachments/assets/8eb43915-71d9-479d-9360-2396a637bae2 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

## Summary - Following security team advice and updating our backport strategy for recently added `canvas-confetti` dependency to `current-major`. - Once me move to `9.3` we should update this once again to `previous-minor`. Related PR: #234187

## Summary - Restructured feedback snippet dirs before making any more changes to this shared component so it matches our current structure - Based on a [suggestion](#234187 (comment)) on this PR #234187 ## Testing - Manually tested that the snippet is displayed correctly

angeles-mb added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting labels Sep 5, 2025

angeles-mb self-assigned this Sep 5, 2025

angeles-mb force-pushed the 385-implement-side-nav-feedback-snippet branch 2 times, most recently from e1ba324 to 336cb57 Compare September 5, 2025 15:13

angeles-mb force-pushed the 385-implement-side-nav-feedback-snippet branch 2 times, most recently from 730a300 to 8cf6631 Compare September 9, 2025 10:35

angeles-mb commented Sep 9, 2025

View reviewed changes

x-pack/solutions/search/test/serverless/functional/test_suites/navigation.ts Show resolved Hide resolved

angeles-mb marked this pull request as ready for review September 9, 2025 13:31

angeles-mb requested review from a team as code owners September 9, 2025 13:31

angeles-mb added the Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// label Sep 9, 2025

TattdCodeMonkey approved these changes Sep 9, 2025

View reviewed changes

ek-so mentioned this pull request Sep 9, 2025

Quick tweaks for the feedback snippet #234499

Closed

Dosant reviewed Sep 10, 2025

View reviewed changes

angeles-mb force-pushed the 385-implement-side-nav-feedback-snippet branch from 8cf6631 to 769477c Compare September 10, 2025 11:06

weronikaolejniczak reviewed Sep 10, 2025

View reviewed changes

angeles-mb force-pushed the 385-implement-side-nav-feedback-snippet branch from 942504a to 3e5cac4 Compare September 11, 2025 13:13

Dosant reviewed Sep 11, 2025

View reviewed changes

src/platform/packages/shared/shared-ux/feedback_snippet/impl/src/feedback_snippet.tsx Outdated Show resolved Hide resolved

angeles-mb force-pushed the 385-implement-side-nav-feedback-snippet branch from 1e3e656 to 33d7704 Compare September 11, 2025 13:46

jeramysoucy requested changes Sep 11, 2025

View reviewed changes

Dosant reviewed Sep 12, 2025

View reviewed changes

src/platform/packages/shared/shared-ux/feedback_snippet/impl/src/confetti.tsx Outdated Show resolved Hide resolved

angeles-mb force-pushed the 385-implement-side-nav-feedback-snippet branch from ed67a21 to bce5b47 Compare September 12, 2025 10:16

weronikaolejniczak reviewed Sep 12, 2025

View reviewed changes

src/core/packages/chrome/navigation/src/components/side_nav/panel.tsx Outdated Show resolved Hide resolved

angeles-mb added 9 commits September 15, 2025 10:26

Remove extra line

ae47b4c

Use lazy load for Confetti Component

975645c

Prepare feedbackCallout test utilities for side nav v2 and reenable s…

83c6cc3

…earch feedback test

Extract feedback snippet to shared components folder and remove navig…

e4b8419

…ation solutionId prop

Unify feedbackPanelLocalStorageKey and feedbackSnippetId into one sin…

f587dcf

…gle prop

Update confetti.tsx license header

eddf696

Update NOTICE.txt

a47b2b8

Rename SideNav.Panel sidePanelFooter prop

cc1cdf9

Remove unused constants

70665a8

angeles-mb force-pushed the 385-implement-side-nav-feedback-snippet branch from b68df9b to 70665a8 Compare September 15, 2025 08:34

Dosant approved these changes Sep 15, 2025

View reviewed changes

jeramysoucy reviewed Sep 15, 2025

View reviewed changes

renovate.json Outdated Show resolved Hide resolved

Skip backports for new confetti dependency

8cb28e1

angeles-mb force-pushed the 385-implement-side-nav-feedback-snippet branch from fe6e4c4 to 8cb28e1 Compare September 15, 2025 13:03

jeramysoucy approved these changes Sep 15, 2025

View reviewed changes

[CI] Auto-commit changed files from 'node scripts/yarn_deduplicate'

0b7538f

angeles-mb merged commit b9f6970 into elastic:main Sep 16, 2025
13 checks passed

kibanamachine added the v9.2.0 label Sep 16, 2025

This was referenced Sep 16, 2025

[SharedUX] Restructure feedback snippet dirs #235171

Merged

[SharedUX] Update canvas-confetti renovate backport strategy #235175

Merged

angeles-mb mentioned this pull request Sep 19, 2025

Make navigation feedback snippet a shared component #234353

Closed

Conversation

angeles-mb commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Visuals

Uh oh!

angeles-mb commented Sep 5, 2025

Uh oh!

angeles-mb commented Sep 9, 2025

Uh oh!

Uh oh!

kibanamachine commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Self Checklist

Uh oh!

elasticmachine commented Sep 9, 2025

Uh oh!

TattdCodeMonkey left a comment

Choose a reason for hiding this comment

Uh oh!

Dosant Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

jeramysoucy Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jeramysoucy Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Dosant Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

angeles-mb Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Sep 15, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

async chunk count

ESLint disabled line counts

Total ESLint disabled count

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

angeles-mb commented Sep 5, 2025 •

edited

Loading

kibanamachine commented Sep 9, 2025 •

edited

Loading

jeramysoucy Sep 11, 2025 •

edited

Loading

jeramysoucy Sep 11, 2025 •

edited

Loading