Better UX for managing teams

- Moves the add team member to an inline box, rather than a popup
- Feedback bar is now used to show when a member is added, invited or removed
- Fixes bugs around using the view on mobile

Fixes #1509

static/css/core-ui.css

@@ -1176,7 +1176,7 @@ a:focus {
 
 @media (max-width: 767px) {
   .co-table tr.indented-row td:first-child {
-    padding-left: 0px;
+    padding-left: 10px;
   }
 }
 

static/css/pages/team-view.css

@@ -1,5 +1,6 @@
 .team-view .co-main-content-panel {
   padding: 20px;
+  position: relative;
 }
 
 .team-view .team-title {
@@ -58,4 +59,10 @@
 
 .team-view .co-table-header-row:first-child td {
   padding-top: 10px !important;
+}
+
+.team-view .section-header {
+  text-align: left;
+  color: #aaa;
+  margin-bottom: 20px;
 }

static/css/quay.css

@@ -2456,34 +2456,6 @@ p.editable:hover i {
   min-height: 50px;
 }
 
-.team-view .panel {
-  display: inline-block;
-  width: 620px;
-}
-
-.team-view .entity {
-  font-size: 1.2em;
-  min-width: 510px;
-}
-
-.team-view .entity i {
-  margin-right: 6px;
-}
-
-.team-view .entity-search {
-  margin-top: 10px;
-}
-
-.team-view .delete-ui {
-  display: inline-block;
-  width: 78px;
-}
-
-.team-view .delete-ui i {
-  margin-top: 8px;
-  float: right;
-}
-
 .org-view .team-listing {
   padding: 4px;
 }

static/directives/team-view-add.html

@@ -1,6 +1,6 @@
 <div class="team-view-add-element" focusable-popover-content>
   <div class="entity-search"
-       namespace="orgname" placeholder="allowEmail ? 'Add a registered user, robot or email address...' : 'Add a registered user or robot...'"
+       namespace="orgname" placeholder="allowEmail ? 'Add a registered user, robot or email address to the team' : 'Add a registered user or robot to the team'"
        entity-selected="addNewMember(entity)"
        email-selected="inviteEmail(email)"
        current-entity="selectedMember"
@@ -10,7 +10,9 @@
        allow-emails="allowEmail"
        email-message="Press enter to invite the entered e-mail address to this team"
        ng-show="!addingMember"></div>
-  <div class="quay-spinner" ng-show="addingMember"></div>
+  <div ng-show="addingMember">
+    <div class="cor-loader-inline"></div> Inviting team member
+  </div>
   <div class="help-text" ng-show="!addingMember">
   <span ng-if="allowEmail">Search by registry username, robot account name or enter an email address to invite</span>
   <span ng-if="!allowEmail">Search by registry username or robot account name</span>

static/js/pages/team-view.js

@@ -19,6 +19,7 @@
     $scope.addingMember = false;
     $scope.memberMap = null;
     $scope.allowEmail = Features.MAILING;
+    $scope.feedback = null;
 
     $rootScope.title = 'Loading...';
 
@@ -49,6 +50,14 @@
         $scope.members.push(resp);
         $scope.memberMap[resp.email] = resp;
         $scope.addingMember = false;
+
+         $scope.feedback = {
+            'kind': 'success',
+            'message': 'E-mail address {email} was invited to join the team',
+            'data': {
+              'email': email
+            }
+          };
       }, errorHandler);
     };
 
@@ -70,6 +79,14 @@
         $scope.members.push(resp);
         $scope.memberMap[resp.name] = resp;
         $scope.addingMember = false;
+
+        $scope.feedback = {
+          'kind': 'success',
+          'message': 'User {username} was added to the team',
+          'data': {
+            'username': member.name
+          }
+        };
       }, errorHandler);
     };
 
@@ -95,6 +112,14 @@
         var index = $.inArray($scope.memberMap[email], $scope.members);
         $scope.members.splice(index, 1);
         delete $scope.memberMap[email];
+
+        $scope.feedback = {
+          'kind': 'success',
+          'message': 'Invitation to e-amil address {email} was revoked',
+          'data': {
+            'email': email
+          }
+        };
       }, ApiService.errorDisplay('Cannot revoke team invite'));
     };
 
@@ -110,6 +135,14 @@
         var index = $.inArray($scope.memberMap[username], $scope.members);
         $scope.members.splice(index, 1);
         delete $scope.memberMap[username];
+
+        $scope.feedback = {
+          'kind': 'success',
+          'message': 'User {username} was removed from the team',
+          'data': {
+            'username': username
+          }
+        };
       }, ApiService.errorDisplay('Cannot remove team member'));
     };
 
@@ -123,6 +156,11 @@
 
       var teaminfo = $scope.organization.teams[teamname];
       ApiService.updateOrganizationTeam(teaminfo, params).then(function(resp) {
+        $scope.feedback = {
+          'kind': 'success',
+          'message': 'Team description changed',
+          'data': {}
+        };
       }, function() {
         $('#cannotChangeTeamModal').modal({});
       });

static/partials/team-view.html

@@ -16,27 +16,25 @@
     </div>
 
     <div class="co-main-content-panel">
-      <div class="team-view-header">
-        <div ng-show="canEditMembers" class="side-controls">
-          <div class="hidden-xs">
-          <button class="btn btn-primary"
-                  id="showAddMember"
-                  data-title="Add Team Member"
-                  data-content-template="/static/directives/team-view-add.html"
-                  data-placement="bottom-right"
-                  bs-popover="bs-popover">
-            <i class="fa fa-plus"></i>
-            Add Team Member
-          </button>
-          </div>
-        </div>
+      <div class="feedback-bar" feedback="feedback"></div>
 
+      <!-- Description -->
+      <div class="section-header">Team Description</div>
+      <div class="team-view-header">
         <div class="description markdown-input" content="team.description"
              can-write="organization.is_admin"
              content-changed="updateForDescription"
              field-title="'team description'"></div>
       </div>
 
+      <!-- Members -->
+      <div ng-show="canEditMembers" style="float:right; margin-top: 10px;">
+        <div class="hidden-xs">
+          <div ng-include="'/static/directives/team-view-add.html'" style="max-width: 500px;"></div>
+        </div>
+      </div>
+      <div class="section-header">Team Members</div>
+
       <div class="empty" ng-if="!members.length">
         <div class="empty-primary-msg">This team has no members.</div>
         <div class="empty-secondary-msg">
@@ -57,7 +55,7 @@
             <span class="entity-reference" entity="member" namespace="organization.name"
                   show-avatar="true" avatar-size="24"></span>
           </td>
-          <td>
+          <td class="options-col">
             <span class="cor-options-menu" ng-if="canEditMembers">
               <span class="cor-option" option-click="removeMember(member.name)">
                 <i class="fa fa-times"></i> Remove {{ member.name }}
@@ -77,7 +75,7 @@
           <td class="user entity">
             <span class="entity-reference" entity="member" namespace="organization.name"></span>
           </td>
-          <td>
+          <td class="options-col">
             <span class="cor-options-menu" ng-if="canEditMembers">
               <span class="cor-option" option-click="removeMember(member.name)">
                 <i class="fa fa-times"></i> Remove {{ member.name }}
@@ -103,7 +101,7 @@
               {{ member.email }}
             </span>
           </td>
-          <td>
+          <td class="options-col">
             <span class="cor-options-menu" ng-if="canEditMembers">
               <span class="cor-option" option-click="revokeInvite(member)">
                 <i class="fa fa-times"></i> Revoke invite
@@ -113,12 +111,13 @@
         </tr>
       </table>
 
+      <!-- Add team member (mobile) -->
       <div ng-show="canEditMembers">
-        <div ng-if-media="'(max-width: 767px)'">
-          <div ng-include="'/static/directives/team-view-add.html'"></div>
+        <div class="visible-xs" style="margin-top: 20px; padding-top: 10px; border-top: 1px solid #eee;">
+          <div class="section-header">Add team member</div>
+          <div ng-include="'/static/directives/team-view-add.html'" style="max-width: 500px;"></div>
         </div>
       </div>
-
     </div>
   </div>
 </div>