WIP: Refactor issuables list to Vue, part 1
What does this MR do?
Re-work of !14100 (closed). Refactors the issuable list component into Vue.
- Rendering issuables on the group issues page
- Toggling bulk edit by interfacing with the bulk edit sidebar.
- Performing the bulk edit
- Reordering issues
- Empty states
- Tests: !15689
What's still pending
- Scoped labels badge and popover. We need a new component for scoped label.
- User popover deserves its own component. Right now, it's attaching events to Vue-rendered elements.
- The issues/MR API needs to return the reference path of the issuable: gitlab-org/gitlab-ce#66655
- Enabled this feature behind the
- Removed the VueX store. This component does not have a complex hierarchy and
datais more than sufficient for reactivity. This saved around 200 LoC and several files.
- Simplified the layout and removed several CSS classes, preferring Bootstrap utilities instead. This saved about 100 LoC.
~/lib/utils/pubsub.js, which is a simple async pub/sub mechanism. This enables the Vue component to talk to the bulk edit sidebar, which is a jQuery component, without needing a separate mediator.
- !14100 (closed) did something very similar, but used the VueX store as a message store.
- The existence of this file, and the best way to make Vue components communicate with jQuery, is being discussed in gitlab-org/gitlab-ce!31868
- The Vue component's HTML is isolated - no external component mutates the DOM anymore (looking at you, Bulk Edit Sidebar!)
For maintainers: how to merge
This is part 1 of a pair of MRs. Part 2 is here: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/15689
Part 2 contains tests and code changes to satisfy tests. Part 1 contains business logic.
Neither part has EE-specific code, and can be cleanly backported to CE.
- Merge part 2 into
mh/vue-issuables-list-ee. Part 2 is based on that branch, so the pipelines on Part 1 should then pass.
- Merge Part 1 into
- https://gitlab.com/gitlab-org/gitlab-ce/issues/66655, which describes a reference path issue that is failing an rspec.
- https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/15689, which contains tests and pipeline fixes
https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/15225, which implements sorting of issues in the API.
To see for yourself, enable the
:vue_issuables_list feature flag and go to any group issues page, like http://localhost:3001/groups/h5bp/-/issues
Does this MR meet the acceptance criteria?
- Changelog entry
- Documentation created/updated or follow-up review issue created
- Code review guidelines
- Merge request performance guidelines
- Style guides
- Database guides
- Separation of EE specific content
Performance and Testing
- Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
- Tested in all supported browsers
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
- 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