Migrate checkboxes on user preferences page to be Pajamas compliant

Part of Pajamas migration day.

Changelog: changed

app/assets/javascripts/profile/preferences/components/integration_view.vue

 <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,14 +47,13 @@ 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">
+    </template>
     <!-- Necessary for Rails to receive the value when not checked -->
     <input
       :name="formName"
@@ -61,21 +61,11 @@ export default {
       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-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>

app/views/profiles/preferences/show.html.haml

@@ -8,7 +8,7 @@
 - Gitlab::Themes.each do |theme|
   = stylesheet_link_tag "themes/#{theme.css_filename}" if theme.css_filename
 
-= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { id: "profile-preferences-form" } do |f|
+= gitlab_ui_form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { id: "profile-preferences-form" } do |f|
   .row.gl-mt-3.js-preferences-form.js-search-settings-section
     .col-lg-4.application-theme#navigation-theme
       %h4.gl-mt-0
@@ -87,27 +87,19 @@
         = f.select :project_view, project_view_choices, {}, class: 'select2'
         .form-text.text-muted
           = s_('Preferences|Choose what content you want to see on a project’s overview page.')
-      .form-group.form-check
-        = f.check_box :render_whitespace_in_code, class: 'form-check-input'
-        = f.label :render_whitespace_in_code, class: 'form-check-label' do
-          = s_('Preferences|Render whitespace characters in the Web IDE')
-      .form-group.form-check
-        = f.check_box :show_whitespace_in_diffs, class: 'form-check-input'
-        = f.label :show_whitespace_in_diffs, class: 'form-check-label' do
-          = s_('Preferences|Show whitespace changes in diffs')
-      .form-group.form-check
-        = f.check_box :view_diffs_file_by_file, class: 'form-check-input'
-        = f.label :view_diffs_file_by_file, class: 'form-check-label' do
-          = s_("Preferences|Show one file at a time on merge request's Changes tab")
-        .form-text.text-muted
-          = s_("Preferences|Instead of all the files changed, show only one file at a time. To switch between files, use the file browser.")
-      .form-group.form-check
-        = f.check_box :markdown_surround_selection, class: 'form-check-input'
-        = f.label :markdown_surround_selection, class: 'form-check-label' do
-          = s_('Preferences|Surround text selection when typing quotes or brackets')
-        .form-text.text-muted
-          - supported_characters = %w(" ' ` \( [ { < * _).map {|char| "<code>#{char}</code>" }.join(', ')
-          = sprintf(s_( "Preferences|When you type in a description or comment box, selected text is surrounded by the corresponding character after typing one of the following characters: %{supported_characters}."), { supported_characters: supported_characters }).html_safe
+      .form-group
+        = f.gitlab_ui_checkbox_component :render_whitespace_in_code, s_('Preferences|Render whitespace characters in the Web IDE')
+      .form-group
+        = f.gitlab_ui_checkbox_component :show_whitespace_in_diffs, s_('Preferences|Show whitespace changes in diffs')
+      .form-group
+        = f.gitlab_ui_checkbox_component :view_diffs_file_by_file,
+          s_("Preferences|Show one file at a time on merge request's Changes tab"),
+          help_text: s_("Preferences|Instead of all the files changed, show only one file at a time. To switch between files, use the file browser.")
+      .form-group
+        - supported_characters = %w(" ' ` &#40; [ { < * _).map {|char| "<code>#{char}</code>" }.join(', ')
+        = f.gitlab_ui_checkbox_component :markdown_surround_selection,
+          s_('Preferences|Surround text selection when typing quotes or brackets'),
+          help_text: sprintf(s_( "Preferences|When you type in a description or comment box, selected text is surrounded by the corresponding character after typing one of the following characters: %{supported_characters}."), { supported_characters: supported_characters }).html_safe
 
       .form-group
         = f.label :tab_width, s_('Preferences|Tab width'), class: 'label-bold'
@@ -151,16 +143,12 @@
         = succeed '.' do
           = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'time-preferences'), target: '_blank', rel: 'noopener noreferrer'
     .col-lg-8
-      .form-group.form-check
-        = f.check_box :time_display_relative, class: 'form-check-input'
-        = f.label :time_display_relative, class: 'form-check-label' do
-          = s_('Preferences|Use relative times')
-        .form-text.text-muted
-          = s_('Preferences|For example: 30 minutes ago.')
+      .form-group
+        = f.gitlab_ui_checkbox_component :time_display_relative,
+          s_('Preferences|Use relative times'),
+          help_text: s_('Preferences|For example: 30 minutes ago.')
       - if Feature.enabled?(:user_time_settings)
-        .form-group.form-check
-          = f.check_box :time_format_in_24h, class: 'form-check-input'
-          = f.label :time_format_in_24h, class: 'form-check-label' do
-            = s_('Preferences|Display time in 24-hour format')
+        .form-group
+          = f.gitlab_ui_checkbox_component :time_format_in_24h, s_('Preferences|Display time in 24-hour format')
 
   #js-profile-preferences-app{ data: data_attributes }

spec/frontend/profile/preferences/components/integration_view_spec.js

-import { GlFormText } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlFormGroup } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import IntegrationView from '~/profile/preferences/components/integration_view.vue';
@@ -21,7 +21,7 @@ describe('IntegrationView component', () => {
 
   function createComponent(options = {}) {
     const { props = {}, provide = {} } = options;
-    return shallowMount(IntegrationView, {
+    return mountExtended(IntegrationView, {
       provide: {
         userFields,
         ...provide,
@@ -33,28 +33,20 @@ describe('IntegrationView component', () => {
     });
   }
 
-  function findCheckbox() {
-    return wrapper.find('[data-testid="profile-preferences-integration-checkbox"]');
-  }
-  function findFormGroup() {
-    return wrapper.find('[data-testid="profile-preferences-integration-form-group"]');
-  }
-  function findHiddenField() {
-    return wrapper.find('[data-testid="profile-preferences-integration-hidden-field"]');
-  }
-  function findFormGroupLabel() {
-    return wrapper.find('[data-testid="profile-preferences-integration-form-group"] label');
-  }
+  const findCheckbox = () => wrapper.findByLabelText(new RegExp(defaultProps.config.label));
+  const findFormGroup = () => wrapper.findComponent(GlFormGroup);
+  const findHiddenField = () =>
+    wrapper.findByTestId('profile-preferences-integration-hidden-field');
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  it('should render the title correctly', () => {
+  it('should render the form group legend correctly', () => {
     wrapper = createComponent();
 
-    expect(wrapper.find('label.label-bold').text()).toBe('Foo');
+    expect(wrapper.findByText(defaultProps.config.title).exists()).toBe(true);
   });
 
   it('should render the form correctly', () => {
@@ -106,13 +98,6 @@ describe('IntegrationView component', () => {
   it('should render the help text', () => {
     wrapper = createComponent();
 
-    expect(wrapper.find(GlFormText).exists()).toBe(true);
     expect(wrapper.find(IntegrationHelpText).exists()).toBe(true);
   });
-
-  it('should render the label correctly', () => {
-    wrapper = createComponent();
-
-    expect(findFormGroupLabel().text()).toBe('Enable foo');
-  });
 });