1 files changed, 61 insertions, 0 deletions
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 46ffb60aa60..c26aa6fa15d 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -4,6 +4,8 @@
   import emojiSmile from 'icons/_emoji_smile.svg';
   import emojiSmiley from 'icons/_emoji_smiley.svg';
   import editSvg from 'icons/_icon_pencil.svg';
+  import resolveDiscussionSvg from 'icons/_icon_resolve_discussion.svg';
+  import resolvedDiscussionSvg from 'icons/_icon_status_success_solid.svg';
   import ellipsisSvg from 'icons/_ellipsis_v.svg';
   import loadingIcon from '~/vue_shared/components/loading_icon.vue';
   import tooltip from '~/vue_shared/directives/tooltip';
@@ -42,6 +44,26 @@
         type: Boolean,
         required: true,
       },
+      resolvable: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      isResolved: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      isResolving: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      resolvedBy: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
       canReportAsAbuse: {
         type: Boolean,
         required: true,
@@ -63,6 +85,15 @@
       currentUserId() {
         return this.getUserDataByProp('id');
       },
+      resolveButtonTitle() {
+        let title = 'Mark as resolved';
+
+        if (this.resolvedBy) {
+          title = `Resolved by ${this.resolvedBy.name}`;
+        }
+
+        return title;
+      },
     },
     created() {
       this.emojiSmiling = emojiSmiling;
@@ -70,6 +101,8 @@
       this.emojiSmiley = emojiSmiley;
       this.editSvg = editSvg;
       this.ellipsisSvg = ellipsisSvg;
+      this.resolveDiscussionSvg = resolveDiscussionSvg;
+      this.resolvedDiscussionSvg = resolvedDiscussionSvg;
     },
     methods: {
       onEdit() {
@@ -78,6 +111,9 @@
       onDelete() {
         this.$emit('handleDelete');
       },
+      onResolve() {
+        this.$emit('handleResolve');
+      },
     },
   };
 </script>
@@ -90,6 +126,31 @@
       {{ accessLevel }}
     </span>
     <div
+      v-if="resolvable"
+      class="note-actions-item">
+      <button
+        v-tooltip
+        @click="onResolve"
+        :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
+        :title="resolveButtonTitle"
+        :aria-label="resolveButtonTitle"
+        type="button"
+        class="line-resolve-btn note-action-button">
+        <template v-if="!isResolving">
+          <div
+            v-if="isResolved"
+            v-html="resolvedDiscussionSvg"></div>
+          <div
+            v-else
+            v-html="resolveDiscussionSvg"></div>
+        </template>
+        <loading-icon
+          v-else
+          :inline="true"
+        />
+      </button>
+    </div>
+    <div
       v-if="canAddAwardEmoji"
       class="note-actions-item">
       <a