Add latest changes from gitlab-org/gitlab@master

4 files changed, 29 insertions, 7 deletions

diff --git a/app/assets/javascripts/work_items/components/item_state.vue b/app/assets/javascripts/work_items/components/item_state.vue
index cf1d9040334..2a0913e380a 100644
--- a/app/assets/javascripts/work_items/components/item_state.vue
+++ b/app/assets/javascripts/work_items/components/item_state.vue
@@ -62,7 +62,7 @@ export default {
       :value="state"
       :options="$options.states"
       :disabled="disabled"
-      class="gl-w-auto hide-select-decoration"
+      class="gl-w-auto hide-select-decoration gl-pl-3"
       :class="{ 'gl-bg-transparent! gl-cursor-text!': disabled }"
       @change="setState"
     />
diff --git a/app/assets/javascripts/work_items/components/work_item_assignees.vue b/app/assets/javascripts/work_items/components/work_item_assignees.vue
index f1b12e6478f..fcf2bfdba80 100644
--- a/app/assets/javascripts/work_items/components/work_item_assignees.vue
+++ b/app/assets/javascripts/work_items/components/work_item_assignees.vue
@@ -144,6 +144,9 @@ export default {
       return this.searchKey.length === 0;
     },
     addAssigneesText() {
+      if (!this.canUpdate) {
+        return s__('WorkItem|None');
+      }
       return this.allowsMultipleAssignees
         ? s__('WorkItem|Add assignees')
         : s__('WorkItem|Add assignee');
@@ -270,7 +273,7 @@ export default {
       :loading="isLoadingUsers"
       :view-only="!canUpdate"
       :allow-clear-all="isEditing"
-      class="assignees-selector gl-flex-grow-1 gl-border gl-border-white gl-rounded-base col-9 gl-align-self-start gl-px-0!"
+      class="assignees-selector gl-flex-grow-1 gl-border gl-border-white gl-rounded-base col-9 gl-align-self-start gl-px-0! gl-mx-2"
       @input="handleAssigneesInput"
       @text-input="debouncedSearchKeyUpdate"
       @focus="handleFocus"
@@ -280,7 +283,7 @@ export default {
     >
       <template #empty-placeholder>
         <div
-          class="add-assignees gl-min-w-fit-content gl-display-flex gl-align-items-center gl-text-gray-300 gl-pr-4 gl-top-2"
+          class="add-assignees gl-min-w-fit-content gl-display-flex gl-align-items-center gl-text-gray-300 gl-pr-4 gl-pl-2 gl-top-2"
           data-testid="empty-state"
         >
           <gl-icon name="profile" />
@@ -301,7 +304,7 @@ export default {
           :title="token.name"
           :data-user-id="getUserId(token.id)"
           data-placement="top"
-          class="gl-text-decoration-none! gl-text-body! gl-display-flex gl-md-display-inline-flex! gl-align-items-center js-user-link"
+          class="gl-ml-n2 gl-text-decoration-none! gl-text-body! gl-display-flex gl-md-display-inline-flex! gl-align-items-center js-user-link"
         >
           <gl-avatar :size="24" :src="token.avatarUrl" />
           <span class="gl-pl-2">{{ token.name }}</span>
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
index 372bf7ec749..6e591c9f481 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
@@ -102,11 +102,17 @@ export default {
     childrenIds() {
       return this.children.map((c) => c.id);
     },
+    childrenCountLabel() {
+      return this.isLoading && this.children.length === 0 ? '...' : this.children.length;
+    },
   },
   methods: {
     badgeVariant(state) {
       return state === STATE_OPEN ? 'success' : 'info';
     },
+    iconClass(state) {
+      return state === STATE_OPEN ? 'gl-text-green-500' : 'gl-text-blue-500';
+    },
     toggle() {
       this.isOpen = !this.isOpen;
     },
@@ -237,7 +243,16 @@ export default {
       class="gl-px-5 gl-py-3 gl-display-flex gl-justify-content-space-between"
       :class="{ 'gl-border-b-1 gl-border-b-solid gl-border-b-gray-100': isOpen }"
     >
-      <h5 class="gl-m-0 gl-line-height-24 gl-flex-grow-1">{{ $options.i18n.title }}</h5>
+      <div class="gl-display-flex gl-flex-grow-1">
+        <h5 class="gl-m-0 gl-line-height-24">{{ $options.i18n.title }}</h5>
+        <span
+          class="gl-display-inline-flex gl-align-items-center gl-line-height-24 gl-ml-3"
+          data-testid="children-count"
+        >
+          <gl-icon :name="$options.WIDGET_TYPE_TASK_ICON" class="gl-mr-2 gl-text-gray-500" />
+          {{ childrenCountLabel }}
+        </span>
+      </div>
       <gl-button
         v-if="canUpdate"
         category="secondary"
@@ -296,7 +311,11 @@ export default {
               data-testid="confidential-icon"
               :title="__('Confidential')"
             />
-            <gl-icon :name="$options.WIDGET_TYPE_TASK_ICON" class="gl-mr-3 gl-text-gray-700" />
+            <gl-icon
+              :name="$options.WIDGET_TYPE_TASK_ICON"
+              class="gl-mr-3"
+              :class="iconClass(child.state)"
+            />
             <gl-button
               :href="childPath(child.id)"
               category="tertiary"
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 00a5f050b77..b0ade1fbe45 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -28,7 +28,7 @@ export const i18n = {
 };
 
 export const WIDGET_ICONS = {
-  TASK: 'task-done',
+  TASK: 'issue-type-task',
 };
 
 export const WORK_ITEM_STATUS_TEXT = {