Merge pull request #13380 from grafana/13275-pending-invites

switch button for org users

public/app/features/org/partials/orgUsers.html

@@ -2,16 +2,25 @@
 
 <div class="page-container page-body">
   <div class="page-action-bar">
-    <label class="gf-form gf-form--grow gf-form--has-input-icon">
+    <label class="gf-form gf-form--has-input-icon">
       <input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" placeholder="Filter by username or email" />
       <i class="gf-form-input-icon fa fa-search"></i>
     </label>
 
-    <div class="page-action-bar__spacer"></div>
-
-    <button class="btn btn-inverse" ng-show="ctrl.pendingInvites.length" ng-click="ctrl.showInvites = true">
+    <div ng-if="ctrl.pendingInvites.length" style="margin-left: 1rem">
+      <button class="btn toggle-btn active" ng-if="!ctrl.showInvites">
+        Users
+      </button><button class="btn toggle-btn" ng-if="!ctrl.showInvites" ng-click="ctrl.showInvites = true">
+        Pending Invites ({{ctrl.pendingInvites.length}})
+      </button>
+      <button class="btn toggle-btn" ng-if="ctrl.showInvites" ng-click="ctrl.showInvites = false">
+        Users
+      </button><button class="btn toggle-btn active" ng-if="ctrl.showInvites">
         Pending Invites ({{ctrl.pendingInvites.length}})
       </button>
+    </div>
+
+    <div class="page-action-bar__spacer"></div>
 
     <a class="btn btn-success" href="org/users/invite" ng-show="ctrl.canInvite">
       <i class="fa fa-plus"></i>

public/sass/components/_buttons.scss

@@ -221,6 +221,31 @@ $btn-service-icon-width: 35px;
   }
 }
 
+//Toggle button
+
+.toggle-btn {
+  background: $input-label-bg;
+  color: $text-color-weak;
+  box-shadow: $card-shadow;
+
+  &:first-child {
+    border-radius: 2px 0 0 2px;
+    margin: 0;
+  }
+  &:last-child {
+    border-radius: 0 2px 2px 0;
+    margin-left: 0 !important;
+  }
+
+  &.active {
+    background-color: lighten($input-label-bg, 5%);
+    color: $link-color;
+    &:hover {
+      cursor: default;
+    }
+  }
+}
+
 //Button animations
 
 .btn-loading span {