From 86e4539c0418e308e4876e79d9107d411337b78d Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Wed, 25 Oct 2017 14:56:59 -0400
Subject: [PATCH] Add ability to copy the full SHA256 or V1ID for an image

Clicking the little (SHA256) or (V1ID) bubble next to the ID will now show a dialog with a copy box.
---
 static/directives/image-link.html     | 46 +++++++++++++++++++--------
 static/js/directives/ui/image-link.js | 22 ++++++++++++-
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/static/directives/image-link.html b/static/directives/image-link.html
index 71af47bca..88d66add0 100644
--- a/static/directives/image-link.html
+++ b/static/directives/image-link.html
@@ -1,17 +1,37 @@
 <span>
-    <a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ imageId }}"
-       class="image-link-element" bindonce>
-        <span class="id-label" ng-if="!hasSHA256(manifestDigest)"
-              data-title="The Docker V1 ID for this image. This ID is not content addressable nor is it stable across pulls."
-              data-container="body"
-              bs-tooltip>V1ID</span>
+  <span class="id-label" ng-if="!hasSHA256(manifestDigest)"
+        data-title="The Docker V1 ID for this image. This ID is not content addressable nor is it stable across pulls."
+        data-container="body"
+        ng-click="showCopyBox()"
+        bs-tooltip>V1ID</span>
 
-        <span class="id-label cas" ng-if="hasSHA256(manifestDigest)"
-              data-title="The content-addressable SHA256 hash of this tag."
-              data-container="body"
-              bs-tooltip>SHA256</span>
+  <span class="id-label cas" ng-if="hasSHA256(manifestDigest)"
+        data-title="The content-addressable SHA256 hash of this tag."
+        data-container="body"
+        ng-click="showCopyBox()"
+        bs-tooltip>SHA256</span>
 
-        <span ng-if="!hasSHA256(manifestDigest)">{{ imageId.substr(0, 12) }}</span>
-        <span ng-if="hasSHA256(manifestDigest)">{{ getShortDigest(manifestDigest) }}</span>
-    </a>
+  <a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ imageId }}"
+     class="image-link-element" bindonce>
+    <span ng-if="!hasSHA256(manifestDigest)">{{ imageId.substr(0, 12) }}</span>
+    <span ng-if="hasSHA256(manifestDigest)">{{ getShortDigest(manifestDigest) }}</span>
+  </a>
+
+  <div class="modal fade co-dialog" ng-if="showingCopyBox">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" ng-click="hideCopyBox()"
+                  aria-hidden="true">&times;</button>
+          <h4 class="modal-title"><span ng-if="hasSHA256(manifestDigest)">Manifest SHA256</span><span ng-if="!hasSHA256(manifestDigest)">V1 ID</span></h4>
+        </div>
+        <div class="modal-body">
+          <div class="copy-box" hovering-message="true" value="hasSHA256(manifestDigest) ? manifestDigest : imageId"></div>            
+        </div>
+        <div class="modal-footer" ng-show="!working">
+          <button type="button" class="btn btn-default" ng-click="hideCopyBox()">Close</button>
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->
 </span>
diff --git a/static/js/directives/ui/image-link.js b/static/js/directives/ui/image-link.js
index 7a3bcf2c4..9f8d9fb53 100644
--- a/static/js/directives/ui/image-link.js
+++ b/static/js/directives/ui/image-link.js
@@ -13,7 +13,9 @@ angular.module('quay').directive('imageLink', function () {
       'imageId': '=imageId',
       'manifestDigest': '=?manifestDigest'
     },
-    controller: function($scope, $element) {
+    controller: function($scope, $element, $timeout) {
+      $scope.showingCopyBox = false;
+
       $scope.hasSHA256 = function(digest) {
         return digest && digest.indexOf('sha256:') == 0;
       };
@@ -21,6 +23,24 @@ angular.module('quay').directive('imageLink', function () {
       $scope.getShortDigest = function(digest) {
         return digest.substr('sha256:'.length).substr(0, 12);
       };
+
+      $scope.showCopyBox = function() {
+        $scope.showingCopyBox = true;
+
+        // Necessary to wait for digest cycle to complete.
+        $timeout(function() {
+          $element.find('.modal').modal('show');
+        }, 10);        
+      };
+
+      $scope.hideCopyBox = function() {
+        $element.find('.modal').modal('hide');
+
+        // Wait for the modal to hide before removing from the DOM.
+        $timeout(function() {
+          $scope.showingCopyBox = false;
+        }, 10);
+      };
     }
   };
   return directiveDefinitionObject;