Feature/feedback form

[Huongg]

Description

fixes #2082

Build a feedback component so user can share their experience with us

Development notes

This is currently only applying to slicing pipeline, and the plan in the future to improve this component further so we can re-use wherever needed in kedro-viz

Screen.Recording.2024-09-16.at.16.37.19.mov

The current flow is:

1. Initial Interaction (First-Time Use):

• The feedback pop-up form only appears after the user clicks the Reset Slice button.
• This behavior indicates that the user has completed their interaction with the slicing feature and is preparing to exit.
• While in slicing mode, a blue feedback button is always present to give the user an option to submit feedback after interacting with the feature.

2. Second-Time Use Onward:

• After the initial interaction, the feedback pop-up form will no longer appear automatically.
• The feedback button will continue to be present only in slicing mode (after the user clicks the Slice button).
• Users can manually submit feedback or dismiss it as needed without further interruptions.

Latest (now finalised) designs for individual feedback component can be found here! https://www.figma.com/design/3kSpvIO1veLKfy9qHxuXwF/Kedro-WIP?node-id=2677-3958&t=pfQ1nOt1kgateDjP-4

QA notes

QA steps:

• clear your localStorage
• click on 2 elements on the page
• select Slice button. Nothing should show at all
• click on reset button, the feedback form should show up.
  1. If you submit the feedback, "'Thank you for sharing feedback!" should appear and data should be sent to the heap development environment. Navigate to the heap dash board in the DEVELOPMENT environment. Data should be shown in the live data session as below

• And data will be reflected on the dashboard called "Kedro-viz - Slicing Pipeline Adoption"

3. If you dismiss the feedback, "You can provide feedback any time by using the feedback button in the sliced view." should show

• If you now re-enter the slicing view by selecting on 2 elements and click SLICE button, the feedback button will appear on the right hand side
• when you reset the slicing view this time, there is no more popup Feedback shown up in the page

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[rashidakanchwala]

Look's great. and thanks for doing this in such a quick time.

Code and functionality wise it works fine hence I am approving. Design wise I am not so sure, so would like @stephkaiser to have a look and comment.

I found the 'Thank you for submitting' font size a bit small.

[jitu5]

@Huongg @rashidakanchwala
I tested it locally, and after submitting the form, I can still see the feedback button. Is this expected? Should we hide the feedback button after the user submits it?

[rashidakanchwala]

Good point, @jitu5. I see it too! – also if I refresh and do slicing again, it reappears. I wonder if there's a way to track whether a user has already provided feedback and then disable the button. However, that might add complexity and cause delays. I agree with Jitendra; for now, if we can just hide the button after the feedback is given.

[Huongg]

hey @rashidakanchwala @jitu5 i think for this version we will just show the feedback button every time. As if we need to hide after the user reviews it, it'll require extra time and we want to build something quick so users can give us the feedback. Of course when we release the slicing there are more time we can improve other points.

I just have a feeling if we hide the button, what happens if they want to give us another feedback after their first use?

[stephkaiser]

Latest (now finalised) designs for individual feedback component can be found here! https://www.figma.com/design/3kSpvIO1veLKfy9qHxuXwF/Kedro-WIP?node-id=2677-3958&t=pfQ1nOt1kgateDjP-4

[Huongg]

Looks like it works! The only surprising thing is that it allowed me to submit feedback twice. I think it's fine to show the little box right after clicking "slicing", because it's very subtle. But I defer to @stephkaiser on that. Maybe there could be a time-based trigger, or wait until the "reset slice" (or any other action) is done.

hey @astrojuanlu sorry for the confusion, we discussed the new flow with @stephkaiser, I've now updated the correct flow in the description and feel free to check again whenever you have the time, let us know if the flow makes sense now. 😄

[rashidakanchwala]

Look's great to me. thanks @Huongg

[stephkaiser]

Thanks Huong! we are so close! some very minor comments, if they take long to fix please feel free to skip them:

1. Could we include the label under the emojis when the mouse hovers over them? so people know what that emoji means

2. The text inside the input field should be Inter regular size 14, looks like a different font currently. When user adds text inside the input field it should be black and left-aligned.

3. Could we include the hover state for the submit button like our primary button component?

[astrojuanlu]

Other than @stephkaiser's comments, LGTM!

[Huongg]

Thanks Huong! we are so close! some very minor comments, if they take long to fix please feel free to skip them:

1. Could we include the label under the emojis when the mouse hovers over them? so people know what that emoji means

2. The text inside the input field should be Inter regular size 14, looks like a different font currently. When user adds text inside the input field it should be black and left-aligned. 3. Could we include the hover state for the submit button like our primary button component?

hey @stephkaiser thank you for reviewing. Let me update point 2 and 3 quickly. Just want to check for point 1, if we apply hover state, it potentially will look like this with text overlaps each other if it already shows the selected icon. There's just not enough space between 2 texts

[stephkaiser]

@Huongg okay, in the interest of time lets ignore point 1 for now 👍

[Huongg]

@stephkaiser sounds good, I've now pushed changes to address point 2 and 3. If you're happy with them please approve the PR when you have the chance plesae

[ravi-kumar-pilla]

Looks good and works well !! Thank you @Huongg 💯