From aebbf990963881fd4683e9a0900013f41e005a05 Mon Sep 17 00:00:00 2001
From: Silin Dmitry <true.litry@gmail.com>
Date: Wed, 1 May 2024 21:21:16 +0300
Subject: [PATCH] Added highlighting of incorrect branch name on new branch
 page

Changelog: changed
---
 app/assets/javascripts/new_branch_form.js                   | 6 ++++++
 app/views/projects/branches/new.html.haml                   | 2 +-
 spec/features/projects/branches/user_creates_branch_spec.rb | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index 9d07f4356208bb..34383cb8ada706 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -1,4 +1,7 @@
 /* eslint-disable func-names, no-return-assign, @gitlab/require-i18n-strings */
+
+const NAME_ERROR_CLASS = 'gl-border-red-500';
+
 export default class NewBranchForm {
   constructor(form) {
     this.validate = this.validate.bind(this);
@@ -77,7 +80,10 @@ export default class NewBranchForm {
     const errors = this.restrictions.reduce(validator, []);
     if (errors.length > 0) {
       this.branchNameError.textContent = errors.join(', ');
+      this.name.classList.add(NAME_ERROR_CLASS);
       this.name.focus();
+    } else {
+      this.name.classList.remove(NAME_ERROR_CLASS);
     }
   }
 }
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 7f6a37fc2108b9..5c35864cf0f284 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -12,7 +12,7 @@
   .form-group.gl-max-w-80
     = label_tag :branch_name, _('Branch name')
     = text_field_tag :branch_name, params[:branch_name], required: true, autofocus: true, class: 'form-control js-branch-name monospace'
-    .form-text.text-muted.text-danger.js-branch-name-error{ 'aria-live': 'assertive' }
+    .form-text.text-danger.js-branch-name-error{ 'aria-live': 'assertive' }
   .form-group.gl-max-w-80
     = label_tag :ref, _('Create from')
     .js-new-branch-ref-selector{ data: { project_id: @project.id, default_branch_name: default_ref, hidden_input_name: 'ref' } }
diff --git a/spec/features/projects/branches/user_creates_branch_spec.rb b/spec/features/projects/branches/user_creates_branch_spec.rb
index 70a387e3ceb94b..85fedffd879af2 100644
--- a/spec/features/projects/branches/user_creates_branch_spec.rb
+++ b/spec/features/projects/branches/user_creates_branch_spec.rb
@@ -87,6 +87,7 @@
 
             expect(page).to have_content('Branch name is invalid')
             expect(page).to have_content("can't contain spaces")
+            expect(page).to have_selector('.js-branch-name.gl-border-red-500')
           end
         end
 
-- 
GitLab