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

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

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

spec/frontend/error_tracking_settings/components/error_tracking_form_spec.js

@@ -2,6 +2,7 @@ import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlButton, GlFormInput } from '@gitlab/ui';
 import ErrorTrackingForm from '~/error_tracking_settings/components/error_tracking_form.vue';
+import createStore from '~/error_tracking_settings/store';
 import { defaultProps } from '../mock';
 
 const localVue = createLocalVue();
@@ -9,15 +10,18 @@ localVue.use(Vuex);
 
 describe('error tracking settings form', () => {
   let wrapper;
+  let store;
 
   function mountComponent() {
     wrapper = shallowMount(ErrorTrackingForm, {
       localVue,
+      store,
       propsData: defaultProps,
     });
   }
 
   beforeEach(() => {
+    store = createStore();
     mountComponent();
   });
 
@@ -61,7 +65,7 @@ describe('error tracking settings form', () => {
 
   describe('after a successful connection', () => {
     beforeEach(() => {
-      wrapper.setProps({ connectSuccessful: true });
+      store.state.connectSuccessful = true;
     });
 
     it('shows the success checkmark', () => {
@@ -77,7 +81,7 @@ describe('error tracking settings form', () => {
 
   describe('after an unsuccessful connection', () => {
     beforeEach(() => {
-      wrapper.setProps({ connectError: true });
+      store.state.connectError = true;
     });
 
     it('does not show the check mark', () => {