1 files changed, 55 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stages.vue b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stages.vue
new file mode 100644
index 00000000000..e965dc5e6b0
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stages.vue
@@ -0,0 +1,55 @@
+<script>
+import PipelineStage from './pipeline_stage.vue';
+/**
+ * Renders the pipeline stages portion of the pipeline mini graph.
+ */
+export default {
+  components: {
+    PipelineStage,
+  },
+  props: {
+    stages: {
+      type: Array,
+      required: true,
+    },
+    updateDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    stagesClass: {
+      type: [Array, Object, String],
+      required: false,
+      default: '',
+    },
+    isMergeTrain: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    onPipelineActionRequestComplete() {
+      this.$emit('pipelineActionRequestComplete');
+    },
+  },
+};
+</script>
+<template>
+  <div data-testid="pipeline-stages" class="gl-display-inline gl-vertical-align-middle">
+    <div
+      v-for="stage in stages"
+      :key="stage.name"
+      :class="stagesClass"
+      class="dropdown gl-display-inline-block gl-mr-2 gl-my-2 gl-vertical-align-middle stage-container"
+    >
+      <pipeline-stage
+        :stage="stage"
+        :update-dropdown="updateDropdown"
+        :is-merge-train="isMergeTrain"
+        @pipelineActionRequestComplete="onPipelineActionRequestComplete"
+        @miniGraphStageClick="$emit('miniGraphStageClick')"
+      />
+    </div>
+  </div>
+</template>