1 files changed, 31 insertions, 4 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
index dd40add6376..154e3013acd 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
@@ -1,6 +1,10 @@
 <script>
 import { GlLink, GlIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
 
+// @deprecated This component should only be used when there is no GraphQL API.
+// In most cases you should use
+// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue` instead.
 export default {
   functional: true,
   props: {
@@ -12,6 +16,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    isLabelIndeterminate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     highlight: {
       type: Boolean,
       required: false,
@@ -19,7 +28,7 @@ export default {
     },
   },
   render(h, { props, listeners }) {
-    const { label, highlight, isLabelSet } = props;
+    const { label, highlight, isLabelSet, isLabelIndeterminate } = props;
 
     const labelColorBox = h('span', {
       class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3',
@@ -33,18 +42,36 @@ export default {
 
     const checkedIcon = h(GlIcon, {
       class: {
-        'gl-mr-3 gl-flex-shrink-0': true,
+        'gl-mr-3 gl-flex-shrink-0 has-tooltip': true,
         hidden: !isLabelSet,
       },
+      attrs: {
+        title: __('Selected for all items.'),
+        'data-testid': 'checked-icon',
+      },
       props: {
         name: 'mobile-issue-close',
       },
     });
 
+    const indeterminateIcon = h(GlIcon, {
+      class: {
+        'gl-mr-3 gl-flex-shrink-0 has-tooltip': true,
+        hidden: !isLabelIndeterminate,
+      },
+      attrs: {
+        title: __('Selected for some items.'),
+        'data-testid': 'indeterminate-icon',
+      },
+      props: {
+        name: 'dash',
+      },
+    });
+
     const noIcon = h('span', {
       class: {
         'gl-mr-5 gl-pr-3': true,
-        hidden: isLabelSet,
+        hidden: isLabelSet || isLabelIndeterminate,
       },
       attrs: {
         'data-testid': 'no-icon',
@@ -63,7 +90,7 @@ export default {
           },
         },
       },
-      [noIcon, checkedIcon, labelColorBox, labelTitle],
+      [noIcon, checkedIcon, indeterminateIcon, labelColorBox, labelTitle],
     );
 
     return h(