Merge branch '225275-add-glcheckbox-to-squah-commits' into 'master'

Resolve "Improve "squash_before_merge" to utilize GlFormCheckbox"

See merge request gitlab-org/gitlab!48338

app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue

 <script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective, GlFormCheckbox } from '@gitlab/ui';
 import { SQUASH_BEFORE_MERGE } from '../../i18n';
 
 export default {
   components: {
     GlIcon,
+    GlFormCheckbox,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -32,32 +33,23 @@ export default {
     tooltipTitle() {
       return this.isDisabled ? this.$options.i18n.tooltipTitle : null;
     },
-    tooltipFocusable() {
-      return this.isDisabled ? '0' : null;
-    },
   },
 };
 </script>
 
 <template>
-  <div class="inline">
-    <label
+  <div class="gl-display-flex gl-align-items-center">
+    <gl-form-checkbox
       v-gl-tooltip
-      :class="{ 'gl-text-gray-400': isDisabled }"
-      :tabindex="tooltipFocusable"
-      data-testid="squashLabel"
+      :checked="value"
+      :disabled="isDisabled"
+      name="squash"
+      class="qa-squash-checkbox js-squash-checkbox gl-mb-0 gl-mr-2"
       :title="tooltipTitle"
+      @change="checked => $emit('input', checked)"
     >
-      <input
-        :checked="value"
-        :disabled="isDisabled"
-        type="checkbox"
-        name="squash"
-        class="qa-squash-checkbox js-squash-checkbox"
-        @change="$emit('input', $event.target.checked)"
-      />
       {{ $options.i18n.checkboxLabel }}
-    </label>
+    </gl-form-checkbox>
     <a
       v-if="helpPath"
       v-gl-tooltip

changelogs/unreleased/225275-add-glcheckbox-to-squah-commits.yml

+---
+title: Add GlFormCheckbox to squash commits
+merge_request: 48338
+author:
+type: changed

spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlFormCheckbox } from '@gitlab/ui';
 import SquashBeforeMerge from '~/vue_merge_request_widget/components/states/squash_before_merge.vue';
 import { SQUASH_BEFORE_MERGE } from '~/vue_merge_request_widget/i18n';
 
@@ -20,17 +21,15 @@ describe('Squash before merge component', () => {
     wrapper.destroy();
   });
 
-  const findLabel = () => wrapper.find('[data-testid="squashLabel"]');
+  const findCheckbox = () => wrapper.find(GlFormCheckbox);
 
   describe('checkbox', () => {
-    const findCheckbox = () => wrapper.find('.js-squash-checkbox');
-
     it('is unchecked if passed value prop is false', () => {
       createComponent({
         value: false,
       });
 
-      expect(findCheckbox().element.checked).toBeFalsy();
+      expect(findCheckbox().vm.$attrs.checked).toBe(false);
     });
 
     it('is checked if passed value prop is true', () => {
@@ -38,22 +37,7 @@ describe('Squash before merge component', () => {
         value: true,
       });
 
-      expect(findCheckbox().element.checked).toBeTruthy();
-    });
-
-    it('changes value on click', done => {
-      createComponent({
-        value: false,
-      });
-
-      findCheckbox().element.checked = true;
-
-      findCheckbox().trigger('change');
-
-      wrapper.vm.$nextTick(() => {
-        expect(findCheckbox().element.checked).toBeTruthy();
-        done();
-      });
+      expect(findCheckbox().vm.$attrs.checked).toBe(true);
     });
 
     it('is disabled if isDisabled prop is true', () => {
@@ -62,31 +46,12 @@ describe('Squash before merge component', () => {
         isDisabled: true,
       });
 
-      expect(findCheckbox().attributes('disabled')).toBeTruthy();
-    });
-  });
-
-  describe('label', () => {
-    describe.each`
-      isDisabled | expectation
-      ${true}    | ${'grays out text if it is true'}
-      ${false}   | ${'does not gray out text if it is false'}
-    `('isDisabled prop', ({ isDisabled, expectation }) => {
-      beforeEach(() => {
-        createComponent({
-          value: false,
-          isDisabled,
-        });
-      });
-
-      it(expectation, () => {
-        expect(findLabel().classes('gl-text-gray-400')).toBe(isDisabled);
-      });
+      expect(findCheckbox().vm.$attrs.disabled).toBe(true);
     });
   });
 
   describe('tooltip', () => {
-    const tooltipTitle = () => findLabel().attributes('title');
+    const tooltipTitle = () => findCheckbox().attributes('title');
 
     it('does not render when isDisabled is false', () => {
       createComponent({
@@ -114,7 +79,7 @@ describe('Squash before merge component', () => {
 
       const aboutLink = wrapper.find('a');
 
-      expect(aboutLink.exists()).toBeFalsy();
+      expect(aboutLink.exists()).toBe(false);
     });
 
     it('is rendered if  help path is passed', () => {
@@ -125,7 +90,7 @@ describe('Squash before merge component', () => {
 
       const aboutLink = wrapper.find('a');
 
-      expect(aboutLink.exists()).toBeTruthy();
+      expect(aboutLink.exists()).toBe(true);
     });
 
     it('should have a correct help path if passed', () => {