Merge branch 'dz-fix-new-group-input' into 'master'

Fix new group input validation after form submission

Closes #226984

See merge request gitlab-org/gitlab!36032

app/assets/javascripts/pages/groups/new/group_path_validator.js

@@ -12,6 +12,7 @@ const successMessageSelector = '.validation-success';
 const pendingMessageSelector = '.validation-pending';
 const unavailableMessageSelector = '.validation-error';
 const suggestionsMessageSelector = '.gl-path-suggestions';
+const inputGroupSelector = '.input-group';
 
 export default class GroupPathValidator extends InputValidator {
   constructor(opts = {}) {
@@ -39,7 +40,7 @@ export default class GroupPathValidator extends InputValidator {
   static validateGroupPathInput(inputDomElement) {
     const groupPath = inputDomElement.value;
 
-    if (inputDomElement.checkValidity() && groupPath.length > 0) {
+    if (inputDomElement.checkValidity() && groupPath.length > 1) {
       GroupPathValidator.setMessageVisibility(inputDomElement, pendingMessageSelector);
 
       fetchGroupPathAvailability(groupPath)
@@ -69,9 +70,10 @@ export default class GroupPathValidator extends InputValidator {
   }
 
   static setMessageVisibility(inputDomElement, messageSelector, isVisible = true) {
-    const messageElement = inputDomElement.parentElement.parentElement.querySelector(
-      messageSelector,
-    );
+    const messageElement = inputDomElement
+      .closest(inputGroupSelector)
+      .parentElement.querySelector(messageSelector);
+
     messageElement.classList.toggle('hide', !isVisible);
   }
 

spec/features/groups_spec.rb

@@ -68,6 +68,35 @@ RSpec.describe 'Group' do
       end
     end
 
+    describe 'real-time group url validation', :js do
+      it 'shows a message if group url is available' do
+        fill_in 'group_path', with: 'az'
+        wait_for_requests
+
+        expect(page).to have_content('Group path is available')
+      end
+
+      it 'shows an error if group url is taken' do
+        fill_in 'group_path', with: user.username
+        wait_for_requests
+
+        expect(page).to have_content('Group path is already taken')
+      end
+
+      it 'does not break after an invalid form submit' do
+        fill_in 'group_name', with: 'MyGroup'
+        fill_in 'group_path', with: 'z'
+        click_button 'Create group'
+
+        expect(page).to have_content('Group URL is too short')
+
+        fill_in 'group_path', with: 'az'
+        wait_for_requests
+
+        expect(page).to have_content('Group path is available')
+      end
+    end
+
     describe 'Mattermost team creation' do
       before do
         stub_mattermost_setting(enabled: mattermost_enabled)