Add latest changes from gitlab-org/gitlab@master

9 files changed, 77 insertions, 28 deletions

diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue
index 1f52e319ad0..a720ad75570 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue
@@ -1,7 +1,9 @@
 <script>
-import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlIcon, GlPopover, GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { timeTilRun } from '../../utils';
 import {
-  CLEANUP_TIMED_OUT_ERROR_MESSAGE,
+  PARTIAL_CLEANUP_CONTINUE_MESSAGE,
   CLEANUP_STATUS_SCHEDULED,
   CLEANUP_STATUS_ONGOING,
   CLEANUP_STATUS_UNFINISHED,
@@ -15,9 +17,9 @@ export default {
   name: 'CleanupStatus',
   components: {
     GlIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+    GlPopover,
+    GlLink,
+    GlSprintf,
   },
   props: {
     status: {
@@ -29,12 +31,17 @@ export default {
         );
       },
     },
+    expirationPolicyNextRunAt: {
+      type: String,
+      required: false,
+      default: () => '',
+    },
   },
   i18n: {
     CLEANUP_STATUS_SCHEDULED,
     CLEANUP_STATUS_ONGOING,
     CLEANUP_STATUS_UNFINISHED,
-    CLEANUP_TIMED_OUT_ERROR_MESSAGE,
+    PARTIAL_CLEANUP_CONTINUE_MESSAGE,
   },
   computed: {
     showStatus() {
@@ -46,26 +53,57 @@ export default {
     statusText() {
       return this.$options.i18n[`CLEANUP_STATUS_${this.status}`];
     },
-    expireIconClass() {
-      return this.failedDelete ? 'gl-text-orange-500' : '';
+    calculatedTimeTilNextRun() {
+      return timeTilRun(this.expirationPolicyNextRunAt?.next_run);
     },
   },
+  statusPopoverOptions: {
+    triggers: 'hover',
+    placement: 'top',
+  },
+  cleanupPolicyHelpPage: helpPagePath(
+    'user/packages/container_registry/reduce_container_registry_storage.html',
+    { anchor: 'how-the-cleanup-policy-works' },
+  ),
 };
 </script>
 
 <template>
-  <div v-if="showStatus" class="gl-display-inline-flex gl-align-items-center">
-    <gl-icon name="expire" data-testid="main-icon" :class="expireIconClass" />
+  <div
+    v-if="showStatus"
+    id="status-popover-container"
+    class="gl-display-inline-flex gl-align-items-center"
+  >
+    <div class="gl-display-inline-flex gl-align-items-center">
+      <gl-icon name="expire" data-testid="main-icon" />
+    </div>
     <span class="gl-mx-2">
       {{ statusText }}
     </span>
     <gl-icon
       v-if="failedDelete"
-      v-gl-tooltip="{ title: $options.i18n.CLEANUP_TIMED_OUT_ERROR_MESSAGE }"
+      id="status-info"
       :size="14"
-      class="gl-text-black-normal"
+      class="gl-text-gray-500"
       data-testid="extra-info"
-      name="information"
+      name="information-o"
     />
+    <gl-popover
+      target="status-info"
+      container="status-popover-container"
+      v-bind="$options.statusPopoverOptions"
+    >
+      <template #title>
+        {{ $options.i18n.CLEANUP_STATUS_UNFINISHED }}
+      </template>
+      <gl-sprintf :message="$options.i18n.PARTIAL_CLEANUP_CONTINUE_MESSAGE">
+        <template #time>{{ calculatedTimeTilNextRun }}</template
+        ><template #link="{ content }"
+          ><gl-link :href="$options.cleanupPolicyHelpPage" class="gl-font-sm" target="_blank">{{
+            content
+          }}</gl-link></template
+        >
+      </gl-sprintf>
+    </gl-popover>
   </div>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue
index 5bd13322ebb..6f1f67e251f 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue
@@ -22,6 +22,11 @@ export default {
       type: Object,
       required: true,
     },
+    expirationPolicy: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
   },
   computed: {
     showPagination() {
@@ -38,6 +43,7 @@ export default {
       :key="index"
       :item="listItem"
       :metadata-loading="metadataLoading"
+      :expiration-policy="expirationPolicy"
       @delete="$emit('delete', $event)"
     />
     <div class="gl-display-flex gl-justify-content-center">
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue
index 484903354e8..12263c6fc5a 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue
@@ -6,12 +6,10 @@ import { n__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import {
-  ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
   LIST_DELETE_BUTTON_DISABLED,
   LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION,
   REMOVE_REPOSITORY_LABEL,
   ROW_SCHEDULED_FOR_DELETION,
-  CLEANUP_TIMED_OUT_ERROR_MESSAGE,
   IMAGE_DELETE_SCHEDULED_STATUS,
   IMAGE_FAILED_DELETED_STATUS,
   IMAGE_MIGRATING_STATE,
@@ -45,6 +43,11 @@ export default {
       default: false,
       required: false,
     },
+    expirationPolicy: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
   },
   i18n: {
     REMOVE_REPOSITORY_LABEL,
@@ -73,15 +76,6 @@ export default {
         this.item.tagsCount,
       );
     },
-    warningIconText() {
-      if (this.failedDelete) {
-        return ASYNC_DELETE_IMAGE_ERROR_MESSAGE;
-      }
-      if (this.item.expirationPolicyStartedAt) {
-        return CLEANUP_TIMED_OUT_ERROR_MESSAGE;
-      }
-      return null;
-    },
     imageName() {
       return this.item.name ? this.item.path : `${this.item.path}/ ${ROOT_IMAGE_TEXT}`;
     },
@@ -140,6 +134,7 @@ export default {
           v-if="item.expirationPolicyCleanupStatus"
           class="ml-2"
           :status="item.expirationPolicyCleanupStatus"
+          :expiration-policy-next-run-at="expirationPolicy.next_run_at"
         />
       </template>
 
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js
index 3c7f7ca9aa8..2a58933cd64 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js
@@ -87,7 +87,7 @@ export const CLEANUP_DISABLED_TOOLTIP = s__(
 
 export const CLEANUP_STATUS_SCHEDULED = s__('ContainerRegistry|Cleanup will run soon');
 export const CLEANUP_STATUS_ONGOING = s__('ContainerRegistry|Cleanup is ongoing');
-export const CLEANUP_STATUS_UNFINISHED = s__('ContainerRegistry|Cleanup timed out');
+export const CLEANUP_STATUS_UNFINISHED = s__('ContainerRegistry|Partial cleanup complete');
 
 export const DETAILS_DELETE_IMAGE_ERROR_MESSAGE = s__(
   'ContainerRegistry|Something went wrong while scheduling the image for deletion.',
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js
index e584da23edb..9d0ecfd2dcb 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/expiration_policies.js
@@ -10,7 +10,7 @@ export const DELETE_ALERT_TITLE = s__('ContainerRegistry|Some tags were not dele
 export const DELETE_ALERT_LINK_TEXT = s__(
   'ContainerRegistry|The cleanup policy timed out before it could delete all tags. An administrator can %{adminLinkStart}manually run cleanup now%{adminLinkEnd} or you can wait for the cleanup policy to automatically run again. %{docLinkStart}More information%{docLinkEnd}',
 );
-export const CLEANUP_TIMED_OUT_ERROR_MESSAGE = s__(
-  'ContainerRegistry|Cleanup timed out before it could delete all tags',
+export const PARTIAL_CLEANUP_CONTINUE_MESSAGE = s__(
+  'ContainerRegistry|The cleanup will continue within %{time}. %{linkStart}Learn more%{linkEnd}',
 );
 export const SET_UP_CLEANUP = s__('ContainerRegistry|Set up cleanup');
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 bb116d5f842..c1bd71de646 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
@@ -336,6 +336,7 @@ export default {
             :images="images"
             :metadata-loading="$apollo.queries.additionalDetails.loading"
             :page-info="pageInfo"
+            :expiration-policy="config.expirationPolicy"
             @delete="deleteImage"
             @prev-page="fetchPreviousPage"
             @next-page="fetchNextPage"
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/utils.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/utils.js
new file mode 100644
index 00000000000..ffdaf9f2f17
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/utils.js
@@ -0,0 +1,8 @@
+import { approximateDuration, calculateRemainingMilliseconds } from '~/lib/utils/datetime_utility';
+
+export const timeTilRun = (time) => {
+  if (!time) return '';
+
+  const difference = calculateRemainingMilliseconds(time);
+  return approximateDuration(difference / 1000);
+};
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 09988f4e1d9..04faff1a75b 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
@@ -159,7 +159,7 @@ export default {
       </span>
     </template>
 
-    <template #right-action>
+    <template v-if="packageEntity.canDestroy" #right-action>
       <gl-dropdown
         data-testid="delete-dropdown"
         icon="ellipsis_v"
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql
index 66315fda9e9..b5695a01376 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql
+++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql
@@ -5,6 +5,7 @@ fragment PackageData on Package {
   packageType
   createdAt
   status
+  canDestroy
   tags {
     nodes {
       id