Add latest changes from gitlab-org/gitlab@master

7 files changed, 94 insertions, 132 deletions

diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_package.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_package.vue
deleted file mode 100644
index e1cf4883029..00000000000
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_package.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-import destroyPackageMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package.mutation.graphql';
-import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
-import { s__ } from '~/locale';
-
-import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages_and_registries/package_registry/constants';
-
-export default {
-  props: {
-    refetchQueries: {
-      type: Array,
-      required: false,
-      default: null,
-    },
-    showSuccessAlert: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  i18n: {
-    errorMessage: s__('PackageRegistry|Something went wrong while deleting the package.'),
-    successMessage: DELETE_PACKAGE_SUCCESS_MESSAGE,
-  },
-  methods: {
-    async deletePackage(packageEntity) {
-      try {
-        this.$emit('start');
-        const { data } = await this.$apollo.mutate({
-          mutation: destroyPackageMutation,
-          variables: {
-            id: packageEntity.id,
-          },
-          awaitRefetchQueries: Boolean(this.refetchQueries),
-          refetchQueries: this.refetchQueries,
-        });
-
-        if (data?.destroyPackage?.errors[0]) {
-          throw data.destroyPackage.errors[0];
-        }
-        if (this.showSuccessAlert) {
-          createAlert({
-            message: this.$options.i18n.successMessage,
-            variant: VARIANT_SUCCESS,
-          });
-        }
-      } catch (error) {
-        createAlert({
-          message: this.$options.i18n.errorMessage,
-          variant: VARIANT_WARNING,
-          captureError: true,
-          error,
-        });
-      }
-      this.$emit('end');
-    },
-  },
-  render() {
-    return this.$scopedSlots.default({ deletePackage: this.deletePackage });
-  },
-};
-</script>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_packages.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_packages.vue
new file mode 100644
index 00000000000..0914c013108
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_packages.vue
@@ -0,0 +1,76 @@
+<script>
+import destroyPackagesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_packages.mutation.graphql';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
+
+import {
+  DELETE_PACKAGE_ERROR_MESSAGE,
+  DELETE_PACKAGE_SUCCESS_MESSAGE,
+  DELETE_PACKAGES_ERROR_MESSAGE,
+  DELETE_PACKAGES_SUCCESS_MESSAGE,
+} from '~/packages_and_registries/package_registry/constants';
+
+export default {
+  name: 'DeletePackages',
+  props: {
+    refetchQueries: {
+      type: Array,
+      required: false,
+      default: null,
+    },
+    showSuccessAlert: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  i18n: {
+    errorMessage: DELETE_PACKAGE_ERROR_MESSAGE,
+    errorMessageMultiple: DELETE_PACKAGES_ERROR_MESSAGE,
+    successMessage: DELETE_PACKAGE_SUCCESS_MESSAGE,
+    successMessageMultiple: DELETE_PACKAGES_SUCCESS_MESSAGE,
+  },
+  methods: {
+    async deletePackages(packageEntities) {
+      const isSinglePackage = packageEntities.length === 1;
+      try {
+        this.$emit('start');
+        const ids = packageEntities.map((packageEntity) => packageEntity.id);
+        const { data } = await this.$apollo.mutate({
+          mutation: destroyPackagesMutation,
+          variables: {
+            ids,
+          },
+          awaitRefetchQueries: Boolean(this.refetchQueries),
+          refetchQueries: this.refetchQueries,
+        });
+
+        if (data?.destroyPackages?.errors[0]) {
+          throw data.destroyPackages.errors[0];
+        }
+
+        if (this.showSuccessAlert) {
+          createAlert({
+            message: isSinglePackage
+              ? this.$options.i18n.successMessage
+              : this.$options.i18n.successMessageMultiple,
+            variant: VARIANT_SUCCESS,
+          });
+        }
+      } catch (error) {
+        createAlert({
+          message: isSinglePackage
+            ? this.$options.i18n.errorMessage
+            : this.$options.i18n.errorMessageMultiple,
+          variant: VARIANT_WARNING,
+          captureError: true,
+          error,
+        });
+      }
+      this.$emit('end');
+    },
+  },
+  render() {
+    return this.$scopedSlots.default({ deletePackages: this.deletePackages });
+  },
+};
+</script>
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 40bf7b7e143..486ab4fdc99 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
@@ -112,7 +112,7 @@ export default {
       this.itemsToBeDeleted = [];
     },
     deleteItemConfirmation() {
-      this.$emit('package:delete', this.itemToBeDeleted);
+      this.$emit('delete', [this.itemToBeDeleted]);
       this.track(DELETE_PACKAGE_TRACKING_ACTION);
       this.itemToBeDeleted = null;
     },
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 539b12bd6db..beb8d11a944 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
@@ -124,6 +124,10 @@ export const DELETE_PACKAGES_MODAL_TITLE = s__('PackageRegistry|Delete packages'
 export const DELETE_PACKAGE_MODAL_PRIMARY_ACTION = s__('PackageRegistry|Permanently delete');
 
 export const DELETE_PACKAGE_SUCCESS_MESSAGE = s__('PackageRegistry|Package deleted successfully');
+export const DELETE_PACKAGE_ERROR_MESSAGE = s__(
+  'PackageRegistry|Something went wrong while deleting the package.',
+);
+
 export const PACKAGE_REGISTRY_TITLE = __('Package Registry');
 
 export const PACKAGE_ERROR_STATUS = 'ERROR';
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/mutations/destroy_package.mutation.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/mutations/destroy_package.mutation.graphql
deleted file mode 100644
index 884980f24a9..00000000000
--- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/mutations/destroy_package.mutation.graphql
+++ /dev/null
@@ -1,5 +0,0 @@
-mutation destroyPackage($id: PackagesPackageID!) {
-  destroyPackage(input: { id: $id }) {
-    errors
-  }
-}
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
index 03352f01aca..607f5c2af86 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
@@ -23,7 +23,7 @@ import PackageFiles from '~/packages_and_registries/package_registry/components/
 import PackageHistory from '~/packages_and_registries/package_registry/components/details/package_history.vue';
 import PackageTitle from '~/packages_and_registries/package_registry/components/details/package_title.vue';
 import PackageVersionsList from '~/packages_and_registries/package_registry/components/details/package_versions_list.vue';
-import DeletePackage from '~/packages_and_registries/package_registry/components/functional/delete_package.vue';
+import DeletePackages from '~/packages_and_registries/package_registry/components/functional/delete_packages.vue';
 import {
   PACKAGE_TYPE_NUGET,
   PACKAGE_TYPE_COMPOSER,
@@ -71,7 +71,7 @@ export default {
     AdditionalMetadata,
     InstallationCommands,
     PackageFiles,
-    DeletePackage,
+    DeletePackages,
     PackageVersionsList,
   },
   directives: {
@@ -418,11 +418,11 @@ export default {
       </gl-tab>
     </gl-tabs>
 
-    <delete-package
+    <delete-packages
       @start="track($options.trackingActions.DELETE_PACKAGE_TRACKING_ACTION)"
       @end="navigateToListWithSuccessModal"
     >
-      <template #default="{ deletePackage }">
+      <template #default="{ deletePackages }">
         <gl-modal
           ref="deleteModal"
           size="sm"
@@ -430,7 +430,7 @@ export default {
           data-testid="delete-modal"
           :action-primary="$options.modal.packageDeletePrimaryAction"
           :action-cancel="$options.modal.cancelAction"
-          @primary="deletePackage(packageEntity)"
+          @primary="deletePackages([packageEntity])"
           @hidden="resetDeleteModalContent"
           @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE)"
         >
@@ -446,7 +446,7 @@ export default {
           </gl-sprintf>
         </gl-modal>
       </template>
-    </delete-package>
+    </delete-packages>
 
     <gl-modal
       ref="deleteFileModal"
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 396429d60d8..31c76c95e45 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, VARIANT_SUCCESS, VARIANT_DANGER } from '~/flash';
+import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
+import { createAlert, VARIANT_INFO } from '~/flash';
 import { historyReplaceState } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages_and_registries/shared/constants';
@@ -9,33 +9,28 @@ import {
   GROUP_RESOURCE_TYPE,
   GRAPHQL_PAGE_SIZE,
   DELETE_PACKAGE_SUCCESS_MESSAGE,
-  DELETE_PACKAGES_ERROR_MESSAGE,
-  DELETE_PACKAGES_SUCCESS_MESSAGE,
   EMPTY_LIST_HELP_URL,
   PACKAGE_HELP_URL,
 } 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';
-import DeletePackage from '~/packages_and_registries/package_registry/components/functional/delete_package.vue';
+import DeletePackages from '~/packages_and_registries/package_registry/components/functional/delete_packages.vue';
 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';
 
 export default {
   components: {
-    GlAlert,
     GlEmptyState,
     GlLink,
     GlSprintf,
     PackageList,
     PackageTitle,
     PackageSearch,
-    DeletePackage,
+    DeletePackages,
   },
   inject: ['emptyListIllustration', 'isGroupPage', 'fullPath'],
   data() {
     return {
-      alertVariables: null,
       packages: {},
       sort: '',
       filters: {},
@@ -114,39 +109,6 @@ export default {
         historyReplaceState(cleanUrl);
       }
     },
-    async deletePackages(packageEntities) {
-      this.mutationLoading = true;
-      try {
-        const { data } = await this.$apollo.mutate({
-          mutation: destroyPackagesMutation,
-          variables: {
-            ids: packageEntities.map((i) => i.id),
-          },
-          awaitRefetchQueries: true,
-          refetchQueries: [
-            {
-              query: getPackagesQuery,
-              variables: { ...this.queryVariables, first: GRAPHQL_PAGE_SIZE },
-            },
-          ],
-        });
-
-        if (data?.destroyPackages?.errors[0]) {
-          throw new Error(data.destroyPackages.errors[0]);
-        }
-        this.showAlert({
-          variant: VARIANT_SUCCESS,
-          message: DELETE_PACKAGES_SUCCESS_MESSAGE,
-        });
-      } catch {
-        this.showAlert({
-          variant: VARIANT_DANGER,
-          message: DELETE_PACKAGES_ERROR_MESSAGE,
-        });
-      } finally {
-        this.mutationLoading = false;
-      }
-    },
     handleSearchUpdate({ sort, filters }) {
       this.sort = sort;
       this.filters = { ...filters };
@@ -180,9 +142,6 @@ export default {
         updateQuery: this.updateQuery,
       });
     },
-    showAlert(obj) {
-      this.alertVariables = { ...obj };
-    },
   },
   i18n: {
     widenFilters: s__('PackageRegistry|To widen your search, change or remove the filters above.'),
@@ -201,32 +160,22 @@ export default {
 
 <template>
   <div>
-    <gl-alert
-      v-if="alertVariables"
-      :variant="alertVariables.variant"
-      class="gl-mt-5"
-      dismissible
-      @dismiss="alertVariables = null"
-    >
-      {{ alertVariables.message }}
-    </gl-alert>
     <package-title :help-url="$options.links.PACKAGE_HELP_URL" :count="packagesCount" />
     <package-search class="gl-mb-5" @update="handleSearchUpdate" />
 
-    <delete-package
+    <delete-packages
       :refetch-queries="refetchQueriesData"
       show-success-alert
       @start="mutationLoading = true"
       @end="mutationLoading = false"
     >
-      <template #default="{ deletePackage }">
+      <template #default="{ deletePackages }">
         <package-list
           :list="packages.nodes"
           :is-loading="isLoading"
           :page-info="pageInfo"
           @prev-page="fetchPreviousPage"
           @next-page="fetchNextPage"
-          @package:delete="deletePackage"
           @delete="deletePackages"
         >
           <template #empty-state>
@@ -245,6 +194,6 @@ export default {
           </template>
         </package-list>
       </template>
-    </delete-package>
+    </delete-packages>
   </div>
 </template>