Update error tracking settings UI

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

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import ErrorTrackingForm from './error_tracking_form.vue';
 import ProjectDropdown from './project_dropdown.vue';
 
 export default {
-  components: { ProjectDropdown, ErrorTrackingForm, GlButton },
+  components: {
+    ErrorTrackingForm,
+    GlButton,
+    GlFormCheckbox,
+    GlFormGroup,
+    ProjectDropdown,
+  },
   props: {
     initialApiHost: {
       type: String,
@@ -66,18 +72,18 @@ export default {
 
 <template>
   <div>
-    <div class="form-check form-group">
-      <input
+    <gl-form-group
+      :label="s__('ErrorTracking|Enable error tracking')"
+      label-for="error-tracking-enabled"
+    >
+      <gl-form-checkbox
         id="error-tracking-enabled"
         :checked="enabled"
-        class="form-check-input"
-        type="checkbox"
-        @change="updateEnabled($event.target.checked)"
-      />
-      <label class="form-check-label" for="error-tracking-enabled">{{
-        s__('ErrorTracking|Active')
-      }}</label>
-    </div>
+        @change="updateEnabled($event)"
+      >
+        {{ s__('ErrorTracking|Active') }}
+      </gl-form-checkbox>
+    </gl-form-group>
     <error-tracking-form />
     <div class="form-group">
       <project-dropdown
@@ -95,7 +101,7 @@ export default {
     <gl-button
       :disabled="settingsLoading"
       class="js-error-tracking-button"
-      variant="success"
+      variant="confirm"
       @click="handleSubmit"
     >
       {{ __('Save changes') }}

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

@@ -70,7 +70,7 @@ export default {
             v-show="connectSuccessful"
             class="js-error-tracking-connect-success gl-ml-2 text-success align-middle"
             :aria-label="__('Projects Successfully Retrieved')"
-            name="check-circle"
+            name="check"
           />
         </div>
       </div>

app/views/projects/settings/operations/_error_tracking.html.haml

@@ -9,8 +9,8 @@
     %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
       = _('Expand')
     %p
-      = _('To link Sentry to GitLab, enter your Sentry URL and Auth Token.')
-      = link_to _('More information'), help_page_path('operations/error_tracking'), target: '_blank', rel: 'noopener noreferrer'
+      = _('Link Sentry to GitLab to discover and view the errors your application generates.')
+      = link_to _('Learn more.'), help_page_path('operations/error_tracking'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     .js-error-tracking-form{ data: { list_projects_endpoint: project_error_tracking_projects_path(@project, format: :json),
         operations_settings_endpoint: project_settings_operations_path(@project),

changelogs/unreleased/error-tracking-settings-clean-up.yml

+---
+title: Update error tracking settings to use better copy and correct colors
+merge_request: 60627
+author:
+type: changed

locale/gitlab.pot

@@ -12932,6 +12932,9 @@ msgstr ""
 msgid "ErrorTracking|Connection failed. Check Auth Token and try again."
 msgstr ""
 
+msgid "ErrorTracking|Enable error tracking"
+msgstr ""
+
 msgid "ErrorTracking|If you self-host Sentry, enter your Sentry instance's full URL. If you use Sentry's hosted solution, enter https://sentry.io"
 msgstr ""
 
@@ -19390,6 +19393,9 @@ msgstr ""
 msgid "Link Prometheus monitoring to GitLab."
 msgstr ""
 
+msgid "Link Sentry to GitLab to discover and view the errors your application generates."
+msgstr ""
+
 msgid "Link an external wiki from the project's sidebar. %{docs_link}"
 msgstr ""
 
@@ -33447,9 +33453,6 @@ msgstr ""
 msgid "To learn more about this project, read %{link_to_wiki}."
 msgstr ""
 
-msgid "To link Sentry to GitLab, enter your Sentry URL and Auth Token."
-msgstr ""
-
 msgid "To move or copy an entire GitLab project from another GitLab installation to this one, navigate to the original project's settings page, generate an export file, and upload it here."
 msgstr ""
 

spec/frontend/error_tracking_settings/components/error_tracking_form_spec.js

@@ -33,11 +33,12 @@ describe('error tracking settings form', () => {
 
   describe('an empty form', () => {
     it('is rendered', () => {
-      expect(wrapper.findAll(GlFormInput).length).toBe(2);
-      expect(wrapper.find(GlFormInput).attributes('id')).toBe('error-tracking-api-host');
-      expect(wrapper.findAll(GlFormInput).at(1).attributes('id')).toBe('error-tracking-token');
-
-      expect(wrapper.findAll(GlButton).exists()).toBe(true);
+      expect(wrapper.findAllComponents(GlFormInput).length).toBe(2);
+      expect(wrapper.findComponent(GlFormInput).attributes('id')).toBe('error-tracking-api-host');
+      expect(wrapper.findAllComponents(GlFormInput).at(1).attributes('id')).toBe(
+        'error-tracking-token',
+      );
+      expect(wrapper.findAllComponents(GlButton).exists()).toBe(true);
     });
 
     it('is rendered with labels and placeholders', () => {
@@ -51,7 +52,7 @@ describe('error tracking settings form', () => {
       );
 
       expect(pageText).not.toContain('Connection failed. Check Auth Token and try again.');
-      expect(wrapper.findAll(GlFormInput).at(0).attributes('placeholder')).toContain(
+      expect(wrapper.findAllComponents(GlFormInput).at(0).attributes('placeholder')).toContain(
         'https://mysentryserver.com',
       );
     });
@@ -63,7 +64,7 @@ describe('error tracking settings form', () => {
     });
 
     it('shows loading spinner', () => {
-      const buttonEl = wrapper.find(GlButton);
+      const buttonEl = wrapper.findComponent(GlButton);
 
       expect(buttonEl.props('loading')).toBe(true);
       expect(buttonEl.text()).toBe('Connecting');

spec/views/projects/settings/operations/show.html.haml_spec.rb

@@ -47,7 +47,7 @@ RSpec.describe 'projects/settings/operations/show' do
         render
 
         expect(rendered).to have_content _('Error tracking')
-        expect(rendered).to have_content _('To link Sentry to GitLab, enter your Sentry URL and Auth Token')
+        expect(rendered).to have_content _('Link Sentry to GitLab to discover and view the errors your application generates.')
       end
     end
   end