Add latest changes from gitlab-org/gitlab@master

7 files changed, 129 insertions, 16 deletions

diff --git a/app/assets/javascripts/work_items/components/notes/work_item_note.vue b/app/assets/javascripts/work_items/components/notes/work_item_note.vue
new file mode 100644
index 00000000000..5efa9c94f2b
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/notes/work_item_note.vue
@@ -0,0 +1,59 @@
+<script>
+import { GlAvatarLink, GlAvatar } from '@gitlab/ui';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+import NoteBody from '~/work_items/components/notes/work_item_note_body.vue';
+import NoteHeader from '~/notes/components/note_header.vue';
+
+export default {
+  components: {
+    NoteHeader,
+    NoteBody,
+    TimelineEntryItem,
+    GlAvatarLink,
+    GlAvatar,
+  },
+  props: {
+    note: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    author() {
+      return this.note.author;
+    },
+    noteAnchorId() {
+      return `note_${this.note.id}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <timeline-entry-item
+    :id="noteAnchorId"
+    :class="{ 'internal-note': note.internal }"
+    :data-note-id="note.id"
+    class="note note-wrapper note-comment"
+  >
+    <div class="timeline-avatar gl-float-left">
+      <gl-avatar-link :href="author.webUrl">
+        <gl-avatar
+          :src="author.avatarUrl"
+          :entity-name="author.username"
+          :alt="author.name"
+          :size="32"
+        />
+      </gl-avatar-link>
+    </div>
+
+    <div class="timeline-content">
+      <div class="note-header">
+        <note-header :author="author" :created-at="note.createdAt" :note-id="note.id" />
+      </div>
+      <div class="timeline-discussion-body">
+        <note-body :note="note" />
+      </div>
+    </div>
+  </timeline-entry-item>
+</template>
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_note_body.vue b/app/assets/javascripts/work_items/components/notes/work_item_note_body.vue
new file mode 100644
index 00000000000..dcee8750f81
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/notes/work_item_note_body.vue
@@ -0,0 +1,37 @@
+<script>
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
+
+export default {
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    note: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.renderGFM();
+  },
+  methods: {
+    renderGFM() {
+      renderGFM(this.$refs['note-body']);
+    },
+  },
+  safeHtmlConfig: {
+    ADD_TAGS: ['use', 'gl-emoji', 'copy-code'],
+  },
+};
+</script>
+
+<template>
+  <div ref="note-body" class="note-body">
+    <div
+      v-safe-html:[$options.safeHtmlConfig]="note.bodyHtml"
+      class="note-text md"
+      data-testid="work-item-note-body"
+    ></div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/work_items/components/work_item_comment_form.vue b/app/assets/javascripts/work_items/components/work_item_comment_form.vue
index 5c843d84ae0..65042f1431d 100644
--- a/app/assets/javascripts/work_items/components/work_item_comment_form.vue
+++ b/app/assets/javascripts/work_items/components/work_item_comment_form.vue
@@ -8,7 +8,7 @@ import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
-import { getWorkItemQuery } from '../utils';
+import { getWorkItemQuery, getWorkItemNotesQuery } from '../utils';
 import createNoteMutation from '../graphql/create_work_item_note.mutation.graphql';
 import { i18n, TRACKING_CATEGORY_SHOW } from '../constants';
 import WorkItemNoteSignedOut from './work_item_note_signed_out.vue';
@@ -156,6 +156,11 @@ export default {
           throw new Error(createNote.errors[0]);
         }
 
+        const client = this.$apollo.provider.defaultClient;
+        client.refetchQueries({
+          include: [getWorkItemNotesQuery(this.fetchByIid)],
+        });
+
         this.isEditing = false;
         clearDraft(this.autosaveKey);
       } catch (error) {
diff --git a/app/assets/javascripts/work_items/components/work_item_notes.vue b/app/assets/javascripts/work_items/components/work_item_notes.vue
index bbcaf066bb8..ca15d42cda9 100644
--- a/app/assets/javascripts/work_items/components/work_item_notes.vue
+++ b/app/assets/javascripts/work_items/components/work_item_notes.vue
@@ -6,6 +6,7 @@ import ActivityFilter from '~/work_items/components/notes/activity_filter.vue';
 import { i18n, DEFAULT_PAGE_SIZE_NOTES } from '~/work_items/constants';
 import { ASC, DESC } from '~/notes/constants';
 import { getWorkItemNotesQuery } from '~/work_items/utils';
+import WorkItemNote from '~/work_items/components/notes/work_item_note.vue';
 import WorkItemCommentForm from './work_item_comment_form.vue';
 
 export default {
@@ -23,6 +24,7 @@ export default {
     GlIntersectionObserver,
     SystemNote,
     WorkItemCommentForm,
+    WorkItemNote,
   },
   props: {
     workItemId: {
@@ -119,6 +121,9 @@ export default {
     },
   },
   methods: {
+    isSystemNote(note) {
+      return note.notes.nodes[0].system;
+    },
     updateSortingOrderIfApplicable() {
       // when the sort order is DESC in local storage and there is only a single page, call
       // changeSortOrder manually
@@ -169,7 +174,7 @@ export default {
   <div class="gl-border-t gl-mt-5">
     <gl-intersection-observer
       v-if="showIntersectionObserver"
-      class="gl-absolute gl-top-0"
+      class="gl-fixed"
       height="100"
       @appear="fetchMoreNotes"
     />
@@ -199,12 +204,15 @@ export default {
     <div v-else class="issuable-discussion gl-mb-5 gl-clearfix!">
       <template v-if="showTimeline">
         <ul class="notes main-notes-list timeline gl-clearfix!">
-          <system-note
-            v-for="note in notesArray"
-            :key="note.notes.nodes[0].id"
-            :note="note.notes.nodes[0]"
-            :data-testid="note.notes.nodes[0].id"
-          />
+          <template v-for="note in notesArray">
+            <system-note
+              v-if="isSystemNote(note)"
+              :key="note.notes.nodes[0].id"
+              :note="note.notes.nodes[0]"
+            />
+            <work-item-note v-else :key="note.notes.nodes[0].id" :note="note.notes.nodes[0]" />
+          </template>
+
           <work-item-comment-form
             :query-variables="queryVariables"
             :full-path="fullPath"
diff --git a/app/assets/javascripts/work_items/graphql/discussion.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item_note.fragment.graphql
index 62ced6bdfea..5215ea10918 100644
--- a/app/assets/javascripts/work_items/graphql/discussion.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_note.fragment.graphql
@@ -1,12 +1,16 @@
 #import "~/graphql_shared/fragments/user.fragment.graphql"
 
-fragment Discussion on Note {
+fragment WorkItemNote on Note {
   id
-  body
   bodyHtml
+  system
+  internal
   systemNoteIconName
   createdAt
   author {
     ...User
   }
+  userPermissions {
+    adminNote
+  }
 }
diff --git a/app/assets/javascripts/work_items/graphql/work_item_notes.query.graphql b/app/assets/javascripts/work_items/graphql/work_item_notes.query.graphql
index 9439f22f955..9ea9cecc81a 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_notes.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_notes.query.graphql
@@ -1,5 +1,5 @@
 #import "~/graphql_shared/fragments/page_info.fragment.graphql"
-#import "~/work_items/graphql/discussion.fragment.graphql"
+#import "~/work_items/graphql/work_item_note.fragment.graphql"
 
 query workItemNotes($id: WorkItemID!, $after: String, $pageSize: Int) {
   workItem(id: $id) {
@@ -8,7 +8,7 @@ query workItemNotes($id: WorkItemID!, $after: String, $pageSize: Int) {
     widgets {
       ... on WorkItemWidgetNotes {
         type
-        discussions(first: $pageSize, after: $after, filter: ONLY_ACTIVITY) {
+        discussions(first: $pageSize, after: $after, filter: ALL_NOTES) {
           pageInfo {
             ...PageInfo
           }
@@ -16,7 +16,7 @@ query workItemNotes($id: WorkItemID!, $after: String, $pageSize: Int) {
             id
             notes {
               nodes {
-                ...Discussion
+                ...WorkItemNote
               }
             }
           }
diff --git a/app/assets/javascripts/work_items/graphql/work_item_notes_by_iid.query.graphql b/app/assets/javascripts/work_items/graphql/work_item_notes_by_iid.query.graphql
index 3e0960f3f54..f401aa5595e 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_notes_by_iid.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_notes_by_iid.query.graphql
@@ -1,5 +1,5 @@
 #import "~/graphql_shared/fragments/page_info.fragment.graphql"
-#import "~/work_items/graphql/discussion.fragment.graphql"
+#import "~/work_items/graphql/work_item_note.fragment.graphql"
 
 query workItemNotesByIid($fullPath: ID!, $iid: String, $after: String, $pageSize: Int) {
   workspace: project(fullPath: $fullPath) {
@@ -11,7 +11,7 @@ query workItemNotesByIid($fullPath: ID!, $iid: String, $after: String, $pageSize
         widgets {
           ... on WorkItemWidgetNotes {
             type
-            discussions(first: $pageSize, after: $after, filter: ONLY_ACTIVITY) {
+            discussions(first: $pageSize, after: $after, filter: ALL_NOTES) {
               pageInfo {
                 ...PageInfo
               }
@@ -19,7 +19,7 @@ query workItemNotesByIid($fullPath: ID!, $iid: String, $after: String, $pageSize
                 id
                 notes {
                   nodes {
-                    ...Discussion
+                    ...WorkItemNote
                   }
                 }
               }