Merge branch 'ek-migrate-remove-group-confirmation-modal' into 'master'

Migrate remove group modal to vue

See merge request gitlab-org/gitlab!73179

app/assets/javascripts/init_confirm_danger.js

 import Vue from 'vue';
+import { parseBoolean } from './lib/utils/common_utils';
 import ConfirmDanger from './vue_shared/components/confirm_danger/confirm_danger.vue';
 
 export default () => {
   const el = document.querySelector('.js-confirm-danger');
   if (!el) return null;
 
-  const { phrase, buttonText, confirmDangerMessage } = el.dataset;
+  const {
+    removeFormId = null,
+    phrase,
+    buttonText,
+    buttonTestid = null,
+    confirmDangerMessage,
+    disabled = false,
+  } = el.dataset;
 
   return new Vue({
     el,
+    provide: {
+      confirmDangerMessage,
+    },
     render: (createElement) =>
       createElement(ConfirmDanger, {
         props: {
           phrase,
           buttonText,
+          buttonTestid,
+          disabled: parseBoolean(disabled),
         },
-        provide: {
-          confirmDangerMessage,
+        on: {
+          confirm: () => {
+            if (removeFormId) document.getElementById(removeFormId)?.submit();
+          },
         },
       }),
   });

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

@@ -10,10 +10,12 @@ import projectSelect from '~/project_select';
 import initSearchSettings from '~/search_settings';
 import initSettingsPanels from '~/settings_panels';
 import setupTransferEdit from '~/transfer_edit';
+import initConfirmDanger from '~/init_confirm_danger';
 
 document.addEventListener('DOMContentLoaded', () => {
   initFilePickers();
   initConfirmDangerModal();
+  initConfirmDanger();
   initSettingsPanels();
   dirtySubmitFactory(
     document.querySelectorAll('.js-general-settings-form, .js-general-permissions-form'),

app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue

@@ -26,6 +26,11 @@ export default {
       type: String,
       required: true,
     },
+    buttonTestid: {
+      type: String,
+      required: false,
+      default: 'confirm-danger-button',
+    },
   },
   modalId: CONFIRM_DANGER_MODAL_ID,
 };
@@ -37,7 +42,7 @@ export default {
       class="gl-button"
       variant="danger"
       :disabled="disabled"
-      data-testid="confirm-danger-button"
+      :data-testid="buttonTestid"
       >{{ buttonText }}</gl-button
     >
     <confirm-danger-modal

app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue

@@ -93,6 +93,7 @@ export default {
     </p>
     <gl-form-group :state="isValid" :invalid-feedback="$options.i18n.CONFIRM_DANGER_MODAL_ERROR">
       <gl-form-input
+        id="confirm_name_input"
         v-model="confirmationPhrase"
         class="form-control"
         data-testid="confirm-danger-input"

app/helpers/groups/settings_helper.rb

+# frozen_string_literal: true
+
+module Groups
+  module SettingsHelper
+    include GroupsHelper
+
+    def group_settings_confirm_modal_data(group, remove_form_id = nil)
+      {
+        remove_form_id: remove_form_id,
+        button_text: _('Remove group'),
+        button_testid: 'remove-group-button',
+        disabled: group.paid?.to_s,
+        confirm_danger_message: remove_group_message(group),
+        phrase: group.full_path
+      }
+    end
+  end
+end
+
+Groups::SettingsHelper.prepend_mod_with('Groups::SettingsHelper')

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

+- remove_form_id = 'js-remove-group-form'
 = render 'groups/settings/export', group: @group
 
 .sub-section
@@ -26,6 +27,6 @@
     = f.submit s_('GroupSettings|Change group URL'), class: 'btn gl-button btn-warning'
 
 = render 'groups/settings/transfer', group: @group
-= render 'groups/settings/remove', group: @group
+= render 'groups/settings/remove', group: @group, remove_form_id: remove_form_id
 = render_if_exists 'groups/settings/restore', group: @group
-= render_if_exists 'groups/settings/immediately_remove', group: @group
+= render_if_exists 'groups/settings/immediately_remove', group: @group, remove_form_id: remove_form_id

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

+- remove_form_id = local_assigns.fetch(:remove_form_id, nil)
+
 .sub-section
   %h4.danger-title= _('Remove group')
-  = form_tag(group, method: :delete) do
+  = form_tag(group, method: :delete, id: remove_form_id) do
     %p
       = _('Removing this group also removes all child projects, including archived projects, and their resources.')
       %br
       %strong= _('Removed group can not be restored!')
 
-    = render 'groups/settings/remove_button', group: group
+    = render 'groups/settings/remove_button', group: group, remove_form_id: remove_form_id

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

+- remove_form_id = local_assigns.fetch(:remove_form_id, nil)
+
 - if group.adjourned_deletion?
-  = render_if_exists 'groups/settings/adjourned_deletion', group: group
+  = render_if_exists 'groups/settings/adjourned_deletion', group: group, remove_form_id: remove_form_id
 - else
-  = render 'groups/settings/permanent_deletion', group: group
-
+  = render 'groups/settings/permanent_deletion', group: group, remove_form_id: remove_form_id

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

+- remove_form_id = local_assigns.fetch(:remove_form_id, nil)
+
 - if group.paid?
   .gl-alert.gl-alert-info.gl-mb-5{ data: { testid: 'group-has-linked-subscription-alert' } }
     = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
     .gl-alert-body
       = html_escape(_("This group can't be removed because it is linked to a subscription. To remove this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
 
-= button_to _('Remove group'), '#', class: ['btn gl-button btn-danger js-legacy-confirm-danger', ('disabled' if group.paid?)], data: { 'confirm-danger-message' => remove_group_message(group), 'testid' => 'remove-group-button' }
+.js-confirm-danger{ data: group_settings_confirm_modal_data(group, remove_form_id) }

ee/app/helpers/ee/groups/settings_helper.rb

+# frozen_string_literal: true
+
+module EE
+  module Groups
+    module SettingsHelper
+      def delayed_project_removal_help_text
+        html_escape(delayed_project_removal_i18n_string) % {
+          waiting_period: ::Gitlab::CurrentSettings.deletion_adjourned_period,
+          link_start: '<a href="%{url}">'.html_safe % { url: general_admin_application_settings_path(anchor: 'js-visibility-settings') },
+          link_end: '</a>'.html_safe
+        }
+      end
+
+      private
+
+      def delayed_project_removal_i18n_string
+        if current_user&.can_admin_all_resources?
+          s_('GroupSettings|Projects will be permanently deleted after a %{waiting_period}-day delay. This delay can be %{link_start}customized by an admin%{link_end} in instance settings. Inherited by subgroups.')
+        else
+          s_('GroupSettings|Projects will be permanently deleted after a %{waiting_period}-day delay. Inherited by subgroups.')
+        end
+      end
+    end
+  end
+end

ee/app/helpers/groups/settings_helper.rb

-# frozen_string_literal: true
-
-module Groups
-  module SettingsHelper
-    def delayed_project_removal_help_text
-      html_escape(delayed_project_removal_i18n_string) % {
-        waiting_period: ::Gitlab::CurrentSettings.deletion_adjourned_period,
-        link_start: '<a href="%{url}">'.html_safe % { url: general_admin_application_settings_path(anchor: 'js-visibility-settings') },
-        link_end: '</a>'.html_safe
-      }
-    end
-
-    private
-
-    def delayed_project_removal_i18n_string
-      if current_user&.can_admin_all_resources?
-        s_('GroupSettings|Projects will be permanently deleted after a %{waiting_period}-day delay. This delay can be %{link_start}customized by an admin%{link_end} in instance settings. Inherited by subgroups.')
-      else
-        s_('GroupSettings|Projects will be permanently deleted after a %{waiting_period}-day delay. Inherited by subgroups.')
-      end
-    end
-  end
-end

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

 - return if group.marked_for_deletion?
+- remove_form_id = local_assigns.fetch(:remove_form_id, nil)
 
 - date = permanent_deletion_date(Time.now.utc)
 .sub-section
   %h4.danger-title= _('Remove group')
-  = form_tag(group, method: :delete) do
+  = form_tag(group, method: :delete, id: remove_form_id) do
     %p
       = html_escape(_("Upon performing this action, the contents of this group, its subgroup and projects will be permanently deleted after %{deletion_adjourned_period} days on %{date}. Until that time:")) % { date: tag.strong(date), deletion_adjourned_period: deletion_adjourned_period }
     %ul
       %li= _("The group will be placed in 'pending deletion' state")
       %li= _("The group can be fully restored")
 
-    = render 'groups/settings/remove_button', group: group
+    = render 'groups/settings/remove_button', group: group, remove_form_id: remove_form_id

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

+- remove_form_id = local_assigns.fetch(:remove_form_id, nil)
+
 - if group.marked_for_deletion?
   .sub-section
     %h4.gl-text-red-500= _('Permanently remove group')
-    = form_tag(group, method: :delete) do
+    = form_tag(group, method: :delete, id: remove_form_id) do
       %p
         %strong= _('Removing this group also removes all child projects, including archived projects, and their resources.')
       %p= immediately_remove_group_message(group)
@@ -10,4 +12,4 @@
 
       = hidden_field_tag(:permanently_remove, true)
 
-      = render 'groups/settings/remove_button', group: group
+      = render 'groups/settings/remove_button', group: group, remove_form_id: remove_form_id

ee/spec/helpers/groups/settings_helper_spec.rb → ee/spec/helpers/ee/groups/settings_helper_spec.rb

@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.describe Groups::SettingsHelper do
+RSpec.describe EE::Groups::SettingsHelper do
   include AdminModeHelper
 
   let_it_be(:user) { create(:user) }

ee/spec/views/groups/settings/_remove.html.haml_spec.rb

@@ -9,8 +9,8 @@ RSpec.describe 'groups/settings/_remove.html.haml' do
     it 'enables the Remove group button and does not show an alert for a group' do
       render 'groups/settings/remove', group: group
 
-      expect(rendered).to have_selector '[data-testid="remove-group-button"]'
-      expect(rendered).not_to have_selector '[data-testid="remove-group-button"].disabled'
+      expect(rendered).to have_selector '[data-button-testid="remove-group-button"]'
+      expect(rendered).not_to match 'data-disabled="true"'
       expect(rendered).not_to have_selector '[data-testid="group-has-linked-subscription-alert"]'
     end
 
@@ -19,7 +19,8 @@ RSpec.describe 'groups/settings/_remove.html.haml' do
 
       render 'groups/settings/remove', group: group
 
-      expect(rendered).to have_selector '[data-testid="remove-group-button"].disabled'
+      expect(rendered).to have_selector '[data-button-testid="remove-group-button"]'
+      expect(rendered).to match 'data-disabled="true"'
       expect(rendered).to have_selector '[data-testid="group-has-linked-subscription-alert"]'
     end
 
@@ -28,7 +29,8 @@ RSpec.describe 'groups/settings/_remove.html.haml' do
 
       render 'groups/settings/remove', group: group
 
-      expect(rendered).to have_selector '[data-testid="remove-group-button"].disabled'
+      expect(rendered).to have_selector '[data-button-testid="remove-group-button"]'
+      expect(rendered).to match 'data-disabled="true"'
       expect(rendered).to have_selector '[data-testid="group-has-linked-subscription-alert"]'
     end
 
@@ -38,8 +40,8 @@ RSpec.describe 'groups/settings/_remove.html.haml' do
 
       render 'groups/settings/remove', group: subgroup
 
-      expect(rendered).to have_selector '[data-testid="remove-group-button"]'
-      expect(rendered).not_to have_selector '[data-testid="remove-group-button"].disabled'
+      expect(rendered).to have_selector '[data-button-testid="remove-group-button"]'
+      expect(rendered).not_to match 'data-disabled="true"'
       expect(rendered).not_to have_selector '[data-testid="group-has-linked-subscription-alert"]'
     end
 
@@ -51,8 +53,8 @@ RSpec.describe 'groups/settings/_remove.html.haml' do
       it 'enables the Remove group button and does not show an alert for a group without a paid gitlab.com plan' do
         render 'groups/settings/remove', group: group
 
-        expect(rendered).to have_selector '[data-testid="remove-group-button"]'
-        expect(rendered).not_to have_selector '[data-testid="remove-group-button"].disabled'
+        expect(rendered).to have_selector '[data-button-testid="remove-group-button"]'
+        expect(rendered).not_to match 'data-disabled="true"'
         expect(rendered).not_to have_selector '[data-testid="group-has-linked-subscription-alert"]'
       end
 
@@ -61,7 +63,8 @@ RSpec.describe 'groups/settings/_remove.html.haml' do
 
         render 'groups/settings/remove', group: group
 
-        expect(rendered).to have_selector '[data-testid="remove-group-button"].disabled'
+        expect(rendered).to have_selector '[data-button-testid="remove-group-button"]'
+        expect(rendered).to match 'data-disabled="true"'
         expect(rendered).to have_selector '[data-testid="group-has-linked-subscription-alert"]'
       end
 
@@ -71,8 +74,8 @@ RSpec.describe 'groups/settings/_remove.html.haml' do
 
         render 'groups/settings/remove', group: subgroup
 
-        expect(rendered).to have_selector '[data-testid="remove-group-button"]'
-        expect(rendered).not_to have_selector '[data-testid="remove-group-button"].disabled'
+        expect(rendered).to have_selector '[data-button-testid="remove-group-button"]'
+        expect(rendered).not_to match 'data-disabled="true"'
         expect(rendered).not_to have_selector '[data-testid="group-has-linked-subscription-alert"]'
       end
     end

spec/helpers/groups/settings_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Groups::SettingsHelper do
+  include GroupsHelper
+
+  let_it_be(:group) { create(:group, path: "foo") }
+
+  describe('#group_settings_confirm_modal_data') do
+    using RSpec::Parameterized::TableSyntax
+
+    fake_form_id = "fake_form_id"
+
+    where(:is_paid, :is_button_disabled, :form_value_id) do
+      true      | "true"      | nil
+      true      | "true"      | fake_form_id
+      false     | "false"     | nil
+      false     | "false"     | fake_form_id
+    end
+
+    with_them do
+      it "returns expected parameters" do
+        allow(group).to receive(:paid?).and_return(is_paid)
+
+        expected = helper.group_settings_confirm_modal_data(group, form_value_id)
+        expect(expected).to eq({
+          button_text: "Remove group",
+          confirm_danger_message: remove_group_message(group),
+          remove_form_id: form_value_id,
+          phrase: group.full_path,
+          button_testid: "remove-group-button",
+          disabled: is_button_disabled
+        })
+      end
+    end
+  end
+end

spec/views/groups/settings/_remove.html.haml_spec.rb

@@ -9,8 +9,8 @@ RSpec.describe 'groups/settings/_remove.html.haml' do
 
       render 'groups/settings/remove', group: group
 
-      expect(rendered).to have_selector '[data-testid="remove-group-button"]'
-      expect(rendered).not_to have_selector '[data-testid="remove-group-button"].disabled'
+      expect(rendered).to have_selector '[data-button-testid="remove-group-button"]'
+      expect(rendered).not_to have_selector '[data-button-testid="remove-group-button"].disabled'
       expect(rendered).not_to have_selector '[data-testid="group-has-linked-subscription-alert"]'
     end
   end