[Epic] User Feedback Annotations

[c298lee]

The goal of the project is to close a large feature request, sentry users want to allow their customers to create an mark-up screen shots to better illustrate their feedback problems.

Basically, we want to solve for the cases in getsentry/sentry-javascript#9460

Design File

Hackweek example: getsentry/sentry-javascript#11175

Annotations

• [UF - Screenshots] Allow rectangle marked as 'screenshotted element' to be draggable sentry-javascript#11166
• Create a free-form pen drawing tool so users can annotate their screenshots sentry-javascript#15064
• [User Feedback] Make the annotation toolbar align with designs sentry-javascript#15252
• Refactor & add tests
• [User Feedback] Create a dropdown to select a color to use when drawing the next line/shape sentry-javascript#15117
• [User Feedback] Create a dropdown to select a different line thickness to use when drawing the next line/shape sentry-javascript#15118
• [User Feedback] Support touch events when free-form drawing mode is enabled, to support phone users. sentry-javascript#15115
• [User Feedback] Hide crop handles when drawing mode is enabled sentry-javascript#15116
• Allow manual screenshot upload in User Feedback widget sentry-javascript#12938
• Create a button to 'reset' the screenshot image area #84521

Not doing

• Discuss/implement a 'select' mode where existing annotations (shapes, text, freeforms) can be re-selected, so that colors and position can be adjusted.
• Implement an undo/redo stack AND/OR a 'reset' button to remove some/all annotations

[getsantry]

Routing to @getsentry/product-owners-user-feedback for triage ⏲️

[ryan953]

closing, duplicate of #63749

[ryan953]

Re-opened! The other one, #63749 is more about the previous round of basic Screenshot features.

This will be geared towards the renewed effort of annotating/drawing on top of those screenshots.

[c298lee]

Proposal:
We won't be implementing undo, redo, selection, eraser etc because it would require rearchitecting all the current cropping and pen tool annotation work, and would take quite a bit of effort to do.

Our user feedback widget is a way to allow people to easily give feedback and highlight their issue. Creating an image editor tool will have diminishing returns.

Instead, I propose just creating a reset button that resets the image to the original uncropped and unannotated screenshot, in place a full undo/eraser situation. A simple pen tool with the ability to change the pen colour and line width should be sufficient to highlight things on the screenshot as well as block out any PII, and should be sufficient for most cases.

For people who want to be more creative with their feedback, we will add functionality to allow people to add their own attachments to their feedback. This way, if a user wants to add some complicated annotations and visuals to explain their feedback, they can use their own image editing tools and add it as an attachment. Additionally, this feature has been requested by several customers too. To reduce the scope further, we'll start with what was described above, and keep the upload for later.

[c298lee]

We decided to pivot to a new direction: highlight and hide boxes. This will be released on a beta branch and tested out internally before GA