Move error_tracking state closer to component

Rather than passing a bunch of store data to error_tracking via
the parent component, use Vuex methods in the component directly
This means changes to the error tracking form won't also require
props changes and changes to the parent component

app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue

 <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"

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 }) => {

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';

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;
+  },
 };

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,

changelogs/unreleased/31411-add-loading-indicator-when-connecting-to-error-tracking-server.yml

+---
+title: Add loading icon to error tracking settings page
+merge_request: 19539
+author:
+type: changed

locale/gitlab.pot

@@ -4452,6 +4452,9 @@ msgstr ""
 msgid "Connect your external repositories, and CI/CD pipelines will run for new commits. A GitLab project will be created with only CI/CD features enabled."
 msgstr ""
 
+msgid "Connecting"
+msgstr ""
+
 msgid "Connecting to terminal sync service"
 msgstr ""
 

spec/frontend/error_tracking_settings/components/error_tracking_form_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { GlButton, GlFormInput } from '@gitlab/ui';
+import { GlFormInput } from '@gitlab/ui';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import ErrorTrackingForm from '~/error_tracking_settings/components/error_tracking_form.vue';
 import createStore from '~/error_tracking_settings/store';
 import { defaultProps } from '../mock';
@@ -42,7 +43,7 @@ describe('error tracking settings form', () => {
           .attributes('id'),
       ).toBe('error-tracking-token');
 
-      expect(wrapper.findAll(GlButton).exists()).toBe(true);
+      expect(wrapper.findAll(LoadingButton).exists()).toBe(true);
     });
 
     it('is rendered with labels and placeholders', () => {
@@ -63,6 +64,18 @@ describe('error tracking settings form', () => {
     });
   });
 
+  describe('loading projects', () => {
+    beforeEach(() => {
+      store.state.isLoadingProjects = true;
+    });
+
+    it('shows loading spinner', () => {
+      const { label, loading } = wrapper.find(LoadingButton).props();
+      expect(loading).toBe(true);
+      expect(label).toBe('Connecting');
+    });
+  });
+
   describe('after a successful connection', () => {
     beforeEach(() => {
       store.state.connectSuccessful = true;

spec/frontend/error_tracking_settings/store/actions_spec.js

@@ -69,7 +69,14 @@ describe('error tracking settings actions', () => {
     });
 
     it('should request projects correctly', done => {
-      testAction(actions.requestProjects, null, state, [{ type: types.RESET_CONNECT }], [], done);
+      testAction(
+        actions.requestProjects,
+        null,
+        state,
+        [{ type: types.SET_PROJECTS_LOADING, payload: true }, { type: types.RESET_CONNECT }],
+        [],
+        done,
+      );
     });
 
     it('should receive projects correctly', done => {
@@ -81,6 +88,7 @@ describe('error tracking settings actions', () => {
         [
           { type: types.UPDATE_CONNECT_SUCCESS },
           { type: types.RECEIVE_PROJECTS, payload: testPayload },
+          { type: types.SET_PROJECTS_LOADING, payload: false },
         ],
         [],
         done,
@@ -93,7 +101,11 @@ describe('error tracking settings actions', () => {
         actions.receiveProjectsError,
         testPayload,
         state,
-        [{ type: types.UPDATE_CONNECT_ERROR }, { type: types.CLEAR_PROJECTS }],
+        [
+          { type: types.UPDATE_CONNECT_ERROR },
+          { type: types.CLEAR_PROJECTS },
+          { type: types.SET_PROJECTS_LOADING, payload: false },
+        ],
         [],
         done,
       );