From 72344879b9263f3522783563d5d69b4308af1d9c Mon Sep 17 00:00:00 2001
From: Mughees Pervaiz <mr.mb@tuta.io>
Date: Wed, 19 Apr 2023 14:11:17 +0000
Subject: [PATCH] Migrate new branch to Pajamas::ButtonComponent

---
 .../issues/create_merge_request_dropdown.js        |  6 +++---
 app/views/projects/issues/_new_branch.html.haml    | 14 +++++++-------
 locale/gitlab.pot                                  |  3 +++
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/issues/create_merge_request_dropdown.js b/app/assets/javascripts/issues/create_merge_request_dropdown.js
index c821c18bcb905..de0334b4ffe34 100644
--- a/app/assets/javascripts/issues/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/issues/create_merge_request_dropdown.js
@@ -432,7 +432,7 @@ export default class CreateMergeRequestDropdown {
     let xhr = null;
     event.preventDefault();
 
-    if (isConfidentialIssue() && !event.target.classList.contains('js-create-target')) {
+    if (isConfidentialIssue() && !event.currentTarget.classList.contains('js-create-target')) {
       this.droplab.hooks.forEach((hook) => hook.list.toggle());
 
       return;
@@ -442,9 +442,9 @@ export default class CreateMergeRequestDropdown {
       return;
     }
 
-    if (event.target.dataset.action === CREATE_MERGE_REQUEST) {
+    if (event.currentTarget.dataset.action === CREATE_MERGE_REQUEST) {
       xhr = this.createMergeRequest();
-    } else if (event.target.dataset.action === CREATE_BRANCH) {
+    } else if (event.currentTarget.dataset.action === CREATE_BRANCH) {
       xhr = this.createBranch();
     }
 
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index f9798d25b0639..90d99d51d292a 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -11,18 +11,18 @@
 
   .create-mr-dropdown-wrap.d-inline-block.full-width-mobile.js-create-mr{ data: { project_path: @project.full_path, project_id: @project.id, can_create_path: can_create_path, create_mr_path: create_mr_path(from: @issue.to_branch_name, source_project: @project, to: @project.default_branch, mr_params: { issue_iid: @issue.iid }), create_branch_path: create_branch_path, refs_path: refs_path, is_confidential: can_create_confidential_merge_request?.to_s } }
     .btn-group.unavailable
-      %button.gl-button.btn{ type: 'button', disabled: 'disabled' }
+      = render Pajamas::ButtonComponent.new(button_options: { disabled: 'disabled' }) do
         = gl_loading_icon(inline: true, css_class: 'js-create-mr-spinner gl-button-icon gl-display-none')
         %span.text
-          Checking branch availability…
+          = _('Checking branch availability…')
+
 
     .btn-group.available.hidden
-      %button.gl-button.btn.js-create-merge-request.btn-confirm{ type: 'button', data: { action: data_action } }
-        = gl_loading_icon(css_class: 'js-create-mr-spinner js-spinner gl-mr-2 gl-display-none')
+      = render Pajamas::ButtonComponent.new(variant: :confirm, button_options: { class: 'js-create-merge-request', data: { action: data_action } }) do
+        = gl_loading_icon(inline: true , css_class: 'js-create-mr-spinner js-spinner gl-display-none')
         = value
 
-      %button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.create-merge-request-dropdown-toggle.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
-        = sprite_icon('chevron-down')
+      = render Pajamas::ButtonComponent.new(variant: :confirm, icon: 'chevron-down', button_options: { class: 'js-dropdown-toggle dropdown-toggle create-merge-request-dropdown-toggle', data: { 'dropdown-trigger': '#create-merge-request-dropdown', display: 'static' } })
 
       .droplab-dropdown
         %ul#create-merge-request-dropdown.create-merge-request-dropdown-menu.dropdown-menu.dropdown-menu-right.gl-show-field-errors{ class: ("create-confidential-merge-request-dropdown-menu" if can_create_confidential_merge_request?), data: { dropdown: true } }
@@ -57,7 +57,7 @@
               %span.js-ref-message.form-text
 
             .form-group
-              %button.btn.gl-button.btn-confirm.js-create-target{ type: 'button', data: { action: 'create-mr' } }
+              = render Pajamas::ButtonComponent.new(variant: :confirm, button_options: { class: 'js-create-target', data: { action: 'create-mr' } }) do
                 = create_mr_text
 
             - if can_create_confidential_merge_request?
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 4da919d9ac604..2555e21816465 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8785,6 +8785,9 @@ msgstr ""
 msgid "Checking branch availability..."
 msgstr ""
 
+msgid "Checking branch availability…"
+msgstr ""
+
 msgid "Checking group path availability..."
 msgstr ""
 
-- 
GitLab