Refactor empty_rule.vue component

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Work on this issue
• Close this issue

Here's more detailed diagram for the structure of a single rule row for MR approvals:

flowchart TD
    K(tbody) --> L(empty_rule.vue)
    K(tbody) --> O(tr)
    O --> M(rule_name.vue or custom HTML for name)
    O --> N(user_avatar_list.vue)
    O --> P(rule_input.vue)
    O --> R(rule_controls.vue)
    L --> A(tr)
    A --> S(empty_rule_name.vue)
    A --> T(rule_branches.vue)
    A --> U(rule_input.vue)

Both empty rule row and a regular rule row are placed in <tr> element and use the same/similar child components for table data. The current structure in mr_rules.vue or project_rules.vue places <empty-rule> on the same level as <tr> looking like siblings, where in fact they do not exist together in any circumstances. It would be much more intuitive if we had a rule_row.vue component that will hold one markup for the table elements and based on passed rules array will decide if an empty or regular rule is displayed.

This will allow to shorten the content of mr_rules.vue, project_rules.vue and similar components in the future. We will simply pass the rules and all the logic will happen within a wrapper for rules.

These table rows are quite intricate and we had issues in the past when their UI diverted, because it wasn't updated in all locations. Making an abstraction for them will provide consistent layout across all 4 future locations.

Note that the rewrite should include changing all CSS utility classes to gl- prefixed ones.