Skip to content

CI catalog - Introduce FE scaffolding

Frédéric Caplette requested to merge fc-add-catalog-base-components into master

What does this MR do and why?

In the epic of the CI catalog MVC, we are now adding basic Frontend scaffolding to the code. This means:

  • Adding the index.js that will create the private ci catalog Vue instance
  • Adding Apollo (even if currently unused)
  • Adding VueRouter
  • Setup two routes: /ci/catalog/resources and /ci/catalog/resources/:id, each loading a basic component
  • Updating specs to assert that these 2 routes load different assets
  • Add basic folder/files structure for the application
  • Ensure that each new component gets a corresponding, basic jest spec with at least the correct .exists() test.
  • There are no 404 pages as of now for undefined components. This will be added later.

Why are we adding all of these components in one MR? Simple! There are 2 main benefits:

  • This will allow less merge conflicts as the PA FE team works in parallel on different issues
  • Each component added in this MR is currently used! This mean that we are not adding components that cannot be seen or tested in the UI
  • In future MR, it will be simpler to show how implementing one component changed since the bulk of the work will be within one file, but the general structure of each of those file will not be in the diff.

Screenshots or screen recordings

Resources page

Before After
Screenshot_2023-03-16_at_2.00.32_PM Screenshot_2023-03-16_at_1.08.57_PM

Resource_details page

Before After
Screenshot_2023-03-16_at_2.00.24_PM Screenshot_2023-03-16_at_1.58.47_PM

How to set up and validate locally

  1. Make sure you have an ultimate license for your GDK
  2. Enable the feature flag: ci_private_catalog_beta
  3. Login as a user
  4. Navigate to /$namespace/$project/-/ci/catalog/resources
  5. Notice that you land on the catalog page
  6. Navigate to /$namespace/$project/-/ci/catalog/resources/:id (id can be any number!)
  7. Notice that it is a different page

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Frédéric Caplette

Merge request reports