Add latest changes from gitlab-org/gitlab@master

5 files changed, 106 insertions, 82 deletions

diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue
index 8b6a5c59847..325fd8c1946 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue
@@ -1,8 +1,9 @@
 <script>
-import { GlPagination, GlModal, GlSprintf } from '@gitlab/ui';
+import { GlPagination } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
-import { __, s__ } from '~/locale';
+import { s__ } from '~/locale';
 import Tracking from '~/tracking';
+import DeletePackageModal from '~/packages_and_registries/shared/components/delete_package_modal.vue';
 import PackagesListRow from '~/packages_and_registries/infrastructure_registry/shared/package_list_row.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
 import { TRACKING_ACTIONS } from '~/packages_and_registries/shared/constants';
@@ -11,8 +12,7 @@ import { TRACK_CATEGORY } from '~/packages_and_registries/infrastructure_registr
 export default {
   components: {
     GlPagination,
-    GlModal,
-    GlSprintf,
+    DeletePackageModal,
     PackagesListLoader,
     PackagesListRow,
   },
@@ -42,22 +42,6 @@ export default {
     isListEmpty() {
       return !this.list || this.list.length === 0;
     },
-    deletePackageName() {
-      return this.itemToBeDeleted?.name ?? '';
-    },
-    deleteModalActionPrimaryProps() {
-      return {
-        text: this.$options.i18n.modalAction,
-        attributes: {
-          variant: 'danger',
-        },
-      };
-    },
-    deleteModalActionCancelProps() {
-      return {
-        text: __('Cancel'),
-      };
-    },
     tracking() {
       return {
         category: TRACK_CATEGORY,
@@ -68,7 +52,6 @@ export default {
     setItemToBeDeleted(item) {
       this.itemToBeDeleted = { ...item };
       this.track(TRACKING_ACTIONS.REQUEST_DELETE_PACKAGE);
-      this.$refs.packageListDeleteModal.show();
     },
     deleteItemConfirmation() {
       this.$emit('package:delete', this.itemToBeDeleted);
@@ -116,22 +99,11 @@ export default {
         class="gl-w-full gl-mt-3"
       />
 
-      <gl-modal
-        ref="packageListDeleteModal"
-        size="sm"
-        modal-id="confirm-delete-package"
-        :action-primary="deleteModalActionPrimaryProps"
-        :action-cancel="deleteModalActionCancelProps"
+      <delete-package-modal
+        :item-to-be-deleted="itemToBeDeleted"
         @ok="deleteItemConfirmation"
         @cancel="deleteItemCanceled"
-      >
-        <template #modal-title>{{ $options.i18n.modalTitle }}</template>
-        <gl-sprintf :message="$options.i18n.deleteModalContent">
-          <template #name>
-            <strong>{{ deletePackageName }}</strong>
-          </template>
-        </gl-sprintf>
-      </gl-modal>
+      />
     </template>
   </div>
 </template>
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 c6583b8f09f..63c2b329c27 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
@@ -1,6 +1,7 @@
 <script>
-import { GlAlert, GlModal, GlSprintf, GlKeysetPagination } from '@gitlab/ui';
-import { __, s__, sprintf } from '~/locale';
+import { GlAlert, GlKeysetPagination } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+import DeletePackageModal from '~/packages_and_registries/shared/components/delete_package_modal.vue';
 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 {
@@ -16,8 +17,7 @@ export default {
   components: {
     GlAlert,
     GlKeysetPagination,
-    GlModal,
-    GlSprintf,
+    DeletePackageModal,
     PackagesListLoader,
     PackagesListRow,
   },
@@ -49,9 +49,6 @@ export default {
     isListEmpty() {
       return !this.list || this.list.length === 0;
     },
-    deletePackageName() {
-      return this.itemToBeDeleted?.name ?? '';
-    },
     tracking() {
       const category = this.itemToBeDeleted
         ? packageTypeToTrackCategory(this.itemToBeDeleted.packageType)
@@ -63,29 +60,6 @@ export default {
     showPagination() {
       return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage;
     },
-    showDeleteModal: {
-      get() {
-        return Boolean(this.itemToBeDeleted);
-      },
-      set(value) {
-        if (!value) {
-          this.itemToBeDeleted = null;
-        }
-      },
-    },
-    deleteModalActionPrimaryProps() {
-      return {
-        text: this.$options.i18n.modalAction,
-        attributes: {
-          variant: 'danger',
-        },
-      };
-    },
-    deleteModalActionCancelProps() {
-      return {
-        text: __('Cancel'),
-      };
-    },
     errorTitleAlert() {
       return sprintf(
         s__('PackageRegistry|There was an error publishing a %{packageName} package'),
@@ -113,18 +87,17 @@ export default {
     deleteItemConfirmation() {
       this.$emit('package:delete', this.itemToBeDeleted);
       this.track(DELETE_PACKAGE_TRACKING_ACTION);
+      this.itemToBeDeleted = null;
     },
     deleteItemCanceled() {
       this.track(CANCEL_DELETE_PACKAGE_TRACKING_ACTION);
+      this.itemToBeDeleted = null;
     },
     showConfirmationModal() {
       this.setItemToBeDeleted(this.errorPackages[0]);
     },
   },
   i18n: {
-    deleteModalContent: s__('PackageRegistry|You are about to delete %{name}, are you sure?'),
-    modalTitle: s__('PackageRegistry|Delete package'),
-    modalAction: s__('PackageRegistry|Permanently delete'),
     errorMessageBodyAlert: s__(
       'PackageRegistry|There was a timeout and the package was not published. Delete this package and try again.',
     ),
@@ -169,22 +142,11 @@ export default {
         />
       </div>
 
-      <gl-modal
-        v-model="showDeleteModal"
-        modal-id="confirm-delete-package"
-        size="sm"
-        :action-primary="deleteModalActionPrimaryProps"
-        :action-cancel="deleteModalActionCancelProps"
+      <delete-package-modal
+        :item-to-be-deleted="itemToBeDeleted"
         @ok="deleteItemConfirmation"
         @cancel="deleteItemCanceled"
-      >
-        <template #modal-title>{{ $options.i18n.modalTitle }}</template>
-        <gl-sprintf :message="$options.i18n.deleteModalContent">
-          <template #name>
-            <strong>{{ deletePackageName }}</strong>
-          </template>
-        </gl-sprintf>
-      </gl-modal>
+      />
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/index.js b/app/assets/javascripts/packages_and_registries/package_registry/index.js
index 6680e612985..336eb0ca079 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/index.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/index.js
@@ -36,6 +36,7 @@ export default () => {
   const attachMainComponent = () =>
     new Vue({
       el,
+      name: 'PackageRegistery',
       router,
       apolloProvider,
       provide: {
diff --git a/app/assets/javascripts/packages_and_registries/shared/components/delete_package_modal.vue b/app/assets/javascripts/packages_and_registries/shared/components/delete_package_modal.vue
new file mode 100644
index 00000000000..b66b0b3548d
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/shared/components/delete_package_modal.vue
@@ -0,0 +1,83 @@
+<script>
+import { GlModal, GlSprintf } from '@gitlab/ui';
+import { __ } from '~/locale';
+import {
+  DELETE_PACKAGE_MODAL_CONTENT_MESSAGE,
+  DELETE_PACKAGE_MODAL_TITLE,
+  DELETE_PACKAGE_MODAL_ACTION,
+} from '~/packages_and_registries/shared/constants';
+import { TRACK_CATEGORY } from '~/packages_and_registries/infrastructure_registry/shared/constants';
+
+export default {
+  components: {
+    GlModal,
+    GlSprintf,
+  },
+  props: {
+    itemToBeDeleted: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    isModalVisible() {
+      return Boolean(this.itemToBeDeleted);
+    },
+    deletePackageName() {
+      return this.itemToBeDeleted?.name ?? '';
+    },
+    deleteModalActionPrimaryProps() {
+      return {
+        text: this.$options.i18n.modalAction,
+        attributes: {
+          variant: 'danger',
+        },
+      };
+    },
+    deleteModalActionCancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
+    tracking() {
+      return {
+        category: TRACK_CATEGORY,
+      };
+    },
+  },
+  methods: {
+    deleteItemConfirmation() {
+      this.$emit('ok');
+    },
+    onChangeModalVisibility(isVisible) {
+      if (!isVisible) this.$emit('cancel');
+    },
+  },
+  i18n: {
+    modalTitle: DELETE_PACKAGE_MODAL_TITLE,
+    modalDescription: DELETE_PACKAGE_MODAL_CONTENT_MESSAGE,
+    modalAction: DELETE_PACKAGE_MODAL_ACTION,
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    :visible="isModalVisible"
+    size="sm"
+    modal-id="confirm-delete-package"
+    :title="$options.i18n.modalTitle"
+    :action-primary="deleteModalActionPrimaryProps"
+    :action-cancel="deleteModalActionCancelProps"
+    @ok="deleteItemConfirmation"
+    @change="onChangeModalVisibility"
+  >
+    <template #modal-title>{{ $options.i18n.modalTitle }}</template>
+    <gl-sprintf :message="$options.i18n.modalDescription">
+      <template #name>
+        <strong>{{ deletePackageName }}</strong>
+      </template>
+    </gl-sprintf>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/shared/constants/package_registry.js b/app/assets/javascripts/packages_and_registries/shared/constants/package_registry.js
index 7fd440d0b27..f3ce967b756 100644
--- a/app/assets/javascripts/packages_and_registries/shared/constants/package_registry.js
+++ b/app/assets/javascripts/packages_and_registries/shared/constants/package_registry.js
@@ -39,6 +39,12 @@ export const DELETE_PACKAGE_FILE_SUCCESS_MESSAGE = s__(
   'PackageRegistry|Package asset deleted successfully',
 );
 
+export const DELETE_PACKAGE_MODAL_CONTENT_MESSAGE = s__(
+  'PackageRegistry|You are about to delete %{name}, are you sure?',
+);
+export const DELETE_PACKAGE_MODAL_TITLE = s__('PackageRegistry|Delete package');
+export const DELETE_PACKAGE_MODAL_ACTION = s__('PackageRegistry|Permanently delete');
+
 export const PACKAGE_ERROR_STATUS = 'error';
 export const PACKAGE_DEFAULT_STATUS = 'default';
 export const PACKAGE_HIDDEN_STATUS = 'hidden';