Merge branch 'member_timeago' into 'master'

Add information when member joined a team

## What does this MR do?
It adds timeago label by every member on team page
## Are there points in the code the reviewer needs to double check?

Yes, maybe design is not OK, please check.

## Why was this MR needed?

It's useful information

## What are the relevant issue numbers?

## Screenshots (if relevant)

![joxi_screenshot_1467820915126](/uploads/9e5657443a10a9fe204367d7b6749b1f/joxi_screenshot_1467820915126.png)



See merge request !5116

4 files changed, 56 insertions, 42 deletions

diff --git a/CHANGELOG b/CHANGELOG
index de5f1e8cda7..bc9bb7747a4 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -47,6 +47,7 @@ v 8.10.0 (unreleased)
   - Handle custom Git hook result in GitLab UI
   - Allow '?', or '&' for label names
   - Fix importer for GitHub Pull Requests when a branch was reused across Pull Requests
+  - Add date when user joined the team on the member page
 
 v 8.9.5
   - Add more debug info to import/export and memory killer. !5108
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index a12c0bba44a..aed0b44d91b 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -137,6 +137,15 @@ ul.content-list {
       padding-top: 1px;
       float: right;
 
+      > .control-text {
+        margin-right: $gl-padding-top;
+        line-height: 40px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
       > .btn,
       > .btn-group {
         margin-right: $gl-padding-top;
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index a884e78e6e7..5ae485f36ba 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -3,71 +3,74 @@
 - user = member.user
 
 %li.js-toggle-container{ class: dom_class(member), id: dom_id(member) }
-  %span{ class: ("list-item-name" if show_controls) }
-    - if user
-      = image_tag avatar_icon(user, 24), class: "avatar s24", alt: ''
-      %strong
-        = link_to user.name, user_path(user)
-      %span.cgray= user.username
-
-      - if user == current_user
-        %span.label.label-success It's you
-
-      - if user.blocked?
-        %label.label.label-danger
-          %strong Blocked
-
-      - if member.request?
-        %span.cgray
-          – Requested
-          = time_ago_with_tooltip(member.requested_at)
-    - else
-      = image_tag avatar_icon(member.invite_email, 24), class: "avatar s24", alt: ''
-      %strong= member.invite_email
-      %span.cgray
-        – Invited
-        - if member.created_by
-          by
-          = link_to member.created_by.name, user_path(member.created_by)
-        = time_ago_with_tooltip(member.created_at)
-
-      - if show_controls && can?(current_user, action_member_permission(:admin, member), member.source)
-        = link_to 'Resend invite', polymorphic_path([:resend_invite, member]),
-                  method: :post,
-                  class: 'btn-xs btn'
-
   - if show_roles
-    %span.pull-right
-      %strong= member.human_access
+    .controls
+      %strong.control-text= member.human_access
       - if show_controls
+        - if !user && can?(current_user, action_member_permission(:admin, member), member.source)
+          = link_to 'Resend invite', polymorphic_path([:resend_invite, member]),
+                    method: :post,
+                    class: 'btn'
+
         - if can?(current_user, action_member_permission(:update, member), member)
           = button_tag icon('pencil'),
                        type: 'button',
-                       class: 'btn-xs btn btn-grouped inline js-toggle-button',
+                       class: 'btn inline js-toggle-button',
                        title: 'Edit access level'
 
           - if member.request?
-             
             = link_to icon('check inverse'), polymorphic_path([:approve_access_request, member]),
                       method: :post,
-                      class: 'btn-xs btn btn-success',
+                      class: 'btn btn-success',
                       title: 'Grant access'
 
         - if can?(current_user, action_member_permission(:destroy, member), member)
-           
           - if current_user == user
             = link_to icon('sign-out', text: 'Leave'), polymorphic_path([:leave, member.source, :members]),
                       method: :delete,
                       data: { confirm: leave_confirmation_message(member.source) },
-                      class: 'btn-xs btn btn-remove'
+                      class: 'btn btn-remove'
           - else
             = link_to icon('trash'), member,
                       remote: true,
                       method: :delete,
                       data: { confirm: remove_member_message(member) },
-                      class: 'btn-xs btn btn-remove',
+                      class: 'btn btn-remove',
                       title: remove_member_title(member)
 
+
+  %span{ class: ("list-item-name" if show_controls) }
+    - if user
+      = image_tag avatar_icon(user, 40), class: "avatar s40", alt: ''
+      %strong
+        = link_to user.name, user_path(user)
+      %span.cgray= user.username
+
+      - if user == current_user
+        %span.label.label-success It's you
+
+      - if user.blocked?
+        %label.label.label-danger
+          %strong Blocked
+
+      .cgray
+        - if member.request?
+          Requested
+          = time_ago_with_tooltip(member.requested_at)
+        - else
+          Joined #{time_ago_with_tooltip(member.created_at)}
+
+    - else
+      = image_tag avatar_icon(member.invite_email, 40), class: "avatar s40", alt: ''
+      %strong= member.invite_email
+      .cgray
+        Invited
+        - if member.created_by
+          by
+          = link_to member.created_by.name, user_path(member.created_by)
+        = time_ago_with_tooltip(member.created_at)
+
+  - if show_roles
     .edit-member.hide.js-toggle-content
       %br
       = form_for member, remote: true do |f|
diff --git a/features/steps/admin/groups.rb b/features/steps/admin/groups.rb
index 8613dc537cc..0c89a3db9ad 100644
--- a/features/steps/admin/groups.rb
+++ b/features/steps/admin/groups.rb
@@ -62,7 +62,8 @@ class Spinach::Features::AdminGroups < Spinach::FeatureSteps
 
   step 'I should see "johndoe@gitlab.com" in team list in every project as "Reporter"' do
     page.within ".group-users-list" do
-      expect(page).to have_content "johndoe@gitlab.com – Invited by"
+      expect(page).to have_content "johndoe@gitlab.com"
+      expect(page).to have_content "Invited by"
       expect(page).to have_content "Reporter"
     end
   end