Rewrite OC.SystemTags.getDescriptiveTag to vanilla js

For every tag a deprecation warning is emitted.
With 10k tags the ui becomes unresponsive and inspector crashed occasionally.

Signed-off-by: Daniel Kesselberg <mail@danielkesselberg.de>

3 files changed, 21 insertions, 18 deletions

diff --git a/core/js/tests/specs/systemtags/systemtagsSpec.js b/core/js/tests/specs/systemtags/systemtagsSpec.js
index f6d99e62a3c..7d7987e9cb3 100644
--- a/core/js/tests/specs/systemtags/systemtagsSpec.js
+++ b/core/js/tests/specs/systemtags/systemtagsSpec.js
@@ -22,8 +22,8 @@
 describe('OC.SystemTags tests', function() {
 	it('describes non existing tag', function() {
 		var $return = OC.SystemTags.getDescriptiveTag('23');
-		expect($return.text()).toEqual('Non-existing tag #23');
-		expect($return.hasClass('non-existing-tag')).toEqual(true);
+		expect($return.textContent).toEqual('Non-existing tag #23');
+		expect($return.classList.contains('non-existing-tag')).toEqual(true);
 	});
 
 	it('describes SystemTagModel', function() {
@@ -34,8 +34,8 @@ describe('OC.SystemTags tests', function() {
 			userVisible: true
 		});
 		var $return = OC.SystemTags.getDescriptiveTag(tag);
-		expect($return.text()).toEqual('Twenty Three');
-		expect($return.hasClass('non-existing-tag')).toEqual(false);
+		expect($return.textContent).toEqual('Twenty Three');
+		expect($return.classList.contains('non-existing-tag')).toEqual(false);
 	});
 
 	it('describes JSON tag object', function() {
@@ -45,8 +45,8 @@ describe('OC.SystemTags tests', function() {
 			userAssignable: true,
 			userVisible: true
 		});
-		expect($return.text()).toEqual('Fourty Two');
-		expect($return.hasClass('non-existing-tag')).toEqual(false);
+		expect($return.textContent).toEqual('Fourty Two');
+		expect($return.classList.contains('non-existing-tag')).toEqual(false);
 	});
 
 	it('scope', function() {
@@ -57,8 +57,8 @@ describe('OC.SystemTags tests', function() {
 				userAssignable: userAssignable,
 				userVisible: userVisible
 			});
-			expect($return.text()).toEqual(expectedText);
-			expect($return.hasClass('non-existing-tag')).toEqual(false);
+			expect($return.textContent).toEqual(expectedText);
+			expect($return.classList.contains('non-existing-tag')).toEqual(false);
 		}
 
 		testScope(true, true, 'Fourty Two');
diff --git a/core/src/systemtags/systemtags.js b/core/src/systemtags/systemtags.js
index 91ace6b3425..bbb2ecac1d8 100644
--- a/core/src/systemtags/systemtags.js
+++ b/core/src/systemtags/systemtags.js
@@ -35,23 +35,24 @@ import escapeHTML from 'escape-html'
 		/**
 		 *
 		 * @param {OC.SystemTags.SystemTagModel|Object|String} tag
-		 * @returns {jQuery}
+		 * @returns {HTMLElement}
 		 */
 		getDescriptiveTag: function(tag) {
 			if (_.isUndefined(tag.name) && !_.isUndefined(tag.toJSON)) {
 				tag = tag.toJSON()
 			}
 
+			var $span = document.createElement('span')
+
 			if (_.isUndefined(tag.name)) {
-				return $('<span>').addClass('non-existing-tag').text(
-					t('core', 'Non-existing tag #{tag}', {
+				$span.classList.add('non-existing-tag')
+				$span.textContent = t('core', 'Non-existing tag #{tag}', {
 						tag: tag
-					})
-				)
+				})
+				return $span
 			}
 
-			var $span = $('<span>')
-			$span.append(escapeHTML(tag.name))
+			$span.textContent = escapeHTML(tag.name)
 
 			var scope
 			if (!tag.userAssignable) {
@@ -62,7 +63,9 @@ import escapeHTML from 'escape-html'
 				scope = t('core', 'invisible')
 			}
 			if (scope) {
-				$span.append($('<em>').text(' (' + scope + ')'))
+				var $scope = document.createElement('em')
+				$scope.textContent = ' (' + scope + ')'
+				$span.appendChild($scope)
 			}
 			return $span
 		}
diff --git a/core/src/systemtags/systemtagsinputfield.js b/core/src/systemtags/systemtagsinputfield.js
index 7c68a4b09ad..1b6fb71f42d 100644
--- a/core/src/systemtags/systemtagsinputfield.js
+++ b/core/src/systemtags/systemtagsinputfield.js
@@ -292,7 +292,7 @@ import templateSelection from './templates/selection.handlebars'
 				return templateResult(_.extend({
 					renameTooltip: t('core', 'Rename'),
 					allowActions: this._allowActions,
-					tagMarkup: this._isAdmin ? OC.SystemTags.getDescriptiveTag(data)[0].innerHTML : null,
+					tagMarkup: this._isAdmin ? OC.SystemTags.getDescriptiveTag(data).innerHTML : null,
 					isAdmin: this._isAdmin
 				}, data))
 			},
@@ -305,7 +305,7 @@ import templateSelection from './templates/selection.handlebars'
 		 */
 			_formatSelection: function(data) {
 				return templateSelection(_.extend({
-					tagMarkup: this._isAdmin ? OC.SystemTags.getDescriptiveTag(data)[0].innerHTML : null,
+					tagMarkup: this._isAdmin ? OC.SystemTags.getDescriptiveTag(data).innerHTML : null,
 					isAdmin: this._isAdmin
 				}, data))
 			},