Add latest changes from gitlab-org/gitlab@master

3 files changed, 7 insertions, 66 deletions

diff --git a/app/assets/javascripts/design_management/components/design_note_pin.vue b/app/assets/javascripts/design_management/components/design_note_pin.vue
deleted file mode 100644
index 320e0654aab..00000000000
--- a/app/assets/javascripts/design_management/components/design_note_pin.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-import { GlIcon } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
-
-export default {
-  name: 'DesignNotePin',
-  components: {
-    GlIcon,
-  },
-  props: {
-    position: {
-      type: Object,
-      required: true,
-    },
-    label: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-  },
-  computed: {
-    isNewNote() {
-      return this.label === null;
-    },
-    pinLabel() {
-      return this.isNewNote
-        ? __('Comment form position')
-        : sprintf(__("Comment '%{label}' position"), { label: this.label });
-    },
-  },
-};
-</script>
-
-<template>
-  <button
-    :style="position"
-    :aria-label="pinLabel"
-    :class="{
-      'btn-transparent comment-indicator gl-p-0': isNewNote,
-      'js-image-badge badge badge-pill': !isNewNote,
-    }"
-    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)"
-    @click="$emit('click', $event)"
-  >
-    <gl-icon v-if="isNewNote" name="image-comment-dark" :size="24" />
-    <template v-else>
-      {{ label }}
-    </template>
-  </button>
-</template>
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
index 813f87452d8..10976202d06 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
@@ -1,11 +1,12 @@
 <script>
-import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink, GlBadge } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../../constants';
 import createNoteMutation from '../../graphql/mutations/create_note.mutation.graphql';
 import toggleResolveDiscussionMutation from '../../graphql/mutations/toggle_resolve_discussion.mutation.graphql';
@@ -30,7 +31,7 @@ export default {
     GlLink,
     ToggleRepliesWidget,
     TimeAgoTooltip,
-    GlBadge,
+    DesignNotePin,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -213,12 +214,7 @@ export default {
 
 <template>
   <div class="design-discussion-wrapper">
-    <gl-badge
-      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-cursor-pointer"
-      :class="{ resolved: discussion.resolved }"
-    >
-      {{ discussion.index }}
-    </gl-badge>
+    <design-note-pin :is-resolved="discussion.resolved" :label="discussion.index" />
     <ul
       class="design-discussion bordered-box gl-relative gl-p-0 gl-list-style-none"
       data-qa-selector="design_discussion_content"
diff --git a/app/assets/javascripts/design_management/components/design_overlay.vue b/app/assets/javascripts/design_management/components/design_overlay.vue
index 7815a57ce18..b058709b316 100644
--- a/app/assets/javascripts/design_management/components/design_overlay.vue
+++ b/app/assets/javascripts/design_management/components/design_overlay.vue
@@ -1,9 +1,9 @@
 <script>
 import { __ } from '~/locale';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../constants';
 import updateActiveDiscussionMutation from '../graphql/mutations/update_active_discussion.mutation.graphql';
 import activeDiscussionQuery from '../graphql/queries/active_discussion.query.graphql';
-import DesignNotePin from './design_note_pin.vue';
 
 export default {
   name: 'DesignOverlay',
@@ -251,9 +251,6 @@ export default {
         !discussionNotes.some(({ id }) => id === this.activeDiscussion.id)
       );
     },
-    designPinClass(note) {
-      return { inactive: this.isNoteInactive(note), resolved: note.resolved };
-    },
   },
   i18n: {
     newCommentButtonLabel: __('Add comment to design'),
@@ -287,7 +284,8 @@ export default {
           ? getNotePositionStyle(movingNoteNewPosition)
           : getNotePositionStyle(note.position)
       "
-      :class="designPinClass(note)"
+      :is-inactive="isNoteInactive(note)"
+      :is-resolved="note.resolved"
       @mousedown.stop="onNoteMousedown($event, note)"
       @mouseup.stop="onNoteMouseup(note)"
     />