GlCollapsibleListbox: Add ability to customize which properties are used for the text and value for an item

Currently for the listbox, it expects that each item have a value and text property:

const items = [
  { value: 1, text: 'Item 1' },
  { value: 2, text: 'Item 2' },
  { value: 3, text: 'Item 3' },
]

However, the data we work with almost always do not have a text and value property, and needs to be converted first before it can be used by the listbox. This means that in nearly every place that a listbox is used, .map() is used to add in these properties. Examples of boilerplate code usage:

• board_add_new_column.vue
• admin_emails_form.vue
• rule_multi_select.vue
• template_selector.vue
• boards_selector.vue
• project_select.vue
• ci_environments_dropdown.vue
• branch_switcher.vue
• namespace_select.vue
• project_namespace.vue

Proposal

Add props that allow the parent component to customize which property is used for the value and which property is used for the text. For example:

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]

<gl-collapsible-listbox
  :items="items"
  value-property-name="id"
  text-property-name="name"
/>

This will let us remove all the .map() boilerplate code, pass the items directly to the listbox, and use attributes to control which properties are used.