Merge branch '9424-add-related-issues-documentation' into 'master'

Add vulnerability related issues documentation

See merge request gitlab-org/gitlab!36940

doc/user/application_security/index.md

@@ -243,6 +243,36 @@ Click this button to create a merge request to apply the solution onto the sourc
 
 ![Create merge request from vulnerability](img/create_issue_with_list_hover.png)
 
+### Managing related issues for a vulnerability
+
+Issues can be linked to a vulnerability using the related issues block on the vulnerability page.
+The relationship is uni-directional. The vulnerability page shows related issues, but the issue page
+doesn't show the vulnerability it's related to. An issue can only be related to one vulnerability at
+a time. Issues can be linked across groups and projects.
+
+#### Adding a related issue
+
+You can link an issue by clicking the **{plus}** button in the **Related Issues** block.
+
+![Vulnerability related issues add button](img/vulnerability_related_issues_add_button_v13_2.png)
+
+A text box appears that lets you type an issue number or paste an issue link. You can enter multiple
+issues at once. Pressing the space bar after each issue number or link converts them to tags that
+you can remove by clicking the **{close}** icon to the tag's right. Typing `#` followed by a number
+shows an autocomplete menu. Click an issue in the menu to add it as a tag. When you're finished
+entering issues, click the **Add** button to link the issues to the vulnerability. Alternatively,
+click **Cancel** to exit without linking any issues.
+
+![Vulnerability related issues text box tags animation](img/vulnerability_related_issues_text_box_tags_v13_2.gif)
+
+### Removing a related issue
+
+Click the **{close}** icon to right of an issue to remove it as a related issue. Note that this only
+removes it as a related issue of the vulnerability; it doesn't modify or remove the issue itself.
+You can link it to the vulnerability again if desired.
+
+![Vulnerability related issues remove issue animation](img/vulnerability_related_issues_remove_v13_2.gif)
+
 ## Security approvals in merge requests
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/9928) in [GitLab Ultimate](https://about.gitlab.com/pricing/) 12.2.

ee/app/assets/javascripts/pages/projects/security/vulnerabilities/show/index.js

@@ -51,6 +51,7 @@ function createFooterApp() {
     solution,
     id,
     canModifyRelatedIssues,
+    relatedIssuesHelpPath,
   } = convertObjectPropsToCamelCase(JSON.parse(el.dataset.vulnerability));
 
   const remediation = remediations?.length ? remediations[0] : null;
@@ -79,6 +80,7 @@ function createFooterApp() {
       url: project.full_path,
       value: project.full_name,
     },
+    relatedIssuesHelpPath,
   };
 
   return new Vue({

ee/app/assets/javascripts/vulnerabilities/components/footer.vue

@@ -51,6 +51,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    relatedIssuesHelpPath: {
+      type: String,
+      required: true,
+    },
   },
 
   data: () => ({
@@ -211,6 +215,7 @@ export default {
       :endpoint="issueLinksEndpoint"
       :can-modify-related-issues="canModifyRelatedIssues"
       :project-path="project.url"
+      :help-path="relatedIssuesHelpPath"
     />
 
     <hr />

ee/app/helpers/vulnerabilities_helper.rb

@@ -16,6 +16,7 @@ module VulnerabilitiesHelper
       discussions_url: discussions_project_security_vulnerability_path(vulnerability.project, vulnerability),
       notes_url: project_security_vulnerability_notes_path(vulnerability.project, vulnerability),
       vulnerability_feedback_help_path: help_page_path('user/application_security/index', anchor: 'interacting-with-the-vulnerabilities'),
+      related_issues_help_path: help_page_path('user/application_security/index', anchor: 'managing-related-issues-for-a-vulnerability'),
       pipeline: vulnerability_pipeline_data(pipeline),
       can_modify_related_issues: current_user.can?(:admin_vulnerability_issue_link, vulnerability)
     }

ee/spec/frontend/vulnerabilities/footer_spec.js

@@ -39,6 +39,7 @@ describe('Vulnerability Footer', () => {
     },
     vulnerabilityId: 1,
     canModifyRelatedIssues: true,
+    relatedIssuesHelpPath: 'help/path',
   };
 
   const solutionInfoProp = {
@@ -259,6 +260,7 @@ describe('Vulnerability Footer', () => {
         endpoint,
         canModifyRelatedIssues: minimumProps.canModifyRelatedIssues,
         projectPath: minimumProps.project.url,
+        helpPath: minimumProps.relatedIssuesHelpPath,
       });
     });
   });

ee/spec/helpers/vulnerabilities_helper_spec.rb

@@ -64,6 +64,7 @@ RSpec.describe VulnerabilitiesHelper do
         discussions_url: "/#{project.full_path}/-/security/vulnerabilities/#{vulnerability.id}/discussions",
         notes_url: "/#{project.full_path}/-/security/vulnerabilities/#{vulnerability.id}/notes",
         vulnerability_feedback_help_path: kind_of(String),
+        related_issues_help_path: kind_of(String),
         pipeline: anything,
         can_modify_related_issues: false
       )