[frontend] Add humanisation rules for vulnerability management policy

Why are we doing this work

The policy drawer shows the policy definition in a human readable way. This is done with humanisation functions which convert the definition (or parts of it) to text. We need to add such rules for the Vulnerability management policy.

Relevant links

Design: No design yet for this. We can use #452328[list_view-with_drawer.png] as inspiration.

Non-functional requirements

• Documentation:
• Feature flag: vulnerability_management_policy_type
• Performance:
• Testing: unit tests

Implementation plan

1. Create new utils.js for Vulnerability management policy in security_orchestration/components/policy_drawer/vulnerability_management
2. Add methods to convert rule (and action?) objects to humanly-readable sentence
3. Update details_drawer.vue to use this utils methods and make sure Summary section is displayed properly.

Verification steps

1. Go to https://staging.gitlab.com/govern-team-test/verify-vulnerability-management-policy/verify-465728/-/security/policies
2. make sure you have vue force dev extension installed https://chromewebstore.google.com/detail/vue-force-dev/oohfffedbkbjnbpbbedapppafmlnccmb
3. open vue devtools and find the ListComponent (see screenshot) and select it
4. open the console and enter

$vm0.selectedPolicy = {
  __typename: 'VulnerabilityManagementPolicy',
  name: 'Resolve no longer detected',
  yaml: '---\nname: Resolve no longer detected\ndescription: Auto-resolve all no longer detected vulnerabilities.\nenabled: true\nactions:\n- type: auto_resolve\nrules:\n- type: no_longer_detected\n  severity_levels: ["high", "medium", "low"]\n  scanners: ["dast", "sast"]\n- type: no_longer_detected\n  severity_levels: []\n  scanners: ["container_scanning", "dependency_scanning"]',
  editPath:
    'https://gdk.test:3443/gitlab-org/security-reports/-/security/policies/scan+exec+1/edit?type=scan_execution_policy',
  enabled: true,
  policyScope: {
    __typename: 'PolicyScope',
    complianceFrameworks: {
      __typename: 'ComplianceFrameworkConnection',
      nodes: [],
      pageInfo: {
        __typename: 'PageInfo',
        hasNextPage: false,
        hasPreviousPage: false,
        startCursor: null,
        endCursor: null,
      },
    },
    excludingProjects: {
      __typename: 'ProjectConnection',
      nodes: [],
      pageInfo: {
        __typename: 'PageInfo',
        hasNextPage: false,
        hasPreviousPage: false,
        startCursor: null,
        endCursor: null,
      },
    },
    includingProjects: {
      __typename: 'ProjectConnection',
      nodes: [],
      pageInfo: {
        __typename: 'PageInfo',
        hasNextPage: false,
        hasPreviousPage: false,
        startCursor: null,
        endCursor: null,
      },
    },
  },
  source: {
    __typename: 'ProjectSecurityPolicySource',
    project: { __typename: 'Project', fullPath: 'gitlab-org/security-reports' },
  },
  updatedAt: '2024-07-03T12:50:07+00:00',
  policyType: 'Vulnerability management',
}

5. the drawer should open with this mocked policy.
6. verify that you can click and see the Details and Yaml tabs
7. verify that the summary section shows a human readable summary of the rules and actions of this policy. Use the rules and actions of the yaml to compare to:

actions:
  - type: auto_resolve
rules:
  - type: no_longer_detected
    severity_levels: ["high", "medium", "low"]
    scanners: ["dast", "sast"]
  - type: no_longer_detected
    severity_levels: []
    scanners: ["container_scanning", "dependency_scanning"]