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"