GKE network and subnetwork dropdown dropdowns

Implement dropdowns to select network and subnetworks
for a GKE cluster

app/assets/javascripts/create_cluster/gke_cluster/components/gke_network_dropdown.vue

+<script>
+import { createNamespacedHelpers, mapState, mapGetters, mapActions } from 'vuex';
+
+import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
+
+const { mapState: mapDropdownState } = createNamespacedHelpers('networks');
+const { mapActions: mapSubnetworkActions } = createNamespacedHelpers('subnetworks');
+
+export default {
+  components: {
+    ClusterFormDropdown,
+  },
+  props: {
+    fieldName: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['selectedNetwork']),
+    ...mapDropdownState(['items', 'isLoadingItems', 'loadingItemsError']),
+    ...mapGetters(['hasZone', 'projectId', 'region']),
+  },
+  methods: {
+    ...mapActions(['setNetwork', 'setSubnetwork']),
+    ...mapSubnetworkActions({ fetchSubnetworks: 'fetchItems' }),
+    setNetworkAndFetchSubnetworks(network) {
+      const { projectId: project, region } = this;
+
+      this.setSubnetwork('');
+      this.setNetwork(network);
+      this.fetchSubnetworks({ project, region, network: network.selfLink });
+    },
+  },
+};
+</script>
+<template>
+  <cluster-form-dropdown
+    :field-name="fieldName"
+    :value="selectedNetwork"
+    :items="items"
+    :disabled="!hasZone"
+    :loading="isLoadingItems"
+    :has-errors="Boolean(loadingItemsError)"
+    :loading-text="s__('ClusterIntegration|Loading networks')"
+    :placeholder="s__('ClusterIntergation|Select a network')"
+    :search-field-placeholder="s__('ClusterIntegration|Search networks')"
+    :empty-text="s__('ClusterIntegration|No networks found')"
+    :error-message="s__('ClusterIntegration|Could not load networks')"
+    :disabled-text="s__('ClusterIntegration|Select a zone to choose a network')"
+    @input="setNetworkAndFetchSubnetworks"
+  />
+</template>

app/assets/javascripts/create_cluster/gke_cluster/components/gke_subnetwork_dropdown.vue

+<script>
+import { createNamespacedHelpers, mapState, mapGetters, mapActions } from 'vuex';
+
+import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
+
+const { mapState: mapDropdownState } = createNamespacedHelpers('subnetworks');
+
+export default {
+  components: {
+    ClusterFormDropdown,
+  },
+  props: {
+    fieldName: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['selectedSubnetwork']),
+    ...mapDropdownState(['items', 'isLoadingItems', 'loadingItemsError']),
+    ...mapGetters(['hasNetwork']),
+  },
+  methods: {
+    ...mapActions(['setSubnetwork']),
+  },
+};
+</script>
+<template>
+  <cluster-form-dropdown
+    :field-name="fieldName"
+    :value="selectedSubnetwork"
+    :items="items"
+    :disabled="!hasNetwork"
+    :loading="isLoadingItems"
+    :has-errors="Boolean(loadingItemsError)"
+    :loading-text="s__('ClusterIntegration|Loading subnetworks')"
+    :placeholder="s__('ClusterIntergation|Select a subnetwork')"
+    :search-field-placeholder="s__('ClusterIntegration|Search subnetworks')"
+    :empty-text="s__('ClusterIntegration|No subnetworks found')"
+    :error-message="s__('ClusterIntegration|Could not load subnetworks')"
+    :disabled-text="s__('ClusterIntegration|Select a network to choose a subnetwork')"
+    @input="setSubnetwork"
+  />
+</template>

locale/gitlab.pot

@@ -3854,6 +3854,9 @@ msgstr ""
 msgid "ClusterIntegration|Could not load instance types"
 msgstr ""
 
+msgid "ClusterIntegration|Could not load networks"
+msgstr ""
+
 msgid "ClusterIntegration|Could not load regions from your AWS account"
 msgstr ""
 
@@ -3863,6 +3866,9 @@ msgstr ""
 msgid "ClusterIntegration|Could not load subnets for the selected VPC"
 msgstr ""
 
+msgid "ClusterIntegration|Could not load subnetworks"
+msgstr ""
+
 msgid "ClusterIntegration|Create Kubernetes cluster"
 msgstr ""
 
@@ -4127,12 +4133,18 @@ msgstr ""
 msgid "ClusterIntegration|Loading instance types"
 msgstr ""
 
+msgid "ClusterIntegration|Loading networks"
+msgstr ""
+
 msgid "ClusterIntegration|Loading security groups"
 msgstr ""
 
 msgid "ClusterIntegration|Loading subnets"
 msgstr ""
 
+msgid "ClusterIntegration|Loading subnetworks"
+msgstr ""
+
 msgid "ClusterIntegration|Machine type"
 msgstr ""
 
@@ -4157,6 +4169,9 @@ msgstr ""
 msgid "ClusterIntegration|No machine types matched your search"
 msgstr ""
 
+msgid "ClusterIntegration|No networks found"
+msgstr ""
+
 msgid "ClusterIntegration|No projects found"
 msgstr ""
 
@@ -4172,6 +4187,9 @@ msgstr ""
 msgid "ClusterIntegration|No subnet found"
 msgstr ""
 
+msgid "ClusterIntegration|No subnetworks found"
+msgstr ""
+
 msgid "ClusterIntegration|No zones matched your search"
 msgstr ""
 
@@ -4268,6 +4286,9 @@ msgstr ""
 msgid "ClusterIntegration|Search machine types"
 msgstr ""
 
+msgid "ClusterIntegration|Search networks"
+msgstr ""
+
 msgid "ClusterIntegration|Search projects"
 msgstr ""
 
@@ -4280,6 +4301,9 @@ msgstr ""
 msgid "ClusterIntegration|Search subnets"
 msgstr ""
 
+msgid "ClusterIntegration|Search subnetworks"
+msgstr ""
+
 msgid "ClusterIntegration|Search zones"
 msgstr ""
 
@@ -4298,6 +4322,9 @@ msgstr ""
 msgid "ClusterIntegration|Select a VPC to use for your EKS Cluster resources. To use a new VPC, first create one on %{startLink}Amazon Web Services %{externalLinkIcon} %{endLink}."
 msgstr ""
 
+msgid "ClusterIntegration|Select a network to choose a subnetwork"
+msgstr ""
+
 msgid "ClusterIntegration|Select a region to choose a Key Pair"
 msgstr ""
 
@@ -4307,6 +4334,9 @@ msgstr ""
 msgid "ClusterIntegration|Select a stack to install Crossplane."
 msgstr ""
 
+msgid "ClusterIntegration|Select a zone to choose a network"
+msgstr ""
+
 msgid "ClusterIntegration|Select machine type"
 msgstr ""
 
@@ -4484,6 +4514,9 @@ msgstr ""
 msgid "ClusterIntergation|Select a VPC"
 msgstr ""
 
+msgid "ClusterIntergation|Select a network"
+msgstr ""
+
 msgid "ClusterIntergation|Select a region"
 msgstr ""
 
@@ -4493,6 +4526,9 @@ msgstr ""
 msgid "ClusterIntergation|Select a subnet"
 msgstr ""
 
+msgid "ClusterIntergation|Select a subnetwork"
+msgstr ""
+
 msgid "ClusterIntergation|Select an instance type"
 msgstr ""
 

spec/frontend/create_cluster/gke_cluster/components/gke_network_dropdown_spec.js

+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import GkeNetworkDropdown from '~/create_cluster/gke_cluster/components/gke_network_dropdown.vue';
+import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
+import createClusterDropdownState from '~/create_cluster/store/cluster_dropdown/state';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('GkeNetworkDropdown', () => {
+  let wrapper;
+  let store;
+  const defaultProps = { fieldName: 'field-name' };
+  const selectedNetwork = { selfLink: '123456' };
+  const projectId = '6789';
+  const region = 'east-1';
+  const setNetwork = jest.fn();
+  const setSubnetwork = jest.fn();
+  const fetchSubnetworks = jest.fn();
+
+  const buildStore = ({ clusterDropdownState } = {}) =>
+    new Vuex.Store({
+      state: {
+        selectedNetwork,
+      },
+      actions: {
+        setNetwork,
+        setSubnetwork,
+      },
+      getters: {
+        hasZone: () => false,
+        region: () => region,
+        projectId: () => projectId,
+      },
+      modules: {
+        networks: {
+          namespaced: true,
+          state: {
+            ...createClusterDropdownState(),
+            ...(clusterDropdownState || {}),
+          },
+        },
+        subnetworks: {
+          namespaced: true,
+          actions: {
+            fetchItems: fetchSubnetworks,
+          },
+        },
+      },
+    });
+
+  const buildWrapper = (propsData = defaultProps) =>
+    shallowMount(GkeNetworkDropdown, {
+      propsData,
+      store,
+      localVue,
+    });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('sets correct field-name', () => {
+    const fieldName = 'field-name';
+
+    store = buildStore();
+    wrapper = buildWrapper({ fieldName });
+
+    expect(wrapper.find(ClusterFormDropdown).props('fieldName')).toBe(fieldName);
+  });
+
+  it('sets selected network as the dropdown value', () => {
+    store = buildStore();
+    wrapper = buildWrapper();
+
+    expect(wrapper.find(ClusterFormDropdown).props('value')).toBe(selectedNetwork);
+  });
+
+  it('maps networks store items to the dropdown items property', () => {
+    const items = [{ name: 'network' }];
+
+    store = buildStore({ clusterDropdownState: { items } });
+    wrapper = buildWrapper();
+
+    expect(wrapper.find(ClusterFormDropdown).props('items')).toBe(items);
+  });
+
+  describe('when network dropdown store is loading items', () => {
+    it('sets network dropdown as loading', () => {
+      store = buildStore({ clusterDropdownState: { isLoadingItems: true } });
+      wrapper = buildWrapper();
+
+      expect(wrapper.find(ClusterFormDropdown).props('loading')).toBe(true);
+    });
+  });
+
+  describe('when there is no selected zone', () => {
+    it('disables the network dropdown', () => {
+      store = buildStore();
+      wrapper = buildWrapper();
+
+      expect(wrapper.find(ClusterFormDropdown).props('disabled')).toBe(true);
+    });
+  });
+
+  describe('when an error occurs while loading networks', () => {
+    it('sets the network dropdown as having errors', () => {
+      store = buildStore({ clusterDropdownState: { loadingItemsError: new Error() } });
+      wrapper = buildWrapper();
+
+      expect(wrapper.find(ClusterFormDropdown).props('hasErrors')).toBe(true);
+    });
+  });
+
+  describe('when dropdown emits input event', () => {
+    beforeEach(() => {
+      store = buildStore();
+      wrapper = buildWrapper();
+      wrapper.find(ClusterFormDropdown).vm.$emit('input', selectedNetwork);
+    });
+
+    it('cleans selected subnetwork', () => {
+      expect(setSubnetwork).toHaveBeenCalledWith(expect.anything(), '', undefined);
+    });
+
+    it('dispatches the setNetwork action', () => {
+      expect(setNetwork).toHaveBeenCalledWith(expect.anything(), selectedNetwork, undefined);
+    });
+
+    it('fetches subnetworks for the selected project, region, and network', () => {
+      expect(fetchSubnetworks).toHaveBeenCalledWith(
+        expect.anything(),
+        {
+          project: projectId,
+          region,
+          network: selectedNetwork.selfLink,
+        },
+        undefined,
+      );
+    });
+  });
+});

spec/frontend/create_cluster/gke_cluster/components/gke_subnetwork_dropdown_spec.js

+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import GkeSubnetworkDropdown from '~/create_cluster/gke_cluster/components/gke_subnetwork_dropdown.vue';
+import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
+import createClusterDropdownState from '~/create_cluster/store/cluster_dropdown/state';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('GkeSubnetworkDropdown', () => {
+  let wrapper;
+  let store;
+  const defaultProps = { fieldName: 'field-name' };
+  const selectedSubnetwork = '123456';
+  const setSubnetwork = jest.fn();
+
+  const buildStore = ({ clusterDropdownState } = {}) =>
+    new Vuex.Store({
+      state: {
+        selectedSubnetwork,
+      },
+      actions: {
+        setSubnetwork,
+      },
+      getters: {
+        hasNetwork: () => false,
+      },
+      modules: {
+        subnetworks: {
+          namespaced: true,
+          state: {
+            ...createClusterDropdownState(),
+            ...(clusterDropdownState || {}),
+          },
+        },
+      },
+    });
+
+  const buildWrapper = (propsData = defaultProps) =>
+    shallowMount(GkeSubnetworkDropdown, {
+      propsData,
+      store,
+      localVue,
+    });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('sets correct field-name', () => {
+    const fieldName = 'field-name';
+
+    store = buildStore();
+    wrapper = buildWrapper({ fieldName });
+
+    expect(wrapper.find(ClusterFormDropdown).props('fieldName')).toBe(fieldName);
+  });
+
+  it('sets selected subnetwork as the dropdown value', () => {
+    store = buildStore();
+    wrapper = buildWrapper();
+
+    expect(wrapper.find(ClusterFormDropdown).props('value')).toBe(selectedSubnetwork);
+  });
+
+  it('maps subnetworks store items to the dropdown items property', () => {
+    const items = [{ name: 'subnetwork' }];
+
+    store = buildStore({ clusterDropdownState: { items } });
+    wrapper = buildWrapper();
+
+    expect(wrapper.find(ClusterFormDropdown).props('items')).toBe(items);
+  });
+
+  describe('when subnetwork dropdown store is loading items', () => {
+    it('sets subnetwork dropdown as loading', () => {
+      store = buildStore({ clusterDropdownState: { isLoadingItems: true } });
+      wrapper = buildWrapper();
+
+      expect(wrapper.find(ClusterFormDropdown).props('loading')).toBe(true);
+    });
+  });
+
+  describe('when there is no selected network', () => {
+    it('disables the subnetwork dropdown', () => {
+      store = buildStore();
+      wrapper = buildWrapper();
+
+      expect(wrapper.find(ClusterFormDropdown).props('disabled')).toBe(true);
+    });
+  });
+
+  describe('when an error occurs while loading subnetworks', () => {
+    it('sets the subnetwork dropdown as having errors', () => {
+      store = buildStore({ clusterDropdownState: { loadingItemsError: new Error() } });
+      wrapper = buildWrapper();
+
+      expect(wrapper.find(ClusterFormDropdown).props('hasErrors')).toBe(true);
+    });
+  });
+
+  describe('when dropdown emits input event', () => {
+    it('dispatches the setSubnetwork action', () => {
+      store = buildStore();
+      wrapper = buildWrapper();
+
+      wrapper.find(ClusterFormDropdown).vm.$emit('input', selectedSubnetwork);
+
+      expect(setSubnetwork).toHaveBeenCalledWith(expect.anything(), selectedSubnetwork, undefined);
+    });
+  });
+});