From df58be82bc095a8206cba4eee8adc85d850543b3 Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Fri, 9 Apr 2021 14:37:44 +0200
Subject: [PATCH] #1950 Use tag colour in tag-list component and refresh custom
 tags cache on tag update

---
 .../organisation/OrgCustomTagsListCmp.js      | 44 ++++++++++---------
 frontend/app/scripts/directives/tag-colour.js | 15 ++++---
 .../scripts/services/api/TaxonomyCacheSrv.js  |  7 +++
 3 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/frontend/app/scripts/components/organisation/OrgCustomTagsListCmp.js b/frontend/app/scripts/components/organisation/OrgCustomTagsListCmp.js
index 9025b3af1b..a61b8e5ca2 100644
--- a/frontend/app/scripts/components/organisation/OrgCustomTagsListCmp.js
+++ b/frontend/app/scripts/components/organisation/OrgCustomTagsListCmp.js
@@ -1,15 +1,15 @@
-(function() {
+(function () {
     'use strict';
 
     angular.module('theHiveComponents')
         .component('orgCustomTagsList', {
-            controller: function($scope, PaginatedQuerySrv, FilteringSrv, TagSrv, UserSrv, ModalUtilsSrv, NotificationSrv) {
+            controller: function ($scope, PaginatedQuerySrv, FilteringSrv, TaxonomyCacheSrv, TagSrv, UserSrv, ModalUtilsSrv, NotificationSrv) {
                 var self = this;
 
                 self.tags = [];
                 self.getUserInfo = UserSrv.getCache;
 
-                this.$onInit = function() {
+                this.$onInit = function () {
                     // TODO: FIXME
                     self.filtering = new FilteringSrv('tag', 'custom-tags.list', {
                         version: 'v1',
@@ -23,7 +23,7 @@
                     });
 
                     self.filtering.initContext(self.organisation.name)
-                        .then(function() {
+                        .then(function () {
                             self.load();
 
                             $scope.$watch('$vm.list.pageSize', function (newValue) {
@@ -32,7 +32,7 @@
                         });
                 };
 
-                this.load = function() {
+                this.load = function () {
 
                     self.list = new PaginatedQuerySrv({
                         name: 'organisation-custom-tags',
@@ -48,8 +48,8 @@
                             }
                         ],
                         extraData: ['usage'],
-                        onFailure: function(err) {
-                            if(err && err.status === 400) {
+                        onFailure: function (err) {
+                            if (err && err.status === 400) {
                                 self.filtering.resetContext();
                                 self.load();
                             }
@@ -74,22 +74,24 @@
                         });
                 };
 
-                self.updateColour = function(id, colour) {
-                    TagSrv.updateTag(id, {colour: colour})
-                        .then(function(/*response*/) {
+                self.updateColour = function (id, colour) {
+                    TagSrv.updateTag(id, { colour: colour })
+                        .then(function (/*response*/) {
                             NotificationSrv.success('Tag colour updated successfully');
+                            TaxonomyCacheSrv.refreshFreeTags();
                         })
-                        .catch(function(err) {
+                        .catch(function (err) {
                             NotificationSrv.error('Tag list', err.data, err.status);
                         })
                 }
 
-                self.updateTag = function(id, value) {
-                    TagSrv.updateTag(id, {predicate: value})
-                        .then(function(/*response*/) {
+                self.updateTag = function (id, value) {
+                    TagSrv.updateTag(id, { predicate: value })
+                        .then(function (/*response*/) {
                             NotificationSrv.success('Tag value updated successfully');
+                            TaxonomyCacheSrv.refreshFreeTags();
                         })
-                        .catch(function(err) {
+                        .catch(function (err) {
                             NotificationSrv.error('Tag list', err.data, err.status);
                         })
                 }
@@ -122,28 +124,28 @@
                     this.search();
                 };
 
-                this.filterBy = function(field, value) {
+                this.filterBy = function (field, value) {
                     self.filtering.clearFilters()
-                        .then(function(){
+                        .then(function () {
                             self.addFilterValue(field, value);
                         });
                 };
 
-                this.sortBy = function(sort) {
+                this.sortBy = function (sort) {
                     self.list.sort = sort;
                     self.list.update();
                     self.filtering.setSort(sort);
                 };
 
-                this.sortByField = function(field) {
+                this.sortByField = function (field) {
                     var context = this.filtering.context;
                     var currentSort = Array.isArray(context.sort) ? context.sort[0] : context.sort;
                     var sort = null;
 
-                    if(currentSort.substr(1) !== field) {
+                    if (currentSort.substr(1) !== field) {
                         sort = ['+' + field];
                     } else {
-                        sort = [(currentSort === '+' + field) ? '-'+field : '+'+field];
+                        sort = [(currentSort === '+' + field) ? '-' + field : '+' + field];
                     }
 
                     self.list.sort = sort;
diff --git a/frontend/app/scripts/directives/tag-colour.js b/frontend/app/scripts/directives/tag-colour.js
index c6fb358884..e17d9051e8 100644
--- a/frontend/app/scripts/directives/tag-colour.js
+++ b/frontend/app/scripts/directives/tag-colour.js
@@ -1,19 +1,22 @@
-(function() {
+(function () {
     'use strict';
-    angular.module('theHiveDirectives').directive('tagColour', function($timeout, TaxonomyCacheSrv) {
+    angular.module('theHiveDirectives').directive('tagColour', function ($timeout, TaxonomyCacheSrv, TagSrv) {
         return {
             restrict: 'A',
             scope: {
                 tag: '='
             },
-            link: function(scope, element/*, attrs*/) {
-                if(!scope.tag) {
+            link: function (scope, element/*, attrs*/) {
+                if (!scope.tag) {
                     return;
                 }
 
-                scope.bgColour = TaxonomyCacheSrv.getColour(scope.tag) || TaxonomyCacheSrv.getColour('_freetags_:' + scope.tag) || '#3c8dbc';
+                scope.bgColour = TaxonomyCacheSrv.getColour(scope.tag) ||
+                    TaxonomyCacheSrv.getColour('_freetags_:' + scope.tag) ||
+                    TagSrv.tagsDefaultColour ||
+                    '#000000';
 
-                $timeout(function() {
+                $timeout(function () {
                     angular.element(element[0]).attr('style', 'background-color:' + scope.bgColour);
                 });
             }
diff --git a/frontend/app/scripts/services/api/TaxonomyCacheSrv.js b/frontend/app/scripts/services/api/TaxonomyCacheSrv.js
index cfae25df92..b7d861be36 100644
--- a/frontend/app/scripts/services/api/TaxonomyCacheSrv.js
+++ b/frontend/app/scripts/services/api/TaxonomyCacheSrv.js
@@ -44,6 +44,13 @@
                 });
             };
 
+            this.refreshFreeTags = function () {
+                return TagSrv.getFreeTags()
+                    .then(function (freeTags) {
+                        self.cacheTagColors(freeTags);
+                    });
+            }
+
             this.all = function (reload) {
                 var deferred = $q.defer();