Skip to content

Refactor package details frontend in preparation for upcoming improvements

Summary

Refactor some of the package frontend code in anticipation of more package registries and changing the UX to match the new container registry.

Improvements

There are two main areas which we can improve:

  • Package details installation instruction components
  • Preparing for the merge of the list and details views into an SPA structure

My proposal would be to:

  1. Convert how the existing package installation instructions are generated from computed props in single components to using getters from the Vuex store.
    • This could be a single MR where we move the logic from the computed props to the getters, then update the existing components to use these getters (with new tests).
  2. Change the implementation of specific installation components for each package type to a generic one that uses the store.
    • This will also be a single MR to remove the existing installation components and convert to a single component.
  3. Do the same for the information component and generate the package info from the store.
    • This is a single MR too as it's unrelated to the other two, it could be deferred or worked on later (there are some outstanding questions around certain package types metadata).

The goal of this is to move most of the installation and information logic into the store where it can be shared across different views.

The next step would be to change the package frontend to work like the new container registry using the Vue Router. This means we'll be using one store for both the list and detail views, giving us extra options like showing installation instructions directly on the list page, etc. This work will be a separate issue spread across a number of MR's and any UX enhancements will also follow as new issues.

Risks

  • Package installation features may be effected but the risk is very low.

Involved components

  • ee/app/assets/javascripts/packages/details/components/*.vue
  • ee/app/assets/javascripts/packages/details/store/*.js

Optional: Intended side effects

  • Will reduce the amount of code the frontend needs

Optional: Missing test coverage

  • Should reduce the amount of repeated / similar tests for the installation components