From 62707971d585d011f28a47e5e32f19f5c903a665 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 11 Jan 2019 13:12:48 +0000
Subject: [PATCH] Moves shared code into a mixin

To reduce code duplication between CE and EE components,
creates a mixin with the common methods for the
graph component
---
 .../components/graph/graph_component.vue      | 45 ++-----------------
 .../pipelines/mixins/graph_component_mixin.js | 44 ++++++++++++++++++
 app/assets/stylesheets/pages/pipelines.scss   |  1 +
 .../8688-recursive-pipelines-ce-backport.yml  |  5 +++
 4 files changed, 53 insertions(+), 42 deletions(-)
 create mode 100644 app/assets/javascripts/pipelines/mixins/graph_component_mixin.js
 create mode 100644 changelogs/unreleased/8688-recursive-pipelines-ce-backport.yml

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 59cebaba717..a49dc311bd0 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,59 +1,20 @@
 <script>
-import _ from 'underscore';
 import { GlLoadingIcon } from '@gitlab/ui';
 import StageColumnComponent from './stage_column_component.vue';
+import GraphMixin from '../../mixins/graph_component_mixin';
 
 export default {
   components: {
     StageColumnComponent,
     GlLoadingIcon,
   },
-  props: {
-    isLoading: {
-      type: Boolean,
-      required: true,
-    },
-    pipeline: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    graph() {
-      return this.pipeline.details && this.pipeline.details.stages;
-    },
-  },
-  methods: {
-    capitalizeStageName(name) {
-      const escapedName = _.escape(name);
-      return escapedName.charAt(0).toUpperCase() + escapedName.slice(1);
-    },
-    isFirstColumn(index) {
-      return index === 0;
-    },
-    stageConnectorClass(index, stage) {
-      let className;
-
-      // If it's the first stage column and only has one job
-      if (index === 0 && stage.groups.length === 1) {
-        className = 'no-margin';
-      } else if (index > 0) {
-        // If it is not the first column
-        className = 'left-margin';
-      }
-
-      return className;
-    },
-    refreshPipelineGraph() {
-      this.$emit('refreshPipelineGraph');
-    },
-  },
+  mixins: [GraphMixin],
 };
 </script>
 <template>
   <div class="build-content middle-block js-pipeline-graph">
     <div class="pipeline-visualization pipeline-graph pipeline-tab-content">
-      <div class="text-center"><gl-loading-icon v-if="isLoading" :size="3" /></div>
+      <div v-if="isLoading" class="m-auto"><gl-loading-icon :size="3" /></div>
 
       <ul v-if="!isLoading" class="stage-column-list">
         <stage-column-component
diff --git a/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js b/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js
new file mode 100644
index 00000000000..66e9476dadf
--- /dev/null
+++ b/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js
@@ -0,0 +1,44 @@
+import _ from 'underscore';
+
+export default {
+  props: {
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    graph() {
+      return this.pipeline.details && this.pipeline.details.stages;
+    },
+  },
+  methods: {
+    capitalizeStageName(name) {
+      const escapedName = _.escape(name);
+      return escapedName.charAt(0).toUpperCase() + escapedName.slice(1);
+    },
+    isFirstColumn(index) {
+      return index === 0;
+    },
+    stageConnectorClass(index, stage) {
+      let className;
+
+      // If it's the first stage column and only has one job
+      if (index === 0 && stage.groups.length === 1) {
+        className = 'no-margin';
+      } else if (index > 0) {
+        // If it is not the first column
+        className = 'left-margin';
+      }
+
+      return className;
+    },
+    refreshPipelineGraph() {
+      this.$emit('refreshPipelineGraph');
+    },
+  },
+};
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 7a47e0a2836..058b0ffef5f 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -433,6 +433,7 @@
 }
 
 .pipeline-tab-content {
+  display: flex;
   width: 100%;
   background-color: $gray-light;
   padding: $gl-padding;
diff --git a/changelogs/unreleased/8688-recursive-pipelines-ce-backport.yml b/changelogs/unreleased/8688-recursive-pipelines-ce-backport.yml
new file mode 100644
index 00000000000..cd7b56a1e05
--- /dev/null
+++ b/changelogs/unreleased/8688-recursive-pipelines-ce-backport.yml
@@ -0,0 +1,5 @@
+---
+title: Creates mixin to reduce code duplication between CE and EE in graph component
+merge_request:
+author:
+type: other