Skip to content

Use startup.js to fetch initial data in group and project issue list

euko requested to merge 246486-poc-startup-js-for-projects-issue-list into master

Motivation for this MR

The refactored issue list(vue_issuables_list.vue) is the Vue component that will display issue lists that are currently rendered using HAML.

The problem with the current iteration of the refactored issue list is it only starts fetching for the data after its Vue instance is loaded/mounted and this results in a poor user experience. To solve this problem, we are including a small JS script to start fetching immediately on page load - this concept is startup.js #220511 (closed).

What does this MR do?

The changes in this MR sit behind :vue_issuables_list FF.

This is a MVC (just enough to gather fresh performance data in staging) to support startup.js for only these vanilla paths WITHOUT any support for any additional query parameters:

  1. /<group>/<project>/-/issues
  2. /groups/<groupname>/-/issues

When users visit the above paths, vue_issuables_list.vue appends some query strings (such as state or page with default values) to a designated API path and fetches the data. To pre-fetch the data using startup.js, this MR adds changes to

  • use startup.js to include an API path with default params (so only when visiting project/group issue lists without query params)

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

Issue #246486 (closed)

Edited by euko

Merge request reports