Skip to content

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
  1. approval_check to become mr_widget_approval_check - these components are only imported in ee/app/assets/javascripts/vue_merge_request_widget
  2. ee/app/assets/javascripts/approvals/components/app.vue to ee/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
  |_ ...