Add helpful text to URL group validation and limit text

- better form validation.

Changelog: other
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/65369
EE: true

app/assets/javascripts/import_entities/import_groups/components/import_table.vue

@@ -53,6 +53,10 @@ export default {
       type: RegExp,
       required: true,
     },
+    groupUrlErrorMessage: {
+      type: String,
+      required: true,
+    },
   },
 
   data() {
@@ -261,6 +265,7 @@ export default {
                 :group="group"
                 :available-namespaces="availableNamespaces"
                 :group-path-regex="groupPathRegex"
+                :group-url-error-message="groupUrlErrorMessage"
                 @update-target-namespace="updateTargetNamespace(group.id, $event)"
                 @update-new-name="updateNewName(group.id, $event)"
                 @import-group="importGroups([group.id])"

app/assets/javascripts/import_entities/import_groups/components/import_table_row.vue

@@ -44,6 +44,10 @@ export default {
       type: RegExp,
       required: true,
     },
+    groupUrlErrorMessage: {
+      type: String,
+      required: true,
+    },
   },
 
   apollo: {
@@ -200,7 +204,7 @@ export default {
           />
           <p v-if="isInvalid" class="gl-text-red-500 gl-m-0 gl-mt-2">
             <template v-if="!isNameValid">
-              {{ __('Please choose a group URL with no special characters.') }}
+              {{ groupUrlErrorMessage }}
             </template>
             <template v-else-if="invalidNameValidationMessage">
               {{ invalidNameValidationMessage }}

app/assets/javascripts/import_entities/import_groups/index.js

@@ -17,6 +17,7 @@ export function mountImportGroupsApp(mountElement) {
     jobsPath,
     sourceUrl,
     groupPathRegex,
+    groupUrlErrorMessage,
   } = mountElement.dataset;
   const apolloProvider = new VueApollo({
     defaultClient: createApolloClient({
@@ -38,6 +39,7 @@ export function mountImportGroupsApp(mountElement) {
         props: {
           sourceUrl,
           groupPathRegex: new RegExp(`^(${groupPathRegex})$`),
+          groupUrlErrorMessage,
         },
       });
     },

app/helpers/groups_helper.rb

@@ -322,6 +322,10 @@ module GroupsHelper
     s_("GroupSettings|This setting is applied on %{ancestor_group} and has been overridden on this subgroup.").html_safe % { ancestor_group: ancestor_group(group) }
   end
 
+  def group_url_error_message
+    s_('GroupSettings|Please choose a group URL with no special characters or spaces.')
+  end
+
   def issuables_count_service_class(type)
     if type == :issues
       Groups::OpenIssuesCountService

app/models/namespace.rb

@@ -24,6 +24,7 @@ class Namespace < ApplicationRecord
   NUMBER_OF_ANCESTORS_ALLOWED = 20
 
   SHARED_RUNNERS_SETTINGS = %w[disabled_and_unoverridable disabled_with_override enabled].freeze
+  URL_MAX_LENGTH = 255
 
   cache_markdown_field :description, pipeline: :description
 
@@ -58,7 +59,7 @@ class Namespace < ApplicationRecord
   validates :description, length: { maximum: 255 }
   validates :path,
     presence: true,
-    length: { maximum: 255 },
+    length: { maximum: URL_MAX_LENGTH },
     namespace_path: true
 
   # Introduce minimal path length of 2 characters.

app/views/groups/_import_group_from_file_panel.html.haml

@@ -30,7 +30,8 @@
           id: 'import_group_path',
           required: true,
           pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
-          title: _('Please choose a group URL with no special characters.'),
+          title: group_url_error_message,
+          maxlength: ::Namespace::URL_MAX_LENGTH,
           "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
       %p.validation-error.gl-field-error.field-validation.hide
         = _("Group path is already taken. We've suggested one that is available.")

app/views/groups/settings/_advanced.html.haml

@@ -20,7 +20,8 @@
         = f.text_field :path, placeholder: 'open-source', class: 'form-control',
           autofocus: local_assigns[:autofocus] || false, required: true,
           pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
-          title: s_('GroupSettings|Please choose a group URL with no special characters.'),
+          title: group_url_error_message,
+          maxlength: ::Namespace::URL_MAX_LENGTH,
           "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
     = f.submit s_('GroupSettings|Change group URL'), class: 'btn gl-button btn-warning'
 

app/views/import/bulk_imports/status.html.haml

@@ -7,4 +7,5 @@
   create_bulk_import_path: import_bulk_imports_path(format: :json),
   jobs_path: realtime_changes_import_bulk_imports_path(format: :json),
   source_url: @source_url,
-  group_path_regex: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS } }
+  group_path_regex: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
+  group_url_error_message: group_url_error_message } }

app/views/shared/_group_form.html.haml

@@ -25,7 +25,8 @@
       = f.text_field :path, placeholder: _('my-awesome-group'), class: 'form-control js-validate-group-path js-autofill-group-path', data: { qa_selector: 'group_path_field' },
         autofocus: local_assigns[:autofocus] || false, required: true,
         pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
-        title: _('Please choose a group URL with no special characters.'),
+        title: group_url_error_message,
+        maxlength: ::Namespace::URL_MAX_LENGTH,
         "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
     %p.validation-error.gl-field-error.field-validation.hide
       = _("Group path is already taken. We've suggested one that is available.")

ee/app/views/registrations/groups/new.html.haml

@@ -33,7 +33,8 @@
               = f.text_field :path, class: 'form-control js-validate-group-path js-autofill-group-path',
                 required: true,
                 pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
-                title: _('Please choose a group URL with no special characters.')
+                title: group_url_error_message,
+                maxlength: ::Namespace::URL_MAX_LENGTH
             %p.validation-error.gl-field-error.field-validation.hide
               = _("Group path is already taken. We've suggested one that is available.")
             %p.validation-success.gl-field-success.field-validation.hide= _('Group path is available.')

ee/app/views/subscriptions/groups/edit.html.haml

@@ -34,7 +34,8 @@
               = f.text_field :path, class: 'form-control js-validate-group-path',
                 autofocus: local_assigns[:autofocus] || false, required: true,
                 pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
-                title: _('Please choose a group URL with no special characters.')
+                title: group_url_error_message,
+                maxlength: ::Namespace::URL_MAX_LENGTH
             %p.validation-error.gl-field-error.field-validation.hide
               = _("Group path is already taken. We've suggested one that is available.")
             %p.validation-success.gl-field-success.field-validation.hide= _('Group path is available.')

locale/gitlab.pot

@@ -15892,7 +15892,7 @@ msgstr ""
 msgid "GroupSettings|Pipeline settings was updated for the group"
 msgstr ""
 
-msgid "GroupSettings|Please choose a group URL with no special characters."
+msgid "GroupSettings|Please choose a group URL with no special characters or spaces."
 msgstr ""
 
 msgid "GroupSettings|Prevent forking outside of the group"
@@ -24533,9 +24533,6 @@ msgstr ""
 msgid "Please choose a file"
 msgstr ""
 
-msgid "Please choose a group URL with no special characters."
-msgstr ""
-
 msgid "Please complete your profile with email address"
 msgstr ""
 

spec/features/groups_spec.rb

@@ -52,7 +52,7 @@ RSpec.describe 'Group' do
         click_button 'Create group'
 
         expect(current_path).to eq(new_group_path)
-        expect(page).to have_text('Please choose a group URL with no special characters.')
+        expect(page).to have_text('Please choose a group URL with no special characters or spaces.')
       end
     end
 

spec/frontend/import_entities/import_groups/components/import_table_row_spec.js

@@ -70,6 +70,7 @@ describe('import table row', () => {
       propsData: {
         availableNamespaces: availableNamespacesFixture,
         groupPathRegex: /.*/,
+        groupUrlErrorMessage: 'Please choose a group URL with no special characters or spaces.',
         ...props,
       },
     });
@@ -198,7 +199,9 @@ describe('import table row', () => {
         groupPathRegex: /^[a-zA-Z]+$/,
       });
 
-      expect(wrapper.text()).toContain('Please choose a group URL with no special characters.');
+      expect(wrapper.text()).toContain(
+        'Please choose a group URL with no special characters or spaces.',
+      );
     });
 
     it('reports invalid group name if relevant validation error exists', async () => {

spec/frontend/import_entities/import_groups/components/import_table_spec.js

@@ -62,6 +62,7 @@ describe('import table', () => {
       propsData: {
         groupPathRegex: /.*/,
         sourceUrl: SOURCE_URL,
+        groupUrlErrorMessage: 'Please choose a group URL with no special characters or spaces.',
       },
       stubs: {
         GlSprintf,