From 8779cdcb77a3623f2f6f29ea7ea9c2425c0629a4 Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Fri, 26 Mar 2021 07:14:08 +0100
Subject: [PATCH] #1869 Improve the way default tag colour is taken into
 account

---
 frontend/app/scripts/directives/tag-item.js   | 26 +++++++-----
 frontend/app/scripts/services/api/TagSrv.js   |  6 +++
 .../scripts/services/api/TaxonomyCacheSrv.js  | 42 +++++++++----------
 .../views/partials/admin/taxonomy/view.html   |  7 ++--
 .../misc/taxonomy-selection.modal.html        | 30 ++++++++-----
 5 files changed, 64 insertions(+), 47 deletions(-)

diff --git a/frontend/app/scripts/directives/tag-item.js b/frontend/app/scripts/directives/tag-item.js
index 0d060ec5c0..20edaca32f 100644
--- a/frontend/app/scripts/directives/tag-item.js
+++ b/frontend/app/scripts/directives/tag-item.js
@@ -1,6 +1,6 @@
-(function() {
+(function () {
     'use strict';
-    angular.module('theHiveDirectives').directive('tagItem', function(TaxonomyCacheSrv) {
+    angular.module('theHiveDirectives').directive('tagItem', function (TaxonomyCacheSrv, TagSrv) {
         return {
             restrict: 'E',
             replace: true,
@@ -9,15 +9,16 @@
                 colour: '='
             },
             templateUrl: 'views/directives/tag-item.html',
-            link: function(scope/*, element, attrs*/) {
-                if(!scope.value) {
+            link: function (scope/*, element, attrs*/) {
+                if (!scope.value) {
                     return;
                 }
-                if(_.isString(scope.value)) {
+                if (_.isString(scope.value)) {
                     scope.tag = scope.value;
                     scope.bgColor = scope.colour ||
                         TaxonomyCacheSrv.getColour(scope.value) ||
                         TaxonomyCacheSrv.getColour('_freetags_:' + scope.value) ||
+                        TagSrv.tagsDefaultColour ||
                         '#000000';
                 } else {
                     scope.tag = _.without([
@@ -26,22 +27,25 @@
                         scope.value.predicate,
                         scope.value.value ? ("=\"" + scope.value.value + "\"") : null
                     ], null).join('');
-                    scope.bgColor = scope.value.colour || scope.colour || '#000000';
+                    scope.bgColor = scope.value.colour ||
+                        scope.colour ||
+                        TagSrv.tagsDefaultColour ||
+                        '#000000';
                 }
 
-                scope.$watch('colour', function(value) {
-                    if(!value) {
+                scope.$watch('colour', function (value) {
+                    if (!value) {
                         return;
                     }
                     scope.bgColor = value;
                 });
 
-                scope.$watch('value', function(value) {
-                    if(!value) {
+                scope.$watch('value', function (value) {
+                    if (!value) {
                         return;
                     }
 
-                    if(_.isString(value)) {
+                    if (_.isString(value)) {
                         scope.tag = value;
                     } else {
                         scope.tag = _.without([
diff --git a/frontend/app/scripts/services/api/TagSrv.js b/frontend/app/scripts/services/api/TagSrv.js
index 9527d15c92..ff9914a730 100644
--- a/frontend/app/scripts/services/api/TagSrv.js
+++ b/frontend/app/scripts/services/api/TagSrv.js
@@ -3,6 +3,10 @@
     angular.module('theHiveServices')
         .service('TagSrv', function (QuerySrv, $q, VersionSrv, $http) {
 
+            var self = this;
+
+            this.tagsDefaultColour = '#000000';
+
             this.getFreeTags = function () {
                 var defer = $q.defer();
 
@@ -10,6 +14,8 @@
                     .then(function (appConfig) {
                         var defaultColour = appConfig.config.freeTagDefaultColour;
 
+                        self.tagsDefaultColour = defaultColour;
+
                         return QuerySrv.query('v1', [
                             { _name: 'listTag' },
                             { _name: 'freetags' },
diff --git a/frontend/app/scripts/services/api/TaxonomyCacheSrv.js b/frontend/app/scripts/services/api/TaxonomyCacheSrv.js
index 9a72d87700..cfae25df92 100644
--- a/frontend/app/scripts/services/api/TaxonomyCacheSrv.js
+++ b/frontend/app/scripts/services/api/TaxonomyCacheSrv.js
@@ -1,17 +1,17 @@
-(function() {
+(function () {
     'use strict';
     angular.module('theHiveServices')
-        .service('TaxonomyCacheSrv', function($http, $q, $filter, $uibModal, TagSrv, QuerySrv) {
+        .service('TaxonomyCacheSrv', function ($http, $q, $filter, $uibModal, VersionSrv, TagSrv, QuerySrv) {
             var self = this;
 
             this.cache = null;
             this.tagsCache = null;
 
-            this.list = function() {
+            this.list = function () {
                 return QuerySrv.call('v1', [
                     { _name: 'listTaxonomy' }
                 ], {
-                    name:'list-taxonomies'
+                    name: 'list-taxonomies'
                 }, {
                     name: 'filter',
                     _field: 'enabled',
@@ -19,50 +19,50 @@
                 });
             };
 
-            this.clearCache = function() {
+            this.clearCache = function () {
                 self.cache = null;
                 self.tagsCache = null;
             };
 
-            this.getCache = function(name) {
+            this.getCache = function (name) {
                 return self.cache[name];
             };
 
-            this.getColour = function(tag) {
+            this.getColour = function (tag) {
                 return self.tagsCache[tag];
             };
 
-            this.cacheTagColors = function(tags) {
+            this.cacheTagColors = function (tags) {
                 var fn = $filter('tagValue');
 
-                _.each(tags, function(tag) {
+                _.each(tags, function (tag) {
                     var name = fn(tag);
 
-                    if(!_.isEmpty(name)) {
-                        self.tagsCache[name] =  tag.colour;
+                    if (!_.isEmpty(name)) {
+                        self.tagsCache[name] = tag.colour;
                     }
                 });
             };
 
-            this.all = function(reload) {
+            this.all = function (reload) {
                 var deferred = $q.defer();
 
                 if (self.cache === null || reload === true) {
                     self.list()
-                        .then(function(response) {
+                        .then(function (response) {
                             self.cache = {};
                             self.tagsCache = {};
 
-                            _.each(response, function(taxonomy) {
+                            _.each(response, function (taxonomy) {
                                 self.cache[taxonomy.namespace] = taxonomy;
 
                                 self.cacheTagColors(taxonomy.tags);
                             });
                         })
-                        .then(function() {
+                        .then(function () {
                             return TagSrv.getFreeTags();
                         })
-                        .then(function(freeTags) {
+                        .then(function (freeTags) {
                             self.cacheTagColors(freeTags);
 
                             deferred.resolve(self.cache);
@@ -74,7 +74,7 @@
                 return deferred.promise;
             };
 
-            self.openTagLibrary = function() {
+            self.openTagLibrary = function () {
                 var defer = $q.defer();
 
                 var modalInstance = $uibModal.open({
@@ -84,18 +84,18 @@
                     templateUrl: 'views/partials/misc/taxonomy-selection.modal.html',
                     size: 'lg',
                     resolve: {
-                        taxonomies: function() {
+                        taxonomies: function () {
                             return self.all();
                         }
                     }
                 });
 
                 modalInstance.result
-                    .then(function(selectedTags) {
+                    .then(function (selectedTags) {
                         var filterFn = $filter('tagValue'),
                             tags = [];
 
-                        _.each(selectedTags, function(tag) {
+                        _.each(selectedTags, function (tag) {
                             tags.push({
                                 text: filterFn(tag)
                             });
@@ -104,7 +104,7 @@
                         //$scope.tags = $scope.tags.concat(tags);
                         defer.resolve(tags);
                     })
-                    .catch(function(err) {
+                    .catch(function (err) {
                         if (err && !_.isString(err)) {
                             NotificationSrv.error('Tag selection', err.data, err.status);
                         }
diff --git a/frontend/app/views/partials/admin/taxonomy/view.html b/frontend/app/views/partials/admin/taxonomy/view.html
index bcfbdf1b61..5e687a7782 100644
--- a/frontend/app/views/partials/admin/taxonomy/view.html
+++ b/frontend/app/views/partials/admin/taxonomy/view.html
@@ -40,15 +40,14 @@ <h3 class="modal-title">{{::$modal.taxonomy.namespace}} taxonomy</h3>
                     <tbody>
                         <tr ng-repeat="tag in $modal.taxonomy.tags">
                             <td>
-                                <span class="label">
-                                    <tag value="tag"></tag>
-                                </span>
+                                <tag-item class="label-lg" value="tag"></tag-item>
                             </td>
                             <td>{{::tag.predicate}}</td>
                             <td>{{::tag.value || '-'}}</td>
                             <td>{{::tag.colour}}</td>
                             <td>
-                                <span ng-if="::tag.description" uib-tooltip="{{::tag.description}}" tooltip-placement="left">
+                                <span ng-if="::tag.description" uib-tooltip="{{::tag.description}}"
+                                    tooltip-placement="left">
                                     <i class="fa fa-question-circle"></i>
                                 </span>
                             </td>
diff --git a/frontend/app/views/partials/misc/taxonomy-selection.modal.html b/frontend/app/views/partials/misc/taxonomy-selection.modal.html
index 5a5ce376d5..dcba7df369 100644
--- a/frontend/app/views/partials/misc/taxonomy-selection.modal.html
+++ b/frontend/app/views/partials/misc/taxonomy-selection.modal.html
@@ -17,8 +17,8 @@ <h3 class="modal-title">Select tags from library</h3>
             <div ng-if="$modal.formData.selectedTags.length > 0">
                 <div class="empty-message">
                     <div class="tags-list flexwrap">
-                        <tag-item ng-repeat="tag in $modal.formData.selectedTags track by $index"
-                            value="tag" class="clickable" ng-click="$modal.selectTag(tag)"></tag-item>
+                        <tag-item ng-repeat="tag in $modal.formData.selectedTags track by $index" value="tag"
+                            class="clickable" ng-click="$modal.selectTag(tag)"></tag-item>
                     </div>
                 </div>
                 <p class="help-block">Click on a tag to unselect it</p>
@@ -32,9 +32,11 @@ <h3 class="modal-title">Select tags from library</h3>
             <div class="list-group">
                 <a href class="list-group-item" ng-repeat="taxonomy in $modal.taxonomies"
                     ng-click="$modal.selectTaxonomy(taxonomy)" class="clearfix">
-                    <span class="badge" uib-tooltip="{{taxonomy.description}}" tooltip-placement="left" tooltip-append-to-body="true"><i class="fa fa-question"></i></span>
+                    <span class="badge" uib-tooltip="{{taxonomy.description}}" tooltip-placement="left"
+                        tooltip-append-to-body="true"><i class="fa fa-question"></i></span>
                     <span>{{taxonomy.namespace}} </span>
-                    <small class="pull-right mr-m"><em class="text-muted">({{taxonomy.tags.length || 0}} tags)</em></small>
+                    <small class="pull-right mr-m"><em class="text-muted">({{taxonomy.tags.length || 0}}
+                            tags)</em></small>
                 </a>
             </div>
         </div>
@@ -44,13 +46,15 @@ <h3 class="modal-title">Select tags from library</h3>
                 <label>
                     Choose tags from taxonomy: {{$modal.formData.selectedTaxonomy.namespace}}
                 </label>
-                <a class="pull-right" href ng-click="$modal.formData.selectedTaxonomy = undefined">Show all taxonomies</a>
+                <a class="pull-right" href ng-click="$modal.formData.selectedTaxonomy = undefined">Show all
+                    taxonomies</a>
             </div>
 
             <div class="row mb-xxs">
                 <div class="col-sm-12">
                     <div class="has-feedback">
-                        <input type="text" ng-model="$modal.search" class="form-control" placeholder="Filter tags" autofocus>
+                        <input type="text" ng-model="$modal.search" class="form-control" placeholder="Filter tags"
+                            autofocus>
                         <span class="glyphicon glyphicon-search form-control-feedback"></span>
                     </div>
                 </div>
@@ -58,17 +62,20 @@ <h3 class="modal-title">Select tags from library</h3>
 
             <div style="height: 300px; max-height: 300px; overflow-y: scroll;">
                 <div class="list-group">
-                    <a href class="list-group-item" ng-repeat="tag in $modal.formData.selectedTaxonomy.tags | filter:$modal.search"
+                    <a href class="list-group-item"
+                        ng-repeat="tag in $modal.formData.selectedTaxonomy.tags | filter:$modal.search"
                         ng-click="$modal.selectTag(tag)">
-                        <span class="mr-xs" ng-class="{'text-primary': !!tag.selected, 'text-disabled': !!!tag.selected}">
+                        <span class="mr-xs"
+                            ng-class="{'text-primary': !!tag.selected, 'text-disabled': !!!tag.selected}">
                             <i class="fa fa-check"></i>
                         </span>
 
-                        <span class="badge" ng-if="::tag.description" uib-tooltip="{{::tag.description}}" tooltip-placement="left" tooltip-append-to-body="true">
+                        <span class="badge" ng-if="::tag.description" uib-tooltip="{{::tag.description}}"
+                            tooltip-placement="left" tooltip-append-to-body="true">
                             <i class="fa fa-question"></i>
                         </span>
 
-                        <tag value="tag"></tag>
+                        <tag-item value="tag"></tag-item>
                     </a>
                 </div>
             </div>
@@ -76,6 +83,7 @@ <h3 class="modal-title">Select tags from library</h3>
     </div>
     <div class="modal-footer">
         <button class="btn btn-default pull-left" type="button" ng-click="$modal.cancel()">Cancel</button>
-        <button class="btn btn-primary pull-right" type="submit" ng-disabled="$modal.formData.selectedTags === 0">Add Selected tags</button>
+        <button class="btn btn-primary pull-right" type="submit" ng-disabled="$modal.formData.selectedTags === 0">Add
+            Selected tags</button>
     </div>
 </form>