feat(app/endpoint-group): replace the tag dropdown by isteven-multi-select (#4714)

* feat-app/endpoint-group): replace the tag dropdown by isteven-multi-select

* feat(app/endpoint-group): fix the dropdown height

* feat(app/tag-selector): remove the slice on filtered tags and add some style to fix the dropdown height

app/assets/css/app.css

@@ -1016,3 +1016,10 @@ json-tree .branch-preview {
 .w-full {
   width: 100%;
 }
+
+/* uib-typeahead override */
+#scrollable-dropdown-menu .dropdown-menu {
+  max-height: 300px;
+  overflow-y: auto;
+}
+/* !uib-typeahead override */

app/portainer/components/tag-selector/tagSelector.html

@@ -15,7 +15,7 @@
   <label for="tags" class="col-sm-3 col-lg-2 control-label text-left">
     Tags
   </label>
-  <div class="col-sm-9 col-lg-10" ng-if="$ctrl.allowCreate || $ctrl.tags.length > 0">
+  <div class="col-sm-9 col-lg-10" id="scrollable-dropdown-menu" ng-if="$ctrl.allowCreate || $ctrl.tags.length > 0">
     <input
       type="text"
       ng-model="$ctrl.state.selectedValue"

app/portainer/components/tag-selector/tagSelectorController.js

@@ -29,16 +29,16 @@ class TagSelectorController {
   filterTags(searchValue) {
     let filteredTags = _.filter(this.tags, (tag) => !_.includes(this.model, tag.Id));
     if (!searchValue) {
-      return filteredTags.slice(0, 7);
+      return filteredTags;
     }
 
     const exactTag = _.find(this.tags, (tag) => tag.Name === searchValue);
     filteredTags = _.filter(filteredTags, (tag) => _.includes(tag.Name.toLowerCase(), searchValue.toLowerCase()));
     if (exactTag || !this.allowCreate) {
-      return filteredTags.slice(0, 7);
+      return filteredTags;
     }
 
-    return filteredTags.slice(0, 6).concat({ Name: `Create "${searchValue}"`, create: true, value: searchValue });
+    return filteredTags.concat({ Name: `Create "${searchValue}"`, create: true, value: searchValue });
   }
 
   generateSelectedTags(model, tags) {