Improve MR Experience for Secure Scans on Non-Ultimate Plans [PARENT]
### Problem to solve Today, non-Ultimate users can use SAST and Secret Detection, however the experience is very suboptimal. We should make it easy to see there are vulnerabilities and direct them to the Secure Artifacts. **Experience Today** | Existing UI (non-ultimate) | Problems | | ------ | ------ | | ![Screen_Shot_2020-08-28_at_1.12.23_PM](/uploads/a44cc4ac2878c5aa6025fa49b943bdc1/Screen_Shot_2020-08-28_at_1.12.23_PM.png) | Makes it appear like the security scans were successful and found no issues, however, that's far from the case, the green just indicates that the security jobs ran successfully. Ther are actually vulns in these security reports. The yellow on the nodejsscan is actually a scan failure so it didn't run | <!-- What problem do we solve? Try to define the who/what/why of the opportunity as a user story. For example, "As a (who), I want (what), so I can (why/value)." --> ### Intended users - [Sasha (Software Developer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sasha-software-developer) <!-- 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 are described at https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/ * [Cameron (Compliance Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#cameron-compliance-manager) * [Parker (Product Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#parker-product-manager) * [Delaney (Development Team Lead)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#delaney-development-team-lead) * [Presley (Product Designer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#presley-product-designer) * [Sasha (Software Developer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sasha-software-developer) * [Devon (DevOps Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#devon-devops-engineer) * [Sidney (Systems Administrator)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sidney-systems-administrator) * [Sam (Security Analyst)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sam-security-analyst) * [Rachel (Release Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#rachel-release-manager) * [Alex (Security Operations Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#alex-security-operations-engineer) * [Simone (Software Engineer in Test)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#simone-software-engineer-in-test) * [Allison (Application Ops)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#allison-application-ops) * [Priyanka (Platform Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#priyanka-platform-engineer) * [Dana (Data Analyst)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#dana-data-analyst) --> ### User experience goal - Make it clear there are vulnerabilities while not giving away all the Ultimate features <!-- What is the single user experience workflow this problem addresses? For example, "The user should be able to use the UI/API/.gitlab-ci.yml with GitLab to <perform a specific task>" https://about.gitlab.com/handbook/engineering/ux/ux-research-training/user-story-mapping/ --> ### Proposal - Show colorized vulnerability numbers - Directly link to the pipeline artifacts - `Learn more` link in popover goes to [Security & Compliance page for core users](https://gitlab.com/gitlab-org/gitlab/-/issues/241377) | MVC (this issue) | Post-MVC (future implementation; adds an "Download all artifacts" option) | | ------ | ------ | | ![image](/uploads/2b0d99386d74a07fff65507931a10a9d/image.png) | ![image](/uploads/5a4d6142e735f756d63242ec4dc5716a/image.png) | --- ### Implementation #### Proposal 1 - Minimal Security row + artifact download ##### Adding artifact downloads dropdown with generic security row 1. [Create CE Security MR widget](https://gitlab.com/gitlab-org/gitlab/-/issues/249543) 1. [Add artifact download dropdown](https://gitlab.com/gitlab-org/gitlab/-/issues/249544) (blocked by https://gitlab.com/gitlab-org/gitlab/-/issues/251015) 1. [Remove feature flag](https://gitlab.com/gitlab-org/gitlab/-/issues/249550) #### Proposal 2 - Security Row with SAST vuln count only + artifact download ##### Getting Security row into CE Merge request | Tasks # | Description | ~frontend issue | ~frontend weight | | ----------- | -------------------------------------------------------------- | ---------------------------------------------------- | ---------------------- | | 1 | Port EE Security Report State for SAST only to a CE Vuex Module | https://gitlab.com/gitlab-org/gitlab/-/issues/249530 | ~"frontend-weight::2" | | 2 | Port EE Security Report Getters for SAST only to a CE Vuex Module | https://gitlab.com/gitlab-org/gitlab/-/issues/249531 | ~"frontend-weight::2" | | 3 | Port EE Security Report Mutation Types for SAST only to a CE Vuex Module | https://gitlab.com/gitlab-org/gitlab/-/issues/249532 | ~"frontend-weight::2" | |4 | Port EE Security Report Mutations for SAST only to a CE Vuex Module | https://gitlab.com/gitlab-org/gitlab/-/issues/249533 | ~"frontend-weight::2" | | 5 | Port Security Report Actions for SAST only to a CE Vuex Module | https://gitlab.com/gitlab-org/gitlab/-/issues/249534 | ~"frontend-weight::3" | | 6 | Port security_summary.vue for SAST to CE | https://gitlab.com/gitlab-org/gitlab/-/issues/249536 | ~"frontend-weight::2" | | 7 | Create feature flag and render CE version of grouped_security_reports_app.vue | https://gitlab.com/gitlab-org/gitlab/-/issues/249538 | ~"frontend-weight::3" | ##### Adding artifact downloads dropdown | Tasks # | Description | ~frontend issue | ~frontend weight | | ----------- | -------------------------------------------------------------- | ---------------------------------------------------- | ---------------------- | | 1 | Create Store fields in Vuex CE security reports module for download artifacts array, and 2 api paths. One for list of jobs, another for generating the artifact file download | https://gitlab.com/gitlab-org/gitlab/-/issues/249541 | ~"frontend-weight::1" | | 2 | Pass API endpoint Paths from Controller to Vuex module store | https://gitlab.com/gitlab-org/gitlab/-/issues/249543 | ~"frontend-weight::2" | | 3 | Trigger artifact list fetch, and parse results | https://gitlab.com/gitlab-org/gitlab/-/issues/249544 | ~"frontend-weight::2" | | 4 | Create artifacts download dropdown component | https://gitlab.com/gitlab-org/gitlab/-/issues/249546 | ~"frontend-weight::2" | | 5 | Render artifacts download component behind feature flag. | https://gitlab.com/gitlab-org/gitlab/-/issues/249547 | ~"frontend-weight::2" | | 6 | Update Docs | https://gitlab.com/gitlab-org/gitlab/-/issues/249548 | ~"frontend-weight::2" | | 7 | Enable feature flag | https://gitlab.com/gitlab-org/gitlab/-/issues/249549 | ~"frontend-weight::1" | | 8 | Remove feature flag | https://gitlab.com/gitlab-org/gitlab/-/issues/249550 | ~"frontend-weight::2" | ### Differences between proposals Proposal 1 is a simpler implementation because in order for us to get Vuln counts we need to re-implement the functionality we find in EE, we can't import EE code into CE. Ideally, we would move the common code into CE, and consume it in EE, but this extra refactor may be overkill since we are moving a lot of the MR widgets to it's own tab in the future. (So I've been told) With proposal 1, we skip vuln counts, and render a generic row with some text IF we have SAST download artifacts. Proposal 2 would cover the work needed to add Vuln counts + artifact download. <!-- How are we going to solve the problem? Try to include the user journey! https://about.gitlab.com/handbook/journeys/#user-journey --> --- ### Further details <!-- Include use cases, benefits, goals, or any other details that will help us understand the problem better. --> ### Permissions and Security These changes would ONLY apply to Core, Bronze, Silver users. The ultimate MR security widget would remain the same for Ultimate users and need to still have the correct security checks. This change simply provides a portion the Ultimate UI for non-ultimate users. ### Documentation - Update the [interacting with vulnerabilities section](https://docs.gitlab.com/ee/user/application_security/#interacting-with-the-vulnerabilities) with a new area describing the job artifacts download in MRs. <!-- See the Feature Change Documentation Workflow https://docs.gitlab.com/ee/development/documentation/workflow.html#for-a-product-change * Add all known Documentation Requirements in this section. See https://docs.gitlab.com/ee/development/documentation/feature-change-workflow.html#documentation-requirements * If this feature requires changing permissions, update the permissions document. See https://docs.gitlab.com/ee/user/permissions.html --> ### Release notes <!-- What is the problem and solution you're proposing? This content sets the overall vision for the feature and serves as the release notes that will populate in various places, including the [release post blog](https://about.gitlab.com/releases/categories/releases/) and [Gitlab project releases](https://gitlab.com/gitlab-org/gitlab/-/releases). " --> We have improved the experience for all GitLab users [interacting with Secure scan results](https://docs.gitlab.com/ee/user/application_security/#interacting-with-the-vulnerabilities) in a merge request making it easier for anyone to access [Secure scanning findings](https://docs.gitlab.com/ee/user/application_security/#security-scanning-tools). Security scan results previously were only accessible on the [Pipeline Overview page](https://docs.gitlab.com/ee/ci/pipelines/job_artifacts.html#downloading-artifacts). Now secure scan vulnerabilities will be shown directly on the merge request with easy access to download the secure job artifacts. ![image](/uploads/b5a363decfb6428219c9d444de4f5093/image.png) ### Links - Minimal Release post - Phase 1 - https://gitlab.com/gitlab-com/www-gitlab-com/-/merge_requests/64768 - Additional release post (not merged): https://gitlab.com/gitlab-com/www-gitlab-com/-/merge_requests/74055 ### What does success look like, and how can we measure that? Any GitLab user can successfully access SAST or Secret Detection results directly in the MR. This will lead to increased usage and greater visibility of Security reports available in Core. <!-- 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. --> ### Feature flags - ~~[`core_security_mr_widget`](https://gitlab.com/gitlab-org/gitlab/blob/b18984dc57a26610aa560240e8cb5d9540708c10/config/feature_flags/development/core_security_mr_widget.yml)~~ - ~~Determines whether to show the basic security MR widget at all.~~ - Removed: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/53066 - [`core_security_mr_widget_counts`](https://gitlab.com/gitlab-org/gitlab/blob/master/config/feature_flags/development/core_security_mr_widget_counts.yml) - Determines whether to show vulnerability counts on the based security MR widget. Disabled and blocked by https://gitlab.com/gitlab-org/gitlab/-/issues/284689. - Status: see https://gitlab.com/gitlab-org/gitlab/-/issues/284097 - ~~[`core_security_mr_widget_downloads`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/config/feature_flags/development/core_security_mr_widget_downloads.yml)~~ - Determines whether to show the artifact download dropdown on the basic security MR widget. Not yet implemented, but blocked by https://gitlab.com/gitlab-org/gitlab/-/issues/251015. - Removed: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/51639 ##
epic