Add latest changes from gitlab-org/gitlab@master

4 files changed, 37 insertions, 22 deletions

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/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 d4e55edf2a3..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.',
 );
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 6521d56ad4d..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,6 +1,6 @@
 <script>
 import { GlAlert, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
-import { createAlert, VARIANT_INFO } from '~/flash';
+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';
@@ -20,7 +20,6 @@ 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: {
@@ -31,14 +30,12 @@ export default {
     PackageList,
     PackageTitle,
     PackageSearch,
-    DeleteModal,
     DeletePackage,
   },
   inject: ['emptyListIllustration', 'isGroupPage', 'fullPath'],
   data() {
     return {
       alertVariables: null,
-      itemsToBeDeleted: [],
       packages: {},
       sort: '',
       filters: {},
@@ -117,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: [
@@ -140,22 +135,18 @@ 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 };
@@ -236,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">
@@ -255,11 +246,5 @@ export default {
         </package-list>
       </template>
     </delete-package>
-
-    <delete-modal
-      ref="deletePackagesModal"
-      :items-to-be-deleted="itemsToBeDeleted"
-      @confirm="confirmDelete"
-    />
   </div>
 </template>