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

app/assets/javascripts/environments/components/environment.vue

 <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>
 

app/assets/javascripts/environments/components/environment_actions.vue

 <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) {

app/assets/javascripts/environments/components/environment_item.vue

@@ -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>

app/assets/javascripts/environments/components/environment_rollback.vue

 <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);
     },
   },
 };

app/assets/javascripts/environments/components/environment_stop.vue

 <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);
       }
     },
   },

app/assets/javascripts/environments/components/environments_table.vue

@@ -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

app/assets/javascripts/environments/folder/environments_folder_view.vue

 <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"

changelogs/unreleased/31156-environments-vue-service.yml

+---
+title: Fix environments vue architecture to match documentation
+merge_request:
+author:

spec/javascripts/environments/environment_actions_spec.js

@@ -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'),

spec/javascripts/environments/environment_rollback_spec.js

@@ -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);
-  });
 });

spec/javascripts/environments/environment_stop_spec.js

@@ -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();
-  });
 });