Add latest changes from gitlab-org/gitlab@master

2 files changed, 97 insertions, 0 deletions

diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_network_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_network_dropdown.vue
new file mode 100644
index 00000000000..12b6070a79a
--- /dev/null
+++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_network_dropdown.vue
@@ -0,0 +1,53 @@
+<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>
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_subnetwork_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_subnetwork_dropdown.vue
new file mode 100644
index 00000000000..ec7889e2907
--- /dev/null
+++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_subnetwork_dropdown.vue
@@ -0,0 +1,44 @@
+<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>