[frontend] Update drawer to include vulnerability management policy

Why are we doing this work

When clicking on a policy in the policy list, it opens the drawer. The policy drawer needs to support the new Vulnerability management policy type.

Relevant links

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

Non-functional requirements

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

Implementation plan

  1. Create new folder vulnerability_management in security_orchestration/components/policy_drawer
  2. Add details_drawer.vue similar to existing ones (check pipeline_execution)
  3. Make sure it has all rows as design requires

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: []\n  scanners: []',
  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',
}
  1. the drawer should open with this mocked policy.
  2. verify that you can click and see the Details and Yaml tabs
  3. verify that you see the basic policy info like name, description, status, type, and scope.

Screenshot_2024-08-13_at_16.08.44

Edited by Lorenz van Herwaarden