2 files changed, 129 insertions, 0 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue
new file mode 100644
index 00000000000..d946594a069
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue
@@ -0,0 +1,41 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton } from '@gitlab/ui';
+
+export default {
+  name: 'StageCardListItem',
+  components: {
+    Icon,
+    GlButton,
+  },
+  props: {
+    isActive: {
+      type: Boolean,
+      required: true,
+    },
+    canEdit: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+};
+</script>
+
+<template>
+  <div :class="{ active: isActive }" class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2 rounded">
+    <slot></slot>
+    <div v-if="canEdit" class="dropdown">
+      <gl-button
+        :title="__('More actions')"
+        class="more-actions-toggle btn btn-transparent p-0"
+        data-toggle="dropdown"
+      >
+        <icon css-classes="icon" name="ellipsis_v" />
+      </gl-button>
+      <ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
+        <slot name="dropdown-options"></slot>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
new file mode 100644
index 00000000000..004d335f572
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
@@ -0,0 +1,88 @@
+<script>
+import StageCardListItem from './stage_card_list_item.vue';
+
+export default {
+  name: 'StageNavItem',
+  components: {
+    StageCardListItem,
+  },
+  props: {
+    isDefaultStage: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    isActive: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    isUserAllowed: {
+      type: Boolean,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    canEdit: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  computed: {
+    hasValue() {
+      return this.value && this.value.length > 0;
+    },
+    editable() {
+      return this.isUserAllowed && this.canEdit;
+    },
+  },
+};
+</script>
+
+<template>
+  <li @click="$emit('select')">
+    <stage-card-list-item :is-active="isActive" :can-edit="editable">
+      <div class="stage-nav-item-cell stage-name p-0" :class="{ 'font-weight-bold': isActive }">
+        {{ title }}
+      </div>
+      <div class="stage-nav-item-cell stage-median mr-4">
+        <template v-if="isUserAllowed">
+          <span v-if="hasValue">{{ value }}</span>
+          <span v-else class="stage-empty">{{ __('Not enough data') }}</span>
+        </template>
+        <template v-else>
+          <span class="not-available">{{ __('Not available') }}</span>
+        </template>
+      </div>
+      <template v-slot:dropdown-options>
+        <template v-if="isDefaultStage">
+          <li>
+            <button type="button" class="btn-default btn-transparent">
+              {{ __('Hide stage') }}
+            </button>
+          </li>
+        </template>
+        <template v-else>
+          <li>
+            <button type="button" class="btn-default btn-transparent">
+              {{ __('Edit stage') }}
+            </button>
+          </li>
+          <li>
+            <button type="button" class="btn-danger danger">
+              {{ __('Remove stage') }}
+            </button>
+          </li>
+        </template>
+      </template>
+    </stage-card-list-item>
+  </li>
+</template>