From 0ccacd7bbdbb63e451ec17e6a650d329f5d4ac9c Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Tue, 30 Oct 2018 10:45:54 +0000 Subject: [PATCH 1/2] Prevents review app to render an empty dropdown. When a deployment has no files to show in the dropdown we fallback to the regular single button for the review app link. This commit moves the review app link into a component since it's used twice. --- .../components/deployment.vue | 41 ++++++++----------- .../components/review_app_link.vue | 30 ++++++++++++++ changelogs/unreleased/53227-empty-list.yml | 6 +++ .../components/deployment_spec.js | 20 +++++++++ .../components/review_app_link_spec.js | 38 +++++++++++++++++ 5 files changed, 111 insertions(+), 24 deletions(-) create mode 100644 app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue create mode 100644 changelogs/unreleased/53227-empty-list.yml create mode 100644 spec/javascripts/vue_mr_widget/components/review_app_link_spec.js diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue index 5e7a35e9396..57c52a2016a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue @@ -10,6 +10,7 @@ import { visitUrl } from '../../lib/utils/url_utility'; import createFlash from '../../flash'; import MemoryUsage from './memory_usage.vue'; import StatusIcon from './mr_widget_status_icon.vue'; +import ReviewAppLink from './review_app_link.vue'; import MRWidgetService from '../services/mr_widget_service'; export default { @@ -21,6 +22,7 @@ export default { Icon, TooltipOnTruncate, FilteredSearchDropdown, + ReviewAppLink, }, directives: { tooltip, @@ -63,6 +65,12 @@ export default { deployedText() { return this.$options.deployedTextMap[this.deployment.status]; }, + shouldRenderDropdown() { + return ( + this.enableCiEnvironmentsStatusChanges && + (this.deployment.changes && this.deployment.changes.length > 0) + ); + }, }, methods: { stopEnvironment() { @@ -133,7 +141,7 @@ export default {
- - - {{ __('View app') }} - - - + :link="deployment.external_url" + css-class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inlin" + /> +import Icon from '~/vue_shared/components/icon.vue'; + +export default { + components: { + Icon, + }, + props: { + link: { + type: String, + required: true, + }, + cssClass: { + type: String, + required: true, + }, + }, +}; + + diff --git a/changelogs/unreleased/53227-empty-list.yml b/changelogs/unreleased/53227-empty-list.yml new file mode 100644 index 00000000000..8b222145299 --- /dev/null +++ b/changelogs/unreleased/53227-empty-list.yml @@ -0,0 +1,6 @@ +--- +title: Only renders dropdown for review app changes when we have a list of files to + show. Otherwise will render the regular review app button +merge_request: +author: +type: other diff --git a/spec/javascripts/vue_mr_widget/components/deployment_spec.js b/spec/javascripts/vue_mr_widget/components/deployment_spec.js index d26ffa4b4a6..059abc8b7fb 100644 --- a/spec/javascripts/vue_mr_widget/components/deployment_spec.js +++ b/spec/javascripts/vue_mr_widget/components/deployment_spec.js @@ -211,6 +211,26 @@ describe('Deployment component', () => { }); }); + describe('without changes', () => { + beforeEach(() => { + window.gon = window.gon || {}; + window.gon.features = window.gon.features || {}; + window.gon.features.ciEnvironmentsStatusChanges = true; + delete deploymentMockData.changes; + + vm = mountComponent(Component, { deployment: { ...deploymentMockData } }); + }); + + afterEach(() => { + delete window.gon.features.ciEnvironmentsStatusChanges; + }); + + it('renders the link to the review app without dropdown', () => { + expect(vm.$el.querySelector('.js-mr-wigdet-deployment-dropdown')).toBeNull(); + expect(vm.$el.querySelector('.js-deploy-url-feature-flag')).not.toBeNull(); + }); + }) + describe('deployment status', () => { describe('running', () => { beforeEach(() => { diff --git a/spec/javascripts/vue_mr_widget/components/review_app_link_spec.js b/spec/javascripts/vue_mr_widget/components/review_app_link_spec.js new file mode 100644 index 00000000000..68a65bd21c6 --- /dev/null +++ b/spec/javascripts/vue_mr_widget/components/review_app_link_spec.js @@ -0,0 +1,38 @@ +import Vue from 'vue'; +import component from '~/vue_merge_request_widget/components/review_app_link.vue'; +import mountComponent from '../../helpers/vue_mount_component_helper'; + +describe('review app link', () => { + const Component = Vue.extend(component); + const props = { + link: '/review', + cssClass: 'js-link', + }; + let vm; + let el; + + beforeEach(() => { + vm = mountComponent(Component, props); + el = vm.$el; + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders provided link as href attribute', () => { + expect(el.getAttribute('href')).toEqual(props.link); + }); + + it('renders provided cssClass as class attribute', () => { + expect(el.getAttribute('class')).toEqual(props.cssClass); + }); + + it('renders View app text', () => { + expect(el.textContent.trim()).toEqual('View app'); + }); + + it('renders svg icon', () => { + expect(el.querySelector('svg')).not.toBeNull(); + }); +}); From 15db499757a07a488be3caf2699134e7a7a20234 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Tue, 30 Oct 2018 11:03:11 +0000 Subject: [PATCH 2/2] Runs prettier on changed files --- spec/javascripts/vue_mr_widget/components/deployment_spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/javascripts/vue_mr_widget/components/deployment_spec.js b/spec/javascripts/vue_mr_widget/components/deployment_spec.js index 059abc8b7fb..3d44af11153 100644 --- a/spec/javascripts/vue_mr_widget/components/deployment_spec.js +++ b/spec/javascripts/vue_mr_widget/components/deployment_spec.js @@ -229,7 +229,7 @@ describe('Deployment component', () => { expect(vm.$el.querySelector('.js-mr-wigdet-deployment-dropdown')).toBeNull(); expect(vm.$el.querySelector('.js-deploy-url-feature-flag')).not.toBeNull(); }); - }) + }); describe('deployment status', () => { describe('running', () => {