### Problem to solve <!-- What problem do we solve? --> Review Apps are a great feature but could be made more powerful and easier if there was a quick way to add feedback to the MR while looking at the review app itself, especially if metadata (such as a screenshot, what the user was looking at, etc.) could be collected. In other words, review apps currently don't allow you to send feedback without a context switch. Also, sending along other often required information such as system/browser specific information is currently a non-automated process introducing unneeded friction, thus creating lower quality feedback the majority of the time. ### Intended users <!-- Who will use this feature? If known, include any of the following: types of users (e.g. Developer), personas, or specific company roles (e.g. Release Manager). It's okay to write "Unknown" and fill this field in later. Personas can be found at https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/ --> - [Parker, Product Manager](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#parker-product-manager) - [Presley, Product Designer](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#presley-product-designer) ### Further details <!-- Include use cases, benefits, and/or goals (contributes to our vision?) --> As the first step towards our Visual Review Tools vision (https://gitlab.com/groups/gitlab-org/-/epics/960), this will be a minimal MVC implementation. This will contribute directly to our vision for adding ~"usability testing" testing as part of our ~"Product Vision 2019" ### Proposal <!-- How are we going to solve the problem? Try to include the user journey! https://about.gitlab.com/handbook/journeys/#user-journey --> * Add a "toolbar" to a review app that allows the user to "initiate" this review * When the user initiates a review, collect a minimal amount of metadata about the environment * Allow the user to enter additional text comments * Combine the metadata and text comments and start a discussion on the MR that was the source of this review app ### Solution #### User stories | # | User Story | Persona | Scope | | ------ | ------ | ------ | ------- | | 1 | As a functional/quality reviewer, I want to be able to create usability/visual feedback right within the testing environment without a complete context switch | ~"Persona: Product Manager" ~"Persona: Product Manager" ~"Persona: Software developer" | Current | | 2 | As a functional/quality reviewer, I want to know what information is sent when giving feedback | General user | Current | ##### Technical user stories | # | User Story | Scope | | ------ | ------ | ------ | | 1 | As a developer, I want to keep the scope to a minimum as this is an mvp implementation | Current | | 2 | As a developer, I want to keep styling to a minimum as we are avoiding having users load external libs, so we don't have our usual components available — just raw CSS | Current | | 3 | As a designer, I want to have any functionality from GitLab in an external environment such as a review app to be recognizable in order to make the context switch to be logical and expected | Current | #### Acceptance criteria ##### Feedback information flow 1. Information gets sent by user within review app, user stays within review app context 2. Inside related merge request a new subdiscussion gets created, the author is the current GitLab user 3. Comment inside subdiscussion gets created 1. Feedback text posted 3. Browser/error information (potentially within `<details>` to make it shorter 4. Inside review app widget will be collapsible to smaller version as to not obstruct content 5. Widget will translate success and errors to the user 6. We will operate with a personal access token for now 7. User is able to make the PAT submitted to be peristent or to be forgotten 8. Merge request will include instructions to activate this functionality Out of scope 6. Screenshots are currently not part of the scope 7. The widget is currently not draggable #### Designs ##### Specs [SPECS :gem:](https://gitlab-org.gitlab.io/gitlab-design/hosted/dimitrie/ee10761-review-app-feedback-spec-previews) ##### Positioning   ##### Merge request widget   ##### Insie review app widget  ### Permissions and Security <!-- What permissions are required to perform the described actions? Are they consistent with the existing permissions as documented for users, groups, and projects as appropriate? Is the proposed behavior consistent between the UI, API, and other access methods (e.g. email replies)? --> This issue does not impact our current permission model - users that can create discussions will be able to create these types of discussions ### Documentation <!-- See the Feature Change Documentation Workflow https://docs.gitlab.com/ee/development/documentation/feature-change-workflow.html Add all known Documentation Requirements here, per https://docs.gitlab.com/ee/development/documentation/feature-change-workflow.html#documentation-requirements --> ### Testing <!-- What risks does this change pose? How might it affect the quality of the product? What additional test coverage or changes to tests will be needed? Will it require cross-browser testing? See the test engineering process for further guidelines: https://about.gitlab.com/handbook/engineering/quality/guidelines/test-engineering/ --> ### What does success look like, and how can we measure that? <!-- Define both the success metrics and acceptance criteria. Note that success metrics indicate the desired business outcomes, while acceptance criteria indicate when the solution is working correctly. If there is no way to measure success, link to an issue that will implement a way to measure this. --> ### To do / expected MRs * [x] Create small test app outside Gitlab to test on * [ ] Develop vanilla JS script for unstyled component with hard-coded MR posting & functional OAuth *WIP MR: gitlab-ce!27518* * [ ] Dynamic version with comment box only * [ ] Add script generation to MR widget for users to copy and paste * [ ] Version with toggleable comment box, tooltips * [ ] Version with intro text popup (may be wrapped into above) * [ ] Toolbar drag and drop functionality * [ ] Version with anchor-able comments (tied to a section of the page) * [ ] Version with screenshots ### Competitive landscape [__Google products feedback functionality__](https://www.google.com/tools/feedback/intl/en/) Offers functionality through a submenu item, which summons a feedback modal. Includes option to send along a screenshot by default. Allows for area highlighting and censoring, and adds in legal information due to personal information potentially being made more accessible to a wider public (those who review feedback sent). <details> <summary>Google products feedback functionality example</summary> | Deliver feedback modal | After highlighting and obscuring areas | | ------ | ------ | |  |  | </details> <br> [__Project VisBug - FireBug for designers › Makes any webpage feel like an artboard via a little extension__](https://github.com/GoogleChromeLabs/ProjectVisBug) Chrome plugin which makes it easy to play around directly with the visuals of the current page. Not perse feedback sending mechanism, but a good tool to compare with how it would look/be structured otherwise. [__Flawless feedback - macOS tool to leave comments on the iOS app faster. No more making dozens of screenshots__](https://flawlessapp.io/feedback) MacOs tool which makes it possible to leave feedback right within the context of using the mobile app on the desktop. You can make screenshots directly and annotate them. Feedback can then be shared and sent with a simple link to any application. [__Saber - Get quality website feedback from your users__](https://www.saberfeedback.com/) Functionality to receive feedback which can be included into any website due to including a script or as a plugin for known CMS's like WordPress. Supports majority of old and new browsers. The feedback mechanism can be customized to meet customer needs. Also captures the vital information that users may not know, including browser & operating system, browser plugins, and any JavaScript errors that occurred. Feedback sharing options can be integrated with existing tools like slack, Jira, etc. Includes the option to add in questionnaires and screenshots (with highlighting support). Feedback mechanism can be shown to a subset of users depending on data used as input. [__UX Check__](https://chrome.google.com/webstore/detail/ux-check/giekhiebdpmljgchjojblnekkcgpdobp) UX Check makes heuristic evaluations quick and easy. The extension will open up Nielsen's Ten Heuristics in a side pane next to your website. When you click on an element that doesn't comply with a heuristic, you can add notes, and a screenshot will be saved. At the end, you can export everything to a docx so that you can share them with your team. ### What is the type of buyer? <!-- Which leads to: in which enterprise tier should this feature go? See https://about.gitlab.com/handbook/product/pricing/#four-tiers --> ~"GitLab Starter" ### Links / references - Tester apps are at [https://review-app-test.sarahghp.now.sh/](https://review-app-test.sarahghp.now.sh/) & [https://sarahghp.gitlab.io/review-app-tester/](https://sarahghp.gitlab.io/review-app-tester/). - Script development is taking place at [https://gitlab.com/sarahghp/test-review-deploy-mirror](https://gitlab.com/sarahghp/test-review-deploy-mirror), which deploys to [https://host-island.sarahghp.now.sh](https://host-island.sarahghp.now.sh), just so I can reproduce pulling from a CDN and iterate quickly. <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION --> *This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.* <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION -->