Add a label input control

external_libraries.py

@@ -19,6 +19,7 @@ EXTERNAL_JS = [
   'cdn.ravenjs.com/3.1.0/angular/raven.min.js',
   'cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js',
   'cdnjs.cloudflare.com/ajax/libs/angular-recaptcha/3.2.1/angular-recaptcha.min.js',
+  'cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js',
 ]
 
 EXTERNAL_CSS = [
@@ -28,6 +29,7 @@ EXTERNAL_CSS = [
   's3.amazonaws.com/cdn.core-os.net/icons/core-icons.css',
   'cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css',
   'cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css',
+  'cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css',
 ]
 
 EXTERNAL_FONTS = [

static/css/directives/ui/label-input.css

@@ -0,0 +1,40 @@
+.label-input-element .tags {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+.label-input-element .tags.focused {
+  border-color: #66afe9;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
+}
+
+.label-input-element .tags .tag-item {
+  display: inline-block;
+  border-radius: 9px;
+  background: #eee;
+  font-size: 12px;
+  border: 0px;
+  padding: 0px;
+  padding-left: 8px;
+  padding-right: 8px;
+  height: 22px;
+  line-height: 22px;
+}
+
+.label-input-element tags-input .tags .input {
+  height: 22px;
+}
+
+.label-input-element .tags .tag-item.selected {
+  background: #31b0d5;
+  color: #fff;
+}
+
+.label-input-element .tags .tag-item button {
+  background: transparent;
+  color: #000;
+  opacity: .4;
+}

static/directives/label-input.html

@@ -0,0 +1,12 @@
+<div class="label-input-element">
+  <tags-input class="quay-lavels"
+              ng-model="tags"
+              display-property="keyValue"
+              placeholder="git-sha=123456ab"
+              add-on-paste="true"
+              add-on-comma="false"
+              spellcheck="false"
+              replace-spaces-with-dashes="false"
+              allowed-tags-pattern="^[0-9A-Za-z/\-_.]+=.+$"
+              enable-editing-last-tag="true"></tags-input>
+</div>

static/js/directives/ui/label-input.js

@@ -0,0 +1,43 @@
+/**
+ * An element which allows for editing labels.
+ */
+angular.module('quay').directive('labelInput', function () {
+  return {
+    templateUrl: '/static/directives/label-input.html',
+    restrict: 'C',
+    replace: true,
+    scope: {
+      'labels': '=labels',
+      'updatedLabels': '=?updatedLabels',
+    },
+    controller: function($scope) {
+      $scope.tags = [];
+
+      $scope.$watch('tags', function(tags) {
+        if (!tags) { return; }
+        $scope.updatedLabels = tags.filter(function(tag) {
+          parts = tag['keyValue'].split('=', 2);
+          return tag['label'] ? tag['label'] : {
+            'key': parts[0],
+            'value': parts[1],
+            'is_new': true
+          };
+        });
+      }, true);
+
+      $scope.$watch('labels', function(labels) {
+        $scope.filteredLabels = labels.filter(function(label) {
+          return label['source_type'] == 'api';
+        });
+
+        $scope.tags = $scope.filteredLabels.map(function(label) {
+          return {
+            'id': label['id'],
+            'keyValue': label['key'] + '=' + label['value'],
+            'label': label
+          };
+        });
+      });
+    }
+  };
+});

static/lib/LICENSES

@@ -23,6 +23,7 @@ URI.js - MIT (https://github.com/medialize/URI.js)
 angular-hotkeys - MIT (https://github.com/chieffancypants/angular-hotkeys/blob/master/LICENSE)
 angular-debounce - MIT (https://github.com/shahata/angular-debounce/blob/master/LICENSE)
 infinite-scroll - MIT (https://github.com/sroze/ngInfiniteScroll/blob/master/LICENSE)
+ngTagsInput - MIT (https://github.com/mbenford/ngTagsInput/blob/master/LICENSE)
 
 Issues:
 >>>>> jquery.spotlight - GPLv3 (https://github.com/jameshalsall/jQuery-Spotlight)