Add latest changes from gitlab-org/gitlab@master

3 files changed, 108 insertions, 9 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>
diff --git a/app/assets/javascripts/reports/components/report_section.vue b/app/assets/javascripts/reports/components/report_section.vue
index 45c890769a0..20b0c52dbda 100644
--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -165,21 +165,23 @@ export default {
 <template>
   <section class="media-section">
     <div class="media">
-      <status-icon :status="statusIconName" :size="24" />
-      <div class="media-body d-flex flex-align-self-center">
-        <span class="js-code-text code-text">
-          {{ headerText }}
-          <slot :name="slotName"></slot>
-
-          <popover v-if="hasPopover" :options="popoverOptions" class="prepend-left-5" />
-        </span>
+      <status-icon :status="statusIconName" :size="24" class="align-self-center" />
+      <div class="media-body d-flex flex-align-self-center align-items-center">
+        <div class="js-code-text code-text">
+          <div>
+            {{ headerText }}
+            <slot :name="slotName"></slot>
+            <popover v-if="hasPopover" :options="popoverOptions" class="prepend-left-5" />
+          </div>
+          <slot name="subHeading"></slot>
+        </div>
 
         <slot name="actionButtons"></slot>
 
         <button
           v-if="isCollapsible"
           type="button"
-          class="js-collapse-btn btn float-right btn-sm align-self-start qa-expand-report-button"
+          class="js-collapse-btn btn float-right btn-sm align-self-center qa-expand-report-button"
           @click="toggleCollapsed"
         >
           {{ collapseText }}