Add methods to show modal dialog on Toggle or Remove actions

ee/app/assets/javascripts/geo_nodes/components/geo_node_actions.vue

@@ -2,7 +2,9 @@
   import { __, s__ } from '~/locale';
   import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 
-  import { NODE_ACTION_BASE_PATH, NODE_ACTIONS } from '../constants';
+  import eventHub from '../event_hub';
+
+  import { NODE_ACTIONS } from '../constants';
 
   export default {
     components: {
@@ -22,11 +24,6 @@
         required: true,
       },
     },
-    data() {
-      return {
-        isNodeToggleInProgress: false,
-      };
-    },
     computed: {
       isToggleAllowed() {
         return !this.node.primary && this.nodeEditAllowed;
@@ -34,20 +31,27 @@
       nodeToggleLabel() {
         return this.node.enabled ? __('Disable') : __('Enable');
       },
-      nodeDisableMessage() {
-        return this.node.enabled ? s__('GeoNodes|Disabling a node stops the sync process. Are you sure?') : '';
-      },
-      nodePath() {
-        return `${NODE_ACTION_BASE_PATH}${this.node.id}`;
-      },
-      nodeRepairAuthPath() {
-        return `${this.nodePath}${NODE_ACTIONS.REPAIR}`;
+    },
+    methods: {
+      onToggleNode() {
+        eventHub.$emit('showNodeActionModal', {
+          actionType: NODE_ACTIONS.TOGGLE,
+          node: this.node,
+          modalMessage: s__('GeoNodes|Disabling a node stops the sync process. Are you sure?'),
+          modalActionLabel: this.nodeToggleLabel,
+        });
       },
-      nodeTogglePath() {
-        return `${this.nodePath}${NODE_ACTIONS.TOGGLE}`;
+      onRemoveNode() {
+        eventHub.$emit('showNodeActionModal', {
+          actionType: NODE_ACTIONS.REMOVE,
+          node: this.node,
+          modalKind: 'danger',
+          modalMessage: s__('GeoNodes|Removing a node stops the sync process. Are you sure?'),
+          modalActionLabel: __('Remove'),
+        });
       },
-      nodeEditPath() {
-        return `${this.nodePath}${NODE_ACTIONS.EDIT}`;
+      onRepairNode() {
+        eventHub.$emit('repairNode', this.node);
       },
     },
   };
@@ -59,30 +63,29 @@
       v-if="nodeMissingOauth"
       class="node-action-container"
     >
-      <a
+      <button
+        type="button"
         class="btn btn-default btn-sm btn-node-action"
-        data-method="post"
-        :href="nodeRepairAuthPath"
+        @click="onRepairNode"
       >
         {{ s__('Repair authentication') }}
-      </a>
+      </button>
     </div>
     <div
       v-if="isToggleAllowed"
       class="node-action-container"
     >
-      <a
+      <button
+        type="button"
         class="btn btn-sm btn-node-action"
-        data-method="post"
-        :href="nodeTogglePath"
-        :data-confirm="nodeDisableMessage"
         :class="{
           'btn-warning': node.enabled,
           'btn-success': !node.enabled
         }"
+        @click="onToggleNode"
       >
         {{ nodeToggleLabel }}
-      </a>
+      </button>
     </div>
     <div
       v-if="nodeEditAllowed"
@@ -90,19 +93,19 @@
     >
       <a
         class="btn btn-sm btn-node-action"
-        :href="nodeEditPath"
+        :href="node.editPath"
       >
         {{ __('Edit') }}
       </a>
     </div>
     <div class="node-action-container">
-      <a
+      <button
+        type="button"
         class="btn btn-sm btn-node-action btn-danger"
-        data-method="delete"
-        :href="nodePath"
+        @click="onRemoveNode"
       >
         {{ __('Remove') }}
-      </a>
+      </button>
     </div>
   </div>
 </template>

spec/javascripts/geo_nodes/components/geo_node_actions_spec.js

@@ -2,6 +2,8 @@ import Vue from 'vue';
 
 import geoNodeActionsComponent from 'ee/geo_nodes/components/geo_node_actions.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import eventHub from 'ee/geo_nodes/event_hub';
+import { NODE_ACTIONS } from 'ee/geo_nodes/constants';
 import { mockNodes } from '../mock_data';
 
 const createComponent = (node = mockNodes[0], nodeEditAllowed = true, nodeMissingOauth = false) => {
@@ -25,14 +27,6 @@ describe('GeoNodeActionsComponent', () => {
     vm.$destroy();
   });
 
-  describe('data', () => {
-    it('returns default data props', () => {
-      const vmX = createComponent();
-      expect(vmX.isNodeToggleInProgress).toBeFalsy();
-      vmX.$destroy();
-    });
-  });
-
   describe('computed', () => {
     describe('isToggleAllowed', () => {
       it('returns boolean value representing if toggle on node can be allowed', () => {
@@ -59,49 +53,48 @@ describe('GeoNodeActionsComponent', () => {
         vmX.$destroy();
       });
     });
+  });
 
-    describe('nodeDisableMessage', () => {
-      it('returns node toggle message', () => {
-        let mockNode = Object.assign({}, mockNodes[1]);
-        let vmX = createComponent(mockNode);
-        expect(vmX.nodeDisableMessage).toBe('Disabling a node stops the sync process. Are you sure?');
-        vmX.$destroy();
-
-        mockNode = Object.assign({}, mockNodes[1], { enabled: false });
-        vmX = createComponent(mockNode);
-        expect(vmX.nodeDisableMessage).toBe('');
-        vmX.$destroy();
-      });
-    });
-
-    describe('nodePath', () => {
-      it('returns node path', () => {
-        expect(vm.nodePath).toBe('/admin/geo_nodes/1');
-      });
-    });
-
-    describe('nodeRepairAuthPath', () => {
-      it('returns node repair authentication path', () => {
-        expect(vm.nodeRepairAuthPath).toBe('/admin/geo_nodes/1/repair');
+  describe('methods', () => {
+    describe('onToggleNode', () => {
+      it('emits showNodeActionModal with actionType `toggle`, node reference, modalMessage and modalActionLabel', () => {
+        spyOn(eventHub, '$emit');
+        vm.onToggleNode();
+        expect(eventHub.$emit).toHaveBeenCalledWith('showNodeActionModal', {
+          actionType: NODE_ACTIONS.TOGGLE,
+          node: vm.node,
+          modalMessage: 'Disabling a node stops the sync process. Are you sure?',
+          modalActionLabel: vm.nodeToggleLabel,
+        });
       });
     });
 
-    describe('nodeTogglePath', () => {
-      it('returns node toggle path', () => {
-        expect(vm.nodeTogglePath).toBe('/admin/geo_nodes/1/toggle');
+    describe('onRemoveNode', () => {
+      it('emits showNodeActionModal with actionType `remove`, node reference, modalKind, modalMessage and modalActionLabel', () => {
+        spyOn(eventHub, '$emit');
+        vm.onRemoveNode();
+        expect(eventHub.$emit).toHaveBeenCalledWith('showNodeActionModal', {
+          actionType: NODE_ACTIONS.REMOVE,
+          node: vm.node,
+          modalKind: 'danger',
+          modalMessage: 'Removing a node stops the sync process. Are you sure?',
+          modalActionLabel: 'Remove',
+        });
       });
     });
 
-    describe('nodeEditPath', () => {
-      it('returns node edit path', () => {
-        expect(vm.nodeEditPath).toBe('/admin/geo_nodes/1/edit');
+    describe('onRepairNode', () => {
+      it('emits `repairNode` event with node reference', () => {
+        spyOn(eventHub, '$emit');
+        vm.onRepairNode();
+        expect(eventHub.$emit).toHaveBeenCalledWith('repairNode', vm.node);
       });
     });
   });
 
   describe('template', () => {
     it('renders container elements correctly', () => {
-      expect(vm.$el.classList.contains('geo-node-actions')).toBeTruthy();
+      expect(vm.$el.classList.contains('geo-node-actions')).toBe(true);
       expect(vm.$el.querySelectorAll('.node-action-container').length).not.toBe(0);
       expect(vm.$el.querySelectorAll('.btn-node-action').length).not.toBe(0);
     });