1 files changed, 44 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue
new file mode 100644
index 00000000000..bdd0364c9b9
--- /dev/null
+++ b/app/assets/javascripts/ide/components/jobs/list.vue
@@ -0,0 +1,44 @@
+<script>
+import { mapActions } from 'vuex';
+import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import Stage from './stage.vue';
+
+export default {
+  components: {
+    LoadingIcon,
+    Stage,
+  },
+  props: {
+    stages: {
+      type: Array,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  methods: {
+    ...mapActions('pipelines', ['fetchJobs', 'toggleStageCollapsed']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <loading-icon
+      v-if="loading && !stages.length"
+      class="prepend-top-default"
+      size="2"
+    />
+    <template v-else>
+      <stage
+        v-for="stage in stages"
+        :key="stage.id"
+        :stage="stage"
+        @fetch="fetchJobs"
+        @toggleCollapsed="toggleStageCollapsed"
+      />
+    </template>
+  </div>
+</template>