Move cycle analytics banner into a vue file

2 files changed, 57 insertions, 0 deletions

diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue
new file mode 100644
index 00000000000..732697c134e
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/banner.vue
@@ -0,0 +1,55 @@
+<script>
+  import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
+
+  export default {
+    props: {
+      documentationLink: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      iconCycleAnalyticsSplash() {
+        return iconCycleAnalyticsSplash;
+      },
+    },
+    methods: {
+      dismissOverviewDialog() {
+        this.$emit('dismiss-overview-dialog');
+      },
+    },
+  };
+</script>
+<template>
+  <div class="landing content-block">
+    <button
+      class="js-ca-dismiss-button dismiss-button"
+      type="button"
+      :aria-label="__('Dismiss Cycle Analytics introduction box')"
+      @click="dismissOverviewDialog">
+      <i
+        class="fa fa-times"
+        aria-hidden="true">
+      </i>
+    </button>
+    <div class="svg-container" v-html="iconCycleAnalyticsSplash">
+    </div>
+    <div class="inner-content">
+      <h4>
+        {{__('Introducing Cycle Analytics')}}
+      </h4>
+      <p>
+        {{ __('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.') }}
+      </p>
+      <p>
+        <a
+          :href="documentationLink"
+          target="_blank"
+          rel="nofollow"
+          class="btn">
+          {{__('Read more')}}
+        </a>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 991fcf114da..cdf5e3c0290 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -3,6 +3,7 @@
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import Translate from '../vue_shared/translate';
+import banner from './components/banner.vue';
 import stageCodeComponent from './components/stage_code_component.vue';
 import stagePlanComponent from './components/stage_plan_component.vue';
 import stageComponent from './components/stage_component.vue';
@@ -44,6 +45,7 @@ $(() => {
       },
     },
     components: {
+      banner,
       'stage-issue-component': stageComponent,
       'stage-plan-component': stagePlanComponent,
       'stage-code-component': stageCodeComponent,