Restructure layout of Add approval rule form

Problem to solve

As an initial first-step towards #267511 (closed). The existing form doesn't align with the new designs.

We need to restructure the Add approval rule form to conform with these designs but without any of the new features being implemented.

Proposal

As a general improvement the form and to make it conform with the new designs, we should:

  • Change inputs to be stacked rather than side-by-side
  • Remove bolding from initial input description
  • Look at dropdown icon style
  • Look at adding a search button to the approvers selection list

Design

Current UX 🆕 Users or Groups - Default option with 1 approver
image Modal

Implementation plan

frontend - 2️⃣

  1. Restructure ee/app/assets/javascripts/approvals/components/rule_form.vue following the proposal
Edited by Robert Hunt