On Vulnerability Details page, change fetching of vulnerability to GraphQL

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

On the Vulnerability Details page, change the fetching of the vulnerability to GraphQL. Currently, the backend passes the data to the frontend from the controller, to the haml file, to the JS entry file, and finally the header, footer, and description Vue files.

See Design Issue and parent Epic for details.

Files

File Description
ee/app/assets/javascripts/vulnerabilities/vulnerabilities_init.js Many of the properties can be deleted.
ee/app/assets/javascripts/vulnerabilities/components/header.vue Update to get data from GraphQL.
ee/app/assets/javascripts/vulnerabilities/components/vulnerability.vue Update to get data from GraphQL.
ee/app/assets/javascripts/vulnerabilities/components/footer.vue Update to get data from GraphQL.

Implementation Details

  • Change description.vue to use the GraphQL endpoint for vulnerability details.
  • Change header.vue to use the GraphQL mutations for changing vulnerability state, creating a new issue, and creating a new MR.
  • Change footer.vue to use GraphQL to fetch the discussions and poll/subscribe for new notes (a.k.a. updates to discussions from other users).
  • Remove any unused properties from vulnerabilities_init.js after switching to GraphQL.
  • Update the tests

Developer Notes

  • When the vulnerability status is changed in header.vue, it triggers footer.vue to refresh its data, and vice versa:

https://gitlab.com/gitlab-org/gitlab/blob/master/ee/app/assets/javascripts/vulnerabilities/components/vulnerability.vue#L17-22

We will need to investigate the GraphQL equivalent of this behavior.

  • The vulnerability data in vulnerability.vue is passed to the header, description, and footer components. Using GraphQL, it may no longer be necessary to do this, or we may need to shuffle around where certain actions are being performed. For example, the header changes the vulnerability status in itself, but we may need to change it to trigger an event and handle it in vulnerability.vue instead.
Edited by 🤖 GitLab Bot 🤖