Creates Vue component for trigger variables block in job log page
Regenerate pot files Remove `#` Remove empty lines
This commit is contained in:
parent
ce18246c24
commit
0ade3a0755
4 changed files with 161 additions and 0 deletions
84
app/assets/javascripts/jobs/components/trigger_block.vue
Normal file
84
app/assets/javascripts/jobs/components/trigger_block.vue
Normal file
|
@ -0,0 +1,84 @@
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
shortToken: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
|
||||||
|
variables: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
areVariablesVisible: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
hasVariables() {
|
||||||
|
return Object.keys(this.variables).length > 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
revealVariables() {
|
||||||
|
this.areVariablesVisible = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="build-widget block">
|
||||||
|
<h4 class="title">
|
||||||
|
{{ __('Trigger') }}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<p
|
||||||
|
v-if="shortToken"
|
||||||
|
class="js-short-token"
|
||||||
|
>
|
||||||
|
<span class="build-light-text">
|
||||||
|
{{ __('Token') }}
|
||||||
|
</span>
|
||||||
|
{{ shortToken }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p v-if="hasVariables">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-default group js-reveal-variables"
|
||||||
|
@click="revealVariables"
|
||||||
|
>
|
||||||
|
{{ __('Reveal Variables') }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<dl
|
||||||
|
v-if="areVariablesVisible"
|
||||||
|
class="js-build-variables trigger-build-variables"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-for="(value, key) in variables"
|
||||||
|
>
|
||||||
|
<dt
|
||||||
|
:key="`${key}-variable`"
|
||||||
|
class="js-build-variable trigger-build-variable"
|
||||||
|
>
|
||||||
|
{{ key }}
|
||||||
|
</dt>
|
||||||
|
|
||||||
|
<dd
|
||||||
|
:key="`${key}-value`"
|
||||||
|
class="js-build-value trigger-build-value"
|
||||||
|
>
|
||||||
|
{{ value }}
|
||||||
|
</dd>
|
||||||
|
</template>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</template>
|
5
changelogs/unreleased/50101-trigger.yml
Normal file
5
changelogs/unreleased/50101-trigger.yml
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Creates Vue component for trigger variables block in job log page
|
||||||
|
merge_request:
|
||||||
|
author:
|
||||||
|
type: other
|
|
@ -4649,6 +4649,9 @@ msgstr ""
|
||||||
msgid "Retry verification"
|
msgid "Retry verification"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
msgid "Reveal Variables"
|
||||||
|
msgstr ""
|
||||||
|
|
||||||
msgid "Reveal value"
|
msgid "Reveal value"
|
||||||
msgid_plural "Reveal values"
|
msgid_plural "Reveal values"
|
||||||
msgstr[0] ""
|
msgstr[0] ""
|
||||||
|
@ -5784,6 +5787,9 @@ msgstr ""
|
||||||
msgid "Trending"
|
msgid "Trending"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
msgid "Trigger"
|
||||||
|
msgstr ""
|
||||||
|
|
||||||
msgid "Trigger this manual action"
|
msgid "Trigger this manual action"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
|
66
spec/javascripts/jobs/trigger_value_spec.js
Normal file
66
spec/javascripts/jobs/trigger_value_spec.js
Normal file
|
@ -0,0 +1,66 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import component from '~/jobs/components/trigger_block.vue';
|
||||||
|
import mountComponent from '../helpers/vue_mount_component_helper';
|
||||||
|
|
||||||
|
describe('Trigger block', () => {
|
||||||
|
const Component = Vue.extend(component);
|
||||||
|
let vm;
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vm.$destroy();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('with short token', () => {
|
||||||
|
it('renders short token', () => {
|
||||||
|
vm = mountComponent(Component, {
|
||||||
|
shortToken: '0a666b2',
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(vm.$el.querySelector('.js-short-token').textContent).toContain('0a666b2');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('without short token', () => {
|
||||||
|
it('does not render short token', () => {
|
||||||
|
vm = mountComponent(Component, {});
|
||||||
|
|
||||||
|
expect(vm.$el.querySelector('.js-short-token')).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('with variables', () => {
|
||||||
|
describe('reveal variables', () => {
|
||||||
|
it('reveals variables on click', done => {
|
||||||
|
vm = mountComponent(Component, {
|
||||||
|
variables: {
|
||||||
|
key: 'value',
|
||||||
|
variable: 'foo',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
vm.$el.querySelector('.js-reveal-variables').click();
|
||||||
|
|
||||||
|
vm
|
||||||
|
.$nextTick()
|
||||||
|
.then(() => {
|
||||||
|
expect(vm.$el.querySelector('.js-build-variables')).not.toBeNull();
|
||||||
|
expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('key');
|
||||||
|
expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('value');
|
||||||
|
expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('variable');
|
||||||
|
expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('foo');
|
||||||
|
})
|
||||||
|
.then(done)
|
||||||
|
.catch(done.fail);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('without variables', () => {
|
||||||
|
it('does not render variables', () => {
|
||||||
|
vm = mountComponent(Component);
|
||||||
|
|
||||||
|
expect(vm.$el.querySelector('.js-reveal-variables')).toBeNull();
|
||||||
|
expect(vm.$el.querySelector('.js-build-variables')).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in a new issue