Add latest changes from gitlab-org/gitlab@master

3 files changed, 50 insertions, 75 deletions

diff --git a/app/assets/javascripts/work_items/components/notes/system_note.vue b/app/assets/javascripts/work_items/components/notes/system_note.vue
index 92a2fcaf1df..1eece0af31e 100644
--- a/app/assets/javascripts/work_items/components/notes/system_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/system_note.vue
@@ -16,7 +16,6 @@
  *   />
  */
 import { GlButton, GlSkeletonLoader, GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import $ from 'jquery';
 import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
@@ -77,12 +76,18 @@ export default {
     toggleIcon() {
       return this.expanded ? 'chevron-up' : 'chevron-down';
     },
-    // following 2 methods taken from code in `collapseLongCommitList` of notes.js:
-    actionTextHtml() {
-      return $(this.note.bodyHtml).unwrap().html();
+    noteElement() {
+      const node = document.createElement('template');
+      // eslint-disable-next-line no-unsanitized/method
+      node.insertAdjacentHTML('afterbegin', this.note.note_html);
+      return node;
+    },
+    unwrappedNoteHtml() {
+      return this.noteElement.children[0].innerHTML;
     },
     hasMoreCommits() {
-      return $(this.note.bodyHtml).filter('ul').children().length > MAX_VISIBLE_COMMIT_LIST_COUNT;
+      const elements = this.noteElement.querySelectorAll('ul > *') || [];
+      return elements.length > MAX_VISIBLE_COMMIT_LIST_COUNT;
     },
     descriptionVersion() {
       return this.descriptionVersions[this.note.description_version_id];
@@ -132,7 +137,7 @@ export default {
           :note-id="note.id"
           :is-system-note="true"
         >
-          <span ref="gfm-content" v-safe-html="actionTextHtml"></span>
+          <span ref="gfm-content" v-safe-html="unwrappedNoteHtml"></span>
           <template
             v-if="canSeeDescriptionVersion || note.outdated_line_change_path"
             #extra-controls
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
index 3119c9249d9..3d02d316abc 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
@@ -5,12 +5,14 @@ import { __, s__ } from '~/locale';
 import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip.vue';
+import WorkItemLinkChildMetadata from 'ee_else_ce/work_items/components/work_item_links/work_item_link_child_metadata.vue';
 
 import {
   STATE_OPEN,
   TASK_TYPE_NAME,
   WORK_ITEM_TYPE_VALUE_OBJECTIVE,
   WIDGET_TYPE_PROGRESS,
+  WIDGET_TYPE_HEALTH_STATUS,
   WIDGET_TYPE_MILESTONE,
   WIDGET_TYPE_HIERARCHY,
   WIDGET_TYPE_ASSIGNEES,
@@ -18,7 +20,6 @@ import {
   WORK_ITEM_NAME_TO_ICON_MAP,
 } from '../../constants';
 import getWorkItemTreeQuery from '../../graphql/work_item_tree.query.graphql';
-import WorkItemLinkChildMetadata from './work_item_link_child_metadata.vue';
 import WorkItemLinksMenu from './work_item_links_menu.vue';
 import WorkItemTreeChildren from './work_item_tree_children.vue';
 
@@ -74,8 +75,15 @@ export default {
     canHaveChildren() {
       return this.workItemType === WORK_ITEM_TYPE_VALUE_OBJECTIVE;
     },
-    allowsScopedLabels() {
-      return this.getWidgetByType(this.childItem, WIDGET_TYPE_LABELS)?.allowsScopedLabels;
+    metadataWidgets() {
+      return this.childItem.widgets?.reduce((metadataWidgets, widget) => {
+        // Skip Hierarchy widget as it is not part of metadata.
+        if (widget.type && widget.type !== WIDGET_TYPE_HIERARCHY) {
+          // eslint-disable-next-line no-param-reassign
+          metadataWidgets[widget.type] = widget;
+        }
+        return metadataWidgets;
+      }, {});
     },
     isItemOpen() {
       return this.childItem.state === STATE_OPEN;
@@ -114,24 +122,16 @@ export default {
       return this.isExpanded ? __('Collapse') : __('Expand');
     },
     hasMetadata() {
-      return (
-        Number.isInteger(this.progress) ||
-        Boolean(this.milestone) ||
-        this.assignees.length > 0 ||
-        this.labels.length > 0
-      );
-    },
-    progress() {
-      return this.getWidgetByType(this.childItem, WIDGET_TYPE_PROGRESS)?.progress;
-    },
-    milestone() {
-      return this.getWidgetByType(this.childItem, WIDGET_TYPE_MILESTONE)?.milestone;
-    },
-    assignees() {
-      return this.getWidgetByType(this.childItem, WIDGET_TYPE_ASSIGNEES)?.assignees?.nodes || [];
-    },
-    labels() {
-      return this.getWidgetByType(this.childItem, WIDGET_TYPE_LABELS)?.labels?.nodes || [];
+      if (this.metadataWidgets) {
+        return (
+          Number.isInteger(this.metadataWidgets[WIDGET_TYPE_PROGRESS]?.progress) ||
+          Boolean(this.metadataWidgets[WIDGET_TYPE_HEALTH_STATUS]?.healthStatus) ||
+          Boolean(this.metadataWidgets[WIDGET_TYPE_MILESTONE]?.milestone) ||
+          this.metadataWidgets[WIDGET_TYPE_ASSIGNEES]?.assignees?.nodes.length > 0 ||
+          this.metadataWidgets[WIDGET_TYPE_LABELS]?.labels?.nodes.length > 0
+        );
+      }
+      return false;
     },
   },
   methods: {
@@ -239,11 +239,7 @@ export default {
           </div>
           <work-item-link-child-metadata
             v-if="hasMetadata"
-            :allows-scoped-labels="allowsScopedLabels"
-            :progress="progress"
-            :milestone="milestone"
-            :assignees="assignees"
-            :labels="labels"
+            :metadata-widgets="metadataWidgets"
             class="gl-mt-3"
           />
         </div>
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child_metadata.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child_metadata.vue
index a1f8f0fcbf3..6974804523a 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child_metadata.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child_metadata.vue
@@ -1,21 +1,15 @@
 <script>
-import {
-  GlIcon,
-  GlLabel,
-  GlAvatar,
-  GlAvatarLink,
-  GlAvatarsInline,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlLabel, GlAvatar, GlAvatarLink, GlAvatarsInline, GlTooltipDirective } from '@gitlab/ui';
 
 import { s__, sprintf } from '~/locale';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 
 import ItemMilestone from '~/issuable/components/issue_milestone.vue';
 
+import { WIDGET_TYPE_MILESTONE, WIDGET_TYPE_ASSIGNEES, WIDGET_TYPE_LABELS } from '../../constants';
+
 export default {
   components: {
-    GlIcon,
     GlLabel,
     GlAvatar,
     GlAvatarLink,
@@ -26,35 +20,24 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
-    allowsScopedLabels: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    progress: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    milestone: {
+    metadataWidgets: {
       type: Object,
       required: false,
-      default: null,
-    },
-    assignees: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    labels: {
-      type: Array,
-      required: false,
-      default: () => [],
+      default: () => ({}),
     },
   },
   computed: {
-    hasProgress() {
-      return Number.isInteger(this.progress);
+    milestone() {
+      return this.metadataWidgets[WIDGET_TYPE_MILESTONE]?.milestone;
+    },
+    assignees() {
+      return this.metadataWidgets[WIDGET_TYPE_ASSIGNEES]?.assignees?.nodes || [];
+    },
+    labels() {
+      return this.metadataWidgets[WIDGET_TYPE_LABELS]?.labels?.nodes || [];
+    },
+    allowsScopedLabels() {
+      return this.metadataWidgets[WIDGET_TYPE_LABELS]?.allowsScopedLabels;
     },
     assigneesCollapsedTooltip() {
       if (this.assignees.length > 2) {
@@ -83,16 +66,7 @@ export default {
 
 <template>
   <div class="gl-display-flex gl-flex-wrap gl-align-items-center">
-    <div
-      v-if="hasProgress"
-      v-gl-tooltip.bottom
-      :title="__('Progress')"
-      class="gl-display-flex gl-align-items-center gl-mr-5 gl-cursor-help gl-line-height-normal"
-      data-testid="item-progress"
-    >
-      <gl-icon name="progress" />
-      <span class="gl-text-primary gl-ml-2">{{ progress }}%</span>
-    </div>
+    <slot></slot>
     <item-milestone
       v-if="milestone"
       :milestone="milestone"