Add latest changes from gitlab-org/gitlab@master

5 files changed, 20 insertions, 6 deletions

diff --git a/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue b/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue
index 716acf2d676..d86116aa315 100644
--- a/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue
+++ b/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue
@@ -1,12 +1,13 @@
 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlButton, GlFormInput } from '@gitlab/ui';
+import { GlFormInput } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
 
 export default {
-  components: { GlButton, GlFormInput, Icon },
+  components: { GlFormInput, Icon, LoadingButton },
   computed: {
-    ...mapState(['apiHost', 'connectError', 'connectSuccessful', 'token']),
+    ...mapState(['apiHost', 'connectError', 'connectSuccessful', 'isLoadingProjects', 'token']),
     tokenInputState() {
       return this.connectError ? false : null;
     },
@@ -27,6 +28,7 @@ export default {
           <gl-form-input
             id="error-tracking-api-host"
             :value="apiHost"
+            :disabled="isLoadingProjects"
             placeholder="https://mysentryserver.com"
             @input="updateApiHost"
           />
@@ -47,13 +49,17 @@ export default {
             id="error-tracking-token"
             :value="token"
             :state="tokenInputState"
+            :disabled="isLoadingProjects"
             @input="updateToken"
           />
         </div>
         <div class="col-4 col-md-3 gl-pl-0">
-          <gl-button class="js-error-tracking-connect prepend-left-5" @click="fetchProjects">{{
-            __('Connect')
-          }}</gl-button>
+          <loading-button
+            class="js-error-tracking-connect prepend-left-5 d-inline-flex"
+            :label="isLoadingProjects ? __('Connecting') : __('Connect')"
+            :loading="isLoadingProjects"
+            @click="fetchProjects"
+          />
           <icon
             v-show="connectSuccessful"
             class="js-error-tracking-connect-success prepend-left-5 text-success align-middle"
diff --git a/app/assets/javascripts/error_tracking_settings/store/actions.js b/app/assets/javascripts/error_tracking_settings/store/actions.js
index 95105797807..6b540ea7dfd 100644
--- a/app/assets/javascripts/error_tracking_settings/store/actions.js
+++ b/app/assets/javascripts/error_tracking_settings/store/actions.js
@@ -6,17 +6,20 @@ import { transformFrontendSettings } from '../utils';
 import * as types from './mutation_types';
 
 export const requestProjects = ({ commit }) => {
+  commit(types.SET_PROJECTS_LOADING, true);
   commit(types.RESET_CONNECT);
 };
 
 export const receiveProjectsSuccess = ({ commit }, projects) => {
   commit(types.UPDATE_CONNECT_SUCCESS);
   commit(types.RECEIVE_PROJECTS, projects);
+  commit(types.SET_PROJECTS_LOADING, false);
 };
 
 export const receiveProjectsError = ({ commit }) => {
   commit(types.UPDATE_CONNECT_ERROR);
   commit(types.CLEAR_PROJECTS);
+  commit(types.SET_PROJECTS_LOADING, false);
 };
 
 export const fetchProjects = ({ dispatch, state }) => {
diff --git a/app/assets/javascripts/error_tracking_settings/store/mutation_types.js b/app/assets/javascripts/error_tracking_settings/store/mutation_types.js
index b4f8a237947..bf3df383ddc 100644
--- a/app/assets/javascripts/error_tracking_settings/store/mutation_types.js
+++ b/app/assets/javascripts/error_tracking_settings/store/mutation_types.js
@@ -9,3 +9,4 @@ export const UPDATE_ENABLED = 'UPDATE_ENABLED';
 export const UPDATE_SELECTED_PROJECT = 'UPDATE_SELECTED_PROJECT';
 export const UPDATE_SETTINGS_LOADING = 'UPDATE_SETTINGS_LOADING';
 export const UPDATE_TOKEN = 'UPDATE_TOKEN';
+export const SET_PROJECTS_LOADING = 'SET_PROJECTS_LOADING';
diff --git a/app/assets/javascripts/error_tracking_settings/store/mutations.js b/app/assets/javascripts/error_tracking_settings/store/mutations.js
index 4089d1ee94e..133f25264b9 100644
--- a/app/assets/javascripts/error_tracking_settings/store/mutations.js
+++ b/app/assets/javascripts/error_tracking_settings/store/mutations.js
@@ -58,4 +58,7 @@ export default {
     state.connectSuccessful = false;
     state.connectError = true;
   },
+  [types.SET_PROJECTS_LOADING](state, loading) {
+    state.isLoadingProjects = loading;
+  },
 };
diff --git a/app/assets/javascripts/error_tracking_settings/store/state.js b/app/assets/javascripts/error_tracking_settings/store/state.js
index 98219d33f4d..ab616f11e83 100644
--- a/app/assets/javascripts/error_tracking_settings/store/state.js
+++ b/app/assets/javascripts/error_tracking_settings/store/state.js
@@ -3,6 +3,7 @@ export default () => ({
   enabled: false,
   token: '',
   projects: [],
+  isLoadingProjects: false,
   selectedProject: null,
   settingsLoading: false,
   connectSuccessful: false,