Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42

13 files changed, 91 insertions, 115 deletions

diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue
index acf810257e6..38b601ac3ec 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue
@@ -95,7 +95,7 @@ export default {
       return formatDate(this.tag.createdAt, 'isoDate');
     },
     publishedTime() {
-      return formatDate(this.tag.createdAt, 'hh:MM Z');
+      return formatDate(this.tag.createdAt, 'HH:MM:ss Z');
     },
     formattedRevision() {
       // to be removed when API response is adjusted
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue
index 23d8e97dd79..4f89d217623 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue
@@ -12,7 +12,6 @@ import {
   REMOVE_REPOSITORY_LABEL,
   ROW_SCHEDULED_FOR_DELETION,
   IMAGE_DELETE_SCHEDULED_STATUS,
-  IMAGE_FAILED_DELETED_STATUS,
   IMAGE_MIGRATING_STATE,
   COPY_IMAGE_PATH_TITLE,
   IMAGE_FULL_PATH_LABEL,
@@ -79,9 +78,6 @@ export default {
     migrating() {
       return this.item.migrationState === IMAGE_MIGRATING_STATE;
     },
-    failedDelete() {
-      return this.item.status === IMAGE_FAILED_DELETED_STATUS;
-    },
     tagsCountText() {
       return n__(
         'ContainerRegistry|%{count} Tag',
@@ -99,9 +95,6 @@ export default {
       }
       return projectPath;
     },
-    routerLinkEvent() {
-      return this.deleting ? '' : 'click';
-    },
     deleteButtonTooltipTitle() {
       return this.migrating
         ? LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION
@@ -121,15 +114,7 @@ export default {
 </script>
 
 <template>
-  <list-item
-    v-gl-tooltip="{
-      placement: 'left',
-      disabled: !deleting,
-      title: $options.i18n.ROW_SCHEDULED_FOR_DELETION,
-    }"
-    v-bind="$attrs"
-    :disabled="deleting"
-  >
+  <list-item v-bind="$attrs">
     <template #left-primary>
       <gl-button
         v-if="!showFullPath"
@@ -143,12 +128,13 @@ export default {
         :aria-label="$options.i18n.IMAGE_FULL_PATH_LABEL"
         @click="hideButton"
       />
+      <span v-if="deleting" class="gl-text-gray-500">{{ imageName }}</span>
       <router-link
+        v-else
         ref="imageName"
         class="gl-text-body gl-font-weight-bold"
         data-testid="details-link"
         data-qa-selector="registry_image_content"
-        :event="routerLinkEvent"
         :to="{ name: 'details', params: { id } }"
       >
         {{ imageName }}
@@ -163,21 +149,24 @@ export default {
     </template>
     <template #left-secondary>
       <template v-if="!metadataLoading">
-        <span class="gl-display-flex gl-align-items-center" data-testid="tags-count">
-          <gl-icon name="tag" class="gl-mr-2" />
-          <gl-sprintf :message="tagsCountText">
-            <template #count>
-              {{ item.tagsCount }}
-            </template>
-          </gl-sprintf>
-        </span>
+        <span v-if="deleting">{{ $options.i18n.ROW_SCHEDULED_FOR_DELETION }}</span>
+        <template v-else>
+          <span class="gl-display-flex gl-align-items-center" data-testid="tags-count">
+            <gl-icon name="tag" class="gl-mr-2" />
+            <gl-sprintf :message="tagsCountText">
+              <template #count>
+                {{ item.tagsCount }}
+              </template>
+            </gl-sprintf>
+          </span>
 
-        <cleanup-status
-          v-if="item.expirationPolicyCleanupStatus"
-          class="ml-2"
-          :status="item.expirationPolicyCleanupStatus"
-          :expiration-policy="expirationPolicy"
-        />
+          <cleanup-status
+            v-if="item.expirationPolicyCleanupStatus"
+            class="gl-ml-2"
+            :status="item.expirationPolicyCleanupStatus"
+            :expiration-policy="expirationPolicy"
+          />
+        </template>
       </template>
 
       <div v-else class="gl-w-full">
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js
index 020d78ad364..f2aa4916f48 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js
@@ -53,7 +53,6 @@ export const TRACKING_ACTION_CLICK_SHOW_FULL_PATH = 'click_show_full_path';
 // Parameters
 
 export const IMAGE_DELETE_SCHEDULED_STATUS = 'DELETE_SCHEDULED';
-export const IMAGE_FAILED_DELETED_STATUS = 'DELETE_FAILED';
 export const IMAGE_MIGRATING_STATE = 'importing';
 export const GRAPHQL_PAGE_SIZE = 10;
 
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/index.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/index.js
index 9b062024d03..850dca07a3f 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/index.js
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/index.js
@@ -20,7 +20,7 @@ export const apolloProvider = new VueApollo({
           ContainerRepositoryDetails: {
             fields: {
               tags: {
-                keyArgs: ['id'],
+                keyArgs: ['id', 'name', 'sort'],
                 merge: mergeVariables,
               },
             },
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_history.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_history.vue
index e5be98b87f7..06e4c38a179 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_history.vue
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_history.vue
@@ -96,9 +96,9 @@ export default {
         <history-item icon="commit" data-testid="first-pipeline-commit">
           <gl-sprintf :message="$options.i18n.createdByCommitText">
             <template #link>
-              <gl-link :href="firstPipeline.project.commit_url"
-                >#{{ truncate(firstPipeline.sha) }}</gl-link
-              >
+              <gl-link :href="firstPipeline.project.commit_url">{{
+                truncate(firstPipeline.sha)
+              }}</gl-link>
             </template>
             <template #branch>
               <strong>{{ firstPipeline.ref }}</strong>
@@ -147,7 +147,7 @@ export default {
       >
         <gl-sprintf :message="$options.i18n.combinedUpdateText">
           <template #link>
-            <gl-link :href="pipeline.project.commit_url">#{{ truncate(pipeline.sha) }}</gl-link>
+            <gl-link :href="pipeline.project.commit_url">{{ truncate(pipeline.sha) }}</gl-link>
           </template>
           <template #branch>
             <strong>{{ pipeline.ref }}</strong>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue
index 2a1de2ae4a7..011a2668a8b 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue
@@ -55,6 +55,7 @@ export default {
     :action-cancel="$options.modal.cancelAction"
     :title="$options.i18n.DELETE_PACKAGES_MODAL_TITLE"
     @primary="$emit('confirm')"
+    @cancel="$emit('cancel')"
   >
     <span>{{ description }}</span>
   </gl-modal>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue
index a1fc7563de1..663c361819e 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue
@@ -159,9 +159,9 @@ export default {
         <history-item icon="commit" data-testid="first-pipeline-commit">
           <gl-sprintf :message="$options.i18n.createdByCommitText">
             <template #link>
-              <gl-link :href="firstPipeline.commitPath" @click="trackCommitClick"
-                >#{{ truncate(firstPipeline.sha) }}</gl-link
-              >
+              <gl-link :href="firstPipeline.commitPath" @click="trackCommitClick">{{
+                truncate(firstPipeline.sha)
+              }}</gl-link>
             </template>
             <template #branch>
               <strong>{{ firstPipeline.ref }}</strong>
@@ -212,9 +212,9 @@ export default {
       >
         <gl-sprintf :message="$options.i18n.combinedUpdateText">
           <template #link>
-            <gl-link :href="pipeline.commitPath" @click="trackCommitClick"
-              >#{{ truncate(pipeline.sha) }}</gl-link
-            >
+            <gl-link :href="pipeline.commitPath" @click="trackCommitClick">{{
+              truncate(pipeline.sha)
+            }}</gl-link>
           </template>
           <template #branch>
             <strong>{{ pipeline.ref }}</strong>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue
index efc60c9c037..787f21d9419 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue
@@ -1,13 +1,13 @@
 <script>
-import { GlKeysetPagination } from '@gitlab/ui';
 import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
+import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
 
 export default {
   components: {
     VersionRow,
-    GlKeysetPagination,
     PackagesListLoader,
+    RegistryList,
   },
   props: {
     versions: {
@@ -26,9 +26,6 @@ export default {
     },
   },
   computed: {
-    showPagination() {
-      return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage;
-    },
     isListEmpty() {
       return this.versions.length === 0;
     },
@@ -42,16 +39,18 @@ export default {
     </div>
     <slot v-else-if="isListEmpty" name="empty-state"></slot>
     <div v-else>
-      <version-row v-for="version in versions" :key="version.id" :package-entity="version" />
-      <div class="gl-display-flex gl-justify-content-center">
-        <gl-keyset-pagination
-          v-if="showPagination"
-          v-bind="pageInfo"
-          class="gl-mt-3"
-          @prev="$emit('prev-page')"
-          @next="$emit('next-page')"
-        />
-      </div>
+      <registry-list
+        :hidden-delete="true"
+        :is-loading="isLoading"
+        :items="versions"
+        :pagination="pageInfo"
+        @prev-page="$emit('prev-page')"
+        @next-page="$emit('next-page')"
+      >
+        <template #default="{ item }">
+          <version-row :package-entity="item" />
+        </template>
+      </registry-list>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue
index dd58f28a262..fdc6e75c932 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue
@@ -30,7 +30,7 @@ export default {
   computed: {
     pypiPipCommand() {
       // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `pip install ${this.packageEntity.name} --extra-index-url ${this.packageEntity.pypiUrl}`;
+      return `pip install ${this.packageEntity.name} --index-url ${this.packageEntity.pypiUrl}`;
     },
     pypiSetupCommand() {
       return `[gitlab]
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
index ddcddf80c15..40bf7b7e143 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
@@ -5,10 +5,14 @@ import DeletePackageModal from '~/packages_and_registries/shared/components/dele
 import PackagesListRow from '~/packages_and_registries/package_registry/components/list/package_list_row.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
 import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
+import DeleteModal from '~/packages_and_registries/package_registry/components/delete_modal.vue';
 import {
   DELETE_PACKAGE_TRACKING_ACTION,
+  DELETE_PACKAGES_TRACKING_ACTION,
   REQUEST_DELETE_PACKAGE_TRACKING_ACTION,
+  REQUEST_DELETE_PACKAGES_TRACKING_ACTION,
   CANCEL_DELETE_PACKAGE_TRACKING_ACTION,
+  CANCEL_DELETE_PACKAGES_TRACKING_ACTION,
   PACKAGE_ERROR_STATUS,
 } from '~/packages_and_registries/package_registry/constants';
 import { packageTypeToTrackCategory } from '~/packages_and_registries/package_registry/utils';
@@ -18,6 +22,7 @@ export default {
   name: 'PackagesList',
   components: {
     GlAlert,
+    DeleteModal,
     DeletePackageModal,
     PackagesListLoader,
     PackagesListRow,
@@ -44,6 +49,7 @@ export default {
   data() {
     return {
       itemToBeDeleted: null,
+      itemsToBeDeleted: [],
       errorPackages: [],
     };
   },
@@ -92,7 +98,18 @@ export default {
         this.setItemToBeDeleted(item);
         return;
       }
-      this.$emit('delete', items);
+      this.itemsToBeDeleted = items;
+      this.track(REQUEST_DELETE_PACKAGES_TRACKING_ACTION);
+      this.$refs.deletePackagesModal.show();
+    },
+    deleteItemsConfirmation() {
+      this.$emit('delete', this.itemsToBeDeleted);
+      this.track(DELETE_PACKAGES_TRACKING_ACTION);
+      this.itemsToBeDeleted = [];
+    },
+    deleteItemsCanceled() {
+      this.track(CANCEL_DELETE_PACKAGES_TRACKING_ACTION);
+      this.itemsToBeDeleted = [];
     },
     deleteItemConfirmation() {
       this.$emit('package:delete', this.itemToBeDeleted);
@@ -159,6 +176,13 @@ export default {
         @ok="deleteItemConfirmation"
         @cancel="deleteItemCanceled"
       />
+
+      <delete-modal
+        ref="deletePackagesModal"
+        :items-to-be-deleted="itemsToBeDeleted"
+        @confirm="deleteItemsConfirmation"
+        @cancel="deleteItemsCanceled"
+      />
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/constants.js b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
index b731cd77e66..539b12bd6db 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
@@ -110,6 +110,11 @@ export const FETCH_PACKAGE_PIPELINES_ERROR_MESSAGE = s__(
 export const FETCH_PACKAGE_METADATA_ERROR_MESSAGE = s__(
   'PackageRegistry|Something went wrong while fetching the package metadata.',
 );
+
+export const DELETE_PACKAGES_TRACKING_ACTION = 'delete_packages';
+export const REQUEST_DELETE_PACKAGES_TRACKING_ACTION = 'request_delete_packages';
+export const CANCEL_DELETE_PACKAGES_TRACKING_ACTION = 'cancel_delete_packages';
+
 export const DELETE_PACKAGES_ERROR_MESSAGE = s__(
   'PackageRegistry|Something went wrong while deleting packages.',
 );
@@ -184,9 +189,6 @@ export const PACKAGE_TYPES = [
   s__('PackageRegistry|Helm'),
 ];
 
-export const HIDE_PACKAGE_MIGRATION_SURVEY_COOKIE = 'hide_package_registry_migration_survey';
-export const SURVEY_LINK = 'https://gitlab.fra1.qualtrics.com/jfe/form/SV_cHomH9FPzOaiDTU';
-
 // links
 
 export const EMPTY_LIST_HELP_URL = helpPagePath('user/packages/package_registry/index');
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue
index 8b5d51cb856..396429d60d8 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue
@@ -1,20 +1,18 @@
 <script>
-import { GlAlert, GlBanner, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
-import { createAlert, VARIANT_INFO } from '~/flash';
-import { getCookie, historyReplaceState, parseBoolean, setCookie } from '~/lib/utils/common_utils';
+import { GlAlert, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
+import { createAlert, VARIANT_INFO, VARIANT_SUCCESS, VARIANT_DANGER } from '~/flash';
+import { historyReplaceState } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages_and_registries/shared/constants';
 import {
   PROJECT_RESOURCE_TYPE,
   GROUP_RESOURCE_TYPE,
   GRAPHQL_PAGE_SIZE,
-  HIDE_PACKAGE_MIGRATION_SURVEY_COOKIE,
   DELETE_PACKAGE_SUCCESS_MESSAGE,
   DELETE_PACKAGES_ERROR_MESSAGE,
   DELETE_PACKAGES_SUCCESS_MESSAGE,
   EMPTY_LIST_HELP_URL,
   PACKAGE_HELP_URL,
-  SURVEY_LINK,
 } from '~/packages_and_registries/package_registry/constants';
 import getPackagesQuery from '~/packages_and_registries/package_registry/graphql/queries/get_packages.query.graphql';
 import destroyPackagesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_packages.mutation.graphql';
@@ -22,31 +20,26 @@ import DeletePackage from '~/packages_and_registries/package_registry/components
 import PackageTitle from '~/packages_and_registries/package_registry/components/list/package_title.vue';
 import PackageSearch from '~/packages_and_registries/package_registry/components/list/package_search.vue';
 import PackageList from '~/packages_and_registries/package_registry/components/list/packages_list.vue';
-import DeleteModal from '~/packages_and_registries/package_registry/components/delete_modal.vue';
 
 export default {
   components: {
     GlAlert,
-    GlBanner,
     GlEmptyState,
     GlLink,
     GlSprintf,
     PackageList,
     PackageTitle,
     PackageSearch,
-    DeleteModal,
     DeletePackage,
   },
   inject: ['emptyListIllustration', 'isGroupPage', 'fullPath'],
   data() {
     return {
       alertVariables: null,
-      itemsToBeDeleted: [],
       packages: {},
       sort: '',
       filters: {},
       mutationLoading: false,
-      showSurveyBanner: !parseBoolean(getCookie(HIDE_PACKAGE_MIGRATION_SURVEY_COOKIE)),
     };
   },
   apollo: {
@@ -121,15 +114,13 @@ export default {
         historyReplaceState(cleanUrl);
       }
     },
-    async confirmDelete() {
-      const { itemsToBeDeleted } = this;
-      this.itemsToBeDeleted = [];
+    async deletePackages(packageEntities) {
       this.mutationLoading = true;
       try {
         const { data } = await this.$apollo.mutate({
           mutation: destroyPackagesMutation,
           variables: {
-            ids: itemsToBeDeleted.map((i) => i.id),
+            ids: packageEntities.map((i) => i.id),
           },
           awaitRefetchQueries: true,
           refetchQueries: [
@@ -144,30 +135,22 @@ export default {
           throw new Error(data.destroyPackages.errors[0]);
         }
         this.showAlert({
-          variant: 'success',
+          variant: VARIANT_SUCCESS,
           message: DELETE_PACKAGES_SUCCESS_MESSAGE,
         });
       } catch {
         this.showAlert({
-          variant: 'danger',
+          variant: VARIANT_DANGER,
           message: DELETE_PACKAGES_ERROR_MESSAGE,
         });
       } finally {
         this.mutationLoading = false;
       }
     },
-    showDeletePackagesModal(toBeDeleted) {
-      this.itemsToBeDeleted = toBeDeleted;
-      this.$refs.deletePackagesModal.show();
-    },
     handleSearchUpdate({ sort, filters }) {
       this.sort = sort;
       this.filters = { ...filters };
     },
-    hideSurvey() {
-      this.showSurveyBanner = false;
-      setCookie(HIDE_PACKAGE_MIGRATION_SURVEY_COOKIE, 'true');
-    },
     updateQuery(_, { fetchMoreResult }) {
       return fetchMoreResult;
     },
@@ -208,17 +191,11 @@ export default {
     noResultsText: s__(
       'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
     ),
-    surveyBannerTitle: s__('PackageRegistry|Help us learn about your registry migration needs'),
-    surveyBannerDescription: s__(
-      'PackageRegistry|If you are interested in migrating packages from your private registry to the GitLab Package Registry, take our survey and tell us more about your needs.',
-    ),
-    surveyBannerPrimaryButtonText: s__('PackageRegistry|Take survey'),
   },
   links: {
     EMPTY_LIST_HELP_URL,
     PACKAGE_HELP_URL,
   },
-  surveyLink: SURVEY_LINK,
 };
 </script>
 
@@ -233,17 +210,6 @@ export default {
     >
       {{ alertVariables.message }}
     </gl-alert>
-    <gl-banner
-      v-if="showSurveyBanner"
-      :title="$options.i18n.surveyBannerTitle"
-      :button-text="$options.i18n.surveyBannerPrimaryButtonText"
-      :button-link="$options.surveyLink"
-      class="gl-mt-3"
-      @primary="hideSurvey"
-      @close="hideSurvey"
-    >
-      <p>{{ $options.i18n.surveyBannerDescription }}</p>
-    </gl-banner>
     <package-title :help-url="$options.links.PACKAGE_HELP_URL" :count="packagesCount" />
     <package-search class="gl-mb-5" @update="handleSearchUpdate" />
 
@@ -261,7 +227,7 @@ export default {
           @prev-page="fetchPreviousPage"
           @next-page="fetchNextPage"
           @package:delete="deletePackage"
-          @delete="showDeletePackagesModal"
+          @delete="deletePackages"
         >
           <template #empty-state>
             <gl-empty-state :title="emptyStateTitle" :svg-path="emptyListIllustration">
@@ -280,11 +246,5 @@ export default {
         </package-list>
       </template>
     </delete-package>
-
-    <delete-modal
-      ref="deletePackagesModal"
-      :items-to-be-deleted="itemsToBeDeleted"
-      @confirm="confirmDelete"
-    />
   </div>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue b/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue
index cc345fda7e8..d07d0a7673f 100644
--- a/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue
+++ b/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue
@@ -87,13 +87,15 @@ export default {
 
 <template>
   <div>
-    <div class="gl-display-flex gl-justify-content-space-between gl-mb-3 gl-align-items-center">
-      <gl-form-checkbox v-if="!hiddenDelete" v-model="selectAll" class="gl-ml-2 gl-pt-2">
+    <div
+      v-if="!hiddenDelete"
+      class="gl-display-flex gl-justify-content-space-between gl-mb-3 gl-align-items-center"
+    >
+      <gl-form-checkbox v-model="selectAll" class="gl-ml-2 gl-pt-2">
         <span class="gl-font-weight-bold">{{ title }}</span>
       </gl-form-checkbox>
 
       <gl-button
-        v-if="!hiddenDelete"
         :disabled="disableDeleteButton"
         category="secondary"
         variant="danger"