1 files changed, 23 insertions, 33 deletions
diff --git a/app/assets/javascripts/profile/preferences/components/integration_view.vue b/app/assets/javascripts/profile/preferences/components/integration_view.vue
index c2952629a5d..9924f248b89 100644
--- a/app/assets/javascripts/profile/preferences/components/integration_view.vue
+++ b/app/assets/javascripts/profile/preferences/components/integration_view.vue
@@ -1,13 +1,14 @@
 <script>
-import { GlFormText, GlIcon, GlLink } from '@gitlab/ui';
+import { GlIcon, GlLink, GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
 import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue';
 
 export default {
   name: 'IntegrationView',
   components: {
-    GlFormText,
     GlIcon,
     GlLink,
+    GlFormGroup,
+    GlFormCheckbox,
     IntegrationHelpText,
   },
   inject: ['userFields'],
@@ -31,7 +32,7 @@ export default {
   },
   data() {
     return {
-      isEnabled: this.userFields[this.config.formName],
+      isEnabled: this.userFields[this.config.formName] ? '1' : '0',
     };
   },
   computed: {
@@ -46,36 +47,25 @@ export default {
 </script>
 
 <template>
-  <div>
-    <label class="label-bold">
+  <gl-form-group>
+    <template #label>
       {{ config.title }}
-    </label>
-    <gl-link class="has-tooltip" title="More information" :href="helpLink">
-      <gl-icon name="question-o" class="vertical-align-middle" />
-    </gl-link>
-    <div class="form-group form-check" data-testid="profile-preferences-integration-form-group">
-      <!-- Necessary for Rails to receive the value when not checked -->
-      <input
-        :name="formName"
-        type="hidden"
-        value="0"
-        data-testid="profile-preferences-integration-hidden-field"
-      />
-      <input
-        :id="formId"
-        v-model="isEnabled"
-        type="checkbox"
-        class="form-check-input"
-        :name="formName"
-        value="1"
-        data-testid="profile-preferences-integration-checkbox"
-      />
-      <label class="form-check-label" :for="formId">
-        {{ config.label }}
-      </label>
-      <gl-form-text tag="div">
+      <gl-link class="has-tooltip" title="More information" :href="helpLink">
+        <gl-icon name="question-o" class="vertical-align-middle" />
+      </gl-link>
+    </template>
+    <!-- Necessary for Rails to receive the value when not checked -->
+    <input
+      :name="formName"
+      type="hidden"
+      value="0"
+      data-testid="profile-preferences-integration-hidden-field"
+    />
+    <gl-form-checkbox :id="formId" :checked="isEnabled" :name="formName" value="1"
+      >{{ config.label }}
+      <template #help>
         <integration-help-text :message="message" :message-url="messageUrl" />
-      </gl-form-text>
-    </div>
-  </div>
+      </template>
+    </gl-form-checkbox>
+  </gl-form-group>
 </template>