Add latest changes from gitlab-org/gitlab@master

8 files changed, 50 insertions, 27 deletions

diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue
index a9d9f0224e3..d6deda25752 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue
+++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue
@@ -16,9 +16,6 @@ export default {
     ]),
     ...mapState({ items: 'machineTypes' }),
     ...mapGetters(['hasZone', 'hasMachineType']),
-    allDropdownsSelected() {
-      return this.projectHasBillingEnabled && this.hasZone && this.hasMachineType;
-    },
     isDisabled() {
       return (
         this.isLoading ||
@@ -65,22 +62,10 @@ export default {
           .catch(this.fetchFailureHandler);
       }
     },
-    selectedMachineType() {
-      this.enableSubmit();
-    },
   },
   methods: {
     ...mapActions(['fetchMachineTypes']),
     ...mapActions({ setItem: 'setMachineType' }),
-    enableSubmit() {
-      if (this.allDropdownsSelected) {
-        const submitButtonEl = document.querySelector('.js-gke-cluster-creation-submit');
-
-        if (submitButtonEl) {
-          submitButtonEl.removeAttribute('disabled');
-        }
-      }
-    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_submit_button.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_submit_button.vue
new file mode 100644
index 00000000000..a7e08a5e97f
--- /dev/null
+++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_submit_button.vue
@@ -0,0 +1,18 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters(['hasValidData']),
+  },
+};
+</script>
+<template>
+  <button
+    type="submit"
+    :disabled="!hasValidData"
+    class="js-gke-cluster-creation-submit btn btn-success"
+  >
+    {{ s__('ClusterIntegration|Create Kubernetes cluster') }}
+  </button>
+</template>
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/index.js b/app/assets/javascripts/create_cluster/gke_cluster/index.js
index 729b9404b64..5a64eb09cad 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/index.js
+++ b/app/assets/javascripts/create_cluster/gke_cluster/index.js
@@ -4,6 +4,10 @@ import Flash from '~/flash';
 import GkeProjectIdDropdown from './components/gke_project_id_dropdown.vue';
 import GkeZoneDropdown from './components/gke_zone_dropdown.vue';
 import GkeMachineTypeDropdown from './components/gke_machine_type_dropdown.vue';
+import GkeSubmitButton from './components/gke_submit_button.vue';
+
+import store from './store';
+
 import * as CONSTANTS from './constants';
 
 const mountComponent = (entryPoint, component, componentName, extraProps = {}) => {
@@ -14,6 +18,7 @@ const mountComponent = (entryPoint, component, componentName, extraProps = {}) =
 
   return new Vue({
     el,
+    store,
     components: {
       [componentName]: component,
     },
@@ -50,6 +55,10 @@ const mountGkeMachineTypeDropdown = () => {
   );
 };
 
+const mountGkeSubmitButton = () => {
+  mountComponent('.js-gke-cluster-creation-submit-container', GkeSubmitButton, 'gke-submit-button');
+};
+
 const gkeDropdownErrorHandler = () => {
   Flash(CONSTANTS.GCP_API_ERROR);
 };
@@ -72,6 +81,7 @@ const initializeGapiClient = () => {
       mountGkeProjectIdDropdown();
       mountGkeZoneDropdown();
       mountGkeMachineTypeDropdown();
+      mountGkeSubmitButton();
     })
     .catch(gkeDropdownErrorHandler);
 };
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js b/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js
index f9e2e2f74fb..4d4cd223832 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js
+++ b/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js
@@ -1,3 +1,5 @@
 export const hasProject = state => Boolean(state.selectedProject.projectId);
 export const hasZone = state => Boolean(state.selectedZone);
 export const hasMachineType = state => Boolean(state.selectedMachineType);
+export const hasValidData = (state, getters) =>
+  Boolean(state.projectHasBillingEnabled) && getters.hasZone && getters.hasMachineType;
diff --git a/app/assets/javascripts/mr_notes/init_notes.js b/app/assets/javascripts/mr_notes/init_notes.js
index 622db360d1f..a942bcc13da 100644
--- a/app/assets/javascripts/mr_notes/init_notes.js
+++ b/app/assets/javascripts/mr_notes/init_notes.js
@@ -4,6 +4,7 @@ import { mapActions, mapState, mapGetters } from 'vuex';
 import store from 'ee_else_ce/mr_notes/stores';
 import notesApp from '../notes/components/notes_app.vue';
 import discussionKeyboardNavigator from '../notes/components/discussion_keyboard_navigator.vue';
+import initWidget from '../vue_merge_request_widget';
 
 export default () => {
   // eslint-disable-next-line no-new
@@ -32,11 +33,22 @@ export default () => {
       ...mapState({
         activeTab: state => state.page.activeTab,
       }),
+      isShowTabActive() {
+        return this.activeTab === 'show';
+      },
     },
     watch: {
       discussionTabCounter() {
         this.updateDiscussionTabCounter();
       },
+      isShowTabActive: {
+        handler(newVal) {
+          if (newVal) {
+            initWidget();
+          }
+        },
+        immediate: true,
+      },
     },
     created() {
       this.setActiveTab(window.mrTabs.getCurrentAction());
@@ -69,7 +81,7 @@ export default () => {
             noteableData: this.noteableData,
             notesData: this.notesData,
             userData: this.currentUserData,
-            shouldShow: this.activeTab === 'show',
+            shouldShow: this.isShowTabActive,
             helpPagePath: this.helpPagePath,
           },
         }),
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
index 1f8befc07c8..c4cc667710a 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
@@ -7,7 +7,6 @@ import initPipelines from '~/commit/pipelines/pipelines_bundle';
 import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle';
 import initSourcegraph from '~/sourcegraph';
 import initPopover from '~/mr_tabs_popover';
-import initWidget from '../../../vue_merge_request_widget';
 
 export default function() {
   new ZenMode(); // eslint-disable-line no-new
@@ -20,7 +19,6 @@ export default function() {
   new ShortcutsIssuable(true); // eslint-disable-line no-new
   handleLocationHash();
   howToMerge();
-  initWidget();
   initSourcegraph();
 
   const tabHighlightEl = document.querySelector('.js-tabs-feature-highlight');
diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js
index 0cedbdbdfef..7a9ef7e496e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/index.js
@@ -5,6 +5,8 @@ import Translate from '../vue_shared/translate';
 Vue.use(Translate);
 
 export default () => {
+  if (gl.mrWidget) return;
+
   gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;
 
   const vm = new Vue(MrWidgetOptions);
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 38a7c262b3e..a18da7386f6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -135,15 +135,11 @@ export default {
     },
   },
   mounted() {
-    if (gon && gon.features && gon.features.asyncMrWidget) {
-      MRWidgetService.fetchInitialData()
-        .then(({ data }) => this.initWidget(data))
-        .catch(() =>
-          createFlash(__('Unable to load the merge request widget. Try reloading the page.')),
-        );
-    } else {
-      this.initWidget();
-    }
+    MRWidgetService.fetchInitialData()
+      .then(({ data }) => this.initWidget(data))
+      .catch(() =>
+        createFlash(__('Unable to load the merge request widget. Try reloading the page.')),
+      );
   },
   beforeDestroy() {
     eventHub.$off('mr.discussion.updated', this.checkStatus);