Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

16 files changed, 108 insertions, 67 deletions

diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue
index 9e8eb92d87a..597df2b9bc3 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlEmptyState } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { n__ } from '~/locale';
 import { joinPaths } from '~/lib/utils/url_utility';
 import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
@@ -69,7 +69,7 @@ export default {
         return this.queryVariables;
       },
       error() {
-        createFlash({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
+        createAlert({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
       },
     },
   },
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue
index 9ebbdfa920d..8b66165a57a 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlResizeObserverDirective, GlEmptyState } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import Tracking from '~/tracking';
@@ -66,7 +66,7 @@ export default {
         this.updateBreadcrumb();
       },
       error() {
-        createFlash({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
+        createAlert({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
       },
     },
   },
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
index c1bd71de646..794be8d5195 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
@@ -10,7 +10,7 @@ import {
 } from '@gitlab/ui';
 import { get } from 'lodash';
 import getContainerRepositoriesQuery from 'shared_queries/container_registry/get_container_repositories.query.graphql';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
 import Tracking from '~/tracking';
 import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue';
@@ -100,7 +100,7 @@ export default {
         this.containerRepositoriesCount = data[this.graphqlResource]?.containerRepositoriesCount;
       },
       error() {
-        createFlash({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
+        createAlert({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
       },
     },
     additionalDetails: {
@@ -115,7 +115,7 @@ export default {
         return data[this.graphqlResource]?.containerRepositories.nodes;
       },
       error() {
-        createFlash({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
+        createAlert({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
       },
     },
   },
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/store/actions.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/store/actions.js
index 26d4aa13715..223f427ce0e 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/store/actions.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/store/actions.js
@@ -1,5 +1,5 @@
 import Api from '~/api';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
 import {
   DELETE_PACKAGE_ERROR_MESSAGE,
   DELETE_PACKAGE_FILE_ERROR_MESSAGE,
@@ -20,7 +20,7 @@ export const fetchPackageVersions = ({ commit, state }) => {
       }
     })
     .catch(() => {
-      createFlash({ message: FETCH_PACKAGE_VERSIONS_ERROR, type: 'warning' });
+      createAlert({ message: FETCH_PACKAGE_VERSIONS_ERROR, variant: VARIANT_WARNING });
     })
     .finally(() => {
       commit(types.SET_LOADING, false);
@@ -33,7 +33,7 @@ export const deletePackage = ({
   },
 }) => {
   return Api.deleteProjectPackage(project_id, id).catch(() => {
-    createFlash({ message: DELETE_PACKAGE_ERROR_MESSAGE, type: 'warning' });
+    createAlert({ message: DELETE_PACKAGE_ERROR_MESSAGE, variant: VARIANT_WARNING });
   });
 };
 
@@ -51,9 +51,9 @@ export const deletePackageFile = (
     .then(() => {
       const filtered = packageFiles.filter((f) => f.id !== fileId);
       commit(types.UPDATE_PACKAGE_FILES, filtered);
-      createFlash({ message: DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, type: 'success' });
+      createAlert({ message: DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, variant: VARIANT_SUCCESS });
     })
     .catch(() => {
-      createFlash({ message: DELETE_PACKAGE_FILE_ERROR_MESSAGE, type: 'warning' });
+      createAlert({ message: DELETE_PACKAGE_FILE_ERROR_MESSAGE, variant: VARIANT_WARNING });
     });
 };
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 dab4a051d0c..8b6a5c59847 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
@@ -81,10 +81,9 @@ export default {
     },
   },
   i18n: {
-    deleteModalContent: s__(
-      'PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?',
-    ),
-    modalAction: s__('PackageRegistry|Delete package'),
+    deleteModalContent: s__('PackageRegistry|You are about to delete %{name}, are you sure?'),
+    modalTitle: s__('PackageRegistry|Delete package'),
+    modalAction: s__('PackageRegistry|Permanently delete'),
   },
 };
 </script>
@@ -120,13 +119,13 @@ export default {
       <gl-modal
         ref="packageListDeleteModal"
         size="sm"
-        modal-id="confirm-delete-pacakge"
+        modal-id="confirm-delete-package"
         :action-primary="deleteModalActionPrimaryProps"
         :action-cancel="deleteModalActionCancelProps"
         @ok="deleteItemConfirmation"
         @cancel="deleteItemCanceled"
       >
-        <template #modal-title>{{ $options.i18n.modalAction }}</template>
+        <template #modal-title>{{ $options.i18n.modalTitle }}</template>
         <gl-sprintf :message="$options.i18n.deleteModalContent">
           <template #name>
             <strong>{{ deletePackageName }}</strong>
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue
index 184a24047eb..2adf6187c4b 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_INFO } from '~/flash';
 import { historyReplaceState } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import {
@@ -84,7 +84,7 @@ export default {
       const showAlert = urlParams.get(SHOW_DELETE_SUCCESS_ALERT);
       if (showAlert) {
         // to be refactored to use gl-alert
-        createFlash({ message: DELETE_PACKAGE_SUCCESS_MESSAGE, type: 'notice' });
+        createAlert({ message: DELETE_PACKAGE_SUCCESS_MESSAGE, variant: VARIANT_INFO });
         const cleanUrl = window.location.href.split('?')[0];
         historyReplaceState(cleanUrl);
       }
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/actions.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/actions.js
index 51a38c434cb..37b51797490 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/actions.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/actions.js
@@ -1,5 +1,5 @@
 import Api from '~/api';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { DELETE_PACKAGE_ERROR_MESSAGE } from '~/packages_and_registries/shared/constants';
 import {
@@ -43,7 +43,7 @@ export const requestPackagesList = ({ dispatch, state }, params = {}) => {
       dispatch('receivePackagesListSuccess', { data, headers });
     })
     .catch(() => {
-      createFlash({
+      createAlert({
         message: FETCH_PACKAGES_LIST_ERROR_MESSAGE,
       });
     })
@@ -54,7 +54,7 @@ export const requestPackagesList = ({ dispatch, state }, params = {}) => {
 
 export const requestDeletePackage = ({ dispatch, state }, { _links }) => {
   if (!_links || !_links.delete_api_path) {
-    createFlash({
+    createAlert({
       message: DELETE_PACKAGE_ERROR_MESSAGE,
     });
     const error = new Error(MISSING_DELETE_PATH_ERROR);
@@ -69,14 +69,14 @@ export const requestDeletePackage = ({ dispatch, state }, { _links }) => {
       const page = getNewPaginationPage(currentPage, perPage, total - 1);
 
       dispatch('requestPackagesList', { page });
-      createFlash({
+      createAlert({
         message: DELETE_PACKAGE_SUCCESS_MESSAGE,
-        type: 'success',
+        variant: VARIANT_SUCCESS,
       });
     })
     .catch(() => {
       dispatch('setLoading', false);
-      createFlash({
+      createAlert({
         message: DELETE_PACKAGE_ERROR_MESSAGE,
       });
     });
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
index 11fd0db3106..cee976656f9 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
@@ -2,7 +2,8 @@
 import { GlSprintf, GlBadge, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import { __ } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
+import { formatDate } from '~/lib/utils/datetime_utility';
 import PackageTags from '~/packages_and_registries/shared/components/package_tags.vue';
 import { PACKAGE_TYPE_NUGET } from '~/packages_and_registries/package_registry/constants';
 import { getPackageTypeLabel } from '~/packages_and_registries/package_registry/utils';
@@ -25,6 +26,7 @@ export default {
   },
   inject: ['isGroupPage'],
   i18n: {
+    lastDownloadedAt: s__('PackageRegistry|Last downloaded %{dateTime}'),
     packageInfo: __('v%{version} published %{timeAgo}'),
   },
   props: {
@@ -39,6 +41,11 @@ export default {
     };
   },
   computed: {
+    packageLastDownloadedAtDisplay() {
+      return sprintf(this.$options.i18n.lastDownloadedAt, {
+        dateTime: formatDate(this.packageEntity.lastDownloadedAt, 'mmm d, yyyy'),
+      });
+    },
     packageTypeDisplay() {
       return getPackageTypeLabel(this.packageEntity.packageType);
     },
@@ -136,6 +143,15 @@ export default {
       <metadata-item data-testid="package-ref" icon="branch" :text="packagePipeline.ref" />
     </template>
 
+    <template v-if="packageEntity.lastDownloadedAt" #metadata-last-downloaded-at>
+      <metadata-item
+        data-testid="package-last-downloaded-at"
+        icon="download"
+        :text="packageLastDownloadedAtDisplay"
+        size="m"
+      />
+    </template>
+
     <template #right-actions>
       <slot name="delete-button"></slot>
     </template>
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
index 7a85fd3052e..e1cf4883029 100644
--- 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
@@ -1,6 +1,6 @@
 <script>
 import destroyPackageMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package.mutation.graphql';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
 import { s__ } from '~/locale';
 
 import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages_and_registries/package_registry/constants';
@@ -39,15 +39,15 @@ export default {
           throw data.destroyPackage.errors[0];
         }
         if (this.showSuccessAlert) {
-          createFlash({
+          createAlert({
             message: this.$options.i18n.successMessage,
-            type: 'success',
+            variant: VARIANT_SUCCESS,
           });
         }
       } catch (error) {
-        createFlash({
+        createAlert({
           message: this.$options.i18n.errorMessage,
-          type: 'warning',
+          variant: VARIANT_WARNING,
           captureError: true,
           error,
         });
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 e84f181e9b2..c6583b8f09f 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
@@ -122,10 +122,9 @@ export default {
     },
   },
   i18n: {
-    deleteModalContent: s__(
-      'PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?',
-    ),
-    modalAction: s__('PackageRegistry|Delete package'),
+    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.',
     ),
@@ -172,14 +171,14 @@ export default {
 
       <gl-modal
         v-model="showDeleteModal"
-        modal-id="confirm-delete-pacakge"
+        modal-id="confirm-delete-package"
         size="sm"
         :action-primary="deleteModalActionPrimaryProps"
         :action-cancel="deleteModalActionCancelProps"
         @ok="deleteItemConfirmation"
         @cancel="deleteItemCanceled"
       >
-        <template #modal-title>{{ $options.i18n.modalAction }}</template>
+        <template #modal-title>{{ $options.i18n.modalTitle }}</template>
         <gl-sprintf :message="$options.i18n.deleteModalContent">
           <template #name>
             <strong>{{ deletePackageName }}</strong>
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 06a04ee248a..4e35176c757 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
@@ -78,6 +78,17 @@ export const TRACKING_ACTION_CLICK_COMMIT_LINK = 'click_commit_link_from_package
 export const TRACKING_LABEL_PACKAGE_HISTORY = 'package_history';
 
 export const SHOW_DELETE_SUCCESS_ALERT = 'showSuccessDeleteAlert';
+
+export const DELETE_MODAL_TITLE = s__('PackageRegistry|Delete package version');
+export const DELETE_MODAL_CONTENT = s__(
+  `PackageRegistry|You are about to delete version %{version} of %{name}. Are you sure?`,
+);
+export const DELETE_ALL_PACKAGE_FILES_MODAL_CONTENT = s__(
+  `PackageRegistry|Deleting all package assets will remove version %{version} of %{name}. Are you sure?`,
+);
+export const DELETE_LAST_PACKAGE_FILE_MODAL_CONTENT = s__(
+  `PackageRegistry|Deleting the last package asset will remove version %{version} of %{name}. Are you sure?`,
+);
 export const DELETE_PACKAGE_FILE_ERROR_MESSAGE = s__(
   'PackageRegistry|Something went wrong while deleting the package asset.',
 );
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
index f3f0d096d10..8e50c95b10b 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
+++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
@@ -4,6 +4,7 @@ query getPackageDetails($id: PackagesPackageID!) {
     name
     packageType
     version
+    lastDownloadedAt
     createdAt
     updatedAt
     status
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 c10fc914d56..eeed56b77c3 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
@@ -10,7 +10,7 @@ import {
   GlTabs,
   GlSprintf,
 } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { objectToQuery } from '~/lib/utils/url_utility';
@@ -44,6 +44,10 @@ import {
   DELETE_PACKAGE_FILES_ERROR_MESSAGE,
   DELETE_PACKAGE_FILES_SUCCESS_MESSAGE,
   DOWNLOAD_PACKAGE_ASSET_TRACKING_ACTION,
+  DELETE_MODAL_TITLE,
+  DELETE_MODAL_CONTENT,
+  DELETE_ALL_PACKAGE_FILES_MODAL_CONTENT,
+  DELETE_LAST_PACKAGE_FILE_MODAL_CONTENT,
 } from '~/packages_and_registries/package_registry/constants';
 
 import destroyPackageFilesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package_files.mutation.graphql';
@@ -86,6 +90,7 @@ export default {
   },
   data() {
     return {
+      deletePackageModalContent: DELETE_MODAL_CONTENT,
       filesToDelete: [],
       mutationLoading: false,
       packageEntity: {},
@@ -101,7 +106,7 @@ export default {
         return data.package || {};
       },
       error(error) {
-        createFlash({
+        createAlert({
           message: FETCH_PACKAGE_DETAILS_ERROR_MESSAGE,
           captureError: true,
           error,
@@ -205,20 +210,18 @@ export default {
         if (data?.destroyPackageFiles?.errors[0]) {
           throw data.destroyPackageFiles.errors[0];
         }
-        createFlash({
-          message:
-            ids.length === 1
-              ? DELETE_PACKAGE_FILE_SUCCESS_MESSAGE
-              : DELETE_PACKAGE_FILES_SUCCESS_MESSAGE,
-          type: 'success',
+        createAlert({
+          message: this.isLastItem(ids)
+            ? DELETE_PACKAGE_FILE_SUCCESS_MESSAGE
+            : DELETE_PACKAGE_FILES_SUCCESS_MESSAGE,
+          variant: VARIANT_SUCCESS,
         });
       } catch (error) {
-        createFlash({
-          message:
-            ids.length === 1
-              ? DELETE_PACKAGE_FILE_ERROR_MESSAGE
-              : DELETE_PACKAGE_FILES_ERROR_MESSAGE,
-          type: 'warning',
+        createAlert({
+          message: this.isLastItem(ids)
+            ? DELETE_PACKAGE_FILE_ERROR_MESSAGE
+            : DELETE_PACKAGE_FILES_ERROR_MESSAGE,
+          variant: VARIANT_WARNING,
           captureError: true,
           error,
         });
@@ -231,18 +234,26 @@ export default {
         files.length === this.packageFiles.length &&
         !this.packageEntity.packageFiles?.pageInfo?.hasNextPage
       ) {
+        if (this.isLastItem(files)) {
+          this.deletePackageModalContent = DELETE_LAST_PACKAGE_FILE_MODAL_CONTENT;
+        } else {
+          this.deletePackageModalContent = DELETE_ALL_PACKAGE_FILES_MODAL_CONTENT;
+        }
         this.$refs.deleteModal.show();
       } else {
         this.filesToDelete = files;
-        if (files.length === 1) {
+        if (this.isLastItem(files)) {
           this.$refs.deleteFileModal.show();
         } else if (files.length > 1) {
           this.$refs.deleteFilesModal.show();
         }
       }
     },
+    isLastItem(items) {
+      return items.length === 1;
+    },
     confirmFilesDelete() {
-      if (this.filesToDelete.length === 1) {
+      if (this.isLastItem(this.filesToDelete)) {
         this.track(DELETE_PACKAGE_FILE_TRACKING_ACTION);
       } else {
         this.track(DELETE_PACKAGE_FILES_TRACKING_ACTION);
@@ -250,12 +261,12 @@ export default {
       this.deletePackageFiles(this.filesToDelete.map((file) => file.id));
       this.filesToDelete = [];
     },
+    resetDeleteModalContent() {
+      this.deletePackageModalContent = DELETE_MODAL_CONTENT;
+    },
   },
   i18n: {
-    deleteModalTitle: s__(`PackageRegistry|Delete Package Version`),
-    deleteModalContent: s__(
-      `PackageRegistry|You are about to delete version %{version} of %{name}. Are you sure?`,
-    ),
+    DELETE_MODAL_TITLE,
     deleteFileModalTitle: s__(`PackageRegistry|Delete package asset`),
     deleteFileModalContent: s__(
       `PackageRegistry|You are about to delete %{filename}. This is a destructive action that may render your package unusable. Are you sure?`,
@@ -263,7 +274,7 @@ export default {
   },
   modal: {
     packageDeletePrimaryAction: {
-      text: __('Delete'),
+      text: s__('PackageRegistry|Permanently delete'),
       attributes: [
         { variant: 'danger' },
         { category: 'primary' },
@@ -371,10 +382,11 @@ export default {
           :action-primary="$options.modal.packageDeletePrimaryAction"
           :action-cancel="$options.modal.cancelAction"
           @primary="deletePackage(packageEntity)"
+          @hidden="resetDeleteModalContent"
           @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE)"
         >
-          <template #modal-title>{{ $options.i18n.deleteModalTitle }}</template>
-          <gl-sprintf :message="$options.i18n.deleteModalContent">
+          <template #modal-title>{{ $options.i18n.DELETE_MODAL_TITLE }}</template>
+          <gl-sprintf :message="deletePackageModalContent">
             <template #version>
               <strong>{{ packageEntity.version }}</strong>
             </template>
@@ -398,7 +410,7 @@ export default {
       @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE_FILE)"
     >
       <template #modal-title>{{ $options.i18n.deleteFileModalTitle }}</template>
-      <gl-sprintf v-if="filesToDelete.length === 1" :message="$options.i18n.deleteFileModalContent">
+      <gl-sprintf v-if="isLastItem(filesToDelete)" :message="$options.i18n.deleteFileModalContent">
         <template #filename>
           <strong>{{ filesToDelete[0].fileName }}</strong>
         </template>
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 38df701157a..ed9ab0367dd 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 { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
-import createFlash from '~/flash';
+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';
@@ -105,7 +105,7 @@ export default {
       const showAlert = urlParams.get(SHOW_DELETE_SUCCESS_ALERT);
       if (showAlert) {
         // to be refactored to use gl-alert
-        createFlash({ message: DELETE_PACKAGE_SUCCESS_MESSAGE, type: 'notice' });
+        createAlert({ message: DELETE_PACKAGE_SUCCESS_MESSAGE, variant: VARIANT_INFO });
         const cleanUrl = window.location.href.split('?')[0];
         historyReplaceState(cleanUrl);
       }
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/cleanup_image_tags.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/cleanup_image_tags.vue
index 72e68aca070..b8405b09840 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/cleanup_image_tags.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/cleanup_image_tags.vue
@@ -57,6 +57,9 @@ export default {
     isEnabled() {
       return this.containerExpirationPolicy || this.enableHistoricEntries;
     },
+    isLoading() {
+      return this.$apollo.queries.containerExpirationPolicy.loading;
+    },
     showDisabledFormMessage() {
       return !this.isEnabled && !this.fetchSettingsError;
     },
@@ -86,10 +89,10 @@ export default {
     <container-expiration-policy-form
       v-if="isEnabled"
       v-model="workingCopy"
-      :is-loading="$apollo.queries.containerExpirationPolicy.loading"
+      :is-loading="isLoading"
       :is-edited="isEdited"
     />
-    <template v-else>
+    <template v-if="!isLoading">
       <gl-alert
         v-if="showDisabledFormMessage"
         :dismissible="false"
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue
index b003b6aeb6b..1dd88d69d30 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue
@@ -110,7 +110,7 @@ export default {
           {{ cleanupRulesButtonText }}
         </gl-button>
       </gl-card>
-      <template v-else>
+      <template v-if="!$apollo.queries.containerExpirationPolicy.loading">
         <gl-alert
           v-if="showDisabledFormMessage"
           :dismissible="false"