1 files changed, 35 insertions, 28 deletions

diff --git a/app/assets/javascripts/packages/details/components/app.vue b/app/assets/javascripts/packages/details/components/app.vue
index dbb5f7be0a0..af3220840a6 100644
--- a/app/assets/javascripts/packages/details/components/app.vue
+++ b/app/assets/javascripts/packages/details/components/app.vue
@@ -25,8 +25,9 @@ import { numberToHumanSize } from '~/lib/utils/number_utils';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import { __, s__ } from '~/locale';
-import { PackageType, TrackingActions } from '../../shared/constants';
+import { PackageType, TrackingActions, SHOW_DELETE_SUCCESS_ALERT } from '../../shared/constants';
 import { packageTypeToTrackCategory } from '../../shared/utils';
+import { objectToQueryString } from '~/lib/utils/common_utils';
 
 export default {
   name: 'PackagesApp',
@@ -62,17 +63,15 @@ export default {
       'packageFiles',
       'isLoading',
       'canDelete',
-      'destroyPath',
       'svgPath',
       'npmPath',
       'npmHelpPath',
+      'projectListUrl',
+      'groupListUrl',
     ]),
     isValidPackage() {
       return Boolean(this.packageEntity.name);
     },
-    canDeletePackage() {
-      return this.canDelete && this.destroyPath;
-    },
     filesTableRows() {
       return this.packageFiles.map(x => ({
         name: x.file_name,
@@ -100,7 +99,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['fetchPackageVersions']),
+    ...mapActions(['deletePackage', 'fetchPackageVersions']),
     formatSize(size) {
       return numberToHumanSize(size);
     },
@@ -112,6 +111,16 @@ export default {
         this.fetchPackageVersions();
       }
     },
+    async confirmPackageDeletion() {
+      this.track(TrackingActions.DELETE_PACKAGE);
+      await this.deletePackage();
+      const returnTo =
+        !this.groupListUrl || document.referrer.includes(this.projectName)
+          ? this.projectListUrl
+          : this.groupListUrl; // to avoid security issue url are supplied from backend
+      const modalQuery = objectToQueryString({ [SHOW_DELETE_SUCCESS_ALERT]: true });
+      window.location.replace(`${returnTo}?${modalQuery}`);
+    },
   },
   i18n: {
     deleteModalTitle: s__(`PackageRegistry|Delete Package Version`),
@@ -147,12 +156,10 @@ export default {
   />
 
   <div v-else class="packages-app">
-    <div class="detail-page-header d-flex justify-content-between flex-column flex-sm-row">
-      <package-title />
-
-      <div class="mt-sm-2">
+    <package-title>
+      <template #delete-button>
         <gl-button
-          v-if="canDeletePackage"
+          v-if="canDelete"
           v-gl-modal="'delete-modal'"
           class="js-delete-button"
           variant="danger"
@@ -161,8 +168,8 @@ export default {
         >
           {{ __('Delete') }}
         </gl-button>
-      </div>
-    </div>
+      </template>
+    </package-title>
 
     <gl-tabs>
       <gl-tab :title="__('Detail')">
@@ -268,22 +275,22 @@ export default {
         </template>
       </gl-sprintf>
 
-      <div slot="modal-footer" class="w-100">
-        <div class="float-right">
-          <gl-button @click="cancelDelete()">{{ __('Cancel') }}</gl-button>
-          <gl-button
-            ref="modal-delete-button"
-            data-method="delete"
-            :to="destroyPath"
-            variant="danger"
-            category="primary"
-            data-qa-selector="delete_modal_button"
-            @click="track($options.trackingActions.DELETE_PACKAGE)"
-          >
-            {{ __('Delete') }}
-          </gl-button>
+      <template #modal-footer>
+        <div class="gl-w-full">
+          <div class="float-right">
+            <gl-button @click="cancelDelete">{{ __('Cancel') }}</gl-button>
+            <gl-button
+              ref="modal-delete-button"
+              variant="danger"
+              category="primary"
+              data-qa-selector="delete_modal_button"
+              @click="confirmPackageDeletion"
+            >
+              {{ __('Delete') }}
+            </gl-button>
+          </div>
         </div>
-      </div>
+      </template>
     </gl-modal>
   </div>
 </template>