Remove legacy shared/members/update.js.haml

In favor of a vanilla JS implementation

app/assets/javascripts/members.js

@@ -77,13 +77,19 @@ export default class Members {
 
       $expiresInText.text(sprintf(__('Expires in %{expires_at}'), { expires_at: expiresIn }));
 
-      const { expires_soon: expiresSoon } = data;
+      const { expires_soon: expiresSoon, expires_at_formatted: expiresAtFormatted } = data;
 
       if (expiresSoon) {
         $expiresInText.addClass('text-warning');
       } else {
         $expiresInText.removeClass('text-warning');
       }
+
+      // Update tooltip
+      if (expiresAtFormatted) {
+        $expiresInText.attr('title', expiresAtFormatted);
+        $expiresInText.attr('data-original-title', expiresAtFormatted);
+      }
     } else {
       $expiresIn.addClass('gl-display-none');
     }

app/controllers/concerns/membership_actions.rb

@@ -22,10 +22,14 @@ module MembershipActions
       .new(current_user, update_params)
       .execute(member)
 
-    member = present_members([member]).first
-
-    respond_to do |format|
-      format.js { render 'shared/members/update', locals: { member: member } }
+    if member.expires?
+      render json: {
+        expires_in: helpers.distance_of_time_in_words_to_now(member.expires_at),
+        expires_soon: member.expires_soon?,
+        expires_at_formatted: member.expires_at.to_time.in_time_zone.to_s(:medium)
+      }
+    else
+      render json: {}
     end
   end
 

app/views/shared/members/_member.html.haml

@@ -40,10 +40,11 @@
             = _("Requested %{time_ago}").html_safe % { time_ago: time_ago_with_tooltip(member.requested_at) }
           - else
             = _("Given access %{time_ago}").html_safe % { time_ago: time_ago_with_tooltip(member.created_at) }
-          - if member.expires?
-            ·
-            %span{ class: "#{"text-warning" if member.expires_soon?} has-tooltip", title: member.expires_at.to_time.in_time_zone.to_s(:medium) }
-              = _("Expires in %{expires_at}").html_safe % { expires_at: distance_of_time_in_words_to_now(member.expires_at) }
+          %span.js-expires-in{ class: ('gl-display-none' unless member.expires?) }
+            ·
+            %span.js-expires-in-text{ class: "has-tooltip#{' text-warning' if member.expires_soon?}", title: (member.expires_at.to_time.in_time_zone.to_s(:medium) if member.expires?) }
+              - if member.expires?
+                = _("Expires in %{expires_at}").html_safe % { expires_at: distance_of_time_in_words_to_now(member.expires_at) }
 
     - else
       = image_tag avatar_icon_for_email(member.invite_email, 40), class: "avatar s40 flex-shrink-0 flex-grow-0", alt: ''

app/views/shared/members/update.js.haml

-- member = local_assigns.fetch(:member)
-
-:plain
-  var $listItem = $('#{escape_javascript(render('shared/members/member', member: member))}');
-  $("##{dom_id(member)} .list-item-name").replaceWith($listItem.find('.list-item-name'));
-  gl.utils.localTimeAgo($('.js-timeago'), $("##{dom_id(member)}"));

spec/controllers/groups/group_members_controller_spec.rb

@@ -160,6 +160,42 @@ RSpec.describe Groups::GroupMembersController do
         expect(requester.reload.human_access).to eq(label)
       end
     end
+
+    context 'expiration date' do
+      let(:expiry_date) { 1.month.from_now.to_date }
+
+      before do
+        travel_to Time.now.utc.beginning_of_day
+
+        put(
+          :update,
+          params: {
+            group_member: { expires_at: expiry_date },
+            group_id: group,
+            id: requester
+          },
+          format: :json
+        )
+      end
+
+      context 'when `expires_at` is set' do
+        it 'returns correct json response' do
+          expect(json_response).to eq({
+            "expires_in" => "about 1 month",
+            "expires_soon" => false,
+            "expires_at_formatted" => expiry_date.to_time.in_time_zone.to_s(:medium)
+          })
+        end
+      end
+
+      context 'when `expires_at` is not set' do
+        let(:expiry_date) { nil }
+
+        it 'returns empty json response' do
+          expect(json_response).to be_empty
+        end
+      end
+    end
   end
 
   describe 'DELETE destroy' do
@@ -368,7 +404,7 @@ RSpec.describe Groups::GroupMembersController do
               group_id: group,
               id: membership
             },
-            format: :js
+            format: :json
 
         expect(response).to have_gitlab_http_status(:ok)
       end

spec/controllers/projects/project_members_controller_spec.rb

@@ -151,6 +151,43 @@ RSpec.describe Projects::ProjectMembersController do
         expect(requester.reload.human_access).to eq(label)
       end
     end
+
+    context 'expiration date' do
+      let(:expiry_date) { 1.month.from_now.to_date }
+
+      before do
+        travel_to Time.now.utc.beginning_of_day
+
+        put(
+          :update,
+          params: {
+            project_member: { expires_at: expiry_date },
+            namespace_id: project.namespace,
+            project_id: project,
+            id: requester
+          },
+          format: :json
+        )
+      end
+
+      context 'when `expires_at` is set' do
+        it 'returns correct json response' do
+          expect(json_response).to eq({
+            "expires_in" => "about 1 month",
+            "expires_soon" => false,
+            "expires_at_formatted" => expiry_date.to_time.in_time_zone.to_s(:medium)
+          })
+        end
+      end
+
+      context 'when `expires_at` is not set' do
+        let(:expiry_date) { nil }
+
+        it 'returns empty json response' do
+          expect(json_response).to be_empty
+        end
+      end
+    end
   end
 
   describe 'DELETE destroy' do

spec/features/groups/members/master_adds_member_with_expiration_date_spec.rb

@@ -6,65 +6,66 @@ RSpec.describe 'Groups > Members > Owner adds member with expiration date', :js
   include Select2Helper
   include ActiveSupport::Testing::TimeHelpers
 
-  let(:user1) { create(:user, name: 'John Doe') }
-  let!(:new_member) { create(:user, name: 'Mary Jane') }
-  let(:group) { create(:group) }
+  let_it_be(:user1) { create(:user, name: 'John Doe') }
+  let_it_be(:group) { create(:group) }
+  let(:new_member) { create(:user, name: 'Mary Jane') }
 
   before do
     stub_feature_flags(vue_group_members_list: false)
 
+    travel_to Time.now.utc.beginning_of_day
+
     group.add_owner(user1)
     sign_in(user1)
   end
 
   it 'expiration date is displayed in the members list' do
-    travel_to Time.zone.parse('2016-08-06 08:00') do
-      date = 4.days.from_now
-      visit group_group_members_path(group)
-
-      page.within '.invite-users-form' do
-        select2(new_member.id, from: '#user_ids', multiple: true)
-        fill_in 'expires_at', with: date.to_s(:medium) + "\n"
-        click_on 'Invite'
-      end
-
-      page.within "#group_member_#{group_member_id(new_member)}" do
-        expect(page).to have_content('Expires in 4 days')
-      end
+    visit group_group_members_path(group)
+
+    page.within '.invite-users-form' do
+      select2(new_member.id, from: '#user_ids', multiple: true)
+
+      fill_in 'expires_at', with: 3.days.from_now.to_date
+      find_field('expires_at').native.send_keys :enter
+
+      click_on 'Invite'
+    end
+
+    page.within "#group_member_#{group_member_id}" do
+      expect(page).to have_content('Expires in 3 days')
     end
   end
 
-  it 'change expiration date' do
-    travel_to Time.zone.parse('2016-08-06 08:00') do
-      date = 3.days.from_now
-      group.add_developer(new_member)
+  it 'changes expiration date' do
+    group.add_developer(new_member)
+    visit group_group_members_path(group)
+
+    page.within "#group_member_#{group_member_id}" do
+      fill_in 'Expiration date', with: 3.days.from_now.to_date
+      find_field('Expiration date').native.send_keys :enter
 
-      visit group_group_members_path(group)
+      wait_for_requests
 
-      page.within "#group_member_#{group_member_id(new_member)}" do
-        find('.js-access-expiration-date').set date.to_s(:medium) + "\n"
-        wait_for_requests
-        expect(page).to have_content('Expires in 3 days')
-      end
+      expect(page).to have_content('Expires in 3 days')
     end
   end
 
-  it 'remove expiration date' do
-    travel_to Time.zone.parse('2016-08-06 08:00') do
-      date = 3.days.from_now
-      group_member = create(:group_member, :developer, user: new_member, group: group, expires_at: date.to_s(:medium))
+  it 'clears expiration date' do
+    create(:group_member, :developer, user: new_member, group: group, expires_at: 3.days.from_now.to_date)
+    visit group_group_members_path(group)
+
+    page.within "#group_member_#{group_member_id}" do
+      expect(page).to have_content('Expires in 3 days')
+
+      find('.js-clear-input').click
 
-      visit group_group_members_path(group)
+      wait_for_requests
 
-      page.within "#group_member_#{group_member.id}" do
-        find('.js-clear-input').click
-        wait_for_requests
-        expect(page).not_to have_content('Expires in 3 days')
-      end
+      expect(page).not_to have_content('Expires in')
     end
   end
 
-  def group_member_id(user)
+  def group_member_id
     group.members.find_by(user_id: new_member).id
   end
 end

spec/features/projects/members/master_adds_member_with_expiration_date_spec.rb

@@ -6,43 +6,64 @@ RSpec.describe 'Projects > Members > Maintainer adds member with expiration date
   include Select2Helper
   include ActiveSupport::Testing::TimeHelpers
 
-  let(:maintainer) { create(:user) }
-  let(:project) { create(:project) }
-  let!(:new_member) { create(:user) }
+  let_it_be(:maintainer) { create(:user) }
+  let_it_be(:project) { create(:project) }
+  let(:new_member) { create(:user) }
 
   before do
+    travel_to Time.now.utc.beginning_of_day
+
     project.add_maintainer(maintainer)
     sign_in(maintainer)
   end
 
   it 'expiration date is displayed in the members list' do
-    travel_to Time.zone.parse('2016-08-06 08:00') do
-      date = 4.days.from_now
-      visit project_project_members_path(project)
-
-      page.within '.invite-users-form' do
-        select2(new_member.id, from: '#user_ids', multiple: true)
-        fill_in 'expires_at', with: date.to_s(:medium) + "\n"
-        click_on 'Invite'
-      end
-
-      page.within "#project_member_#{new_member.project_members.first.id}" do
-        expect(page).to have_content('Expires in 4 days')
-      end
+    visit project_project_members_path(project)
+
+    page.within '.invite-users-form' do
+      select2(new_member.id, from: '#user_ids', multiple: true)
+
+      fill_in 'expires_at', with: 3.days.from_now.to_date
+      find_field('expires_at').native.send_keys :enter
+
+      click_on 'Invite'
+    end
+
+    page.within "#project_member_#{project_member_id}" do
+      expect(page).to have_content('Expires in 3 days')
+    end
+  end
+
+  it 'changes expiration date' do
+    project.team.add_users([new_member.id], :developer, expires_at: Date.today.to_date)
+    visit project_project_members_path(project)
+
+    page.within "#project_member_#{project_member_id}" do
+      fill_in 'Expiration date', with: 3.days.from_now.to_date
+      find_field('Expiration date').native.send_keys :enter
+
+      wait_for_requests
+
+      expect(page).to have_content('Expires in 3 days')
     end
   end
 
-  it 'change expiration date' do
-    travel_to Time.zone.parse('2016-08-06 08:00') do
-      date = 3.days.from_now
-      project.team.add_users([new_member.id], :developer, expires_at: Date.today.to_s(:medium))
-      visit project_project_members_path(project)
-
-      page.within "#project_member_#{new_member.project_members.first.id}" do
-        find('.js-access-expiration-date').set date.to_s(:medium) + "\n"
-        wait_for_requests
-        expect(page).to have_content('Expires in 3 days')
-      end
+  it 'clears expiration date' do
+    project.team.add_users([new_member.id], :developer, expires_at: 3.days.from_now.to_date)
+    visit project_project_members_path(project)
+
+    page.within "#project_member_#{project_member_id}" do
+      expect(page).to have_content('Expires in 3 days')
+
+      find('.js-clear-input').click
+
+      wait_for_requests
+
+      expect(page).not_to have_content('Expires in')
     end
   end
+
+  def project_member_id
+    project.members.find_by(user_id: new_member).id
+  end
 end