Technical Spike: Define GraphQL schema to support migration for Vulnerability Details

Problem to solve

In order to complete the migration from HAML-data to GraphQL on the pipeline security tab, we need to add a set of fields to the GraphQL schema for the Vulnerability type.

To speed up the communcation process between frontend and backend, the frontend should come up with a schema-proposal that captures all missing fields and structures them in a way, which will help to migrate the related UI-components easily.

Proposed steps

1. Set up a project that contains a setup for apollo-server
2. Configure the local environment to query the mock-server
3. Create and experiment with a schema
4. Change the vulnerability details page to fetch from the mock endpoint

Desired outcome

• Schema proposal, which can be a base for a discussion with the backend
• Agree on final schema (queries and mutations)

Outcome

Resources

• MR which configures the details page to fetch from the mock server: !72814 (closed)
• Mock Server: https://gitlab.com/dpisek/vulnerability-graphql-mock/-/tree/pipeline-finding

Findings

• backend Add the following fields:

 # Enums
  enum VulnerabilityEvidenceSupportingMessageName {
    RECORDED
  }
  # Types

  ## Evidence
  type VulnerabilityEvidence {
    summary: String
    supportingMessages: [VulnerabilityEvidenceSupportingMessage!]
    source: VulnerabilityEvidenceSource
    request: [VulnerabilityRequest!]
    response: [VulnerabilityResponse!]
  }

  type VulnerabilityEvidenceSupportingMessage {
    name: VulnerabilityEvidenceSupportingMessageName!
    request: [VulnerabilityRequest!]
    response: [VulnerabilityResponse!]
  }

  type VulnerabilityEvidenceSource {
    id: ID!
    name: String
    url: String
  }

  ## Evidence -- end

  type VulnerabilityRequestResponseHeader {
    name: String
    value: String
  }

  type VulnerabilityRequest {
    body: String
    method: String
    url: String
    headers: [VulnerabilityRequestResponseHeader!]
  }

  type VulnerabilityResponse {
    body: String
    statusCode: String
    reasonPhrase: String
    headers: [VulnerabilityRequestResponseHeader!]
  }

  type VulnerabilityAsset {
    name: String
    url: String
  }

  type VulnerabilityRemediation {
    diff: [String!]
  }

  ## Extensions

  # Check /ee/lib/ee/gitlab/ci/parsers/security/validators/schemas/coverage_fuzzing.json
  # for more details
  extend type VulnerabilityLocationCoverageFuzzing {
    crashType: String
    crashAddress: String
    stacktraceSnippet: String
  }

  extend type VulnerabilityScanner {
    url: String
    version: String
  }

  extend type Vulnerability {
    assets: [VulnerabilityAsset!]
    canModifyRelatedIssues: Boolean!
    createdAt: Time
    evidence: VulnerabilityEvidence
    pipeline: Pipeline
    relatedIssuesHelpPath: String
    remediations: [VulnerabilityRemediation!]
    solution: String
  }

• frontend Add loading state for fetching of vulnerability details (might need UX input)
• frontend Migrate ee/app/assets/javascripts/vue_shared/security_reports/components/merge_request_note.vue and ee/vue_shared/security_reports/components/event_item.vue to use camelCase fields.
• frontend Find vulnerability.hasMr occurrences. We won't have this field anymore, instead use the mergeRequest field to deduct this information.
• frontend Find mergeRequestFeedback occurrences and rename them with mergeRequest