Use `GlTable` for the deployment approval rules in the add rule modal

Problem to solve

The UI of the protected environments settings is a bit messy when items are missing (group inheritance toggle, the lack of photo for maintainers). It also has some issues on the smaller screens.

UX proposal

Before After
Screenshot_2024-08-27_at_17.54.12 Screenshot_2024-08-27_at_17.49.08
Screenshot_2024-08-27_at_17.54.24 Screenshot_2024-08-27_at_22.10.32

Implementation guide

Work with add_approvers component. Refactor the view to use GlTableLite.

  1. Import and include GlTableLite into the components list.

  2. Add fields object (can be added in $options) like this:

     fields: [
   {
     key: 'approvers',
     label: s__('ProtectedEnvironments|Approvers'),
   },
   {
     key: 'approvals',
     label: s__('ProtectedEnvironments|Approvals required'),
   },
   {
     key: 'inheritance',
     label: s__('ProtectedEnvironments|Enable group inheritance'),
   },
   {
     key: 'remove',
     label: '',
     tdClass: 'gl-text-right',
   },
 ],

  3. Render the GlTableLite component:

    <gl-table-lite
   :fields="$options.fields"
   :items="approverInfo"
   data-testid="approval-rules"
   stacked="md"
   class="-gl-mb-5 md:gl-mb-0"
 >

  4. Render a template for each cell reusing the existing logic. Example:

    <template #cell(approvers)="{ item: approver, index }">
   <gl-avatar
     v-if="approver.avatarShape"
     :key="`${index}-avatar`"
     :src="approver.avatarUrl"
     :size="24"
     :entity-id="approver.id"
     :entity-name="approver.entityName"
     :shape="approver.avatarShape"
   />
   <span v-else :key="`${index}-avatar`" class="gl-w-6"></span>
   <gl-link v-if="approver.webUrl" :key="`${index}-name`" :href="approver.webUrl">
     {{ approver.name }}
   </gl-link>
   <span v-else :key="`${index}-name`">{{ approver.name }}</span>
</template>

  5. Make sure the tests are still passing:

Edited by Anna Vovchenko