Have labels with URLs in them turn into links

Fixes https://issues.redhat.com/browse/PROJQUAY-129
kleesc · Jan 6, 2020 · 291967b · 291967b
1 parent d8bd445
commit 291967b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/static/css/directives/ui/label-view.css b/static/css/directives/ui/label-view.css
@@ -23,3 +23,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.label-view-element-link.is-link .key {
+  text-transform: uppercase;
+  font-size: 8px;
+  margin-right: 2px;
+  position: relative;
+  top: -1px;
+}
diff --git a/static/directives/label-view.html b/static/directives/label-view.html
@@ -1,8 +1,20 @@
-<a class="label-view-element" ng-click="viewLabelValue()">
-  <span class="kind">{{ getKind(label) }}</span>
-  <span class="label-value">
+<span class="label-view-element">
+  <a class="label-view-element-link" ng-click="viewLabelValue()" ng-if="!isUrl(label.value)">
+    <span class="kind" ng-show="getKind(label)">{{ getKind(label) }}</span>
+    <span class="label-value">
+        <span class="key">{{ label.key }}</span>
+        <span class="equals">=</span>
+        <span class="value">{{ label.value }}</span>
+    </span>
+  </a>
+  <a class="label-view-element-link is-link"
+     ng-if="isUrl(label.value)"
+     ng-href="{{ label.value }}"
+     rel="nofollow noopener"
+     target="_blank">
+     <span class="label-value">
       <span class="key">{{ label.key }}</span>
-      <span class="equals">=</span>
       <span class="value">{{ label.value }}</span>
-  </span>
-</a>
+    </span>
+</a>
+</span>
diff --git a/static/js/directives/ui/label-view.js b/static/js/directives/ui/label-view.js
@@ -20,6 +20,10 @@ angular.module('quay').directive('labelView', function () {
         return '';
       };
 
+      $scope.isUrl = function(value) {
+        return value && value.indexOf('https:') == 0;
+      };
+
       $scope.viewLabelValue = function() {
         bootbox.alert({
           size: "small",