Add icon and tooltip to label template dropdown [SCI-7259][SCI-7260]

app/assets/stylesheets/repository/repository_print_label_modal.scss

@@ -42,4 +42,13 @@
     min-height: 200px;
     padding: .5em 0;
   }
+
+  .label-template-option {
+    align-items: center;
+    display: flex;
+
+    img {
+      margin-right: .25em;
+    }
+  }
 }

app/javascript/vue/repository_print_modal/container.vue

@@ -39,6 +39,8 @@
                 :disableSearch="true"
                 :options="templates_dropdown"
                 :selectorId="`LabelTemplateSelector`"
+                :optionLabel="templateOption"
+                :onOpen="initTooltip"
                 @dropdown:changed="selectTemplate"
               />
               <div v-if="labelTemplateError" class="label-template-warning">
@@ -140,7 +142,14 @@
         }
 
         return templates.map(i => {
-          return {value: i.id, label: i.attributes.name}
+          return {
+            value: i.id,
+            label: i.attributes.name,
+            params: {
+              icon: i.attributes.icon_url,
+              description: i.attributes.description || ''
+            }
+          }
         })
       },
       printers_dropdown() {
@@ -217,6 +226,17 @@
             })
           }
         });
+      },
+      templateOption(option) {
+        return `
+          <div class="label-template-option" data-toggle="tooltip" data-placement="right" title="${option.params.description}">
+            <img src="${option.params.icon}"></img>
+            ${option.label}
+          </div>
+        `
+      },
+      initTooltip() {
+        $('[data-toggle="tooltip"]').tooltip();
       }
     }
   }

app/javascript/vue/shared/dropdown_selector.vue

@@ -93,6 +93,9 @@
       optionLabel: {
         type: Function
       },
+      onOpen: {
+        type: Function
+      },
       inputTagMode: {
         type: Boolean,
         default: false
@@ -114,6 +117,7 @@
         closeOnSelect: this.closeOnSelect,
         selectAppearance: this.selectAppearance,
         disableSearch: this.disableSearch,
+        onOpen: this.onOpen,
         onChange: () => {
           if (this.onChange) this.onChange();
           this.selectChanged(dropdownSelector.getValues(`#${this.selectorId}`))