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 1/2] 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;

From 703a64cd6a71c31d6a8f078a35ecef1aa46705c5 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Wed, 25 Oct 2017 15:02:39 -0400
Subject: [PATCH 2/2] Add pull by digest to the fetch tag dialog

---
 static/js/directives/ui/fetch-tag-dialog.js | 25 ++++++++++++++-------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/static/js/directives/ui/fetch-tag-dialog.js b/static/js/directives/ui/fetch-tag-dialog.js
index ae84b0f6d..51d75abea 100644
--- a/static/js/directives/ui/fetch-tag-dialog.js
+++ b/static/js/directives/ui/fetch-tag-dialog.js
@@ -25,6 +25,20 @@ angular.module('quay').directive('fetchTagDialog', function () {
       var updateFormats = function() {
         $scope.formats = [];
 
+        $scope.formats.push({
+          'title': 'Docker Pull (by tag)',
+          'icon': 'docker-icon',
+          'command': 'docker pull {hostname}/{namespace}/{name}:{tag}'
+        });
+
+        if ($scope.currentTag && $scope.currentTag.manifest_digest) {          
+          $scope.formats.push({
+            'title': 'Docker Pull (by digest)',
+            'icon': 'docker-icon',
+            'command': 'docker pull {hostname}/{namespace}/{name}@{manifest_digest}'
+          });
+        }
+
         if ($scope.repository) {
           $scope.formats.push({
             'title': 'Squashed Docker Image',
@@ -37,17 +51,11 @@ angular.module('quay').directive('fetchTagDialog', function () {
 
         if (Features.ACI_CONVERSION) {
           $scope.formats.push({
-            'title': 'Rocket Fetch',
+            'title': 'rkt Fetch',
             'icon': 'rocket-icon',
             'command': 'rkt fetch {hostname}/{namespace}/{name}:{tag}'
           });
         }
-
-        $scope.formats.push({
-          'title': 'Basic Docker Pull',
-          'icon': 'docker-icon',
-          'command': 'docker pull {hostname}/{namespace}/{name}:{tag}'
-        });
       };
 
       $scope.$watch('currentEntity', function(entity) {
@@ -97,7 +105,8 @@ angular.module('quay').directive('fetchTagDialog', function () {
           'http': Config.getHttp(),
           'namespace': $scope.repository.namespace,
           'name': $scope.repository.name,
-          'tag': $scope.currentTag.name
+          'tag': $scope.currentTag.name,
+          'manifest_digest': $scope.currentTag.manifest_digest
         };
 
         var value = format.command;