Skip to content

Frontend directory restructure

Jacques Erasmus requested to merge fe-directory-restructure into master

Summary

This changes the frontend directory structure to something more scalable and maintainable.

The new structure also resembles that of the GitLab codebase a bit closer which means engineers would be familiar with navigating the code.

Why is this necessary?

The old directory structure does not scale very well. Since we're adding more and more features we need to change the structure to something that is more modular and scalable.

With the old directory structure, the bundles and components lived in two separate directories, this makes it difficult to scale and maintain.

What changed?

Note: This change has no visual impact.

The new directory structure aims to have all bundles in their own directory, this gives us the ability to group bundles with their respective components instead of separating them.

A shared directory was also added for resources that are shared between bundles/components.

old new
Screenshot_2020-02-06_at_17.32.37 Screenshot_2020-02-06_at_17.32.57
Screenshot_2020-02-06_at_17.33.12 Screenshot_2020-02-06_at_17.33.23

Specs:

old new
spec/javascripts/components/navigation_toggle/navigation_toggle_spec.js spec/frontend/default/components/navigation_toggle_spec.js
spec/javascripts/components/banner/banner_spec.js spec/frontend/shared/components/banner_spec.js

Bundles:

old new
content/frontend/bundles/404.js content/frontend/404/404.js
content/frontend/bundles/archives.js content/frontend/archives.js/archives.js
content/frontend/bundles/default.js content/frontend/default/default.js
content/frontend/bundles/home.js content/frontend/home/home.js
content/frontend/bundles/feedback.js content/frontend/feedback/feedback.js

Components:

old new
content/frontend/components/navigation_toggle.vue content/frontend/default/components/navigation_toggle.vue
content/frontend/components/version_banner.vue content/frontend/default/components/version_banner.vue
content/frontend/components/banner.vue content/frontend/shared/components/banner.vue

Merge request reports