Add confirmation modal to "Sync now" LDAP button

Add a confirmation modal when user clicks "Sync now" button.
Warns user that synchronizing LDAP removes direct members' access.

Changelog: changed
EE: true

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

+import '~/pages/groups/group_members';
+import initConfirmModal from '~/confirm_modal';
+
+const LDAP_SYNC_NOW_BUTTON_SELECTOR = '.js-ldap-sync-now-button';
+if (document.querySelector(LDAP_SYNC_NOW_BUTTON_SELECTOR)) {
+  initConfirmModal({ selector: LDAP_SYNC_NOW_BUTTON_SELECTOR });
+}

ee/app/helpers/group_members_helper.rb

-# frozen_string_literal: true
-
-module GroupMembersHelper
-  def clear_ldap_permission_cache_message
-    markdown(
-      <<-EOT.strip_heredoc
-      Be careful, all members of this group (except you)  will have their
-      **access level temporarily downgraded** to `Guest`. The next time that a group member
-      signs in to GitLab (or after one hour, whichever occurs first) their access level will
-      be updated to the one specified on the Group settings page.
-      EOT
-    )
-  end
-end

ee/app/helpers/groups/ldap_sync_helper.rb

+# frozen_string_literal: true
+
+module Groups::LdapSyncHelper
+  def ldap_sync_now_button_data(group)
+    {
+      method: :put,
+      path: sync_group_ldap_path(group),
+      modal_attributes: {
+        message: _("Warning: Synchronizing LDAP removes direct members' access."),
+        title: _('Synchronize LDAP'),
+        size: 'sm',
+        actionPrimary: {
+          text: _('Sync LDAP'),
+          attributes: [{ variant: 'danger', 'data-qa-selector': 'sync_ldap_confirm_button' }]
+        },
+        actionSecondary: {
+          text: _('Cancel'),
+          attributes: [{ variant: 'default' }]
+        }
+      }.to_json
+    }
+  end
+end

ee/app/views/groups/group_members/_sync_button.html.haml

@@ -7,7 +7,7 @@
     = sprite_icon("retry", css_class: 'spin gl-mr-2')
     = _('Pending sync…')
 - else
-  = link_to sync_group_ldap_path(@group), method: :put, class: 'btn btn-default gl-button qa-sync-now-button' do
+  %button.js-ldap-sync-now-button.btn.btn-default.gl-button.qa-sync-now-button{ data: ldap_sync_now_button_data(@group) }
     = sprite_icon("retry", css_class: "gl-mr-2")
     = _('Sync now')
 - if @group.ldap_sync_ready? && @group.ldap_sync_last_successful_update_at

ee/spec/helpers/groups/ldap_sync_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Groups::LdapSyncHelper do
+  let_it_be(:group) { build(:group) }
+
+  describe '#ldap_sync_now_button_data' do
+    sync_group_ldap_path = '/groups/foo-bar/-/ldap/sync'
+
+    before do
+      allow(helper).to receive(:sync_group_ldap_path).with(group).and_return(sync_group_ldap_path)
+    end
+
+    subject { helper.ldap_sync_now_button_data(group) }
+
+    it 'sets `path` key correctly' do
+      expect(subject[:path]).to eq(sync_group_ldap_path)
+    end
+
+    it 'sets `modal_attributes` key to valid json' do
+      expect(subject[:modal_attributes]).to be_valid_json
+    end
+  end
+end

locale/gitlab.pot

@@ -31554,6 +31554,9 @@ msgstr ""
 msgid "Symbolic link"
 msgstr ""
 
+msgid "Sync LDAP"
+msgstr ""
+
 msgid "Sync now"
 msgstr ""
 
@@ -31563,6 +31566,9 @@ msgstr ""
 msgid "Synchronization settings"
 msgstr ""
 
+msgid "Synchronize LDAP"
+msgstr ""
+
 msgid "Syncing…"
 msgstr ""
 
@@ -36217,6 +36223,9 @@ msgstr ""
 msgid "Warning: Displaying this diagram might cause performance issues on this page."
 msgstr ""
 
+msgid "Warning: Synchronizing LDAP removes direct members' access."
+msgstr ""
+
 msgid "We are currently unable to fetch data for the pipeline header."
 msgstr ""
 

qa/qa/ee/page/group/members.rb

@@ -9,8 +9,13 @@ module QA
             element :sync_now_button
           end
 
+          view 'ee/app/helpers/groups/ldap_sync_helper.rb' do
+            element :sync_ldap_confirm_button
+          end
+
           def click_sync_now
             click_element :sync_now_button
+            click_element :sync_ldap_confirm_button
           end
         end
       end