Skip to content

Migrate the License Compliance pipeline tab's Vuex store to a Vuex module

Historical Guidance

The License Compliance pipeline tab Vue app leverages a Vuex store. As we are moving individual tab apps to a unified Vue app, there will eventually be only one Vuex.Store instance. So, individual stores need to be converted to store modules that can be registered seamlessly to any store.

As part of this issue, we need to convert License Compliance's store to a module which involves the following:

  • The Vuex store should be created in the app's entry point rather than its store/index.js file.
    • Move Vue.use(Vuex) to the app's entry point.
    • store/index.js only returns the store's options.
    • The store is instantiated with new Vuex.Store in the entry point.
  • The stores should be converted to namespaced modules.
    • In store/index.js, place all options into a namespaced module.
    • Optionally, move state, actions, mutations and getters files to a sub-directory.
    • Review all map* helper usages so that they properly map to the module rather than the root.
  • The app's root component should register its module(s) in the created hook. This can be done with the registerModule method. More on this in https://vuex.vuejs.org/guide/modules.html#dynamic-module-registration.

Updated Strategy

The VueX migration into the parent App #363079 (closed) doesn't seem to be a blocker since it works without it. I am still working on it though. Having it completed would just mean that the vuex module is accessable between tabs, which I don't see a need to at the moment. I see the value in a consistent implementation though.

As I discussed with @pgascouvaillancourt on slack, the license tab is used both in the pipeline tab and the current version of the MR widget. That MR widget is being migrated to the new MR widget extension this milestone as well. So next milestone 15.3, we should be down to one usage of the vue component used in the license tab.

Luckily the license management store is already a namespaced VueX module 😄

My plan for #363079 (closed) is to prep a MR for %15.3

  1. Update the component to not initialize it's own store, and do it from the parent app its bootstrapped from (pipeline tabs). After 15.2 this should be only on the pipeline tab as opposed to the pipeline tab AND MR widgets on the MR page.

The problem right now is that the store is initialized within the component, and if we remove that and move it to where the app is bootstrapped, we'd need to bootstrap it in the mr_widget_options.vue which doesn't use VueX. I believe it uses apollo plus passing in props from a HTML data 5 attribute and GON. It's unnecessary work I think because we are going to remove it in the coming milestone anyway. Also, not having the Vuex module to ship out sooner does not prevent it from renders or impact the other tabs.

Testing

Frontend engineer to look at associated unit/integration tests affected by change. SET to ensure that any E2E tests are updated accordingly.

Edited by -