Branch rules edit: Refactor approvals module
Context
In the context of Branch Rules edit, specifically about Approvals, we investigated the necessary code changes and this was the plan we came up with.
Steps
Reduce the number of unsorted files in `ee/app/assets/javascripts/approvals/components`
Reduce the complexity of components directory by grouping components. Desired structure:
ee/app/assets/javascripts/approvals/components
|_ group_settings
|_ license_compliance
|_ mr_edit
|_ project_settings
|_ security_configuration
|_ security_orchestration
|_ mr_widget_approval_check
|_ approval_check_popover.vue
|_ approval_check_rule_popover.vue
|_ approval_settings
|_ approval_settings.vue
|_ approval_settings_radio.vue
|_ approval_settings_locked_icon.vue
|_ approval_settings_checkbox.vue
|_ approvers
|_ approvers_list_empty.vue
|_ approvers_list_item.vue
|_ approvers_list.vue
|_ approvers_select.vue
|_ rules
|_ rules.vue
|_ rule_name.vue
|_ rule_form.vue
|_ rule_controls.vue
|_ rule_branches.vue
|_ empty_rule.vue
|_ empty_rule_name.vue
|_ modal_rule
|_ modal_rule_create.vue
|_ modal_rule_remove.vue
Move shared `rule_input.vue` component
Currently rule_input.vue
is placed in ee/app/assets/javascripts/approvals/components/mr_edit
, but imported by:
ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
ee/app/assets/javascripts/approvals/components/empty_rule.vue
ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
Following the proposed structure, place it in ee/app/assets/javascripts/approvals/components/rules/
Rename directories and files to better reflect their scope
-
approval_check
to becomemr_widget_approval_check
- these components are only imported inee/app/assets/javascripts/vue_merge_request_widget
-
ee/app/assets/javascripts/approvals/components/app.vue
toee/app/assets/javascripts/approvals/components/approval_rules.vue
- we currently have App within App, which makes it difficult to distinguish the elements when, for example, inspecting with Vue Devtools
Separate mounting modules from components
To better represent hierarchy, keep components
directory only for the actual building parts and move all the modules that mount the components one level up, to their separate directories.
ee/app/assets/javascripts/approvals/
|_ group_settings
|_ license_compliance
|_ mr_edit
|_ project_settings
|_ security_configuration
|_ components
|_ security_configuration
|_ security_orchestration
|_ ...