Merge branch 'comment-form-migrate-resolve-checkbox' into 'master'

Comment form: migrate resolve thread checkbox See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/116768 Merged-by: Frédéric Caplette <fcaplette@gitlab.com> Approved-by: Artur Fedorov <afedorov@gitlab.com> Approved-by: Annabel Dunstone Gray <annabel.m.gray@gmail.com> Approved-by: Frédéric Caplette <fcaplette@gitlab.com> Reviewed-by: Artur Fedorov <afedorov@gitlab.com> Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

Merge branch 'comment-form-migrate-resolve-checkbox' into 'master'
Comment form: migrate resolve thread checkbox See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/116768 Merged-by: Frédéric Caplette <fcaplette@gitlab.com> Approved-by: Artur Fedorov <afedorov@gitlab.com> Approved-by: Annabel Dunstone Gray <annabel.m.gray@gmail.com> Approved-by: Frédéric Caplette <fcaplette@gitlab.com> Reviewed-by: Artur Fedorov <afedorov@gitlab.com> Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>
1d773bbe · Frédéric Caplette · 187b4032 · facffcc1 · 1d773bbe · 1d773bbe
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
 <script>
-import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlLink, GlFormCheckbox } from '@gitlab/ui';
 import { mapGetters, mapActions, mapState } from 'vuex';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -20,6 +20,7 @@ export default {
    GlButton,
    GlSprintf,
    GlLink,
+    GlFormCheckbox,
  },
  mixins: [issuableStateMixin, resolvable, glFeaturesFlagMixin()],
  props: {
@@ -372,12 +373,14 @@ export default {
          <p v-if="showResolveDiscussionToggle">
            <label>
              <template v-if="discussionResolved">
-                <input v-model="isUnresolving" type="checkbox" class="js-unresolve-checkbox" />
+                <gl-form-checkbox v-model="isUnresolving" class="js-unresolve-checkbox">
-                {{ __('Unresolve thread') }}
+                  {{ __('Unresolve thread') }}
+                </gl-form-checkbox>
              </template>
              <template v-else>
-                <input v-model="isResolving" type="checkbox" class="js-resolve-checkbox" />
+                <gl-form-checkbox v-model="isResolving" class="js-resolve-checkbox">
-                {{ __('Resolve thread') }}
+                  {{ __('Resolve thread') }}
+                </gl-form-checkbox>
              </template>
            </label>
          </p>

--- a/spec/frontend/notes/components/note_form_spec.js
+++ b/spec/frontend/notes/components/note_form_spec.js
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlFormCheckbox } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
 import NoteForm from '~/notes/components/note_form.vue';
@@ -234,7 +234,7 @@ describe('issue_note_form component', () => {
    });
    it('shows resolve checkbox', () => {
-      expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(true);
+      expect(wrapper.findComponent(GlFormCheckbox).exists()).toBe(true);
    });
    it('hides resolve checkbox', async () => {
@@ -253,7 +253,7 @@ describe('issue_note_form component', () => {
        },
      });
-      expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(false);
+      expect(wrapper.findComponent(GlFormCheckbox).exists()).toBe(false);
    });
    it('hides actions for commits', async () => {