Merge branch 'psi-error-tracking-mapstate' into 'master'

Move error_tracking state closer to component

See merge request gitlab-org/gitlab!19542

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', () => {