Replace invite form on Members page with modal

app/assets/javascripts/invite_members/components/invite_members_trigger.vue

@@ -19,6 +19,11 @@ export default {
       required: false,
       default: '',
     },
+    classes: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   methods: {
     openModal() {
@@ -29,7 +34,7 @@ export default {
 </script>
 
 <template>
-  <gl-link @click="openModal">
+  <gl-link :class="classes" @click="openModal">
     <div v-if="icon" class="nav-icon-container">
       <gl-icon :size="16" :name="icon" />
     </div>

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

@@ -4,6 +4,8 @@ import UsersSelect from '~/users_select';
 import groupsSelect from '~/groups_select';
 import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
 import { initGroupMembersApp } from '~/groups/members';
+import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 import { memberRequestFormatter, groupLinkRequestFormatter } from '~/groups/members/utils';
 import { s__ } from '~/locale';
 
@@ -64,5 +66,7 @@ groupsSelect();
 memberExpirationDate();
 memberExpirationDate('.js-access-expiration-date-groups');
 mountRemoveMemberModal();
+initInviteMembersModal();
+initInviteMembersTrigger();
 
 new UsersSelect(); // eslint-disable-line no-new

app/assets/javascripts/pages/projects/project_members/index.js

@@ -4,6 +4,8 @@ import memberExpirationDate from '~/member_expiration_date';
 import UsersSelect from '~/users_select';
 import groupsSelect from '~/groups_select';
 import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
+import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 
 function mountRemoveMemberModal() {
   const el = document.querySelector('.js-remove-member-modal');
@@ -24,6 +26,8 @@ document.addEventListener('DOMContentLoaded', () => {
   memberExpirationDate();
   memberExpirationDate('.js-access-expiration-date-groups');
   mountRemoveMemberModal();
+  initInviteMembersModal();
+  initInviteMembersTrigger();
 
   new Members(); // eslint-disable-line no-new
   new UsersSelect(); // eslint-disable-line no-new

app/views/groups/group_members/index.html.haml

@@ -8,20 +8,28 @@
 
 .js-remove-member-modal
 .project-members-page.gl-mt-3
-  %h4
-    = _('Group members')
-  %hr
-  - if can_manage_members
-    %ul.nav-links.nav.nav-tabs.gitlab-tabs{ role: 'tablist' }
-      %li.nav-tab{ role: 'presentation' }
-        %a.nav-link.active{ href: '#invite-member-pane', id: 'invite-member-tab', data: { toggle: 'tab' }, role: 'tab' }= _('Invite member')
+  .gl-display-flex.gl-flex-wrap
+    - if can_manage_members
+      .gl-w-half.gl-xs-w-full
+        %h4
+          = _('Group members')
+      - if invite_members_allowed?(@group)
+        .gl-w-half.gl-xs-w-full
+          .gl-display-flex.gl-flex-wrap.gl-lg-justify-content-end.gl-mx-n2.gl-mb-3
+            .js-invite-members-trigger.gl-px-2.gl-sm-w-auto.gl-w-full.gl-mb-4{ data: { classes: 'btn btn-success gl-button gl-mt-3 gl-sm-w-auto gl-w-full', display_text: _('Invite members') } }
+        = render_if_exists 'groups/invite_members_modal', group: @group
+  - if can_manage_members && !invite_members_allowed?(@group)
+    %hr.gl-mt-4
+      %ul.nav-links.nav.nav-tabs.gitlab-tabs{ role: 'tablist' }
         %li.nav-tab{ role: 'presentation' }
-          %a.nav-link{ href: '#invite-group-pane', id: 'invite-group-tab', data: { toggle: 'tab', qa_selector: 'invite_group_tab' }, role: 'tab' }= _('Invite group')
-    .tab-content.gitlab-tab-content
-      .tab-pane.active{ id: 'invite-member-pane', role: 'tabpanel' }
-        = render_invite_member_for_group(@group, @group_member.access_level)
-      .tab-pane{ id: 'invite-group-pane', role: 'tabpanel' }
-        = render 'shared/members/invite_group', submit_url: group_group_links_path(@group), access_levels: GroupMember.access_level_roles, default_access_level: @group_member.access_level, group_link_field: 'shared_with_group_id', group_access_field: 'shared_group_access'
+          %a.nav-link.active{ href: '#invite-member-pane', id: 'invite-member-tab', data: { toggle: 'tab' }, role: 'tab' }= _('Invite member')
+          %li.nav-tab{ role: 'presentation' }
+            %a.nav-link{ href: '#invite-group-pane', id: 'invite-group-tab', data: { toggle: 'tab', qa_selector: 'invite_group_tab' }, role: 'tab' }= _('Invite group')
+      .tab-content.gitlab-tab-content
+        .tab-pane.active{ id: 'invite-member-pane', role: 'tabpanel' }
+          = render_invite_member_for_group(@group, @group_member.access_level)
+        .tab-pane{ id: 'invite-group-pane', role: 'tabpanel' }
+          = render 'shared/members/invite_group', submit_url: group_group_links_path(@group), access_levels: GroupMember.access_level_roles, default_access_level: @group_member.access_level, group_link_field: 'shared_with_group_id', group_access_field: 'shared_group_access'
 
   = render_if_exists 'groups/group_members/ldap_sync'
 

app/views/projects/project_members/index.html.haml

@@ -4,16 +4,34 @@
 .js-remove-member-modal
 .row.gl-mt-3
   .col-lg-12
-    - if project_can_be_shared?
-      %h4
-        = _("Project members")
-      - if can_manage_project_members?(@project)
-        %p= share_project_description(@project)
-      - else
-        %p
-          = html_escape(_("Members can be added by project %{i_open}Maintainers%{i_close} or %{i_open}Owners%{i_close}")) % { i_open: '<i>'.html_safe, i_close: '</i>'.html_safe }
+    - if invite_members_allowed?(group)
+      .row
+        .col-md-12.col-lg-6.gl-display-flex
+          .gl-flex-direction-column.gl-flex-wrap.align-items-baseline
+            %h4
+              = _("Project members")
+            .gl-justify-content-bottom.gl-display-flex.align-items-center
+              - if can_manage_project_members?(@project)
+                %p= share_project_description(@project)
+              - else
+                %p
+                  = html_escape(_("Members can be added by project %{i_open}Maintainers%{i_close} or %{i_open}Owners%{i_close}")) % { i_open: '<i>'.html_safe, i_close: '</i>'.html_safe }
+        .col-md-12.col-lg-6
+          .gl-display-flex.gl-flex-wrap.gl-lg-justify-content-end.gl-mx-n2.gl-mb-3
+            .js-invite-members-trigger.gl-px-2.gl-sm-w-auto.gl-w-full.gl-mb-4{ data: { classes: 'btn btn-success gl-button gl-mt-3 gl-sm-w-auto gl-w-full', display_text: _('Invite members') } }
+        = render_if_exists 'projects/invite_members_modal', project: @project
 
-    - if can_manage_project_members?(@project) && project_can_be_shared?
+    - else
+      - if project_can_be_shared?
+        %h4
+          = _("Project members")
+        - if can_manage_project_members?(@project)
+          %p= share_project_description(@project)
+        - else
+          %p
+            = html_escape(_("Members can be added by project %{i_open}Maintainers%{i_close} or %{i_open}Owners%{i_close}")) % { i_open: '<i>'.html_safe, i_close: '</i>'.html_safe }
+
+    - if !invite_members_allowed?(group) && can_manage_project_members?(@project) && project_can_be_shared?
       - if !membership_locked? && @project.allowed_to_share_with_group?
         %ul.nav-links.nav.nav-tabs.gitlab-tabs{ role: 'tablist' }
           %li.nav-tab{ role: 'presentation' }

ee/spec/features/groups/members/list_members_spec.rb

@@ -51,6 +51,7 @@ RSpec.describe 'Groups > Members > List members' do
 
     before do
       stub_licensed_features(group_saml: true)
+      stub_feature_flags(invite_members_group_modal: false)
       allow(Gitlab::Session).to receive(:current).and_return(session)
 
       create(:identity, saml_provider: saml_provider, user: user1)

ee/spec/features/projects/settings/user_manages_members_spec.rb

@@ -8,6 +8,7 @@ RSpec.describe "User manages members" do
   let_it_be(:user) { create(:user) }
 
   before do
+    stub_feature_flags(invite_members_group_modal: false)
     sign_in(user)
   end
 

locale/gitlab.pot

@@ -15458,6 +15458,9 @@ msgstr ""
 msgid "Invite member"
 msgstr ""
 
+msgid "Invite members"
+msgstr ""
+
 msgid "Invite team members"
 msgstr ""
 

spec/features/admin/admin_groups_spec.rb

@@ -175,6 +175,7 @@ RSpec.describe 'Admin Groups' do
 
   describe 'add admin himself to a group' do
     before do
+      stub_feature_flags(invite_members_group_modal: false)
       group.add_user(:user, Gitlab::Access::OWNER)
     end
 

spec/features/groups/members/manage_groups_spec.rb

@@ -17,6 +17,7 @@ RSpec.describe 'Groups > Members > Manage groups', :js do
     let_it_be(:group_to_add) { create(:group) }
 
     before do
+      stub_feature_flags(invite_members_group_modal: false)
       group.add_owner(user)
       visit group_group_members_path(group)
     end

spec/features/groups/members/manage_members_spec.rb

@@ -11,9 +11,37 @@ RSpec.describe 'Groups > Members > Manage members' do
   let(:group) { create(:group) }
 
   before do
+    stub_feature_flags(invite_members_group_modal: false)
     sign_in(user1)
   end
 
+  shared_examples 'includes the correct Invite Members link' do |should_include, should_not_include|
+    it 'includes either the form or the modal trigger' do
+      group.add_owner(user1)
+
+      visit group_group_members_path(group)
+
+      expect(page).to have_selector(should_include)
+      expect(page).not_to have_selector(should_not_include)
+    end
+  end
+
+  context 'when Invite Members modal is enabled' do
+    before do
+      stub_feature_flags(invite_members_group_modal: true)
+    end
+
+    it_behaves_like 'includes the correct Invite Members link', '.js-invite-members-trigger', '.invite-users-form'
+  end
+
+  context 'when Invite Members modal is disabled' do
+    before do
+      stub_feature_flags(invite_members_group_modal: false)
+    end
+
+    it_behaves_like 'includes the correct Invite Members link', '.invite-users-form', '.js-invite-members-trigger'
+  end
+
   it 'update user to owner level', :js do
     group.add_owner(user1)
     group.add_developer(user2)

spec/features/groups/members/master_adds_member_with_expiration_date_spec.rb

@@ -11,6 +11,7 @@ RSpec.describe 'Groups > Members > Owner adds member with expiration date', :js
   let(:new_member) { create(:user, name: 'Mary Jane') }
 
   before do
+    stub_feature_flags(invite_members_group_modal: false)
     group.add_owner(user1)
     sign_in(user1)
   end

spec/features/projects/members/group_members_spec.rb

@@ -111,6 +111,7 @@ RSpec.describe 'Projects members', :js do
 
   context 'with a group requester' do
     before do
+      stub_feature_flags(invite_members_group_modal: false)
       group.request_access(group_requester)
       visit project_project_members_path(project)
     end

spec/features/projects/members/list_spec.rb

@@ -12,6 +12,7 @@ RSpec.describe 'Project members list' do
   let(:project) { create(:project, namespace: group) }
 
   before do
+    stub_feature_flags(invite_members_group_modal: false)
     sign_in(user1)
     group.add_owner(user1)
   end