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

11 files changed, 31 insertions, 43 deletions

diff --git a/app/assets/javascripts/design_management/components/delete_button.vue b/app/assets/javascripts/design_management/components/delete_button.vue
index 970197ef41b..273fa3f6be2 100644
--- a/app/assets/javascripts/design_management/components/delete_button.vue
+++ b/app/assets/javascripts/design_management/components/delete_button.vue
@@ -63,7 +63,7 @@ export default {
     title: s__('DesignManagement|Are you sure you want to archive the selected designs?'),
     actionPrimary: {
       text: s__('DesignManagement|Archive designs'),
-      attributes: { variant: 'warning' },
+      attributes: { variant: 'warning', 'data-qa-selector': 'confirm_archiving_button' },
     },
     actionCancel: {
       text: __('Cancel'),
diff --git a/app/assets/javascripts/design_management/components/design_note_pin.vue b/app/assets/javascripts/design_management/components/design_note_pin.vue
index 2b5e62c2870..320e0654aab 100644
--- a/app/assets/javascripts/design_management/components/design_note_pin.vue
+++ b/app/assets/javascripts/design_management/components/design_note_pin.vue
@@ -17,19 +17,11 @@ export default {
       required: false,
       default: null,
     },
-    repositioning: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     isNewNote() {
       return this.label === null;
     },
-    pinStyle() {
-      return this.repositioning ? { ...this.position, cursor: 'move' } : this.position;
-    },
     pinLabel() {
       return this.isNewNote
         ? __('Comment form position')
@@ -41,13 +33,13 @@ export default {
 
 <template>
   <button
-    :style="pinStyle"
+    :style="position"
     :aria-label="pinLabel"
     :class="{
-      'btn-transparent comment-indicator': isNewNote,
+      'btn-transparent comment-indicator gl-p-0': isNewNote,
       'js-image-badge badge badge-pill': !isNewNote,
     }"
-    class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0"
+    class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0!"
     type="button"
     @mousedown="$emit('mousedown', $event)"
     @mouseup="$emit('mouseup', $event)"
diff --git a/app/assets/javascripts/design_management/components/design_overlay.vue b/app/assets/javascripts/design_management/components/design_overlay.vue
index 5c4a3ab5f94..88f3ce0b8ea 100644
--- a/app/assets/javascripts/design_management/components/design_overlay.vue
+++ b/app/assets/javascripts/design_management/components/design_overlay.vue
@@ -266,7 +266,7 @@ export default {
       type="button"
       role="button"
       :aria-label="$options.i18n.newCommentButtonLabel"
-      class="gl-absolute gl-w-full gl-h-full gl-p-0 gl-top-0 gl-left-0 gl-outline-0! btn-transparent design-detail-overlay-add-comment"
+      class="gl-absolute gl-w-full gl-h-full gl-p-0 gl-top-0 gl-left-0 gl-outline-0! btn-transparent gl-hover-cursor-crosshair"
       data-qa-selector="design_image_button"
       @mouseup="onAddCommentMouseup"
     ></button>
@@ -276,7 +276,6 @@ export default {
       v-if="resolvedDiscussionsExpanded || !note.resolved"
       :key="note.id"
       :label="note.index"
-      :repositioning="isMovingNote(note.id)"
       :position="
         isMovingNote(note.id) && movingNoteNewPosition
           ? getNotePositionStyle(movingNoteNewPosition)
@@ -290,7 +289,6 @@ export default {
     <design-note-pin
       v-if="currentCommentForm"
       :position="currentCommentPositionStyle"
-      :repositioning="isMovingCurrentComment"
       @mousedown.stop="onNoteMousedown"
       @mouseup.stop="onNoteMouseup"
     />
diff --git a/app/assets/javascripts/design_management/components/design_presentation.vue b/app/assets/javascripts/design_management/components/design_presentation.vue
index 84dbb2809d9..c4d904e0d91 100644
--- a/app/assets/javascripts/design_management/components/design_presentation.vue
+++ b/app/assets/javascripts/design_management/components/design_presentation.vue
@@ -286,7 +286,7 @@ export default {
 <template>
   <div
     ref="presentationViewport"
-    class="h-100 w-100 p-3 overflow-auto position-relative"
+    class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
     :style="presentationStyle"
     @mousedown="onPresentationMousedown"
     @mousemove="onPresentationMousemove"
@@ -297,7 +297,7 @@ export default {
     @touchend="onPresentationMouseup"
     @touchcancel="onPresentationMouseup"
   >
-    <div class="h-100 w-100 d-flex align-items-center position-relative">
+    <div class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative">
       <design-image
         v-if="image"
         :image="image"
diff --git a/app/assets/javascripts/design_management/components/design_scaler.vue b/app/assets/javascripts/design_management/components/design_scaler.vue
index 55dee74bef5..8d26f84641e 100644
--- a/app/assets/javascripts/design_management/components/design_scaler.vue
+++ b/app/assets/javascripts/design_management/components/design_scaler.vue
@@ -51,7 +51,7 @@ export default {
 <template>
   <div class="design-scaler btn-group" role="group">
     <button class="btn" :disabled="disableDecrease" @click="decrementScale">
-      <span class="d-flex-center gl-icon s16">
+      <span class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16">
         –
       </span>
     </button>
diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue
index df425e3b96d..fb8e74c8c4c 100644
--- a/app/assets/javascripts/design_management/components/design_sidebar.vue
+++ b/app/assets/javascripts/design_management/components/design_sidebar.vue
@@ -71,14 +71,6 @@ export default {
     resolvedCommentsToggleIcon() {
       return this.resolvedDiscussionsExpanded ? 'chevron-down' : 'chevron-right';
     },
-    showTodoButton() {
-      return this.glFeatures.designManagementTodoButton;
-    },
-    sidebarWrapperClass() {
-      return {
-        'gl-pt-0': this.showTodoButton,
-      };
-    },
   },
   watch: {
     isResolvedCommentsPopoverHidden(newVal) {
@@ -121,12 +113,11 @@ export default {
 </script>
 
 <template>
-  <div class="image-notes" :class="sidebarWrapperClass" @click="handleSidebarClick">
+  <div class="image-notes gl-pt-0" @click="handleSidebarClick">
     <div
-      v-if="showTodoButton"
       class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
     >
-      <span>{{ __('To-Do') }}</span>
+      <span>{{ __('To Do') }}</span>
       <design-todo-button :design="design" @error="$emit('todoError', $event)" />
     </div>
     <h2 class="gl-font-weight-bold gl-mt-0">
diff --git a/app/assets/javascripts/design_management/components/image.vue b/app/assets/javascripts/design_management/components/image.vue
index 91b7b576e0c..53062e6ebb0 100644
--- a/app/assets/javascripts/design_management/components/image.vue
+++ b/app/assets/javascripts/design_management/components/image.vue
@@ -93,8 +93,8 @@ export default {
 </script>
 
 <template>
-  <div class="m-auto js-design-image">
-    <gl-icon v-if="imageError" class="text-secondary-100" name="media-broken" :size="48" />
+  <div class="gl-mx-auto gl-my-auto js-design-image">
+    <gl-icon v-if="imageError" class="gl-text-gray-200" name="media-broken" :size="48" />
     <img
       v-show="!imageError"
       ref="contentImg"
diff --git a/app/assets/javascripts/design_management/components/list/item.vue b/app/assets/javascripts/design_management/components/list/item.vue
index 36ea812d92e..fa09c7c15cc 100644
--- a/app/assets/javascripts/design_management/components/list/item.vue
+++ b/app/assets/javascripts/design_management/components/list/item.vue
@@ -132,7 +132,13 @@ export default {
     >
       <div v-if="icon.name" data-testid="designEvent" class="design-event gl-absolute">
         <span :title="icon.tooltip" :aria-label="icon.tooltip">
-          <gl-icon :name="icon.name" :size="18" :class="icon.classes" />
+          <gl-icon
+            :name="icon.name"
+            :size="18"
+            :class="icon.classes"
+            data-qa-selector="design_status_icon"
+            :data-qa-status="icon.name"
+          />
         </span>
       </div>
       <gl-intersection-observer @appear="onAppear">
@@ -149,6 +155,7 @@ export default {
           :alt="filename"
           class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
           data-qa-selector="design_image"
+          :data-qa-filename="filename"
           @load="onImageLoad"
           @error="onImageError"
         />
diff --git a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
index afca8ed2c6f..2719d701c12 100644
--- a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
+++ b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
@@ -64,9 +64,9 @@ export default {
 </script>
 
 <template>
-  <div v-if="designsCount" class="d-flex align-items-center">
+  <div v-if="designsCount" class="gl-display-flex gl-align-items-center">
     {{ paginationText }}
-    <gl-button-group class="ml-3 mr-3">
+    <gl-button-group class="gl-mx-5">
       <gl-button
         :disabled="!previousDesign"
         :title="s__('DesignManagement|Go to previous design')"
diff --git a/app/assets/javascripts/design_management/components/toolbar/index.vue b/app/assets/javascripts/design_management/components/toolbar/index.vue
index a1cb57123ab..8d25d467d59 100644
--- a/app/assets/javascripts/design_management/components/toolbar/index.vue
+++ b/app/assets/javascripts/design_management/components/toolbar/index.vue
@@ -106,12 +106,12 @@ export default {
       >
         <gl-icon name="close" />
       </router-link>
-      <div class="overflow-hidden d-flex align-items-center">
-        <h2 class="m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
-        <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
+      <div class="gl-overflow-hidden gl-display-flex gl-align-items-center">
+        <h2 class="gl-m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
+        <small v-if="updatedAt" class="gl-text-gray-500">{{ updatedText }}</small>
       </div>
     </div>
-    <design-navigation :id="id" class="ml-auto flex-shrink-0" />
+    <design-navigation :id="id" class="gl-ml-auto gl-flex-shrink-0" />
     <gl-button :href="image" icon="download" />
     <delete-button
       v-if="isLatestVersion && canDeleteDesign"
diff --git a/app/assets/javascripts/design_management/components/upload/design_dropzone.vue b/app/assets/javascripts/design_management/components/upload/design_dropzone.vue
index 7254b7cd16a..6694b0dab8d 100644
--- a/app/assets/javascripts/design_management/components/upload/design_dropzone.vue
+++ b/app/assets/javascripts/design_management/components/upload/design_dropzone.vue
@@ -83,7 +83,7 @@ export default {
 
 <template>
   <div
-    class="w-100 position-relative"
+    class="gl-w-full gl-relative"
     @dragstart.prevent.stop
     @dragend.prevent.stop
     @dragover.prevent.stop
@@ -93,7 +93,7 @@ export default {
   >
     <slot>
       <button
-        class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
+        class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
         @click="openFileUpload"
       >
         <div
@@ -127,9 +127,9 @@ export default {
     <transition name="design-dropzone-fade">
       <div
         v-show="dragging && !isDraggingDesign"
-        class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
+        class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
       >
-        <div v-show="!isDragDataValid" class="mw-50 text-center">
+        <div v-show="!isDragDataValid" class="mw-50 gl-text-center">
           <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Oh no!') }}</h3>
           <span>{{
             __(
@@ -137,7 +137,7 @@ export default {
             )
           }}</span>
         </div>
-        <div v-show="isDragDataValid" class="mw-50 text-center">
+        <div v-show="isDragDataValid" class="mw-50 gl-text-center">
           <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Incoming!') }}</h3>
           <span>{{ __('Drop your designs to start your upload.') }}</span>
         </div>