Commit 2d43f8a2 authored by Phil Hughes's avatar Phil Hughes

Merge branch '31156-environments-vue-service' into 'master'

Remove service from actions dropdown, stop button and redeploy button

Closes #31156 and #31567

See merge request !11068
parents ba608dc0 3a41c99f
<script>
/* eslint-disable no-new */
/* global Flash */
import EnvironmentsService from '../services/environments_service';
import EnvironmentTable from './environments_table.vue';
......@@ -71,11 +69,13 @@ export default {
eventHub.$on('refreshEnvironments', this.fetchEnvironments);
eventHub.$on('toggleFolder', this.toggleFolder);
eventHub.$on('postAction', this.postAction);
},
beforeDestroyed() {
eventHub.$off('refreshEnvironments');
eventHub.$off('toggleFolder');
eventHub.$off('postAction');
},
methods: {
......@@ -122,6 +122,7 @@ export default {
})
.catch(() => {
this.isLoading = false;
// eslint-disable-next-line no-new
new Flash('An error occurred while fetching the environments.');
});
},
......@@ -137,9 +138,16 @@ export default {
})
.catch(() => {
this.isLoadingFolderContent = false;
// eslint-disable-next-line no-new
new Flash('An error occurred while fetching the environments.');
});
},
postAction(endpoint) {
this.service.postAction(endpoint)
.then(() => this.fetchEnvironments())
.catch(() => new Flash('An error occured while making the request.'));
},
},
};
</script>
......@@ -217,7 +225,6 @@ export default {
:environments="state.environments"
:can-create-deployment="canCreateDeploymentParsed"
:can-read-environment="canReadEnvironmentParsed"
:service="service"
:is-loading-folder-content="isLoadingFolderContent" />
</div>
......
<script>
/* global Flash */
/* eslint-disable no-new */
import playIconSvg from 'icons/_icon_play.svg';
import eventHub from '../event_hub';
......@@ -12,11 +9,6 @@ export default {
required: false,
default: () => [],
},
service: {
type: Object,
required: true,
},
},
data() {
......@@ -38,15 +30,7 @@ export default {
$(this.$refs.tooltip).tooltip('destroy');
this.service.postAction(endpoint)
.then(() => {
this.isLoading = false;
eventHub.$emit('refreshEnvironments');
})
.catch(() => {
this.isLoading = false;
new Flash('An error occured while making the request.');
});
eventHub.$emit('postAction', endpoint);
},
isActionDisabled(action) {
......
......@@ -46,11 +46,6 @@ export default {
required: false,
default: false,
},
service: {
type: Object,
required: true,
},
},
computed: {
......@@ -543,31 +538,34 @@ export default {
<actions-component
v-if="hasManualActions && canCreateDeployment"
:service="service"
:actions="manualActions"/>
:actions="manualActions"
/>
<external-url-component
v-if="externalURL && canReadEnvironment"
:external-url="externalURL"/>
:external-url="externalURL"
/>
<monitoring-button-component
v-if="monitoringUrl && canReadEnvironment"
:monitoring-url="monitoringUrl"/>
:monitoring-url="monitoringUrl"
/>
<terminal-button-component
v-if="model && model.terminal_path"
:terminal-path="model.terminal_path"/>
:terminal-path="model.terminal_path"
/>
<stop-component
v-if="hasStopAction && canCreateDeployment"
:stop-url="model.stop_path"
:service="service"/>
/>
<rollback-component
v-if="canRetry && canCreateDeployment"
:is-last-deployment="isLastDeployment"
:retry-url="retryUrl"
:service="service"/>
/>
</div>
</td>
</tr>
......
<script>
/* global Flash */
/* eslint-disable no-new */
/**
* Renders Rollback or Re deploy button in environments table depending
* of the provided property `isLastDeployment`.
......@@ -20,11 +18,6 @@ export default {
type: Boolean,
default: true,
},
service: {
type: Object,
required: true,
},
},
data() {
......@@ -37,17 +30,7 @@ export default {
onClick() {
this.isLoading = true;
$(this.$el).tooltip('destroy');
this.service.postAction(this.retryUrl)
.then(() => {
this.isLoading = false;
eventHub.$emit('refreshEnvironments');
})
.catch(() => {
this.isLoading = false;
new Flash('An error occured while making the request.');
});
eventHub.$emit('postAction', this.retryUrl);
},
},
};
......
<script>
/* global Flash */
/* eslint-disable no-new, no-alert */
/**
* Renders the stop "button" that allows stop an environment.
* Used in environments table.
......@@ -13,11 +11,6 @@ export default {
type: String,
default: '',
},
service: {
type: Object,
required: true,
},
},
data() {
......@@ -34,20 +27,13 @@ export default {
methods: {
onClick() {
// eslint-disable-next-line no-alert
if (confirm('Are you sure you want to stop this environment?')) {
this.isLoading = true;
$(this.$el).tooltip('destroy');
this.service.postAction(this.retryUrl)
.then(() => {
this.isLoading = false;
eventHub.$emit('refreshEnvironments');
})
.catch(() => {
this.isLoading = false;
new Flash('An error occured while making the request.', 'alert');
});
eventHub.$emit('postAction', this.stopUrl);
}
},
},
......
......@@ -28,11 +28,6 @@ export default {
default: false,
},
service: {
type: Object,
required: true,
},
isLoadingFolderContent: {
type: Boolean,
required: false,
......@@ -78,7 +73,7 @@ export default {
:model="model"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
:service="service" />
/>
<template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
<tr v-if="isLoadingFolderContent">
......@@ -96,7 +91,7 @@ export default {
:model="children"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
:service="service" />
/>
<tr>
<td
......
<script>
/* eslint-disable no-new */
/* global Flash */
import EnvironmentsService from '../services/environments_service';
import EnvironmentTable from '../components/environments_table.vue';
......@@ -99,6 +98,7 @@ export default {
})
.catch(() => {
this.isLoading = false;
// eslint-disable-next-line no-new
new Flash('An error occurred while fetching the environments.', 'alert');
});
},
......@@ -169,7 +169,7 @@ export default {
:environments="state.environments"
:can-create-deployment="canCreateDeploymentParsed"
:can-read-environment="canReadEnvironmentParsed"
:service="service"/>
/>
<table-pagination
v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
......
---
title: Fix environments vue architecture to match documentation
merge_request:
author:
......@@ -4,7 +4,6 @@ import actionsComp from '~/environments/components/environment_actions.vue';
describe('Actions Component', () => {
let ActionsComponent;
let actionsMock;
let spy;
let component;
beforeEach(() => {
......@@ -26,13 +25,9 @@ describe('Actions Component', () => {
},
];
spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
component = new ActionsComponent({
propsData: {
actions: actionsMock,
service: {
postAction: spy,
},
},
}).$mount();
});
......@@ -48,13 +43,6 @@ describe('Actions Component', () => {
).toEqual(actionsMock.length);
});
it('should call the service when an action is clicked', () => {
component.$el.querySelector('.dropdown').click();
component.$el.querySelector('.js-manual-action-link').click();
expect(spy).toHaveBeenCalledWith(actionsMock[0].play_path);
});
it('should render a disabled action when it\'s not playable', () => {
expect(
component.$el.querySelector('.dropdown-menu li:last-child button').getAttribute('disabled'),
......
......@@ -4,11 +4,9 @@ import rollbackComp from '~/environments/components/environment_rollback.vue';
describe('Rollback Component', () => {
const retryURL = 'https://gitlab.com/retry';
let RollbackComponent;
let spy;
beforeEach(() => {
RollbackComponent = Vue.extend(rollbackComp);
spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
});
it('Should render Re-deploy label when isLastDeployment is true', () => {
......@@ -17,9 +15,6 @@ describe('Rollback Component', () => {
propsData: {
retryUrl: retryURL,
isLastDeployment: true,
service: {
postAction: spy,
},
},
}).$mount();
......@@ -32,28 +27,9 @@ describe('Rollback Component', () => {
propsData: {
retryUrl: retryURL,
isLastDeployment: false,
service: {
postAction: spy,
},
},
}).$mount();
expect(component.$el.querySelector('span').textContent).toContain('Rollback');
});
it('should call the service when the button is clicked', () => {
const component = new RollbackComponent({
propsData: {
retryUrl: retryURL,
isLastDeployment: false,
service: {
postAction: spy,
},
},
}).$mount();
component.$el.click();
expect(spy).toHaveBeenCalledWith(retryURL);
});
});
......@@ -4,20 +4,15 @@ import stopComp from '~/environments/components/environment_stop.vue';
describe('Stop Component', () => {
let StopComponent;
let component;
let spy;
const stopURL = '/stop';
beforeEach(() => {
StopComponent = Vue.extend(stopComp);
spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
spyOn(window, 'confirm').and.returnValue(true);
component = new StopComponent({
propsData: {
stopUrl: stopURL,
service: {
postAction: spy,
},
},
}).$mount();
});
......@@ -26,9 +21,4 @@ describe('Stop Component', () => {
expect(component.$el.tagName).toEqual('BUTTON');
expect(component.$el.getAttribute('title')).toEqual('Stop');
});
it('should call the service when an action is clicked', () => {
component.$el.click();
expect(spy).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