diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-08-13 11:38:58 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-08-13 11:40:15 +0100 |
commit | cf12c3d2be9f244a4092ea4dd231e65dff8b295c (patch) | |
tree | 7b6074c5e5bc1349705dbbc2a43a03fd90707229 | |
parent | 456a4ddebc28f1ee5f9ed595bad0e2224b20848f (diff) | |
download | gitlab-ce-cf12c3d2be9f244a4092ea4dd231e65dff8b295c.tar.gz |
Creates vue component for erased block on job view
-rw-r--r-- | app/assets/javascripts/jobs/components/erased_block.vue | 55 | ||||
-rw-r--r-- | changelogs/unreleased/50101-erased-block.yml | 5 | ||||
-rw-r--r-- | locale/gitlab.pot | 6 | ||||
-rw-r--r-- | spec/javascripts/jobs/erased_block_spec.js | 56 |
4 files changed, 122 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/erased_block.vue b/app/assets/javascripts/jobs/components/erased_block.vue new file mode 100644 index 00000000000..2a6c9c49b2f --- /dev/null +++ b/app/assets/javascripts/jobs/components/erased_block.vue @@ -0,0 +1,55 @@ +<script> +import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; + +export default { + components: { + TimeagoTooltip, + }, + props: { + erasedByUser: { + type: Boolean, + required: true, + }, + username: { + type: String, + required: false, + default: null, + }, + linkToUser: { + type: String, + required: false, + default: null, + }, + erasedAt: { + type: String, + required: true, + }, + }, +}; +</script> +<template> + <div class="prepend-top-default js-build-erased"> + <div class="erased alert alert-warning"> + <template v-if="erasedByUser"> + {{ s__("Job|Job has been erased by") }} + + <a + :href="linkToUser" + > + {{ username }} + </a> + + <timeago-tooltip + :time="erasedAt" + /> + + </template> + <template v-else> + {{ s__("Job|Job has been erased") }} + <timeago-tooltip + :time="erasedAt" + /> + </template> + </div> + </div> +</template> diff --git a/changelogs/unreleased/50101-erased-block.yml b/changelogs/unreleased/50101-erased-block.yml new file mode 100644 index 00000000000..5a5c9bc0fc4 --- /dev/null +++ b/changelogs/unreleased/50101-erased-block.yml @@ -0,0 +1,5 @@ +--- +title: Creates vue component for erased block on job view +merge_request: +author: +type: other diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 92f424ccdf0..aeb9efb528f 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -3130,6 +3130,12 @@ msgstr "" msgid "Jobs" msgstr "" +msgid "Job|Job has been erased" +msgstr "" + +msgid "Job|Job has been erased by" +msgstr "" + msgid "Jul" msgstr "" diff --git a/spec/javascripts/jobs/erased_block_spec.js b/spec/javascripts/jobs/erased_block_spec.js new file mode 100644 index 00000000000..7cf32e984a2 --- /dev/null +++ b/spec/javascripts/jobs/erased_block_spec.js @@ -0,0 +1,56 @@ +import Vue from 'vue'; +import { getTimeago } from '~/lib/utils/datetime_utility'; +import component from '~/jobs/components/erased_block.vue'; +import mountComponent from '../helpers/vue_mount_component_helper'; + +describe('Erased block', () => { + const Component = Vue.extend(component); + let vm; + + const erasedAt = '2016-11-07T11:11:16.525Z'; + const timeago = getTimeago(); + const formatedDate = timeago.format(erasedAt); + + afterEach(() => { + vm.$destroy(); + }); + + describe('with job erased by user', () => { + beforeEach(() => { + vm = mountComponent(Component, { + erasedByUser: true, + username: 'root', + linkToUser: 'gitlab.com/root', + erasedAt, + }); + }); + + it('renders username and link', () => { + expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('gitlab.com/root'); + + expect(vm.$el.textContent).toContain('Job has been erased by'); + expect(vm.$el.textContent).toContain('root'); + }); + + it('renders erasedAt', () => { + expect(vm.$el.textContent).toContain(formatedDate); + }); + }); + + describe('with erased job', () => { + beforeEach(() => { + vm = mountComponent(Component, { + erasedByUser: false, + erasedAt, + }); + }); + + it('renders username and link', () => { + expect(vm.$el.textContent).toContain('Job has been erased'); + }); + + it('renders erasedAt', () => { + expect(vm.$el.textContent).toContain(formatedDate); + }); + }); +}); |