From f9cfc87c7ddac2393cdb8a150412ec37f2e04c56 Mon Sep 17 00:00:00 2001
From: Alfredo Sumaran <alfredo@gitlab.com>
Date: Tue, 15 Nov 2016 15:19:41 -0500
Subject: [PATCH] Move templates to its corresponding component

---
 .../components/item_build_component.js.es6    | 14 ++++-
 .../item_merge_request_component.js.es6       | 14 ++++-
 .../components/stage_code_component.js.es6    | 15 ++++-
 .../stage_production_component.js.es6         | 15 ++++-
 .../components/stage_review_component.js.es6  | 15 ++++-
 .../components/stage_staging_component.js.es6 | 14 ++++-
 .../components/stage_test_component.js.es6    | 15 ++++-
 .../projects/cycle_analytics/show.html.haml   | 57 -------------------
 8 files changed, 89 insertions(+), 70 deletions(-)

diff --git a/app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6
index d4c488dc3a8..5f8ff683860 100644
--- a/app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6
@@ -16,9 +16,19 @@
   */
 
   global.cycleAnalytics.ItemBuildComponent = Vue.extend({
-    template: '#item-build-component',
     props: {
       build: Object,
-    }
+    },
+    template: `
+      <div>
+        <p>
+          <h5>
+            <a href="build.url">
+              {{ build.title }}
+            </a>
+          </h5>
+        </p>
+      </div>
+    `,
   });
 }(window.gl || (window.gl = {})));
diff --git a/app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6
index 488f6f901ff..0fd0767a3d0 100644
--- a/app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6
@@ -15,9 +15,19 @@
   */
 
   global.cycleAnalytics.ItemMergeRequestComponent = Vue.extend({
-    template: '#item-merge-request-component',
     props: {
       mergeRequest: Object,
-    }
+    },
+    template: `
+      <div>
+        <p>
+          <h5>
+            <a href="mergeRequest.url">
+              {{ mergeRequest.title }}
+            </a>
+          </h5>
+        </p>
+      </div>
+    `,
   });
 }(window.gl || (window.gl = {})));
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6
index bdc9617f463..45bd7c7b9e7 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6
@@ -3,13 +3,24 @@
   global.cycleAnalytics = global.cycleAnalytics || {};
 
   global.cycleAnalytics.StageCodeComponent = Vue.extend({
-    template: '#stage-code-component',
     components: {
       'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent,
     },
     props: {
       items: Array,
-    }
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          Time spent coding
+        </div>
+        <ul class="stage-event-list">
+          <li class="stage-event-item" v-for="mergeRequest in items">
+            <item-merge-request-component :merge-request="mergeRequest"></item-merge-request-component>
+          </li>
+        </ul>
+      </div>
+    `,
   });
 
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6
index fea2e1edacb..0a6650d5c10 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6
@@ -3,13 +3,24 @@
   global.cycleAnalytics = global.cycleAnalytics || {};
 
   global.cycleAnalytics.StageProductionComponent = Vue.extend({
-    template: '#stage-production-component',
     components: {
       'item-issue-component': gl.cycleAnalytics.ItemIssueComponent,
     },
     props: {
       items: Array,
-    }
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          The total time taken from idea to production
+        </div>
+        <ul>
+          <li v-for="issue in items">
+            <item-issue-component :issue="issue"></item-issue-component>
+          </li>
+        </ul>
+      </div>
+    `
   });
 
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6
index 292f8ada3f4..b52ecbb21f3 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6
@@ -3,13 +3,24 @@
   global.cycleAnalytics = global.cycleAnalytics || {};
 
   global.cycleAnalytics.StageReviewComponent = Vue.extend({
-    template: '#stage-review-component',
     components: {
       'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent,
     },
     props: {
       items: Array,
-    }
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          The time taken to review the code
+        </div>
+        <ul class="stage-event-list">
+          <li class="stage-event-item" v-for="mergeRequest in items">
+            <item-merge-request-component :merge-request="mergeRequest"></item-merge-request-component>
+          </li>
+        </ul>
+      </div>
+    `,
   });
 
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6
index 2a4cf97386a..c07f556ed84 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6
@@ -9,7 +9,19 @@
     },
     props: {
       items: Array,
-    }
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          The time taken in staging
+        </div>
+        <ul>
+          <li v-for="build in items">
+            <item-build-component :build="build"></item-build-component>
+          </li>
+        </ul>
+      </div>
+    `,
   });
 
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6
index 7e16ae67f66..e3057c6a507 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6
@@ -3,13 +3,24 @@
   global.cycleAnalytics = global.cycleAnalytics || {};
 
   global.cycleAnalytics.StageTestComponent = Vue.extend({
-    template: '#stage-test-component',
     components: {
       'item-build-component': gl.cycleAnalytics.ItemBuildComponent,
     },
     props: {
       items: Array,
-    }
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          The time taken to build and test the application
+        </div>
+        <ul class="stage-event-list">
+          <li class="stage-event-item" v-for="build in items">
+            <item-build-component :build="build"></item-build-component>
+          </li>
+        </ul>
+      </div>
+    `,
   });
 
 })(window.gl || (window.gl = {}));
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index ea3ae13b6d8..a4255aceb2a 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -93,60 +93,3 @@
             %p No results
           %template{ "v-if" => "state.items.length && !isLoadingStage && !isEmptyStage" }
             %component{ ":is" => "currentStage.component", ":items" => "state.items" }
-
-%script{ type: 'text/x-template', id: 'stage-code-component' }
-  %div
-    .events-description
-      Time spent coding
-    %ul
-      %li{ "v-for" => "mergeRequest in items" }
-        %item-merge-request-component{ ":merge-request" => "mergeRequest" }
-
-%script{ type: 'text/x-template', id: 'stage-test-component' }
-  %div
-    .events-description
-      The time taken to build and test the application
-    %ul
-      %li{ "v-for" => "build in items" }
-        %item-build-component{ ":build" => "build" }
-
-
-%script{ type: 'text/x-template', id: 'stage-review-component' }
-  %div
-    .events-description
-      The time taken to review the code
-    %ul
-      %li{ "v-for" => "mergeRequest in items" }
-        %item-merge-request-component{ ":merge-request" => "mergeRequest" }
-
-%script{ type: 'text/x-template', id: 'stage-staging-component' }
-  %div
-    .events-description
-      The time taken in staging
-    %ul
-      %li{ "v-for" => "build in items" }
-        %item-build-component{ ":build" => "build" }
-
-%script{ type: 'text/x-template', id: 'stage-production-component' }
-  %div
-    .events-description
-      The total time taken from idea to production
-    %ul
-      %li{ "v-for" => "issue in items" }
-        %item-issue-component{ ":issue" => "issue" }
-
-%script{ type: 'text/x-template', id: 'item-merge-request-component' }
-  %div
-    %p
-      %h5
-        merge request -
-        %a{:href => "mergeRequest.url"}
-          {{ mergeRequest.title }}
-
-%script{ type: 'text/x-template', id: 'item-build-component' }
-  %div
-    %p
-      %h5
-        build -
-        %a{:href => "build.url"}
-          {{ build.title }}
-- 
GitLab