Add latest changes from gitlab-org/gitlab@master

6 files changed, 94 insertions, 68 deletions

diff --git a/app/assets/javascripts/google_tag_manager/index.js b/app/assets/javascripts/google_tag_manager/index.js
index f42152006d2..a44a5b30e1e 100644
--- a/app/assets/javascripts/google_tag_manager/index.js
+++ b/app/assets/javascripts/google_tag_manager/index.js
@@ -232,35 +232,40 @@ export const trackTransaction = (transactionDetails) => {
   pushEnhancedEcommerceEvent('EECtransactionSuccess', eventData);
 };
 
-export const trackAddToCartUsageTab = () => {
+export const pushEECproductAddToCartEvent = () => {
   if (!isSupported()) {
     return;
   }
 
-  const getStartedButton = document.querySelector('.js-buy-additional-minutes');
-  getStartedButton.addEventListener('click', () => {
-    window.dataLayer.push({
-      event: 'EECproductAddToCart',
-      ecommerce: {
-        currencyCode: 'USD',
-        add: {
-          products: [
-            {
-              name: 'CI/CD Minutes',
-              id: '0003',
-              price: '10',
-              brand: 'GitLab',
-              category: 'DevOps',
-              variant: 'add-on',
-              quantity: 1,
-            },
-          ],
-        },
+  window.dataLayer.push({
+    event: 'EECproductAddToCart',
+    ecommerce: {
+      currencyCode: 'USD',
+      add: {
+        products: [
+          {
+            name: 'CI/CD Minutes',
+            id: '0003',
+            price: '10',
+            brand: 'GitLab',
+            category: 'DevOps',
+            variant: 'add-on',
+            quantity: 1,
+          },
+        ],
       },
-    });
+    },
   });
 };
 
+export const trackAddToCartUsageTab = () => {
+  const getStartedButton = document.querySelector('.js-buy-additional-minutes');
+  if (!getStartedButton) {
+    return;
+  }
+  getStartedButton.addEventListener('click', pushEECproductAddToCartEvent);
+};
+
 export const trackCombinedGroupProjectForm = () => {
   if (!isSupported()) {
     return;
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/delete_button.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/delete_button.vue
index e4a1a1a8266..bb1dac40b92 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/delete_button.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/delete_button.vue
@@ -1,13 +1,13 @@
 <script>
-import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { GlButton, GlLink, GlTooltip, GlSprintf } from '@gitlab/ui';
 
 export default {
   name: 'DeleteButton',
   components: {
     GlButton,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+    GlLink,
+    GlTooltip,
+    GlSprintf,
   },
   props: {
     title: {
@@ -18,6 +18,11 @@ export default {
       type: String,
       required: true,
     },
+    tooltipLink: {
+      type: String,
+      default: '',
+      required: false,
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -29,21 +34,12 @@ export default {
       required: false,
     },
   },
-  computed: {
-    tooltipConfiguration() {
-      return {
-        disabled: this.tooltipDisabled,
-        title: this.tooltipTitle,
-      };
-    },
-  },
 };
 </script>
 
 <template>
-  <div v-gl-tooltip="tooltipConfiguration">
+  <div ref="deleteImageButton">
     <gl-button
-      v-gl-tooltip
       :disabled="disabled"
       :title="title"
       :aria-label="title"
@@ -52,5 +48,14 @@ export default {
       icon="remove"
       @click="$emit('delete')"
     />
+    <gl-tooltip :target="() => $refs.deleteImageButton" :disabled="tooltipDisabled" placement="top">
+      <gl-sprintf :message="tooltipTitle">
+        <template #docLink="{ content }">
+          <gl-link v-if="tooltipLink" :href="tooltipLink" target="_blank">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-tooltip>
   </div>
 </template>
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 c1ec523574a..484903354e8 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
@@ -8,11 +8,13 @@ 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,
   ROOT_IMAGE_TEXT,
 } from '../../constants/index';
 import DeleteButton from '../delete_button.vue';
@@ -32,6 +34,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  inject: ['config'],
   props: {
     item: {
       type: Object,
@@ -44,13 +47,12 @@ export default {
     },
   },
   i18n: {
-    LIST_DELETE_BUTTON_DISABLED,
     REMOVE_REPOSITORY_LABEL,
     ROW_SCHEDULED_FOR_DELETION,
   },
   computed: {
     disabledDelete() {
-      return !this.item.canDelete || this.deleting;
+      return !this.item.canDelete || this.deleting || this.migrating;
     },
     id() {
       return getIdFromGraphQLId(this.item.id);
@@ -58,6 +60,9 @@ export default {
     deleting() {
       return this.item.status === IMAGE_DELETE_SCHEDULED_STATUS;
     },
+    migrating() {
+      return this.item.migrationState === IMAGE_MIGRATING_STATE;
+    },
     failedDelete() {
       return this.item.status === IMAGE_FAILED_DELETED_STATUS;
     },
@@ -83,6 +88,11 @@ export default {
     routerLinkEvent() {
       return this.deleting ? '' : 'click';
     },
+    deleteButtonTooltipTitle() {
+      return this.migrating
+        ? LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION
+        : LIST_DELETE_BUTTON_DISABLED;
+    },
   },
 };
 </script>
@@ -144,8 +154,9 @@ export default {
       <delete-button
         :title="$options.i18n.REMOVE_REPOSITORY_LABEL"
         :disabled="disabledDelete"
-        :tooltip-disabled="item.canDelete"
-        :tooltip-title="$options.i18n.LIST_DELETE_BUTTON_DISABLED"
+        :tooltip-disabled="!disabledDelete"
+        :tooltip-link="config.containerRegistryImportingHelpPagePath"
+        :tooltip-title="deleteButtonTooltipTitle"
         @delete="$emit('delete', item)"
       />
     </template>
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js
index 7fa950ccfd0..c7022d6070f 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js
@@ -14,6 +14,9 @@ export const LIST_INTRO_TEXT = s__(
 export const LIST_DELETE_BUTTON_DISABLED = s__(
   'ContainerRegistry|Missing or insufficient permission, delete button disabled',
 );
+export const LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION = s__(
+  `ContainerRegistry|Image repository temporarily cannot be marked for deletion. Please try again in a few minutes. %{docLinkStart}More details%{docLinkEnd}`,
+);
 export const REMOVE_REPOSITORY_LABEL = s__('ContainerRegistry|Remove repository');
 export const REMOVE_REPOSITORY_MODAL_TEXT = s__(
   'ContainerRegistry|You are about to remove repository %{title}. Once you confirm, this repository will be permanently deleted.',
@@ -45,6 +48,7 @@ export const EMPTY_RESULT_MESSAGE = s__(
 
 export const IMAGE_DELETE_SCHEDULED_STATUS = 'DELETE_SCHEDULED';
 export const IMAGE_FAILED_DELETED_STATUS = 'DELETE_FAILED';
+export const IMAGE_MIGRATING_STATE = 'importing';
 export const GRAPHQL_PAGE_SIZE = 10;
 
 export const SORT_FIELDS = [
diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss
new file mode 100644
index 00000000000..1642e6a39f3
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/issues_show.scss
@@ -0,0 +1,30 @@
+@import 'mixins_and_variables_and_functions';
+
+.description.work-items-enabled {
+  ul.task-list {
+    > li.task-list-item {
+      padding-inline-start: 2.5rem;
+
+      .js-add-task {
+        svg {
+          visibility: hidden;
+        }
+
+        &:focus svg {
+          visibility: visible;
+        }
+      }
+
+      > input.task-list-item-checkbox {
+        left: 1.25rem;
+      }
+
+      &:hover,
+      &:focus-within {
+        .js-add-task svg {
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index f127b0dc66c..04e0ef6631e 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -307,32 +307,3 @@ ul.related-merge-requests > li gl-emoji {
 .issuable-header-slide-leave-to {
   transform: translateY(-100%);
 }
-
-.description.work-items-enabled {
-  ul.task-list {
-    > li.task-list-item {
-      padding-inline-start: 2.5rem;
-
-      .js-add-task {
-        svg {
-          visibility: hidden;
-        }
-
-        &:focus svg {
-          visibility: visible;
-        }
-      }
-
-      > input.task-list-item-checkbox {
-        left: 1.25rem;
-      }
-
-      &:hover,
-      &:focus-within {
-        .js-add-task svg {
-          visibility: visible;
-        }
-      }
-    }
-  }
-}