Fix duplicate draft help text

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/348824

Changelog: fixed

app/assets/javascripts/issuable/issuable_form.js

@@ -77,6 +77,7 @@ export default class IssuableForm {
     this.initAutosave();
     this.form.on('submit', this.handleSubmit);
     this.form.on('click', '.btn-cancel', this.resetAutosave);
+    this.form.find('.js-unwrap-on-load').unwrap();
     this.initWip();
 
     const $issuableDueDate = $('#issuable-due-date');

app/assets/stylesheets/framework/forms.scss

@@ -150,6 +150,10 @@ label {
   margin-bottom: 0;
   margin-top: #{$grid-size / 2};
   font-size: $gl-font-size;
+
+  .invisible {
+    visibility: hidden;
+  }
 }
 
 .gl-field-error,

app/views/shared/issuable/form/_title.html.haml

@@ -14,13 +14,15 @@
 
   - if issuable.respond_to?(:work_in_progress?)
     .form-text.text-muted
-      .js-wip-explanation
+      .js-wip-explanation{ style: "display: none;" }
         = remove_wip_text
       .js-no-wip-explanation
         - if has_wip_commits
           = _('It looks like you have some draft commits in this branch.')
           %br
-        = add_wip_text
+        .invisible
+          .js-unwrap-on-load
+            = add_wip_text
 
   - if no_issuable_templates && can?(current_user, :push_code, issuable.project)
     = render 'shared/issuable/form/default_templates'