Commit ccf31a13 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes

Move cycle analytics banner into a vue file

parent 91f1d652
<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>
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import Vue from 'vue'; import Vue from 'vue';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import Translate from '../vue_shared/translate'; import Translate from '../vue_shared/translate';
import banner from './components/banner.vue';
import stageCodeComponent from './components/stage_code_component.vue'; import stageCodeComponent from './components/stage_code_component.vue';
import stagePlanComponent from './components/stage_plan_component.vue'; import stagePlanComponent from './components/stage_plan_component.vue';
import stageComponent from './components/stage_component.vue'; import stageComponent from './components/stage_component.vue';
...@@ -44,6 +45,7 @@ $(() => { ...@@ -44,6 +45,7 @@ $(() => {
}, },
}, },
components: { components: {
banner,
'stage-issue-component': stageComponent, 'stage-issue-component': stageComponent,
'stage-plan-component': stagePlanComponent, 'stage-plan-component': stagePlanComponent,
'stage-code-component': stageCodeComponent, 'stage-code-component': stageCodeComponent,
......
...@@ -6,18 +6,9 @@ ...@@ -6,18 +6,9 @@
#cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } } #cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
- if @cycle_analytics_no_data - if @cycle_analytics_no_data
.landing.content-block{ "v-if" => "!isOverviewDialogDismissed" } %banner{ "v-if" => "!isOverviewDialogDismissed",
%button.dismiss-button{ type: 'button', 'aria-label': 'Dismiss Cycle Analytics introduction box', "@click" => "dismissOverviewDialog()" } "documentation-link": help_page_path('user/project/cycle_analytics'),
= icon("times") "v-on:dismiss-overview-dialog" => "dismissOverviewDialog()" }
.svg-container
= custom_icon('icon_cycle_analytics_splash')
.inner-content
%h4
{{ __('Introducing Cycle Analytics') }}
%p
{{ __('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.') }}
%p
= link_to _('Read more'), help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn'
= icon("spinner spin", "v-show" => "isLoading") = icon("spinner spin", "v-show" => "isLoading")
.wrapper{ "v-show" => "!isLoading && !hasError" } .wrapper{ "v-show" => "!isLoading && !hasError" }
.panel.panel-default .panel.panel-default
......
import Vue from 'vue';
import banner from '~/cycle_analytics/components/banner.vue';
import mountComponent from '../helpers/vue_mount_component_helper';
describe('Cycle analytics banner', () => {
let vm;
beforeEach(() => {
const Component = Vue.extend(banner);
vm = mountComponent(Component, {
documentationLink: 'path',
});
});
afterEach(() => {
vm.$destroy();
});
it('should render cycle analytics information', () => {
expect(
vm.$el.querySelector('h4').textContent.trim(),
).toEqual('Introducing Cycle Analytics');
expect(
vm.$el.querySelector('p').textContent.trim(),
).toContain('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.');
expect(
vm.$el.querySelector('a').textContent.trim(),
).toEqual('Read more');
expect(
vm.$el.querySelector('a').getAttribute('href'),
).toEqual('path');
});
it('should emit an event when close button is clicked', () => {
spyOn(vm, '$emit');
vm.$el.querySelector('.js-ca-dismiss-button').click();
expect(vm.$emit).toHaveBeenCalled();
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment