diff options
Diffstat (limited to 'app/assets/javascripts/error_tracking_settings')
6 files changed, 29 insertions, 55 deletions
diff --git a/app/assets/javascripts/error_tracking_settings/components/app.vue b/app/assets/javascripts/error_tracking_settings/components/app.vue index 50eb3e63b7c..786abc8ce49 100644 --- a/app/assets/javascripts/error_tracking_settings/components/app.vue +++ b/app/assets/javascripts/error_tracking_settings/components/app.vue @@ -43,16 +43,7 @@ export default { 'isProjectInvalid', 'projectSelectionLabel', ]), - ...mapState([ - 'apiHost', - 'connectError', - 'connectSuccessful', - 'enabled', - 'projects', - 'selectedProject', - 'settingsLoading', - 'token', - ]), + ...mapState(['enabled', 'projects', 'selectedProject', 'settingsLoading', 'token']), }, created() { this.setInitialState({ @@ -65,15 +56,7 @@ export default { }); }, methods: { - ...mapActions([ - 'fetchProjects', - 'setInitialState', - 'updateApiHost', - 'updateEnabled', - 'updateSelectedProject', - 'updateSettings', - 'updateToken', - ]), + ...mapActions(['setInitialState', 'updateEnabled', 'updateSelectedProject', 'updateSettings']), handleSubmit() { this.updateSettings(); }, @@ -95,15 +78,7 @@ export default { s__('ErrorTracking|Active') }}</label> </div> - <error-tracking-form - :api-host="apiHost" - :connect-error="connectError" - :connect-successful="connectSuccessful" - :token="token" - @handle-connect="fetchProjects" - @update-api-host="updateApiHost" - @update-token="updateToken" - /> + <error-tracking-form /> <div class="form-group"> <project-dropdown :has-projects="hasProjects" 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 a734e8527dd..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,32 +1,20 @@ <script> -import { GlButton, GlFormInput } from '@gitlab/ui'; +import { mapActions, mapState } from 'vuex'; +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 }, - props: { - apiHost: { - type: String, - required: true, - }, - connectError: { - type: Boolean, - required: true, - }, - connectSuccessful: { - type: Boolean, - required: true, - }, - token: { - type: String, - required: true, - }, - }, + components: { GlFormInput, Icon, LoadingButton }, computed: { + ...mapState(['apiHost', 'connectError', 'connectSuccessful', 'isLoadingProjects', 'token']), tokenInputState() { return this.connectError ? false : null; }, }, + methods: { + ...mapActions(['fetchProjects', 'updateApiHost', 'updateToken']), + }, }; </script> @@ -40,8 +28,9 @@ export default { <gl-form-input id="error-tracking-api-host" :value="apiHost" + :disabled="isLoadingProjects" placeholder="https://mysentryserver.com" - @input="$emit('update-api-host', $event)" + @input="updateApiHost" /> <!-- eslint-enable @gitlab/vue-i18n/no-bare-attribute-strings --> </div> @@ -60,15 +49,17 @@ export default { id="error-tracking-token" :value="token" :state="tokenInputState" - @input="$emit('update-token', $event)" + :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="$emit('handle-connect')" - >{{ __('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, |