diff options
Diffstat (limited to 'app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue')
-rw-r--r-- | app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue | 35 |
1 files changed, 10 insertions, 25 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 a734e8527dd..716acf2d676 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,19 @@ <script> +import { mapActions, mapState } from 'vuex'; import { GlButton, GlFormInput } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.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, - }, - }, computed: { + ...mapState(['apiHost', 'connectError', 'connectSuccessful', 'token']), tokenInputState() { return this.connectError ? false : null; }, }, + methods: { + ...mapActions(['fetchProjects', 'updateApiHost', 'updateToken']), + }, }; </script> @@ -41,7 +28,7 @@ export default { id="error-tracking-api-host" :value="apiHost" placeholder="https://mysentryserver.com" - @input="$emit('update-api-host', $event)" + @input="updateApiHost" /> <!-- eslint-enable @gitlab/vue-i18n/no-bare-attribute-strings --> </div> @@ -60,15 +47,13 @@ export default { id="error-tracking-token" :value="token" :state="tokenInputState" - @input="$emit('update-token', $event)" + @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 - > + <gl-button class="js-error-tracking-connect prepend-left-5" @click="fetchProjects">{{ + __('Connect') + }}</gl-button> <icon v-show="connectSuccessful" class="js-error-tracking-connect-success prepend-left-5 text-success align-middle" |