Add latest changes from gitlab-org/gitlab@master

2 files changed, 13 insertions, 53 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..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"