1 files changed, 109 insertions, 0 deletions
diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue
new file mode 100644
index 00000000000..135fa9f6228
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue
@@ -0,0 +1,109 @@
+<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/sidebar/components/labels/labels_select_widget/label_item.vue` instead.
+export default {
+  functional: true,
+  props: {
+    label: {
+      type: Object,
+      required: true,
+    },
+    isLabelSet: {
+      type: Boolean,
+      required: true,
+    },
+    isLabelIndeterminate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    highlight: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  render(h, { props, listeners }) {
+    const { label, highlight, isLabelSet, isLabelIndeterminate } = props;
+
+    const labelColorBox = h('span', {
+      class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3',
+      style: {
+        backgroundColor: label.color,
+      },
+      attrs: {
+        'data-testid': 'label-color-box',
+      },
+    });
+
+    const checkedIcon = h(GlIcon, {
+      class: {
+        '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 || isLabelIndeterminate,
+      },
+      attrs: {
+        'data-testid': 'no-icon',
+      },
+    });
+
+    const labelTitle = h('span', label.title);
+
+    const labelLink = h(
+      GlLink,
+      {
+        class: 'gl-display-flex gl-align-items-center label-item gl-text-body',
+        on: {
+          click: () => {
+            listeners.clickLabel(label);
+          },
+        },
+      },
+      [noIcon, checkedIcon, indeterminateIcon, labelColorBox, labelTitle],
+    );
+
+    return h(
+      'li',
+      {
+        class: {
+          'gl-display-block': true,
+          'gl-text-left': true,
+          'is-focused': highlight,
+        },
+      },
+      [labelLink],
+    );
+  },
+};
+</script>