Launch invite modal from invite CTA on project empty state

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

@@ -3,6 +3,8 @@ import Activities from '~/activities';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import BlobViewer from '~/blob/viewer/index';
 import { initUploadForm } from '~/blob_edit/blob_bundle';
+import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 import leaveByUrl from '~/namespaces/leave_by_url';
 import initVueNotificationsDropdown from '~/notifications';
 import { initUploadFileTrigger } from '~/projects/upload_file_experiment';
@@ -44,3 +46,5 @@ initVueNotificationsDropdown();
 new ShortcutsNavigation(); // eslint-disable-line no-new
 
 initUploadFileTrigger();
+initInviteMembersModal();
+initInviteMembersTrigger();

app/views/projects/_invite_members.html.haml

@@ -3,6 +3,10 @@
   track_event: 'render' } }
   = s_('InviteMember|Invite your team')
 %p= s_('InviteMember|Add members to this project and start collaborating with your team.')
-= link_to s_('InviteMember|Invite members'), project_project_members_path(@project, sort: :access_level_desc),
-        class: 'gl-button btn btn-confirm gl-mb-8 gl-xs-w-full',
-        data: { track_event: 'click_button', track_label: 'invite_members_empty_project' }
+.js-invite-members-trigger{ data: { variant: 'confirm',
+  classes: 'gl-mb-8 gl-xs-w-full',
+  display_text: s_('InviteMember|Invite members'),
+  event: 'click_button',
+  label: 'invite_members_empty_project' } }
+
+= render 'shared/issuable/invite_members_trigger', project: @project

spec/features/projects/user_views_empty_project_spec.rb

@@ -3,8 +3,8 @@
 require 'spec_helper'
 
 RSpec.describe 'User views an empty project' do
-  let(:project) { create(:project, :empty_repo) }
-  let(:user) { create(:user) }
+  let_it_be(:project) { create(:project, :empty_repo) }
+  let_it_be(:user) { create(:user) }
 
   shared_examples 'allowing push to default branch' do
     it 'shows push-to-master instructions' do
@@ -14,17 +14,25 @@ RSpec.describe 'User views an empty project' do
     end
   end
 
-  describe 'as a maintainer' do
+  context 'when user is a maintainer' do
     before do
       project.add_maintainer(user)
       sign_in(user)
     end
 
     it_behaves_like 'allowing push to default branch'
+
+    it 'shows a link for inviting members and launches invite modal', :js do
+      visit project_path(project)
+
+      click_button 'Invite members'
+
+      expect(page).to have_content("You're inviting members to the")
+    end
   end
 
-  describe 'as an admin' do
-    let(:user) { create(:user, :admin) }
+  context 'when user is an admin' do
+    let_it_be(:user) { create(:user, :admin) }
 
     context 'when admin mode is enabled' do
       before do
@@ -44,16 +52,17 @@ RSpec.describe 'User views an empty project' do
     end
   end
 
-  describe 'as a developer' do
+  context 'when user is a developer' do
     before do
       project.add_developer(user)
       sign_in(user)
     end
 
-    it 'does not show push-to-master instructions' do
+    it 'does not show push-to-master instructions nor invite members link', :aggregate_failures, :js do
       visit project_path(project)
 
       expect(page).not_to have_content('git push -u origin master')
+      expect(page).not_to have_button(text: 'Invite members')
     end
   end
 end

spec/views/projects/empty.html.haml_spec.rb

@@ -57,20 +57,24 @@ RSpec.describe 'projects/empty' do
       render
 
       expect(rendered).to have_selector('[data-track-event=render]')
-      expect(rendered).to have_selector('[data-track-label=invite_members_empty_project]', count: 2)
+      expect(rendered).to have_selector('[data-track-label=invite_members_empty_project]')
       expect(rendered).to have_content('Invite your team')
       expect(rendered).to have_content('Add members to this project and start collaborating with your team.')
-      expect(rendered).to have_link('Invite members', href: project_project_members_path(project, sort: :access_level_desc))
-      expect(rendered).to have_selector('[data-track-event=click_button]')
+      expect(rendered).to have_selector('.js-invite-members-trigger')
+      expect(rendered).to have_selector('.js-invite-members-modal')
+      expect(rendered).to have_selector('[data-label=invite_members_empty_project]')
+      expect(rendered).to have_selector('[data-event=click_button]')
     end
 
     context 'when user does not have permissions to invite members' do
       let(:can_import_members) { false }
 
-      it 'does not show invite member info' do
+      it 'does not show invite member info', :aggregate_failures do
         render
 
         expect(rendered).not_to have_content('Invite your team')
+        expect(rendered).not_to have_selector('.js-invite-members-trigger')
+        expect(rendered).not_to have_selector('.js-invite-members-modal')
       end
     end
   end