Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

6 files changed, 114 insertions, 62 deletions

diff --git a/app/assets/javascripts/registry/explorer/components/details_page/partial_cleanup_alert.vue b/app/assets/javascripts/registry/explorer/components/details_page/partial_cleanup_alert.vue
new file mode 100644
index 00000000000..d13d815a59e
--- /dev/null
+++ b/app/assets/javascripts/registry/explorer/components/details_page/partial_cleanup_alert.vue
@@ -0,0 +1,38 @@
+<script>
+import { GlSprintf, GlAlert, GlLink } from '@gitlab/ui';
+
+import { DELETE_ALERT_TITLE, DELETE_ALERT_LINK_TEXT } from '../../constants/index';
+
+export default {
+  components: {
+    GlSprintf,
+    GlAlert,
+    GlLink,
+  },
+  props: {
+    runCleanupPoliciesHelpPagePath: { type: String, required: false, default: '' },
+    cleanupPoliciesHelpPagePath: { type: String, required: false, default: '' },
+  },
+  i18n: {
+    DELETE_ALERT_TITLE,
+    DELETE_ALERT_LINK_TEXT,
+  },
+};
+</script>
+
+<template>
+  <gl-alert variant="warning" :title="$options.i18n.DELETE_ALERT_TITLE" @dismiss="$emit('dismiss')">
+    <gl-sprintf :message="$options.i18n.DELETE_ALERT_LINK_TEXT">
+      <template #adminLink="{content}">
+        <gl-link data-testid="run-link" :href="runCleanupPoliciesHelpPagePath" target="_blank">{{
+          content
+        }}</gl-link>
+      </template>
+      <template #docLink="{content}">
+        <gl-link data-testid="help-link" :href="cleanupPoliciesHelpPagePath" target="_blank">{{
+          content
+        }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue b/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
index 661213733ac..0f6297ca406 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
@@ -123,7 +123,7 @@ export default {
           v-if="tag.location"
           :title="tag.location"
           :text="tag.location"
-          css-class="btn-default btn-transparent btn-clipboard"
+          category="tertiary"
         />
 
         <gl-icon
@@ -171,7 +171,7 @@ export default {
       />
     </template>
 
-    <template v-if="!invalidTag" #details_published>
+    <template v-if="!invalidTag" #details-published>
       <details-row icon="clock" data-testid="published-date-detail">
         <gl-sprintf :message="$options.i18n.PUBLISHED_DETAILS_ROW_TEXT">
           <template #repositoryPath>
@@ -186,7 +186,7 @@ export default {
         </gl-sprintf>
       </details-row>
     </template>
-    <template v-if="!invalidTag" #details_manifest_digest>
+    <template v-if="!invalidTag" #details-manifest-digest>
       <details-row icon="log" data-testid="manifest-detail">
         <gl-sprintf :message="$options.i18n.MANIFEST_DETAILS_ROW_TEST">
           <template #digest>
@@ -197,11 +197,12 @@ export default {
           v-if="tag.digest"
           :title="tag.digest"
           :text="tag.digest"
-          css-class="btn-default btn-transparent btn-clipboard gl-p-0"
+          category="tertiary"
+          size="small"
         />
       </details-row>
     </template>
-    <template v-if="!invalidTag" #details_configuration_digest>
+    <template v-if="!invalidTag" #details-configuration-digest>
       <details-row icon="cloud-gear" data-testid="configuration-detail">
         <gl-sprintf :message="$options.i18n.CONFIGURATION_DETAILS_ROW_TEST">
           <template #digest>
@@ -212,7 +213,8 @@ export default {
           v-if="formattedRevision"
           :title="formattedRevision"
           :text="formattedRevision"
-          css-class="btn-default btn-transparent btn-clipboard gl-p-0"
+          category="tertiary"
+          size="small"
         />
       </details-row>
     </template>
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
index 32bf27f1143..cfd787b3f52 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
@@ -10,6 +10,7 @@ import {
   LIST_DELETE_BUTTON_DISABLED,
   REMOVE_REPOSITORY_LABEL,
   ROW_SCHEDULED_FOR_DELETION,
+  CLEANUP_TIMED_OUT_ERROR_MESSAGE,
 } from '../../constants/index';
 
 export default {
@@ -34,7 +35,6 @@ export default {
     LIST_DELETE_BUTTON_DISABLED,
     REMOVE_REPOSITORY_LABEL,
     ROW_SCHEDULED_FOR_DELETION,
-    ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
   },
   computed: {
     encodedItem() {
@@ -42,6 +42,7 @@ export default {
         name: this.item.path,
         tags_path: this.item.tags_path,
         id: this.item.id,
+        cleanup_policy_started_at: this.item.cleanup_policy_started_at,
       });
       return window.btoa(params);
     },
@@ -55,6 +56,14 @@ export default {
         this.item.tags_count,
       );
     },
+    warningIconText() {
+      if (this.item.failedDelete) {
+        return ASYNC_DELETE_IMAGE_ERROR_MESSAGE;
+      } else if (this.item.cleanup_policy_started_at) {
+        return CLEANUP_TIMED_OUT_ERROR_MESSAGE;
+      }
+      return null;
+    },
   },
 };
 </script>
@@ -82,11 +91,12 @@ export default {
         :disabled="item.deleting"
         :text="item.location"
         :title="item.location"
-        css-class="btn-default btn-transparent btn-clipboard gl-text-gray-300"
+        category="tertiary"
       />
       <gl-icon
-        v-if="item.failedDelete"
-        v-gl-tooltip="{ title: $options.i18n.ASYNC_DELETE_IMAGE_ERROR_MESSAGE }"
+        v-if="warningIconText"
+        v-gl-tooltip="{ title: warningIconText }"
+        data-testid="warning-icon"
         name="warning"
         class="gl-text-orange-500"
       />
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
index 7be68e77def..c2bd01701df 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
@@ -1,5 +1,4 @@
 <script>
-import { GlSprintf, GlLink } from '@gitlab/ui';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
 import { n__, sprintf } from '~/locale';
@@ -15,8 +14,6 @@ import {
 
 export default {
   components: {
-    GlSprintf,
-    GlLink,
     TitleArea,
     MetadataItem,
   },
@@ -54,8 +51,6 @@ export default {
   },
   i18n: {
     CONTAINER_REGISTRY_TITLE,
-    LIST_INTRO_TEXT,
-    EXPIRATION_POLICY_DISABLED_MESSAGE,
   },
   computed: {
     imagesCountText() {
@@ -83,52 +78,40 @@ export default {
         !this.expirationPolicyEnabled && this.imagesCount > 0 && !this.hideExpirationPolicyData
       );
     },
+    infoMessages() {
+      const base = [{ text: LIST_INTRO_TEXT, link: this.helpPagePath }];
+      return this.showExpirationPolicyTip
+        ? [
+            ...base,
+            { text: EXPIRATION_POLICY_DISABLED_MESSAGE, link: this.expirationPolicyHelpPagePath },
+          ]
+        : base;
+    },
   },
 };
 </script>
 
 <template>
-  <div>
-    <title-area :title="$options.i18n.CONTAINER_REGISTRY_TITLE">
-      <template #right-actions>
-        <slot name="commands"></slot>
-      </template>
-      <template #metadata_count>
-        <metadata-item
-          v-if="imagesCount"
-          data-testid="images-count"
-          icon="container-image"
-          :text="imagesCountText"
-        />
-      </template>
-      <template #metadata_exp_policies>
-        <metadata-item
-          v-if="!hideExpirationPolicyData"
-          data-testid="expiration-policy"
-          icon="expire"
-          :text="expirationPolicyText"
-          size="xl"
-        />
-      </template>
-    </title-area>
-
-    <div data-testid="info-area">
-      <p>
-        <span data-testid="default-intro">
-          <gl-sprintf :message="$options.i18n.LIST_INTRO_TEXT">
-            <template #docLink="{content}">
-              <gl-link :href="helpPagePath" target="_blank">{{ content }}</gl-link>
-            </template>
-          </gl-sprintf>
-        </span>
-        <span v-if="showExpirationPolicyTip" data-testid="expiration-disabled-message">
-          <gl-sprintf :message="$options.i18n.EXPIRATION_POLICY_DISABLED_MESSAGE">
-            <template #docLink="{content}">
-              <gl-link :href="expirationPolicyHelpPagePath" target="_blank">{{ content }}</gl-link>
-            </template>
-          </gl-sprintf>
-        </span>
-      </p>
-    </div>
-  </div>
+  <title-area :title="$options.i18n.CONTAINER_REGISTRY_TITLE" :info-messages="infoMessages">
+    <template #right-actions>
+      <slot name="commands"></slot>
+    </template>
+    <template #metadata-count>
+      <metadata-item
+        v-if="imagesCount"
+        data-testid="images-count"
+        icon="container-image"
+        :text="imagesCountText"
+      />
+    </template>
+    <template #metadata-exp-policies>
+      <metadata-item
+        v-if="!hideExpirationPolicyData"
+        data-testid="expiration-policy"
+        icon="expire"
+        :text="expirationPolicyText"
+        size="xl"
+      />
+    </template>
+  </title-area>
 </template>
diff --git a/app/assets/javascripts/registry/explorer/constants/expiration_policies.js b/app/assets/javascripts/registry/explorer/constants/expiration_policies.js
index 8af25ca6ecc..48a6a015461 100644
--- a/app/assets/javascripts/registry/explorer/constants/expiration_policies.js
+++ b/app/assets/javascripts/registry/explorer/constants/expiration_policies.js
@@ -9,3 +9,10 @@ export const EXPIRATION_POLICY_DISABLED_TEXT = s__(
 export const EXPIRATION_POLICY_DISABLED_MESSAGE = s__(
   'ContainerRegistry|Expiration policies help manage the storage space used by the Container Registry, but the expiration policies for this registry are disabled. Contact your administrator to enable. %{docLinkStart}More information%{docLinkEnd}',
 );
+export const DELETE_ALERT_TITLE = s__('ContainerRegistry|Some tags were not deleted');
+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',
+);
diff --git a/app/assets/javascripts/registry/explorer/pages/details.vue b/app/assets/javascripts/registry/explorer/pages/details.vue
index b697bca6259..d2fb695dbfa 100644
--- a/app/assets/javascripts/registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/registry/explorer/pages/details.vue
@@ -4,6 +4,7 @@ import { GlPagination, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import Tracking from '~/tracking';
 import DeleteAlert from '../components/details_page/delete_alert.vue';
+import PartialCleanupAlert from '../components/details_page/partial_cleanup_alert.vue';
 import DeleteModal from '../components/details_page/delete_modal.vue';
 import DetailsHeader from '../components/details_page/details_header.vue';
 import TagsList from '../components/details_page/tags_list.vue';
@@ -21,6 +22,7 @@ import {
 export default {
   components: {
     DeleteAlert,
+    PartialCleanupAlert,
     DetailsHeader,
     GlPagination,
     DeleteModal,
@@ -37,13 +39,16 @@ export default {
       itemsToBeDeleted: [],
       isDesktop: true,
       deleteAlertType: null,
+      dismissPartialCleanupWarning: false,
     };
   },
   computed: {
     ...mapState(['tagsPagination', 'isLoading', 'config', 'tags']),
-    imageName() {
-      const { name } = decodeAndParse(this.$route.params.id);
-      return name;
+    queryParameters() {
+      return decodeAndParse(this.$route.params.id);
+    },
+    showPartialCleanupWarning() {
+      return this.queryParameters.cleanup_policy_started_at && !this.dismissPartialCleanupWarning;
     },
     tracking() {
       return {
@@ -120,7 +125,14 @@ export default {
       class="gl-my-2"
     />
 
-    <details-header :image-name="imageName" />
+    <partial-cleanup-alert
+      v-if="showPartialCleanupWarning"
+      :run-cleanup-policies-help-page-path="config.runCleanupPoliciesHelpPagePath"
+      :cleanup-policies-help-page-path="config.cleanupPoliciesHelpPagePath"
+      @dismiss="dismissPartialCleanupWarning = true"
+    />
+
+    <details-header :image-name="queryParameters.name" />
 
     <tags-loader v-if="isLoading" />
     <template v-else>