FE: Create status filtering

Why are we doing this work

• customers want to be able to choose which vulnerabilities they get notified by filtering for status

Relevant links

• Designs in epic

Implementation plan

MR 1

• frontend create new folder for filtering components (https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/rule_filters)
  • there will be many filters, so it would be nice to organize them together in their own directory
• frontend create generic filter component to be reused for each filter
  • looking at these designs(1, 2), it looks like all the filters have several aspects in common:
    • title (e.g. Severity is, Status is, Age is, Attribute, License Type, etcetera)
    • configuration (e.g. all the dropdowns and random text after the title)
    • removal button (trash icon) (can be handled in the issue where the add button is added)
    • Or/And dropdown when a user decides to add another status (being handled in a later issue)
  • create a sloted component that handles the customization of title and configuration
• frontend create security scan status filter
  • title: Status is:
  • description: Two dropdowns
    • They currently mostly exist as one dropdown in the main block (security_scan_rule_builder.vue#L122), so just move that out of the general block and split it into two, modifying the vulnerability_states yaml value
    • First dropdown has two options: New and Previously Existing
    • Second dropdown has all the other (e.g Needs triage (not currently supported by backend), Confirmed, Dismissed, Resolved)
    • Options for status selector when New is selected in the vulnerability state selector: Needs Triage and Dismissed
    • Options for status selector when Previously Existing is selected in the vulnerability state selector: Needs Triage, Confirmed, Dismissed, and Resolved (this matches the options in the dropdown on the Vulnerability Report page) /-/blob/master/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/license_scan_rule_builder.vue)
• frontend it is conditionally shown
  • when no scanner is chosen, it is hidden
  • when license scan is chosen, it is hidden
  • when scanner scan is chosen, it is shown
• frontend ensure the dropdwons are set to the correct values when the values are changed in yaml mode
• frontend ensure rule mode is disabled if incorrect values are added in yaml mode
• frontend ensure the dropdowns are set to the correct values for pre-existing policies

MR 2

• frontend create security license scan status filter
  • title: Status is:
  • description: Use the existing dropdown in license_scan_rule_builder.vue
• frontend it is conditionally shown
  • when no scanner is chosen, it is hidden
  • when license scan is chosen, it is shown
  • when scanner scan is chosen, it is hidden
• frontend ensure the dropdwons are set to the correct values when the values are changed in yaml mode
• frontend ensure rule mode is disabled if incorrect values are added in yaml mode
• frontend ensure the dropdowns are set to the correct values for pre-existing policies

MR 3

• frontend update the policy list drawer to render the information correctly

Verification steps

1. Ensure the GitLab Ultimate license is enabled
2. Navigate to a project/group => Security & Compliance => Policies => New policy => Scan result policy
3. Verify the status filter is hidden
4. Choose License Scan
5. Verify the status filter is hidden
6. Choose Security Scan
7. Verify status can be changed and the yaml is updated appropriately
8. Navigate to yaml mode, make changes to the status to a value that does exist, navigate to rule mode and ensure the dropdowns have been updated
9. Navigate to yaml mode, make changes to the status to a value that does not exist, navigate to rule mode and ensure that rule mode is disabled
10. Create the policy, edit it, verify the dropdowns assigned the appropriate values