Make navigation feedback snippet a shared component

[alexmarhaba]

Metrics team would like to re-use the navigation feedback snippet made by @angeles-mb.

They would like to be able to customize:

• The question being asked: "How's Metrics working for you?"
• The feedback link that shows after submitting feedback.
• Its location

Figma explorations by Christian
https://www.figma.com/design/ckMpNPip65TUTd5HG6cFpp/Observability-Metrics-2025?node-id=2234-88436&t=lTyGyljAE7cmQAm1-4

Of the two options proposed, I think V2: A floating widget in the bottom-left corner may be better suited. V1 requires an intercept logic which we currently don't support.

cc @miguel-sanchez-elastic

[elasticmachine]

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

[miguel-sanchez-elastic]

As discussed today with @alexmarhaba we will try to just reuse the existing feedback link in the ES|QL bar.

The rational is that we would like to avoid adding more things asking for feedback as of now. We might revisit this in the future.

[angeles-mb]

We decided to tackle this as part of this quarter current SideNav Epic.

Component summary:
A snippet to gather user feedback. It initially renders as a panel, and once interacted with, it becomes a persistent button. It manages its own state (panel vs. button) based on user interaction tracked in localStorage.

Component visuals:

Implementation details:

• Package was generated using node scripts/generate script
• Component was added to our Storybook and contains a README file
• Current UI matches SideNav-specific design with customizable:
  • Feedback Panel: Prompt view message
  • Feedback Button: message
  • Survey/Redirection URL
  • Id for EBT tracking purposes (attached to thumb up, thumb down, close button and CTA button)
• Feedback Snippet main implementation PR [Shared UX] Implement side nav v2 feedback snippet #234187

Related PRD here.
Related Figma here.

[alexmarhaba]

Thank you @angeles-mb ! This looks great.
One question - is the id related to thumbs up/down customizable? If it's implemented in different place in the application, can we make sure we can differentiate between where the feedback was provided?

[angeles-mb]

Yes, it is customizable, that's what I meant here:

Id for EBT tracking purposes (attached to thumb up, thumb down, close button and CTA button)

Is that what you had in mind?

[alexmarhaba]

Yes, thank you. I wanted to double check since it was not mentioned in the PRD.

[angeles-mb]

Update:

• Component's documentation is now available on docs.elastic.dev under SharedUX TOC
• Component has a full set of unit and snapshot tests [SharedUX] Add unit tests for the feedback snippet component #235943

Without any other current requirements I think we can close this for now, @alexmarhaba do you agree?

[alexmarhaba]

Without any other current requirements I think we can close this for now, @alexmarhaba do you agree?

Sorry for the late response, yes agreed

[petrklapka]

Project complete.