Container Registry tags created as buildkit cache cannot be deleted

Summary

When using GitLab's Container Registry as a build cache for Docker BuildKit, GitLab correctly highlights that a tag does not have a valid image digest, but this (incorrectly) causes the UI to disable the delete button.

(Related: gitlab-org/cluster-integration/auto-build-image!68 (merged))

Steps to reproduce

1. With Any project with a Dockerfile:
2. Build with BuildKit. Eg: docker buildx build --cache-to type=registry,ref=registry.gitlab.com/red-coat-development/auto-build-image:cache .
3. View the created tag in the GitLab UI
4. Delete button is disabled

Example Project

https://gitlab.com/red-coat-development/auto-build-image/container_registry/2083151

What is the current bug behavior?

Delete Button and CheckBox Are Disabled

What is the expected correct behavior?

Delete Button And CheckBox Should Not Be Disabled

Relevant logs and/or screenshots

API does not identify the the tag as undeletable (canDelete is true):

[
  {
    "data": {
      "containerRepository": {
        "id": "gid://gitlab/ContainerRepository/2083151",
        "tags": {
          "nodes": [
            {
              "digest": null,
              "location": "registry.gitlab.com/red-coat-development/auto-build-image:cache",
              "path": "red-coat-development/auto-build-image:cache",
              "name": "cache",
              "revision": null,
              "shortRevision": null,
              "createdAt": null,
              "totalSize": null,
              "canDelete": true,
              "__typename": "ContainerRepositoryTag"
            },
            {
              "digest": "sha256:e3b38f95183f72a38b3ee440cf9e772bbc590a915691ff2ab25d65f7bc60da71",
              "location": "registry.gitlab.com/red-coat-development/auto-build-image:latest",
              "path": "red-coat-development/auto-build-image:latest",
              "name": "latest",
              "revision": "8911e6a050c97d746f0e6c32723b950c9c3c8e49e164174caa3fdbe38c1b4f92",
              "shortRevision": "8911e6a05",
              "createdAt": "2021-07-02T15:01:23+00:00",
              "totalSize": "88379293",
              "canDelete": true,
              "__typename": "ContainerRepositoryTag"
            },
            [{
              "digest": null,
              "location": "registry.gitlab.com/red-coat-development/auto-build-image:test2",
              "path": "red-coat-development/auto-build-image:test2",
              "name": "test2",
              "revision": null,
              "shortRevision": null,
              "createdAt": null,
              "totalSize": null,
              "canDelete": true,
              "__typename": "ContainerRepositoryTag"
            }]
          ],
          "pageInfo": {
            "__typename": "PageInfo",
            "hasNextPage": false,
            "hasPreviousPage": false,
            "startCursor": "MQ",
            "endCursor": "Mw"
          },
          "__typename": "ContainerRepositoryTagConnection"
        },
        "__typename": "ContainerRepositoryDetails"
      }
    }
  }
]

Deleting the tag via the API works:

# Request
[
  {
    "operationName": "destroyContainerRepositoryTags",
    "variables": {
      "id":"gid://gitlab/ContainerRepository/2083151",
      "tagNames": ["latest"]
    },
    "query": "mutation destroyContainerRepositoryTags($id: ContainerRepositoryID\u0021, $tagNames: [String\u0021]\u0021) {\\n  destroyContainerRepositoryTags(input: {id: $id, tagNames: $tagNames}) {\\n    errors\\n    __typename\\n  }\\n}\\n"
  }
]

# Response
[{
  "data": {
    "destroyContainerRepositoryTags": {
      "errors": [],
      "__typename": "DestroyContainerRepositoryTagsPayload"
    }
  }
}]

Output of checks

This happens on GitLab.com

Possible fixes

Suggested Fix (will submit an MR):

diff --git a/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue b/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
index 45eb2ce51e4..41f3990621c 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
@@ -101,10 +101,10 @@ export default {
       return !this.tag.digest;
     },
     isCheckboxDisabled() {
-      return this.isInvalidTag || this.disabled;
+      return this.disabled;
     },
     isDeleteDisabled() {
-      return this.isInvalidTag || this.disabled || !this.tag.canDelete;
+      return this.disabled || !this.tag.canDelete;
     },
   },
 };