From 847809ddbf278240a6860cf7352b3e4d0fe101bb Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Tue, 23 Feb 2021 09:42:40 +0100
Subject: [PATCH] #1670 Update tags filters, bulk edit modals and case template
 forms to support taxonomy tags selection

---
 .../organisation/OrgCaseTemplateListCmp.js    | 33 ++-------------
 .../controllers/case/CaseCreationCtrl.js      | 33 ++-------------
 .../controllers/case/CaseUpdateCtrl.js        | 15 ++++++-
 .../case/ObservableCreationCtrl.js            | 33 ++-------------
 .../controllers/case/ObservableUpdateCtrl.js  | 15 ++++++-
 .../directives/dashboard/filter-editor.js     |  9 +++-
 .../scripts/services/api/TaxonomyCacheSrv.js  | 42 ++++++++++++++++++-
 frontend/app/styles/main.css                  | 20 +++++++--
 .../components/org/case-template/details.html | 29 ++++---------
 .../directives/dashboard/filter-editor.html   | 19 ++++++---
 .../views/partials/case/case.creation.html    | 16 +++----
 .../app/views/partials/case/case.update.html  | 38 ++++++++++++-----
 .../partials/observables/creation/form.html   | 18 ++++----
 .../observables/observable.update.html        | 39 ++++++++++++-----
 14 files changed, 201 insertions(+), 158 deletions(-)

diff --git a/frontend/app/scripts/components/organisation/OrgCaseTemplateListCmp.js b/frontend/app/scripts/components/organisation/OrgCaseTemplateListCmp.js
index 32164cf4a9..e56e80518b 100644
--- a/frontend/app/scripts/components/organisation/OrgCaseTemplateListCmp.js
+++ b/frontend/app/scripts/components/organisation/OrgCaseTemplateListCmp.js
@@ -3,7 +3,7 @@
 
     angular.module('theHiveComponents')
         .component('orgCaseTemplateList', {
-            controller: function($uibModal, $scope, $filter, CaseTemplateSrv, TagSrv, UserSrv, TaxonomyCacheSrv, AuthenticationSrv, NotificationSrv, UtilsSrv, ModalUtilsSrv) {
+            controller: function($uibModal, $scope, CaseTemplateSrv, TagSrv, UserSrv, TaxonomyCacheSrv, AuthenticationSrv, NotificationSrv, UtilsSrv, ModalUtilsSrv) {
                 var self = this;
 
                 self.task = '';
@@ -122,37 +122,10 @@
                 };
 
                 self.fromTagLibrary = function() {
-                    var modalInstance = $uibModal.open({
-                        controller: 'TaxonomySelectionModalCtrl',
-                        controllerAs: '$modal',
-                        animation: true,
-                        templateUrl: 'views/partials/misc/taxonomy-selection.modal.html',
-                        size: 'lg',
-                        resolve: {
-                            taxonomies: function() {
-                                return TaxonomyCacheSrv.all();
-                            }
-                        }
-                    });
-
-                    modalInstance.result
-                        .then(function(selectedTags) {
-                            var filterFn = $filter('tagValue'),
-                                tags = [];
-
-                            _.each(selectedTags, function(tag) {
-                                tags.push({
-                                    text: filterFn(tag)
-                                });
-                            });
-
+                    TaxonomyCacheSrv.openTagLibrary()
+                        .then(function(tags){
                             self.tags = self.tags.concat(tags);
                         })
-                        .catch(function(err) {
-                            if (err && !_.isString(err)) {
-                                NotificationSrv.error('Tag selection', err.data, err.status);
-                            }
-                        });
                 };
 
                 self.newTemplate = function() {
diff --git a/frontend/app/scripts/controllers/case/CaseCreationCtrl.js b/frontend/app/scripts/controllers/case/CaseCreationCtrl.js
index a8e8a4acf6..7d449569bb 100644
--- a/frontend/app/scripts/controllers/case/CaseCreationCtrl.js
+++ b/frontend/app/scripts/controllers/case/CaseCreationCtrl.js
@@ -4,7 +4,7 @@
 (function () {
     'use strict';
     angular.module('theHiveControllers').controller('CaseCreationCtrl',
-        function ($rootScope, $scope, $uibModal, $filter, $uibModalInstance, CaseSrv, TaxonomyCacheSrv, NotificationSrv, TagSrv, template) {
+        function ($rootScope, $scope, $uibModalInstance, CaseSrv, TaxonomyCacheSrv, NotificationSrv, TagSrv, template) {
 
             $rootScope.title = 'New case';
             $scope.activeTlp = 'active';
@@ -89,37 +89,10 @@
             };
 
             $scope.fromTagLibrary = function() {
-                var modalInstance = $uibModal.open({
-                    controller: 'TaxonomySelectionModalCtrl',
-                    controllerAs: '$modal',
-                    animation: true,
-                    templateUrl: 'views/partials/misc/taxonomy-selection.modal.html',
-                    size: 'lg',
-                    resolve: {
-                        taxonomies: function() {
-                            return TaxonomyCacheSrv.all();
-                        }
-                    }
-                });
-
-                modalInstance.result
-                    .then(function(selectedTags) {
-                        var filterFn = $filter('tagValue'),
-                            tags = [];
-
-                        _.each(selectedTags, function(tag) {
-                            tags.push({
-                                text: filterFn(tag)
-                            });
-                        });
-
+                TaxonomyCacheSrv.openTagLibrary()
+                    .then(function(tags){
                         $scope.tags = $scope.tags.concat(tags);
                     })
-                    .catch(function(err) {
-                        if (err && !_.isString(err)) {
-                            NotificationSrv.error('Tag selection', err.data, err.status);
-                        }
-                    });
             };
 
             $scope.addTask = function (task) {
diff --git a/frontend/app/scripts/controllers/case/CaseUpdateCtrl.js b/frontend/app/scripts/controllers/case/CaseUpdateCtrl.js
index cb241c6a0f..c2a6f34aaf 100644
--- a/frontend/app/scripts/controllers/case/CaseUpdateCtrl.js
+++ b/frontend/app/scripts/controllers/case/CaseUpdateCtrl.js
@@ -1,7 +1,7 @@
 (function() {
     'use strict';
     angular.module('theHiveControllers').controller('CaseUpdateCtrl',
-        function($scope, $uibModalInstance, TagSrv, selection) {
+        function($scope, $uibModalInstance, TagSrv, TaxonomyCacheSrv, selection) {
             var self = this;
 
             this.selection = selection;
@@ -137,6 +137,19 @@
                 return TagSrv.fromCases(query);
             };
 
+            self.fromTagLibrary = function(field) {
+                TaxonomyCacheSrv.openTagLibrary()
+                    .then(function(tags){
+                        if(field === 'add') {
+                            self.params.addTags = (self.params.addTags || []).concat(tags);
+                            self.toggleAddTags();
+                        } else if (field === 'remove') {
+                            self.params.removeTags = (self.params.removeTags || []).concat(tags);
+                            self.toggleRemoveTags();
+                        }
+                    })
+            };
+
             this.toggleTlp = function(value) {
                 this.params.tlp = value;
                 this.activeTlp = 'active';
diff --git a/frontend/app/scripts/controllers/case/ObservableCreationCtrl.js b/frontend/app/scripts/controllers/case/ObservableCreationCtrl.js
index 1089978cf1..08baf45d39 100644
--- a/frontend/app/scripts/controllers/case/ObservableCreationCtrl.js
+++ b/frontend/app/scripts/controllers/case/ObservableCreationCtrl.js
@@ -5,7 +5,7 @@
     'use strict';
 
     angular.module('theHiveControllers').controller('ObservableCreationCtrl',
-        function($scope, $stateParams, $uibModal, $uibModalInstance, $filter, TaxonomyCacheSrv, clipboard, CaseArtifactSrv, ObservableTypeSrv, NotificationSrv, TagSrv, params) {
+        function($scope, $stateParams, $uibModalInstance, TaxonomyCacheSrv, clipboard, CaseArtifactSrv, ObservableTypeSrv, NotificationSrv, TagSrv, params) {
 
             $scope.activeTlp = 'active';
             $scope.pendingAsync = false;
@@ -65,37 +65,10 @@
             };
 
             $scope.fromTagLibrary = function() {
-                var modalInstance = $uibModal.open({
-                    controller: 'TaxonomySelectionModalCtrl',
-                    controllerAs: '$modal',
-                    animation: true,
-                    templateUrl: 'views/partials/misc/taxonomy-selection.modal.html',
-                    size: 'lg',
-                    resolve: {
-                        taxonomies: function() {
-                            return TaxonomyCacheSrv.all();
-                        }
-                    }
-                });
-
-                modalInstance.result
-                    .then(function(selectedTags) {
-                        var filterFn = $filter('tagValue'),
-                            tags = [];
-
-                        _.each(selectedTags, function(tag) {
-                            tags.push({
-                                text: filterFn(tag)
-                            });
-                        });
-
+                TaxonomyCacheSrv.openTagLibrary()
+                    .then(function(tags){
                         $scope.params.tags = $scope.params.tags.concat(tags);
                     })
-                    .catch(function(err) {
-                        if (err && !_.isString(err)) {
-                            NotificationSrv.error('Tag selection', err.data, err.status);
-                        }
-                    });
             };
 
             $scope.add = function(form) {
diff --git a/frontend/app/scripts/controllers/case/ObservableUpdateCtrl.js b/frontend/app/scripts/controllers/case/ObservableUpdateCtrl.js
index 533ad1ef3c..110537476d 100644
--- a/frontend/app/scripts/controllers/case/ObservableUpdateCtrl.js
+++ b/frontend/app/scripts/controllers/case/ObservableUpdateCtrl.js
@@ -1,7 +1,7 @@
 (function() {
     'use strict';
     angular.module('theHiveControllers').controller('ObservableUpdateCtrl',
-        function($scope, $uibModalInstance, TagSrv, selection) {
+        function($scope, $uibModalInstance, TagSrv, TaxonomyCacheSrv, selection) {
             var self = this;
 
             this.selection = selection;
@@ -140,6 +140,19 @@
                 return TagSrv.fromObservables(query);
             };
 
+            self.fromTagLibrary = function(field) {
+                TaxonomyCacheSrv.openTagLibrary()
+                    .then(function(tags){
+                        if(field === 'add') {
+                            self.params.addTags = (self.params.addTags || []).concat(tags);
+                            self.toggleAddTags();
+                        } else if (field === 'remove') {
+                            self.params.removeTags = (self.params.removeTags || []).concat(tags);
+                            self.toggleRemoveTags();
+                        }
+                    })
+            };
+
             this.toogleIoc = function() {
                 this.params.ioc = !this.params.ioc;
                 this.state.enableIoc = true;
diff --git a/frontend/app/scripts/directives/dashboard/filter-editor.js b/frontend/app/scripts/directives/dashboard/filter-editor.js
index 9dbf55da66..787f06bb62 100644
--- a/frontend/app/scripts/directives/dashboard/filter-editor.js
+++ b/frontend/app/scripts/directives/dashboard/filter-editor.js
@@ -1,6 +1,6 @@
 (function() {
     'use strict';
-    angular.module('theHiveDirectives').directive('filterEditor', function($q, AuthenticationSrv, UserSrv, TagSrv, UtilsSrv) {
+    angular.module('theHiveDirectives').directive('filterEditor', function($q, AuthenticationSrv, TaxonomyCacheSrv, UserSrv, TagSrv, UtilsSrv) {
         return {
             restrict: 'E',
             scope: {
@@ -64,6 +64,13 @@
                     return filter.type;
                 };
 
+                scope.fromTagLibrary = function(filter) {
+                    TaxonomyCacheSrv.openTagLibrary()
+                        .then(function(tags){
+                            filter.value.list = filter.value.list.concat(tags);
+                        })
+                }
+
                 scope.promiseFor = function(filter, query) {
                     var field = scope.metadata[scope.entity].attributes[filter.field];
 
diff --git a/frontend/app/scripts/services/api/TaxonomyCacheSrv.js b/frontend/app/scripts/services/api/TaxonomyCacheSrv.js
index d68a65ab70..a6ba27916b 100644
--- a/frontend/app/scripts/services/api/TaxonomyCacheSrv.js
+++ b/frontend/app/scripts/services/api/TaxonomyCacheSrv.js
@@ -1,7 +1,7 @@
 (function() {
     'use strict';
     angular.module('theHiveServices')
-        .service('TaxonomyCacheSrv', function($http, $q, $filter, QuerySrv) {
+        .service('TaxonomyCacheSrv', function($http, $q, $filter, $uibModal, QuerySrv) {
             var self = this;
 
             this.cache = null;
@@ -67,5 +67,45 @@
 
                 return deferred.promise;
             };
+
+            self.openTagLibrary = function() {
+                var defer = $q.defer();
+
+                var modalInstance = $uibModal.open({
+                    controller: 'TaxonomySelectionModalCtrl',
+                    controllerAs: '$modal',
+                    animation: true,
+                    templateUrl: 'views/partials/misc/taxonomy-selection.modal.html',
+                    size: 'lg',
+                    resolve: {
+                        taxonomies: function() {
+                            return self.all();
+                        }
+                    }
+                });
+
+                modalInstance.result
+                    .then(function(selectedTags) {
+                        var filterFn = $filter('tagValue'),
+                            tags = [];
+
+                        _.each(selectedTags, function(tag) {
+                            tags.push({
+                                text: filterFn(tag)
+                            });
+                        });
+
+                        //$scope.tags = $scope.tags.concat(tags);
+                        defer.resolve(tags);
+                    })
+                    .catch(function(err) {
+                        if (err && !_.isString(err)) {
+                            NotificationSrv.error('Tag selection', err.data, err.status);
+                        }
+                        defer.rejeect(err);
+                    });
+
+                return defer.promise;
+            };
         });
 })();
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 4f46e49eff..de6cad2d35 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -788,11 +788,11 @@ tags-input.ti-tag-selector .tags .tag-item {
     border: none;
     padding: 0;
     padding-right: 5px;
-    line-height: 22px;
+    line-height: 26px;
 }
 
-tags-input.ti-tag-selector .tags .tag-item ti-tag-item{
-
+tags-input.ti-tag-selector.ti-input-sm .tags .tag-item {
+    line-height: 22px;
 }
 
 tags-input.ti-tag-selector .tags .tag-item span.tag-item-border{
@@ -804,3 +804,17 @@ tags-input.ti-tag-selector .tags .tag-item span.tag-item-border{
     border-top-left-radius: .25em;
     border-bottom-left-radius: .25em;
 }
+
+tags-input.ti-tag-selector.ti-input-sm .tags .tag-item span.tag-item-border{
+    position: relative;
+    left:0;
+    width: 8px;
+    background-color: red;
+    display: inline-block;
+    border-top-left-radius: .25em;
+    border-bottom-left-radius: .25em;
+}
+
+.vtop {
+    vertical-align: top;
+}
diff --git a/frontend/app/views/components/org/case-template/details.html b/frontend/app/views/components/org/case-template/details.html
index 8c24938b5c..6543ddb076 100644
--- a/frontend/app/views/components/org/case-template/details.html
+++ b/frontend/app/views/components/org/case-template/details.html
@@ -61,29 +61,18 @@ <h4 class="vpad10 text-primary">Case basic information</h4>
 <div class="form-group">
     <label class="col-md-3 control-label">Tags</label>
     <div class="col-md-9">
-        <tags-input class="ti-tag-selector" min-length="2" name="tags" ng-model="$vm.tags" placeholder="Tags" replace-spaces-with-dashes="false" template="views/directives/tag-input-item.html">
-            <auto-complete min-length="3" debounce-delay="400" source="$vm.getTags($query)"></auto-complete>
-        </tags-input>
+        <div class="input-group">
+            <tags-input class="ti-tag-selector" min-length="2" name="tags" ng-model="$vm.tags" placeholder="Tags" replace-spaces-with-dashes="false" template="views/directives/tag-input-item.html">
+                <auto-complete min-length="3" debounce-delay="400" source="$vm.getTags($query)"></auto-complete>
+            </tags-input>
 
-        <div class="btn-toolbar mt-xxs">
-            <div class="btn-group btn-group-sm">
-                <span class="help-block small">
-                    These will be the default case tags
-                </span>
-            </div>
-
-            <div class="btn-group btn-group-sm pull-right">
-                <button class="btn btn-sm btn-default" type="button" ng-click="$vm.fromTagLibrary()">
-                    <i class="glyphicon glyphicon-plus"></i> Add from Library
+            <span class="input-group-btn vtop">
+                <button type="button" class="btn btn-block btn-primary" ng-click="$vm.fromTagLibrary()" uib-tooltip="Add tag from library" tooltip-placement="left">
+                    <span class="fa fa-plus"></span>
                 </button>
-            </div>
+            </span>
         </div>
-
-        <!-- <tags-input name="tagsInput" template="views/directives/tag-input-item.html" ng-model="params.tags" class="ti-input-sm ti-tag-selector" placeholder="Add tags" replace-spaces-with-dashes="false" min-length="2">
-            <auto-complete min-length="3" debounce-delay="400" source="getTags($query)"></auto-complete>
-        </tags-input> -->
-
-
+        <p class="help-block small">These will be the default case tags</p>
     </div>
 </div>
 <div class="form-group" ng-class="{ 'has-error' : templateEditForm.description.$invalid && !templateEditForm.description.$pristine }">
diff --git a/frontend/app/views/directives/dashboard/filter-editor.html b/frontend/app/views/directives/dashboard/filter-editor.html
index 8c18989202..b5bfcca931 100644
--- a/frontend/app/views/directives/dashboard/filter-editor.html
+++ b/frontend/app/views/directives/dashboard/filter-editor.html
@@ -33,12 +33,21 @@
             </ul>
         </div>
         <div class="col-xs-10 pl-xxxs clear">
-            <tags-input class="form-control-wrapper"
-                ng-model="filter.value.list"
-                placeholder="ex: Enter a tag"
-                replace-spaces-with-dashes="false">
-                    <auto-complete source="promiseFor(filter, $query)" min-length="3" debounce-delay="400"></auto-complete>
+            <div class="input-group">
+                <tags-input class="form-control-wrapper ti-tag-selector"
+                    ng-model="filter.value.list"
+                    placeholder="ex: Enter a tag"
+                    replace-spaces-with-dashes="false"
+                    template="views/directives/tag-input-item.html">
+                        <auto-complete source="promiseFor(filter, $query)" min-length="3" debounce-delay="400"></auto-complete>
                 </tags-input>
+
+                <span class="input-group-btn vtop">
+                    <button type="button" class="btn btn-block btn-default" ng-click="fromTagLibrary(filter)" uib-tooltip="Add tag from library" tooltip-placement="left">
+                        <span class="fa fa-plus"></span>
+                    </button>
+                </span>
+            </div>
         </div>
     </div>
 
diff --git a/frontend/app/views/partials/case/case.creation.html b/frontend/app/views/partials/case/case.creation.html
index 3d2b6201bf..4ade8cce88 100644
--- a/frontend/app/views/partials/case/case.creation.html
+++ b/frontend/app/views/partials/case/case.creation.html
@@ -74,7 +74,8 @@ <h4 class="vpad10 text-primary">Case details</h4>
             <div class="col-md-12">
                 <div class="form-group">
                     <label class="control-label">Tags</label>
-                    <div>
+
+                    <div class="input-group">
                         <tags-input class="ti-input-sm input-sm form-control form-control-wrapper ti-tag-selector"
                             name="tags"
                             placeholder="Case tags"
@@ -84,13 +85,12 @@ <h4 class="vpad10 text-primary">Case details</h4>
                             replace-spaces-with-dashes="false">
                                 <auto-complete min-length="3" debounce-delay="400" source="getTags($query)"></auto-complete>
                         </tags-input>
-                        <div class="pull-right mt-xxs">
-                            <div class="btn-group btn-group-sm pull-right">
-                                <button class="btn btn-sm btn-default" type="button" ng-click="fromTagLibrary()">
-                                    <i class="glyphicon glyphicon-plus"></i> Add from Library
-                                </button>
-                            </div>
-                        </div>
+
+                        <span class="input-group-btn vtop">
+                            <button type="button" class="btn btn-block btn-sm btn-primary" ng-click="fromTagLibrary()" uib-tooltip="Add tag from library" tooltip-placement="left">
+                                <span class="fa fa-plus"></span>
+                            </button>
+                        </span>
                     </div>
                 </div>
             </div>
diff --git a/frontend/app/views/partials/case/case.update.html b/frontend/app/views/partials/case/case.update.html
index a36677147d..bc4a58409b 100644
--- a/frontend/app/views/partials/case/case.update.html
+++ b/frontend/app/views/partials/case/case.update.html
@@ -45,11 +45,21 @@ <h3 class="modal-title">Update case(s)</h3>
             <label class="col-md-3 control-label">Add Tags <input class="ml-xxs" type="checkbox" ng-model="$dialog.state.enableAddTags"></label>
             <div class="col-md-9">
                 <input type="hidden" name="addTags" ng-model="$dialog.params.addTagNames" ng-required="$dialog.state.enableAddTags"/>
-                <tags-input name="addTagsInput" ng-model="$dialog.params.addTags" class="ti-input-sm"
-                    placeholder="Add tags" replace-spaces-with-dashes="false" min-length="2"
-                    on-tag-added="$dialog.toggleAddTags()">
-                    <auto-complete min-length="3" debounce-delay="400" source="$dialog.getTags($query)"></auto-complete>
-                </tags-input>
+
+                <div class="input-group">
+                    <tags-input name="addTagsInput" ng-model="$dialog.params.addTags" class="ti-input-sm ti-tag-selector"
+                        placeholder="Add tags" replace-spaces-with-dashes="false" min-length="2"
+                        on-tag-added="$dialog.toggleAddTags()" template="views/directives/tag-input-item.html">
+                        <auto-complete min-length="3" debounce-delay="400" source="$dialog.getTags($query)"></auto-complete>
+                    </tags-input>
+
+                    <span class="input-group-btn vtop">
+                        <button type="button" class="btn btn-block btn-sm btn-primary" ng-click="$dialog.fromTagLibrary('add')" uib-tooltip="Add tag from library" tooltip-placement="left">
+                            <span class="fa fa-plus"></span>
+                        </button>
+                    </span>
+                </div>
+
             </div>
         </div>
 
@@ -57,11 +67,19 @@ <h3 class="modal-title">Update case(s)</h3>
             <label class="col-md-3 control-label">Remove Tags <input class="ml-xxs" type="checkbox" ng-model="$dialog.state.enableRemoveTags"></label>
             <div class="col-md-9">
                 <input type="hidden" name="removeTags" ng-model="$dialog.params.removeTagNames" ng-required="$dialog.state.enableRemoveTags"/>
-                <tags-input name="removeTagsInput" ng-model="$dialog.params.removeTags" class="ti-input-sm"
-                    placeholder="Remove tags" replace-spaces-with-dashes="false" min-length="2"
-                    on-tag-added="$dialog.toggleRemoveTags()">
-                    <auto-complete min-length="3" debounce-delay="400" source="$dialog.getTags($query)"></auto-complete>
-                </tags-input>
+                <div class="input-group">
+                    <tags-input name="removeTagsInput" ng-model="$dialog.params.removeTags" class="ti-input-sm ti-tag-selector"
+                        placeholder="Remove tags" replace-spaces-with-dashes="false" min-length="2"
+                        on-tag-added="$dialog.toggleRemoveTags()" template="views/directives/tag-input-item.html">
+                        <auto-complete min-length="3" debounce-delay="400" source="$dialog.getTags($query)"></auto-complete>
+                    </tags-input>
+
+                    <span class="input-group-btn vtop">
+                        <button type="button" class="btn btn-block btn-sm btn-primary" ng-click="$dialog.fromTagLibrary('remove')" uib-tooltip="Add tag from library" tooltip-placement="left">
+                            <span class="fa fa-plus"></span>
+                        </button>
+                    </span>
+                </div>
             </div>
         </div>
     </div>
diff --git a/frontend/app/views/partials/observables/creation/form.html b/frontend/app/views/partials/observables/creation/form.html
index 2274e0ebe9..89df393cc4 100644
--- a/frontend/app/views/partials/observables/creation/form.html
+++ b/frontend/app/views/partials/observables/creation/form.html
@@ -131,15 +131,17 @@
     </label>
     <div class="col-md-9">
         <input type="hidden" name="tags" ng-model="params.tagNames" ng-required="!params.message.length"/>
-        <tags-input name="tagsInput" template="views/directives/tag-input-item.html" ng-model="params.tags" class="ti-input-sm ti-tag-selector" placeholder="Add tags" replace-spaces-with-dashes="false" min-length="2">
-            <auto-complete min-length="3" debounce-delay="400" source="getTags($query)"></auto-complete>
-        </tags-input>
-        <div class="pull-right mt-xxs">
-            <div class="btn-group btn-group-sm pull-right">
-                <button class="btn btn-sm btn-default" type="button" ng-click="fromTagLibrary()">
-                    <i class="glyphicon glyphicon-plus"></i> Add from Library
+
+        <div class="input-group">
+            <tags-input name="tagsInput" template="views/directives/tag-input-item.html" ng-model="params.tags" class="ti-input-sm ti-tag-selector" placeholder="Add tags" replace-spaces-with-dashes="false" min-length="2">
+                <auto-complete min-length="3" debounce-delay="400" source="getTags($query)"></auto-complete>
+            </tags-input>
+
+            <span class="input-group-btn vtop">
+                <button type="button" class="btn btn-block btn-sm btn-primary" ng-click="fromTagLibrary()" uib-tooltip="Add tag from library" tooltip-placement="left">
+                    <span class="fa fa-plus"></span>
                 </button>
-            </div>
+            </span>
         </div>
 
         <p class="help-block" ng-show="observableForm.tags.$invalid && !observableForm.tagsInput.$pristine">The observable(s) description or tags are required.</p>
diff --git a/frontend/app/views/partials/observables/observable.update.html b/frontend/app/views/partials/observables/observable.update.html
index 948bf59ad4..ebb3dc5bf1 100644
--- a/frontend/app/views/partials/observables/observable.update.html
+++ b/frontend/app/views/partials/observables/observable.update.html
@@ -56,11 +56,21 @@ <h3 class="modal-title">Update observable(s)</h3>
             <label class="col-md-3 control-label">Add Tags <input class="ml-xxs" type="checkbox" ng-model="$dialog.state.enableAddTags"></label>
             <div class="col-md-9">
                 <input type="hidden" name="addTags" ng-model="$dialog.params.addTagNames" ng-required="$dialog.state.enableAddTags"/>
-                <tags-input name="addTagsInput" ng-model="$dialog.params.addTags" class="ti-input-sm"
-                    placeholder="Add tags" replace-spaces-with-dashes="false" min-length="2"
-                    on-tag-added="$dialog.toggleAddTags()">
-                    <auto-complete min-length="3" debounce-delay="400" source="$dialog.getTags($query)"></auto-complete>
-                </tags-input>
+
+                <div class="input-group">
+                    <tags-input name="addTagsInput" ng-model="$dialog.params.addTags" class="ti-input-sm ti-tag-selector"
+                        placeholder="Add tags" replace-spaces-with-dashes="false" min-length="2"
+                        on-tag-added="$dialog.toggleAddTags()" template="views/directives/tag-input-item.html">
+                        <auto-complete min-length="3" debounce-delay="400" source="$dialog.getTags($query)"></auto-complete>
+                    </tags-input>
+
+                    <span class="input-group-btn vtop">
+                        <button type="button" class="btn btn-block btn-sm btn-primary" ng-click="$dialog.fromTagLibrary('add')" uib-tooltip="Add tag from library" tooltip-placement="left">
+                            <span class="fa fa-plus"></span>
+                        </button>
+                    </span>
+                </div>
+
             </div>
         </div>
 
@@ -68,13 +78,22 @@ <h3 class="modal-title">Update observable(s)</h3>
             <label class="col-md-3 control-label">Remove Tags <input class="ml-xxs" type="checkbox" ng-model="$dialog.state.enableRemoveTags"></label>
             <div class="col-md-9">
                 <input type="hidden" name="removeTags" ng-model="$dialog.params.removeTagNames" ng-required="$dialog.state.enableRemoveTags"/>
-                <tags-input name="removeTagsInput" ng-model="$dialog.params.removeTags" class="ti-input-sm"
-                    placeholder="Remove tags" replace-spaces-with-dashes="false" min-length="2"
-                    on-tag-added="$dialog.toggleRemoveTags()">
-                    <auto-complete min-length="3" debounce-delay="400" source="$dialog.getTags($query)"></auto-complete>
-                </tags-input>
+                <div class="input-group">
+                    <tags-input name="removeTagsInput" ng-model="$dialog.params.removeTags" class="ti-input-sm ti-tag-selector"
+                        placeholder="Remove tags" replace-spaces-with-dashes="false" min-length="2"
+                        on-tag-added="$dialog.toggleRemoveTags()" template="views/directives/tag-input-item.html">
+                        <auto-complete min-length="3" debounce-delay="400" source="$dialog.getTags($query)"></auto-complete>
+                    </tags-input>
+
+                    <span class="input-group-btn vtop">
+                        <button type="button" class="btn btn-block btn-sm btn-primary" ng-click="$dialog.fromTagLibrary('remove')" uib-tooltip="Add tag from library" tooltip-placement="left">
+                            <span class="fa fa-plus"></span>
+                        </button>
+                    </span>
+                </div>
             </div>
         </div>
+
     </div>