1 files changed, 119 insertions, 0 deletions
diff --git a/app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue b/app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue
new file mode 100644
index 00000000000..9b81218b6e4
--- /dev/null
+++ b/app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue
@@ -0,0 +1,119 @@
+<script>
+import { GlIcon, GlBadge } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlIcon,
+    GlBadge,
+  },
+  props: {
+    workItemTypes: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    isLastItem(index, workItem) {
+      const hasMoreThanOneItem = workItem.nestedTypes.length > 1;
+      const isLastItemInArray = index === workItem.nestedTypes.length - 1;
+
+      return isLastItemInArray && hasMoreThanOneItem;
+    },
+    nestedWorkItemTypeMargin(index, workItem) {
+      const isLastItemInArray = index === workItem.nestedTypes.length - 1;
+      const hasMoreThanOneItem = workItem.nestedTypes.length > 1;
+
+      if (isLastItemInArray && hasMoreThanOneItem) {
+        return 'gl-ml-0';
+      }
+
+      return 'gl-ml-6';
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div
+      v-for="workItem in workItemTypes"
+      :key="workItem.id"
+      class="gl-mb-3"
+      :class="{ flex: !workItem.available }"
+    >
+      <span
+        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
+        data-testid="work-item-wrapper"
+      >
+        <span
+          :style="{
+            backgroundColor: workItem.backgroundColor,
+            color: workItem.color,
+          }"
+          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
+        >
+          <gl-icon :size="workItem.iconSize || 12" :name="workItem.icon" />
+        </span>
+
+        {{ workItem.title }}
+      </span>
+
+      <gl-badge
+        v-if="!workItem.available"
+        variant="info"
+        icon="license"
+        size="sm"
+        class="gl-ml-3 gl-align-self-center"
+        >{{ workItem.license }}</gl-badge
+      >
+
+      <div v-if="workItem.nestedTypes" :class="{ 'gl-relative': workItem.nestedTypes.length > 1 }">
+        <svg
+          v-if="workItem.nestedTypes.length > 1"
+          class="hierarchy-rounded-arrow-tail gl-text-gray-400"
+          data-testid="hierarchy-rounded-arrow-tail"
+          width="2"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <line
+            x1="0.75"
+            y1="1"
+            x2="0.75"
+            y2="100%"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+        </svg>
+        <template v-for="(nestedWorkItem, index) in workItem.nestedTypes">
+          <div :key="nestedWorkItem.id" class="gl-display-block gl-mt-2 gl-ml-6">
+            <gl-icon name="arrow-down" class="gl-text-gray-400" />
+          </div>
+          <gl-icon
+            v-if="isLastItem(index, workItem)"
+            :key="nestedWorkItem.id"
+            name="level-up"
+            class="gl-text-gray-400 gl-ml-2 hierarchy-rounded-arrow"
+          />
+          <span
+            :key="nestedWorkItem.id"
+            class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-mt-2 gl-line-height-normal"
+            :class="nestedWorkItemTypeMargin(index, workItem)"
+          >
+            <span
+              :style="{
+                backgroundColor: nestedWorkItem.backgroundColor,
+                color: nestedWorkItem.color,
+              }"
+              class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
+            >
+              <gl-icon :size="nestedWorkItem.iconSize || 12" :name="nestedWorkItem.icon" />
+            </span>
+
+            {{ nestedWorkItem.title }}
+          </span>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>