Geo Status Page 2.0 - Edit Actions

This change adds the logic to
make the Edit button direct
to the Edit page.

ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_actions.vue

@@ -9,10 +9,9 @@ export default {
     GeoNodeActionsDesktop,
   },
   props: {
-    primary: {
-      type: Boolean,
-      required: false,
-      default: false,
+    node: {
+      type: Object,
+      required: true,
     },
   },
 };
@@ -20,7 +19,7 @@ export default {
 
 <template>
   <div>
-    <geo-node-actions-mobile class="gl-lg-display-none" :primary="primary" />
-    <geo-node-actions-desktop class="gl-display-none gl-lg-display-flex" :primary="primary" />
+    <geo-node-actions-mobile class="gl-lg-display-none" :node="node" />
+    <geo-node-actions-desktop class="gl-display-none gl-lg-display-flex" :node="node" />
   </div>
 </template>

ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_actions_desktop.vue

@@ -12,10 +12,9 @@ export default {
     GlButton,
   },
   props: {
-    primary: {
-      type: Boolean,
-      required: false,
-      default: false,
+    node: {
+      type: Object,
+      required: true,
     },
   },
 };
@@ -23,11 +22,13 @@ export default {
 
 <template>
   <div>
-    <gl-button class="gl-mr-3">{{ $options.i18n.editButtonLabel }}</gl-button>
+    <gl-button class="gl-mr-3" :href="node.webEditUrl">{{
+      $options.i18n.editButtonLabel
+    }}</gl-button>
     <gl-button
       variant="danger"
       category="secondary"
-      :disabled="primary"
+      :disabled="node.primary"
       data-testid="geo-desktop-remove-action"
       >{{ $options.i18n.removeButtonLabel }}</gl-button
     >

ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_actions_mobile.vue

@@ -14,15 +14,14 @@ export default {
     GlIcon,
   },
   props: {
-    primary: {
-      type: Boolean,
-      required: false,
-      default: false,
+    node: {
+      type: Object,
+      required: true,
     },
   },
   computed: {
     dropdownRemoveClass() {
-      return this.primary ? 'gl-text-gray-400' : 'gl-text-red-500';
+      return this.node.primary ? 'gl-text-gray-400' : 'gl-text-red-500';
     },
   },
 };
@@ -33,8 +32,8 @@ export default {
     <template #button-content>
       <gl-icon name="ellipsis_h" />
     </template>
-    <gl-dropdown-item>{{ $options.i18n.editButtonLabel }}</gl-dropdown-item>
-    <gl-dropdown-item :disabled="primary" data-testid="geo-mobile-remove-action">
+    <gl-dropdown-item :href="node.webEditUrl">{{ $options.i18n.editButtonLabel }}</gl-dropdown-item>
+    <gl-dropdown-item :disabled="node.primary" data-testid="geo-mobile-remove-action">
       <span :class="dropdownRemoveClass">{{ $options.i18n.removeButtonLabel }}</span>
     </gl-dropdown-item>
   </gl-dropdown>

ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_header.vue

@@ -71,7 +71,7 @@ export default {
       </div>
     </div>
     <div class="gl-display-flex gl-align-items-center gl-justify-content-end">
-      <geo-node-actions :primary="node.primary" />
+      <geo-node-actions :node="node" />
     </div>
   </div>
 </template>

ee/spec/frontend/geo_nodes_beta/components/header/geo_node_actions_desktop_spec.js

@@ -2,7 +2,11 @@ import { GlButton } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import GeoNodeActionsDesktop from 'ee/geo_nodes_beta/components/header/geo_node_actions_desktop.vue';
-import { MOCK_PRIMARY_VERSION, MOCK_REPLICABLE_TYPES } from 'ee_jest/geo_nodes_beta/mock_data';
+import {
+  MOCK_NODES,
+  MOCK_PRIMARY_VERSION,
+  MOCK_REPLICABLE_TYPES,
+} from 'ee_jest/geo_nodes_beta/mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -11,7 +15,7 @@ describe('GeoNodeActionsDesktop', () => {
   let wrapper;
 
   const defaultProps = {
-    primary: true,
+    node: MOCK_NODES[0],
   };
 
   const createComponent = (initialState, props) => {
@@ -54,6 +58,12 @@ describe('GeoNodeActionsDesktop', () => {
           'Remove',
         ]);
       });
+
+      it('renders edit link correctly', () => {
+        expect(findGeoDesktopActionsButtons().at(0).attributes('href')).toBe(
+          MOCK_NODES[0].webEditUrl,
+        );
+      });
     });
 
     describe.each`
@@ -62,11 +72,11 @@ describe('GeoNodeActionsDesktop', () => {
       ${false} | ${undefined}
     `(`conditionally`, ({ primary, disabled }) => {
       beforeEach(() => {
-        createComponent(null, { primary });
+        createComponent(null, { node: { primary } });
       });
 
       describe(`when primary is ${primary}`, () => {
-        it('disables the Desktop Remove button', () => {
+        it(`does ${primary ? '' : 'not '}disable the Desktop Remove button`, () => {
           expect(findGeoDesktopActionsRemoveButton().attributes('disabled')).toBe(disabled);
         });
       });

ee/spec/frontend/geo_nodes_beta/components/header/geo_node_actions_mobile_spec.js

@@ -2,7 +2,11 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import GeoNodeActionsMobile from 'ee/geo_nodes_beta/components/header/geo_node_actions_mobile.vue';
-import { MOCK_PRIMARY_VERSION, MOCK_REPLICABLE_TYPES } from 'ee_jest/geo_nodes_beta/mock_data';
+import {
+  MOCK_NODES,
+  MOCK_PRIMARY_VERSION,
+  MOCK_REPLICABLE_TYPES,
+} from 'ee_jest/geo_nodes_beta/mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -11,7 +15,7 @@ describe('GeoNodeActionsMobile', () => {
   let wrapper;
 
   const defaultProps = {
-    primary: true,
+    node: MOCK_NODES[0],
   };
 
   const createComponent = (initialState, props) => {
@@ -59,6 +63,12 @@ describe('GeoNodeActionsMobile', () => {
           'Remove',
         ]);
       });
+
+      it('renders edit link correctly', () => {
+        expect(findGeoMobileActionsDropdownItems().at(0).attributes('href')).toBe(
+          MOCK_NODES[0].webEditUrl,
+        );
+      });
     });
 
     describe.each`
@@ -67,11 +77,13 @@ describe('GeoNodeActionsMobile', () => {
       ${false} | ${undefined} | ${'gl-text-red-500'}
     `(`conditionally`, ({ primary, disabled, dropdownClass }) => {
       beforeEach(() => {
-        createComponent(null, { primary });
+        createComponent(null, { node: { primary } });
       });
 
       describe(`when primary is ${primary}`, () => {
-        it('disables the Mobile Remove dropdown item and adds proper class', () => {
+        it(`does ${
+          primary ? '' : 'not '
+        }disable the Mobile Remove dropdown item and adds proper class`, () => {
           expect(findGeoMobileActionsRemoveDropdownItem().attributes('disabled')).toBe(disabled);
           expect(findGeoMobileActionsRemoveDropdownItem().find('span').classes(dropdownClass)).toBe(
             true,

ee/spec/frontend/geo_nodes_beta/components/header/geo_node_actions_spec.js

@@ -3,7 +3,11 @@ import Vuex from 'vuex';
 import GeoNodeActions from 'ee/geo_nodes_beta/components/header/geo_node_actions.vue';
 import GeoNodeActionsDesktop from 'ee/geo_nodes_beta/components/header/geo_node_actions_desktop.vue';
 import GeoNodeActionsMobile from 'ee/geo_nodes_beta/components/header/geo_node_actions_mobile.vue';
-import { MOCK_PRIMARY_VERSION, MOCK_REPLICABLE_TYPES } from 'ee_jest/geo_nodes_beta/mock_data';
+import {
+  MOCK_NODES,
+  MOCK_PRIMARY_VERSION,
+  MOCK_REPLICABLE_TYPES,
+} from 'ee_jest/geo_nodes_beta/mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -12,7 +16,7 @@ describe('GeoNodeActions', () => {
   let wrapper;
 
   const defaultProps = {
-    primary: true,
+    node: MOCK_NODES[0],
   };
 
   const createComponent = (initialState, props) => {

ee/spec/frontend/geo_nodes_beta/mock_data.js

@@ -140,6 +140,7 @@ export const MOCK_NODES = [
     replicationSlotsUsedCount: 0,
     version: '10.4.0-pre',
     revision: 'b93c51849b',
+    webEditUrl: 'http://127.0.0.1:3001/admin/geo/nodes/1',
   },
   {
     id: 2,
@@ -209,6 +210,7 @@ export const MOCK_NODE_STATUSES_RES = [
     replication_slots_used_count: 0,
     version: '10.4.0-pre',
     revision: 'b93c51849b',
+    web_edit_url: 'http://127.0.0.1:3001/admin/geo/nodes/1',
   },
   {
     geo_node_id: 2,