From 815ef44651d0e4a4e6ad4e23f2e77fb58efbaf73 Mon Sep 17 00:00:00 2001
From: Kenny Lee Sin Cheong <2530351+kleesc@users.noreply.github.com>
Date: Wed, 23 Mar 2022 16:15:15 -0400
Subject: [PATCH] ui: remove deprecated docker-image-id references from ui
 (PROJQUAY-3418) (#1197)

Remove docker id references from ui. Tags should now be referencing
the manifest it is pointing to.
---
 static/directives/repo-tag-history.html       |  9 -----
 static/directives/tag-operations-dialog.html  | 17 +++++----
 .../directives/repo-view/repo-panel-tags.js   |  2 +-
 .../manifest-link.component.html              |  8 +----
 static/js/directives/ui/repo-tag-history.js   | 13 ++-----
 .../js/directives/ui/tag-operations-dialog.js | 36 +++++++------------
 6 files changed, 26 insertions(+), 59 deletions(-)

diff --git a/static/directives/repo-tag-history.html b/static/directives/repo-tag-history.html
index 2aedf5cf7..7ee0a252d 100644
--- a/static/directives/repo-tag-history.html
+++ b/static/directives/repo-tag-history.html
@@ -40,13 +40,11 @@
                   <span ng-switch-when="recreate">
                     was recreated pointing to
                     <manifest-link repository="repository"
-                          image-id="entry.docker_image_id"
                           manifest-digest="entry.manifest_digest"></manifest-link>
                   </span>
                   <span ng-switch-when="create">
                     was created pointing to
                     <manifest-link repository="repository"
-                          image-id="entry.docker_image_id"
                           manifest-digest="entry.manifest_digest"></manifest-link>
                   </span>
                   <span ng-switch-when="delete">
@@ -56,21 +54,17 @@
                   <span ng-switch-when="move">
                     was moved to
                     <manifest-link repository="repository"
-                          image-id="entry.docker_image_id"
                           manifest-digest="entry.manifest_digest"></manifest-link>
                     from
                     <manifest-link repository="repository"
-                          image-id="entry.old_docker_image_id"
                           manifest-digest="entry.old_manifest_digest"></manifest-link>
                   </span>
                   <span ng-switch-when="revert">
                     was reverted to
                     <manifest-link repository="repository"
-                          image-id="entry.docker_image_id"
                           manifest-digest="entry.manifest_digest"></manifest-link>
                     from
                     <manifest-link repository="repository"
-                          image-id="entry.old_docker_image_id"
                           manifest-digest="entry.old_manifest_digest"></manifest-link>
                   </span>
                 </span>
@@ -90,19 +84,16 @@
                   <a ng-switch-when="delete" ng-click="askRestoreTag(entry, true)">
                     Restore to
                     <manifest-link repository="repository"
-                          image-id="entry.docker_image_id"
                           manifest-digest="entry.manifest_digest"></manifest-link>
                   </a>
                   <a ng-switch-when="move" ng-click="askRestoreTag(entry, false)">
                     Revert to
                     <manifest-link repository="repository"
-                          image-id="entry.old_docker_image_id"
                           manifest-digest="entry.old_manifest_digest"></manifest-link>
                   </a>
                   <a ng-switch-when="revert" ng-click="askRestoreTag(entry, false)">
                     Restore to
                     <manifest-link repository="repository"
-                          image-id="entry.old_docker_image_id"
                           manifest-digest="entry.old_manifest_digest"></manifest-link>
                   </a>
                 </span>
diff --git a/static/directives/tag-operations-dialog.html b/static/directives/tag-operations-dialog.html
index 70f252249..000fb11fb 100644
--- a/static/directives/tag-operations-dialog.html
+++ b/static/directives/tag-operations-dialog.html
@@ -47,9 +47,9 @@
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal"
                   aria-hidden="true" ng-show="!addingTag">&times;</button>
-          <h4 class="modal-title">{{ isAnotherImageTag(toTagImage, tagToCreate) ? 'Move' : 'Add' }} Tag to {{ toTagManifestDigest ? ('Manifest ' + toTagManifestDigest.substr(0, 19)) : ('Image ' + toTagImage.substr(0, 12)) }}</h4>
+          <h4 class="modal-title">{{ isAnotherImageTag(toTagManifestDigest, tagToCreate) ? 'Move' : 'Add' }} Tag to {{ 'Manifest ' + toTagManifestDigest.substr(0, 19) }}</h4>
         </div>
-        <form name="addTagForm" ng-submit="createOrMoveTag(toTagImage, tagToCreate, toTagManifestDigest);">
+        <form name="addTagForm" ng-submit="createOrMoveTag(toTagManifestDigest, tagToCreate);">
           <div class="modal-body">
             <div class="cor-loader" ng-show="addingTag"></div>
             <div ng-show="!addingTag">
@@ -59,22 +59,22 @@
                      ng-disabled="creatingTag" autofocus required>
 
               <div style="margin: 10px; margin-top: 20px;"
-                   ng-show="isOwnedTag(toTagImage, tagToCreate)">
+                   ng-show="isOwnedTag(toTagManifestDigest, tagToCreate)">
                 Note: <span class="label tag label-default">{{ tagToCreate }}</span> is already applied to this image.
               </div>
 
               <div style="margin: 10px; margin-top: 20px;"
-                   ng-show="isAnotherImageTag(toTagImage, tagToCreate)">
+                   ng-show="isAnotherImageTag(toTagManifestDigest, tagToCreate)">
                 Note: <span class="label tag label-default">{{ tagToCreate }}</span> is already applied to another image. This will <b>move</b> the tag.
               </div>
             </div>
           </div>
           <div class="modal-footer" ng-show="!addingTag">
             <button type="submit" class="btn btn-primary"
-                    ng-disabled="addTagForm.$invalid || isOwnedTag(toTagImage, tagToCreate)"
-                    ng-class="isAnotherImageTag(toTagImage, tagToCreate) ? 'btn-warning' : 'btn-primary'"
+                    ng-disabled="addTagForm.$invalid || isOwnedTag(toTagManifestDigest, tagToCreate)"
+                    ng-class="isAnotherImageTag(toTagManifestDigest, tagToCreate) ? 'btn-warning' : 'btn-primary'"
                     ng-show="!creatingTag">
-              {{ isAnotherImageTag(toTagImage, tagToCreate) ? 'Move Tag' : 'Create Tag' }}
+              {{ isAnotherImageTag(toTagManifestDigest, tagToCreate) ? 'Move Tag' : 'Create Tag' }}
             </button>
             <button class="btn btn-default" data-dismiss="modal" ng-show="!addingTag">Cancel</button>
           </div>
@@ -137,7 +137,7 @@
   <!-- Restore Tag Confirm -->
   <div class="cor-confirm-dialog"
        dialog-context="restoreTagInfo"
-       dialog-action="restoreTag(info.tag, info.image_id, info.manifest_digest, callback)"
+       dialog-action="restoreTag(info.tag, info.manifest_digest, callback)"
        dialog-title="Restore Tag"
        dialog-action-title="Restore Tag">
 
@@ -148,7 +148,6 @@
     Are you sure you want to restore tag
     <span class="label label-default tag">{{ restoreTagInfo.tag.name }}</span> to image
     <manifest-link repository="repository"
-                   image-id="restoreTagInfo.image_id"
                    manifest-digest="restoreTagInfo.manifest_digest"></manifest-link>?
   </div>
 
diff --git a/static/js/directives/repo-view/repo-panel-tags.js b/static/js/directives/repo-view/repo-panel-tags.js
index 1cce0dbef..5fe2374d0 100644
--- a/static/js/directives/repo-view/repo-panel-tags.js
+++ b/static/js/directives/repo-view/repo-panel-tags.js
@@ -373,7 +373,7 @@ angular.module('quay').directive('repoPanelTags', function () {
         if ($scope.inReadOnlyMode) {
           return;
         }
-        $scope.tagActionHandler.askAddTag(tag.image_id, tag.manifest_digest);
+        $scope.tagActionHandler.askAddTag(tag.manifest_digest);
       };
 
       $scope.showLabelEditor = function(tag) {
diff --git a/static/js/directives/ui/manifest-link/manifest-link.component.html b/static/js/directives/ui/manifest-link/manifest-link.component.html
index d14fc48fd..9408715ee 100644
--- a/static/js/directives/ui/manifest-link/manifest-link.component.html
+++ b/static/js/directives/ui/manifest-link/manifest-link.component.html
@@ -1,10 +1,4 @@
 <span class="manifest-link">
-    <span class="id-label" ng-if="::!$ctrl.hasSHA256($ctrl.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="$ctrl.showCopyBox()"
-            bs-tooltip>V1ID</span>
-
     <span class="id-label cas" ng-if="::$ctrl.hasSHA256($ctrl.manifestDigest)"
             data-title="The content-addressable SHA256 hash of this tag."
             data-container="body"
@@ -26,7 +20,7 @@
             <h4 class="modal-title"><span ng-if="$ctrl.hasSHA256($ctrl.manifestDigest)">Manifest SHA256</span><span ng-if="!$ctrl.hasSHA256($ctrl.manifestDigest)">V1 ID</span></h4>
             </div>
             <div class="modal-body">
-            <div class="copy-box" value="$ctrl.hasSHA256($ctrl.manifestDigest) ? $ctrl.manifestDigest : $ctrl.imageId"></div>            
+            <div class="copy-box" value="$ctrl.manifestDigest"></div>
             </div>
             <div class="modal-footer" ng-show="!working">
             <button type="button" class="btn btn-default" ng-click="$ctrl.hideCopyBox()">Close</button>
diff --git a/static/js/directives/ui/repo-tag-history.js b/static/js/directives/ui/repo-tag-history.js
index a4f465755..63185a124 100644
--- a/static/js/directives/ui/repo-tag-history.js
+++ b/static/js/directives/ui/repo-tag-history.js
@@ -53,7 +53,6 @@ angular.module('quay').directive('repoTagHistory', function () {
         // For each tag, turn the tag into create, move, delete, restore, etc entries.
         tags.forEach(function(tag) {
           var tagName = tag.name;
-          var dockerImageId = tag.docker_image_id;
           var manifestDigest = tag.manifest_digest;
 
           if (!tagEntries[tagName]) {
@@ -65,8 +64,7 @@ angular.module('quay').directive('repoTagHistory', function () {
             tagEntries[entry.tag_name].splice(tagEntries[entry.tag_name].indexOf(entry), 1);
           };
 
-          var addEntry = function(action, time, opt_docker_id, opt_old_docker_id,
-                                  opt_manifest_digest, opt_old_manifest_digest) {
+          var addEntry = function(action, time, opt_manifest_digest, opt_old_manifest_digest) {
             var entry = {
               'tag': tag,
               'tag_name': tagName,
@@ -75,8 +73,6 @@ angular.module('quay').directive('repoTagHistory', function () {
               'end_ts': tag.end_ts,
               'reversion': tag.reversion,
               'time': time * 1000, // JS expects ms, not s since epoch.
-              'docker_image_id': opt_docker_id || dockerImageId,
-              'old_docker_image_id': opt_old_docker_id || '',
               'manifest_digest': opt_manifest_digest || manifestDigest,
               'old_manifest_digest': opt_old_manifest_digest || null
             };
@@ -99,7 +95,7 @@ angular.module('quay').directive('repoTagHistory', function () {
             if (futureEntry.start_ts - tag.end_ts <= MOVE_THRESHOLD) {
               removeEntry(futureEntry);
               addEntry(futureEntry.reversion ? 'revert': 'move', tag.end_ts,
-                       futureEntry.docker_image_id, dockerImageId, futureEntry.manifest_digest,
+                       futureEntry.manifest_digest,
                        manifestDigest);
             } else {
               addEntry('delete', tag.end_ts)
@@ -156,9 +152,8 @@ angular.module('quay').directive('repoTagHistory', function () {
 
       $scope.askRestoreTag = function(entity, use_current_id) {
         if ($scope.repository.can_write) {
-          var docker_id = use_current_id ? entity.docker_image_id : entity.old_docker_image_id;
           var digest = use_current_id ? entity.manifest_digest : entity.old_manifest_digest;
-          $scope.tagActionHandler.askRestoreTag(entity.tag, docker_id, digest);
+          $scope.tagActionHandler.askRestoreTag(entity.tag, digest);
         }
       };
 
@@ -187,8 +182,6 @@ angular.module('quay').directive('repoTagHistory', function () {
         var isMatch = parts.some(function(part) {
           if (part && entry.tag_name) {
             isMatch = entry.tag_name.indexOf(part) >= 0;
-            isMatch = isMatch || entry.docker_image_id.indexOf(part) >= 0;
-            isMatch = isMatch || entry.old_docker_image_id.indexOf(part) >= 0;
             return isMatch;
           }
         });
diff --git a/static/js/directives/ui/tag-operations-dialog.js b/static/js/directives/ui/tag-operations-dialog.js
index b56a65b1a..507ade2fd 100644
--- a/static/js/directives/ui/tag-operations-dialog.js
+++ b/static/js/directives/ui/tag-operations-dialog.js
@@ -66,23 +66,23 @@ angular.module('quay').directive('tagOperationsDialog', function () {
         return false;
       };
 
-      $scope.isAnotherImageTag = function(image, tag) {
+      $scope.isAnotherImageTag = function(manifest_digest, tag) {
         if (!$scope.repositoryTags) { return; }
 
         var found = $scope.repositoryTags[tag];
         if (found == null) { return false; }
-        return found.image_id != image;
+        return found.manifest_digest != manifest_digest;
       };
 
-      $scope.isOwnedTag = function(image, tag) {
+      $scope.isOwnedTag = function(manifest_digest, tag) {
         if (!$scope.repositoryTags) { return; }
 
         var found = $scope.repositoryTags[tag];
         if (found == null) { return false; }
-        return found.image_id == image;
+        return found.manifest_digest == manifest_digest;
       };
 
-      $scope.createOrMoveTag = function(image, tag, opt_manifest_digest) {
+      $scope.createOrMoveTag = function(manifest_digest, tag) {
         if (!$scope.repository.can_write) { return; }
         if ($scope.alertOnTagOpsDisabled()) {
           return;
@@ -96,12 +96,8 @@ angular.module('quay').directive('tagOperationsDialog', function () {
         };
 
         var data = {};
-        if (image) {
-          data['image'] = image;
-        }
-
-        if (opt_manifest_digest) {
-          data['manifest_digest'] = opt_manifest_digest;
+        if (manifest_digest) {
+          data['manifest_digest'] = manifest_digest;
         }
 
         var errorHandler = ApiService.errorDisplay('Cannot create or move tag', function(resp) {
@@ -202,7 +198,7 @@ angular.module('quay').directive('tagOperationsDialog', function () {
         }, errorHandler);
       };
 
-      $scope.restoreTag = function(tag, image_id, opt_manifest_digest, callback) {
+      $scope.restoreTag = function(tag, manifest_digest, callback) {
         if (!$scope.repository.can_write) { return; }
 
         var params = {
@@ -211,13 +207,9 @@ angular.module('quay').directive('tagOperationsDialog', function () {
         };
 
         var data = {
-          'image': image_id
+          'manifest_digest': manifest_digest
         };
 
-        if (opt_manifest_digest) {
-          data['manifest_digest'] = opt_manifest_digest;
-        }
-
         var errorHandler = ApiService.errorDisplay('Cannot restore tag', callback);
         ApiService.restoreTag(data, params).then(function() {
           callback(true);
@@ -333,14 +325,13 @@ angular.module('quay').directive('tagOperationsDialog', function () {
           };
         },
 
-        'askAddTag': function(image, opt_manifest_digest) {
+        'askAddTag': function(manifest_digest) {
           if ($scope.alertOnTagOpsDisabled()) {
             return;
           }
 
           $scope.tagToCreate = '';
-          $scope.toTagImage = image;
-          $scope.toTagManifestDigest = opt_manifest_digest;
+          $scope.toTagManifestDigest = manifest_digest;
           $scope.addingTag = false;
           $scope.addTagForm.$setPristine();
           $element.find('#createOrMoveTagModal').modal('show');
@@ -382,15 +373,14 @@ angular.module('quay').directive('tagOperationsDialog', function () {
           };
         },
 
-        'askRestoreTag': function(tag, image_id, opt_manifest_digest) {
+        'askRestoreTag': function(tag, manifest_digest) {
           if ($scope.alertOnTagOpsDisabled()) {
             return;
           }
 
           $scope.restoreTagInfo = {
             'tag': tag,
-            'image_id': image_id,
-            'manifest_digest': opt_manifest_digest
+            'manifest_digest': manifest_digest,
           };
 
           $element.find('#restoreTagModal').modal('show');