Implement token selector component

Refactor "Restrict access by IP address" field to use GitLab UI token
selector component instead of a comma separated list.

doc/user/group/index.md

@@ -516,7 +516,7 @@ underlying projects, issues, etc, by IP address. This can help ensure that
 particular content doesn't leave the premises, while not blocking off access to
 the entire instance.
 
-Add one or more allowed IP subnets using CIDR notation in comma separated format to the group settings and anyone
+Add one or more allowed IP subnets using CIDR notation to the group settings and anyone
 coming from a different IP address won't be able to access the restricted
 content.
 
@@ -529,6 +529,12 @@ Restriction currently applies to:
 To avoid accidental lock-out, admins and group owners are able to access
 the group regardless of the IP restriction.
 
+To enable this feature:
+
+1. Navigate to the group’s **Settings > General** page.
+1. Expand the **Permissions, LFS, 2FA** section, and enter IP address ranges into **Allow access to the following IP addresses** field.
+1. Click **Save changes**.
+
 #### Allowed domain restriction **(PREMIUM)**
 
 >- [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/7297) in [GitLab Premium and Silver](https://about.gitlab.com/pricing/) 12.2.

ee/app/assets/javascripts/groups/settings/allowed_email_domains/index.js → ee/app/assets/javascripts/groups/settings/access_restriction_field/index.js

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { __, sprintf } from '~/locale';
 import CommaSeparatedListTokenSelector from '../components/comma_separated_list_token_selector.vue';
 
-export default () => {
+export default (el, placeholder, qaSelector) => {
   // eslint-disable-next-line no-new
   new Vue({
-    el: '.js-allowed-email-domains',
+    el,
     components: {
       CommaSeparatedListTokenSelector,
     },
@@ -16,14 +16,17 @@ export default () => {
     },
     render(createElement) {
       return createElement('comma-separated-list-token-selector', {
+        attrs: {
+          'data-qa-selector': qaSelector,
+        },
         props: {
           hiddenInputId: this.hiddenInputId,
           ariaLabelledby: this.labelId,
-          placeholder: __('Enter domain'),
+          placeholder,
         },
         scopedSlots: {
           'user-defined-token-content': ({ inputText: value }) => {
-            return sprintf(__('Add "%{value}" to allowlist'), { value });
+            return sprintf(__('Add "%{value}"'), { value });
           },
         },
       });

ee/app/assets/javascripts/pages/groups/edit/index.js

 import '~/pages/groups/edit';
-import initAllowedEmailDomains from 'ee/groups/settings/allowed_email_domains';
+import initAccessRestrictionField from 'ee/groups/settings/access_restriction_field';
+import { __ } from '~/locale';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initAllowedEmailDomains();
+  initAccessRestrictionField('.js-allowed-email-domains', __('Enter domain'));
+  initAccessRestrictionField(
+    '.js-ip-restriction',
+    __('Enter IP address range'),
+    'ip_restriction_field',
+  );
 });

ee/app/views/groups/settings/_ip_restriction.html.haml

 - return if !group.feature_available?(:group_ip_restriction) || group.parent_id.present?
-
-%h5= _('Restrict access by IP address')
+- hidden_input_id = 'group_ip_restriction_ranges'
+- label_id = "#{hidden_input_id}_label"
 
 .form-group
-  = f.text_field :ip_restriction_ranges, class: 'form-control', data: { qa_selector: 'ip_restriction_field' }, placeholder: _('Enter IP address range')
+  %label{ id: label_id }
+    = _('Allow access to the following IP addresses')
+  .js-ip-restriction{ data: { hidden_input_id: hidden_input_id, label_id: label_id } }
+  = f.hidden_field :ip_restriction_ranges, id: hidden_input_id
   .form-text.text-muted
     - read_more_link = link_to(_('Read more'), help_page_path('user/group/index.md', anchor: 'ip-access-restriction-premium'))
-    = _('This group, including all subgroups, projects and git repositories, will only be reachable from the specified IP address range. Multiple addresses are supported with comma delimiters.<br>Example: <code>192.168.0.0/24,192.168.1.0/24</code>. %{read_more_link}.').html_safe % { read_more_link: read_more_link }
+    = _('This group, including all subgroups, projects and git repositories, will be reachable from only the specified IP address ranges.')
+    %br
+    = _('Multiple IP address ranges are supported.')
+    %br
+    = _('Example: <code>192.168.0.0/24</code>. %{read_more_link}.').html_safe % { read_more_link: read_more_link }

ee/changelogs/unreleased/220858-implement-token-selector-component-for-group-restrict-access-by.yml

+---
+title: Change "Restrict access by IP address" field from a comma separated list to
+  the GitLab UI Token Selector component
+merge_request: 36240
+author:
+type: changed

ee/spec/views/groups/edit.html.haml_spec.rb

@@ -21,7 +21,8 @@ RSpec.describe 'groups/edit.html.haml' do
         expect(rendered).to render_template('groups/settings/_ip_restriction')
         expect(rendered).to(have_field('group_ip_restriction_ranges',
                                        { disabled: false,
-                                         with: ranges.join(",") }))
+                                         with: ranges.join(","),
+                                         type: :hidden }))
       end
     end
 
@@ -30,7 +31,7 @@ RSpec.describe 'groups/edit.html.haml' do
         render
 
         expect(rendered).to render_template('groups/settings/_ip_restriction')
-        expect(rendered).not_to have_field('group_ip_restriction_ranges')
+        expect(rendered).not_to have_field('group_ip_restriction_ranges', { type: :hidden })
       end
     end
 

locale/gitlab.pot

@@ -1322,7 +1322,7 @@ msgstr ""
 msgid "Add"
 msgstr ""
 
-msgid "Add \"%{value}\" to allowlist"
+msgid "Add \"%{value}\""
 msgstr ""
 
 msgid "Add %d issue"
@@ -2256,6 +2256,9 @@ msgstr ""
 msgid "Allow \"%{group_name}\" to sign you in"
 msgstr ""
 
+msgid "Allow access to the following IP addresses"
+msgstr ""
+
 msgid "Allow commits from members who can merge to the target branch."
 msgstr ""
 
@@ -9448,6 +9451,9 @@ msgstr ""
 msgid "Exactly one of %{attributes} is required"
 msgstr ""
 
+msgid "Example: <code>192.168.0.0/24</code>. %{read_more_link}."
+msgstr ""
+
 msgid "Example: @sub\\.company\\.com$"
 msgstr ""
 
@@ -15092,6 +15098,9 @@ msgstr ""
 msgid "MrDeploymentActions|Stop environment"
 msgstr ""
 
+msgid "Multiple IP address ranges are supported."
+msgstr ""
+
 msgid "Multiple domains are supported."
 msgstr ""
 
@@ -19828,9 +19837,6 @@ msgstr ""
 msgid "Restoring the project will prevent the project from being removed on this date and restore people's ability to make changes to it."
 msgstr ""
 
-msgid "Restrict access by IP address"
-msgstr ""
-
 msgid "Restrict membership by email domain"
 msgstr ""
 
@@ -23695,7 +23701,7 @@ msgstr ""
 msgid "This group has been scheduled for permanent removal on %{date}"
 msgstr ""
 
-msgid "This group, including all subgroups, projects and git repositories, will only be reachable from the specified IP address range. Multiple addresses are supported with comma delimiters.<br>Example: <code>192.168.0.0/24,192.168.1.0/24</code>. %{read_more_link}."
+msgid "This group, including all subgroups, projects and git repositories, will be reachable from only the specified IP address ranges."
 msgstr ""
 
 msgid "This group, its subgroups and projects has been scheduled for removal on %{date}."

qa/qa/ee/page/group/settings/general.rb

@@ -21,7 +21,7 @@ module QA
                   element :save_changes_button
                 end
 
-                view 'ee/app/views/groups/settings/_ip_restriction.html.haml' do
+                view 'ee/app/assets/javascripts/pages/groups/edit/index.js' do
                   element :ip_restriction_field
                 end
 
@@ -63,15 +63,17 @@ module QA
             def set_ip_address_restriction(ip_address)
               QA::Runtime::Logger.debug(%Q[Setting ip address restriction to: #{ip_address}])
               expand_section(:permission_lfs_2fa_section)
-              find_element(:ip_restriction_field).send_keys([:command, 'a'], :backspace)
-              find_element(:ip_restriction_field).set ip_address
-              click_element :save_permissions_changes_button
+
+              # GitLab UI Token Selector (https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token-selector--default)
+              # `data-qa-*` can only be added to the wrapper so custom selector used to find token close buttons and text input
+              find_element(:ip_restriction_field).all('.gl-token-close', minimum: 0).each do |el|
+                el.click
               end
 
-            def restricted_ip_address
-              expand_section(:permission_lfs_2fa_section)
-              scroll_to_element(:ip_restriction_field)
-              find_element(:ip_restriction_field).value
+              ip_restriction_field_input = find_element(:ip_restriction_field).find('input[type="text"]')
+              ip_restriction_field_input.set ip_address
+              ip_restriction_field_input.send_keys(:enter)
+              click_element :save_permissions_changes_button
             end
 
             def set_membership_lock_enabled