Add latest changes from gitlab-org/gitlab@master

7 files changed, 44 insertions, 19 deletions

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 763f2f338a3..3119c9249d9 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
@@ -10,6 +10,7 @@ import {
   STATE_OPEN,
   TASK_TYPE_NAME,
   WORK_ITEM_TYPE_VALUE_OBJECTIVE,
+  WIDGET_TYPE_PROGRESS,
   WIDGET_TYPE_MILESTONE,
   WIDGET_TYPE_HIERARCHY,
   WIDGET_TYPE_ASSIGNEES,
@@ -113,7 +114,15 @@ export default {
       return this.isExpanded ? __('Collapse') : __('Expand');
     },
     hasMetadata() {
-      return this.milestone || this.assignees.length > 0 || this.labels.length > 0;
+      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;
@@ -231,6 +240,7 @@ export default {
           <work-item-link-child-metadata
             v-if="hasMetadata"
             :allows-scoped-labels="allowsScopedLabels"
+            :progress="progress"
             :milestone="milestone"
             :assignees="assignees"
             :labels="labels"
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 7be7e1f3496..a1f8f0fcbf3 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,5 +1,12 @@
 <script>
-import { GlLabel, GlAvatar, GlAvatarLink, GlAvatarsInline, GlTooltipDirective } from '@gitlab/ui';
+import {
+  GlIcon,
+  GlLabel,
+  GlAvatar,
+  GlAvatarLink,
+  GlAvatarsInline,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 
 import { s__, sprintf } from '~/locale';
 import { isScopedLabel } from '~/lib/utils/common_utils';
@@ -8,6 +15,7 @@ import ItemMilestone from '~/issuable/components/issue_milestone.vue';
 
 export default {
   components: {
+    GlIcon,
     GlLabel,
     GlAvatar,
     GlAvatarLink,
@@ -23,6 +31,11 @@ export default {
       required: false,
       default: false,
     },
+    progress: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
     milestone: {
       type: Object,
       required: false,
@@ -40,6 +53,9 @@ export default {
     },
   },
   computed: {
+    hasProgress() {
+      return Number.isInteger(this.progress);
+    },
     assigneesCollapsedTooltip() {
       if (this.assignees.length > 2) {
         return sprintf(s__('WorkItem|%{count} more assignees'), {
@@ -56,12 +72,6 @@ export default {
       }
       return '';
     },
-    labelsContainerClass() {
-      if (this.milestone || this.assignees.length) {
-        return 'gl-sm-ml-5';
-      }
-      return '';
-    },
   },
   methods: {
     showScopedLabel(label) {
@@ -73,6 +83,16 @@ 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>
     <item-milestone
       v-if="milestone"
       :milestone="milestone"
@@ -87,6 +107,7 @@ export default {
       badge-tooltip-prop="name"
       :badge-sr-only-text="assigneesCollapsedTooltip"
       :class="assigneesContainerClass"
+      class="gl-mr-5"
     >
       <template #avatar="{ avatar }">
         <gl-avatar-link v-gl-tooltip target="blank" :href="avatar.webUrl" :title="avatar.name">
@@ -94,7 +115,7 @@ export default {
         </gl-avatar-link>
       </template>
     </gl-avatars-inline>
-    <div v-if="labels.length" class="gl-display-flex gl-flex-wrap" :class="labelsContainerClass">
+    <div v-if="labels.length" class="gl-display-flex gl-flex-wrap">
       <gl-label
         v-for="label in labels"
         :key="label.id"
@@ -102,7 +123,7 @@ export default {
         :background-color="label.color"
         :description="label.description"
         :scoped="showScopedLabel(label)"
-        class="gl-mt-2 gl-sm-mt-0 gl-mr-2 gl-mb-auto gl-label-sm"
+        class="gl-mt-3 gl-sm-mt-0 gl-mr-2 gl-mb-auto gl-label-sm"
         tooltip-placement="top"
       />
     </div>
diff --git a/app/assets/javascripts/work_items/components/work_item_type_icon.vue b/app/assets/javascripts/work_items/components/work_item_type_icon.vue
index 32678e29fa4..96a6493357c 100644
--- a/app/assets/javascripts/work_items/components/work_item_type_icon.vue
+++ b/app/assets/javascripts/work_items/components/work_item_type_icon.vue
@@ -33,11 +33,6 @@ export default {
   },
   computed: {
     iconName() {
-      // TODO: Remove this once https://gitlab.com/gitlab-org/gitlab-svgs/-/merge_requests/865
-      // is merged and updated in GitLab repo.
-      if (this.workItemIconName === 'issue-type-keyresult') {
-        return 'issue-type-key-result';
-      }
       return (
         this.workItemIconName || WORK_ITEMS_TYPE_MAP[this.workItemType]?.icon || 'issue-type-issue'
       );
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 3cd17f4d360..a1d2e0fba08 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -141,7 +141,7 @@ export const WORK_ITEM_NAME_TO_ICON_MAP = {
   Task: 'issue-type-task',
   Objective: 'issue-type-objective',
   // eslint-disable-next-line @gitlab/require-i18n-strings
-  'Key Result': 'issue-type-key-result',
+  'Key Result': 'issue-type-keyresult',
 };
 
 export const FORM_TYPES = {
diff --git a/app/assets/javascripts/work_items/graphql/work_item_metadata_widgets.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item_metadata_widgets.fragment.graphql
index baefcdaea93..b7813ca4dc6 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_metadata_widgets.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_metadata_widgets.fragment.graphql
@@ -19,7 +19,6 @@ fragment WorkItemMetadataWidgets on WorkItemWidget {
   }
   ... on WorkItemWidgetLabels {
     type
-    allowsScopedLabels
     labels {
       nodes {
         ...Label
diff --git a/app/assets/javascripts/work_items/graphql/work_item_tree.query.graphql b/app/assets/javascripts/work_items/graphql/work_item_tree.query.graphql
index 006ca29e01c..b4fb83b24c2 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_tree.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_tree.query.graphql
@@ -1,6 +1,6 @@
 #import "~/graphql_shared/fragments/label.fragment.graphql"
 #import "~/graphql_shared/fragments/user.fragment.graphql"
-#import "./work_item_metadata_widgets.fragment.graphql"
+#import "ee_else_ce/work_items/graphql/work_item_metadata_widgets.fragment.graphql"
 
 query workItemTreeQuery($id: WorkItemID!) {
   workItem(id: $id) {
diff --git a/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
index cf3374e1737..d2a2d7927d3 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_widgets.fragment.graphql
@@ -1,7 +1,7 @@
 #import "~/graphql_shared/fragments/label.fragment.graphql"
 #import "~/graphql_shared/fragments/user.fragment.graphql"
 #import "~/work_items/graphql/milestone.fragment.graphql"
-#import "./work_item_metadata_widgets.fragment.graphql"
+#import "ee_else_ce/work_items/graphql/work_item_metadata_widgets.fragment.graphql"
 
 fragment WorkItemWidgets on WorkItemWidget {
   ... on WorkItemWidgetDescription {