From 2eafcb0673f7d501d9e3fabde6e950a5dcc24fc2 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Tue, 15 Nov 2022 18:09:13 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 .../package_registry/components/delete_modal.vue   | 61 +++++++++++++++++++
 .../components/list/package_list_row.vue           | 26 +++++---
 .../components/list/packages_list.vue              | 26 ++++++--
 .../package_registry/constants.js                  |  7 +++
 .../mutations/destroy_packages.mutation.graphql    |  5 ++
 .../package_registry/pages/list.vue                | 71 +++++++++++++++++++++-
 6 files changed, 182 insertions(+), 14 deletions(-)
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/graphql/mutations/destroy_packages.mutation.graphql

(limited to 'app/assets/javascripts/packages_and_registries/package_registry')

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
new file mode 100644
index 00000000000..2a1de2ae4a7
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue
@@ -0,0 +1,61 @@
+<script>
+import { GlModal } from '@gitlab/ui';
+import { __, n__ } from '~/locale';
+import {
+  DELETE_PACKAGES_MODAL_TITLE,
+  DELETE_PACKAGE_MODAL_PRIMARY_ACTION,
+} from '~/packages_and_registries/package_registry/constants';
+
+export default {
+  name: 'DeleteModal',
+  i18n: {
+    DELETE_PACKAGES_MODAL_TITLE,
+  },
+  components: {
+    GlModal,
+  },
+  props: {
+    itemsToBeDeleted: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    description() {
+      return n__(
+        'PackageRegistry|You are about to delete 1 package. This operation is irreversible.',
+        `PackageRegistry|You are about to delete %d packages. This operation is irreversible.`,
+        this.itemsToBeDeleted.length,
+      );
+    },
+  },
+  modal: {
+    packagesDeletePrimaryAction: {
+      text: DELETE_PACKAGE_MODAL_PRIMARY_ACTION,
+      attributes: [{ variant: 'danger' }, { category: 'primary' }],
+    },
+    cancelAction: {
+      text: __('Cancel'),
+    },
+  },
+  methods: {
+    show() {
+      this.$refs.deleteModal.show();
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    ref="deleteModal"
+    size="sm"
+    modal-id="delete-packages-modal"
+    :action-primary="$options.modal.packagesDeletePrimaryAction"
+    :action-cancel="$options.modal.cancelAction"
+    :title="$options.i18n.DELETE_PACKAGES_MODAL_TITLE"
+    @primary="$emit('confirm')"
+  >
+    <span>{{ description }}</span>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
index 7a000aca0f2..4553dd3421b 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
@@ -2,6 +2,7 @@
 import {
   GlDropdown,
   GlDropdownItem,
+  GlFormCheckbox,
   GlIcon,
   GlSprintf,
   GlTooltipDirective,
@@ -26,6 +27,7 @@ export default {
   components: {
     GlDropdown,
     GlDropdownItem,
+    GlFormCheckbox,
     GlIcon,
     GlSprintf,
     GlTruncate,
@@ -45,6 +47,11 @@ export default {
       type: Object,
       required: true,
     },
+    selected: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     packageType() {
@@ -90,7 +97,15 @@ export default {
 </script>
 
 <template>
-  <list-item data-testid="package-row">
+  <list-item data-testid="package-row" v-bind="$attrs">
+    <template #left-action>
+      <gl-form-checkbox
+        v-if="packageEntity.canDestroy"
+        class="gl-m-0"
+        :checked="selected"
+        @change="$emit('select')"
+      />
+    </template>
     <template #left-primary>
       <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
         <router-link
@@ -168,12 +183,9 @@ export default {
         category="tertiary"
         no-caret
       >
-        <gl-dropdown-item
-          data-testid="action-delete"
-          variant="danger"
-          @click="$emit('packageToDelete', packageEntity)"
-          >{{ $options.i18n.deletePackage }}</gl-dropdown-item
-        >
+        <gl-dropdown-item data-testid="action-delete" variant="danger" @click="$emit('delete')">{{
+          $options.i18n.deletePackage
+        }}</gl-dropdown-item>
       </gl-dropdown>
     </template>
   </list-item>
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 0043d778c60..ddcddf80c15 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,6 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
+import { s__, sprintf, n__ } 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';
@@ -48,6 +48,9 @@ export default {
     };
   },
   computed: {
+    listTitle() {
+      return n__('%d package', '%d packages', this.list.length);
+    },
     isListEmpty() {
       return !this.list || this.list.length === 0;
     },
@@ -83,6 +86,14 @@ export default {
       this.itemToBeDeleted = { ...item };
       this.track(REQUEST_DELETE_PACKAGE_TRACKING_ACTION);
     },
+    setItemsToBeDeleted(items) {
+      if (items.length === 1) {
+        const [item] = items;
+        this.setItemToBeDeleted(item);
+        return;
+      }
+      this.$emit('delete', items);
+    },
     deleteItemConfirmation() {
       this.$emit('package:delete', this.itemToBeDeleted);
       this.track(DELETE_PACKAGE_TRACKING_ACTION);
@@ -124,15 +135,22 @@ export default {
       >
       <registry-list
         data-testid="packages-table"
-        :hidden-delete="true"
         :is-loading="isLoading"
         :items="list"
         :pagination="pageInfo"
+        :title="listTitle"
+        @delete="setItemsToBeDeleted"
         @prev-page="$emit('prev-page')"
         @next-page="$emit('next-page')"
       >
-        <template #default="{ item }">
-          <packages-list-row :package-entity="item" @packageToDelete="setItemToBeDeleted(item)" />
+        <template #default="{ selectItem, isSelected, item, first }">
+          <packages-list-row
+            :first="first"
+            :package-entity="item"
+            :selected="isSelected(item)"
+            @delete="setItemToBeDeleted(item)"
+            @select="selectItem(item)"
+          />
         </template>
       </registry-list>
 
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 006164fd462..b731cd77e66 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,13 @@ 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_ERROR_MESSAGE = s__(
+  'PackageRegistry|Something went wrong while deleting packages.',
+);
+export const DELETE_PACKAGES_SUCCESS_MESSAGE = s__('PackageRegistry|Packages deleted successfully');
+
+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 PACKAGE_REGISTRY_TITLE = __('Package Registry');
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/mutations/destroy_packages.mutation.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/mutations/destroy_packages.mutation.graphql
new file mode 100644
index 00000000000..e1ff5518bf8
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/mutations/destroy_packages.mutation.graphql
@@ -0,0 +1,5 @@
+mutation destroyPackages($ids: [PackagesPackageID!]!) {
+  destroyPackages(input: { ids: $ids }) {
+    errors
+  }
+}
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 ea1432299ce..8b5d51cb856 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,5 +1,5 @@
 <script>
-import { GlBanner, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
+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 { s__ } from '~/locale';
@@ -10,19 +10,23 @@ import {
   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';
 import DeletePackage from '~/packages_and_registries/package_registry/components/functional/delete_package.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';
+import DeleteModal from '~/packages_and_registries/package_registry/components/delete_modal.vue';
 
 export default {
   components: {
+    GlAlert,
     GlBanner,
     GlEmptyState,
     GlLink,
@@ -30,11 +34,14 @@ export default {
     PackageList,
     PackageTitle,
     PackageSearch,
+    DeleteModal,
     DeletePackage,
   },
   inject: ['emptyListIllustration', 'isGroupPage', 'fullPath'],
   data() {
     return {
+      alertVariables: null,
+      itemsToBeDeleted: [],
       packages: {},
       sort: '',
       filters: {},
@@ -114,6 +121,45 @@ export default {
         historyReplaceState(cleanUrl);
       }
     },
+    async confirmDelete() {
+      const { itemsToBeDeleted } = this;
+      this.itemsToBeDeleted = [];
+      this.mutationLoading = true;
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: destroyPackagesMutation,
+          variables: {
+            ids: itemsToBeDeleted.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: 'success',
+          message: DELETE_PACKAGES_SUCCESS_MESSAGE,
+        });
+      } catch {
+        this.showAlert({
+          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 };
@@ -151,6 +197,9 @@ export default {
         updateQuery: this.updateQuery,
       });
     },
+    showAlert(obj) {
+      this.alertVariables = { ...obj };
+    },
   },
   i18n: {
     widenFilters: s__('PackageRegistry|To widen your search, change or remove the filters above.'),
@@ -175,6 +224,15 @@ export default {
 
 <template>
   <div>
+    <gl-alert
+      v-if="alertVariables"
+      :variant="alertVariables.variant"
+      class="gl-mt-5"
+      dismissible
+      @dismiss="alertVariables = null"
+    >
+      {{ alertVariables.message }}
+    </gl-alert>
     <gl-banner
       v-if="showSurveyBanner"
       :title="$options.i18n.surveyBannerTitle"
@@ -187,7 +245,7 @@ export default {
       <p>{{ $options.i18n.surveyBannerDescription }}</p>
     </gl-banner>
     <package-title :help-url="$options.links.PACKAGE_HELP_URL" :count="packagesCount" />
-    <package-search @update="handleSearchUpdate" />
+    <package-search class="gl-mb-5" @update="handleSearchUpdate" />
 
     <delete-package
       :refetch-queries="refetchQueriesData"
@@ -203,6 +261,7 @@ export default {
           @prev-page="fetchPreviousPage"
           @next-page="fetchNextPage"
           @package:delete="deletePackage"
+          @delete="showDeletePackagesModal"
         >
           <template #empty-state>
             <gl-empty-state :title="emptyStateTitle" :svg-path="emptyListIllustration">
@@ -221,5 +280,11 @@ export default {
         </package-list>
       </template>
     </delete-package>
+
+    <delete-modal
+      ref="deletePackagesModal"
+      :items-to-be-deleted="itemsToBeDeleted"
+      @confirm="confirmDelete"
+    />
   </div>
 </template>
-- 
cgit v1.2.3