Updated JS based on review

Fixed group links dropdown to match

3 files changed, 28 insertions, 16 deletions

diff --git a/app/assets/javascripts/members.js.es6 b/app/assets/javascripts/members.js.es6
index 64826894965..e3f367a11eb 100644
--- a/app/assets/javascripts/members.js.es6
+++ b/app/assets/javascripts/members.js.es6
@@ -31,14 +31,8 @@
           toggleLabel(selected, $el) {
             return $el.text();
           },
-          clicked: (selected, $el) => {
-            const $link = $($el);
-            const { $toggle, $dateInput } = this.getMemberListItems($link);
-
-            $toggle.attr('disabled', true);
-            $dateInput.attr('disabled', true);
-
-            $btn.closest('form').trigger('submit.rails');
+          clicked: (selected, $link) => {
+            this.formSubmit(null, $link);
           },
         });
       });
@@ -55,21 +49,21 @@
       }
     }
 
-    formSubmit(e) {
-      const $this = $(e.currentTarget);
+    formSubmit(e, $el = null) {
+      const $this = e ? $(e.currentTarget) : $el;
       const { $toggle, $dateInput } = this.getMemberListItems($this);
 
       $this.closest('form').trigger('submit.rails');
 
-      $toggle.attr('disabled', true);
-      $dateInput.attr('disabled', true);
+      $toggle.disable();
+      $dateInput.disable();
     }
 
     formSuccess(e) {
       const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
 
-      $toggle.removeAttr('disabled');
-      $dateInput.removeAttr('disabled');
+      $toggle.enable();
+      $dateInput.enable();
     }
 
     getMemberListItems($el) {
diff --git a/app/views/projects/group_links/update.js.haml b/app/views/projects/group_links/update.js.haml
index af9a5b19060..55520fda494 100644
--- a/app/views/projects/group_links/update.js.haml
+++ b/app/views/projects/group_links/update.js.haml
@@ -1,3 +1,4 @@
 :plain
   var $listItem = $('#{escape_javascript(render('shared/members/group', group_link: @group_link))}');
   $("#group_member_#{@group_link.id} .list-item-name").replaceWith($listItem.find('.list-item-name'));
+  gl.utils.localTimeAgo($('.js-timeago'), $("#group_member_#{@group_link.id}"));
diff --git a/app/views/shared/members/_group.html.haml b/app/views/shared/members/_group.html.haml
index 1c0346bbc78..8928de9097b 100644
--- a/app/views/shared/members/_group.html.haml
+++ b/app/views/shared/members/_group.html.haml
@@ -1,7 +1,8 @@
 - group_link = local_assigns[:group_link]
 - group = group_link.group
 - can_admin_member = can?(current_user, :admin_project_member, @project)
-%li.member.group_member{ id: "group_member_#{group_link.id}" }
+- dom_id = "group_member_#{group_link.id}"
+%li.member.group_member{ id: dom_id }
   %span{ class: "list-item-name" }
     = image_tag group_icon(group), class: "avatar s40", alt: ''
     %strong
@@ -14,7 +15,23 @@
           Expires in #{distance_of_time_in_words_to_now(group_link.expires_at)}
   .controls.member-controls
     = form_tag namespace_project_group_link_path(@project.namespace, @project, group_link), method: :put, remote: true, class: 'form-horizontal js-edit-member-form' do
-      = select_tag 'group_link[group_access]', options_for_select(ProjectGroupLink.access_options, group_link.group_access), class: 'form-control member-form-control append-right-5 js-member-update-control', id: "member_access_level_#{group.id}", disabled: !can_admin_member
+      = hidden_field_tag "group_link[group_access]", group_link.group_access
+      .member-form-control.dropdown.append-right-5
+        %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
+          disabled: !can_admin_member,
+          data: { toggle: "dropdown", field_name: "group_link[group_access]" } }
+          %span.dropdown-toggle-text
+            = group_link.human_access
+          = icon("chevron-down")
+        .dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
+          = dropdown_title("Change permissions")
+          .dropdown-content
+            %ul
+              - Gitlab::Access.options.each do |role, role_id|
+                %li
+                  = link_to role, "javascript:void(0)",
+                    class: ("is-active" if group_link.group_access == role_id),
+                    data: { id: role_id, el_id: dom_id }
       .prepend-left-5.clearable-input.member-form-control
         = text_field_tag 'group_link[expires_at]', group_link.expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{group.id}", disabled: !can_admin_member
         %i.clear-icon.js-clear-input