fixed toggle buttons

public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap

@@ -17,8 +17,8 @@ exports[`Render should render action bar and datasources 1`] = `
           "title": "Add data source",
         }
       }
+      onSetLayoutMode={[Function]}
       searchQuery=""
-      setLayoutMode={[Function]}
       setSearchQuery={[Function]}
     />
     <DataSourcesList

public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap

@@ -16,8 +16,8 @@ exports[`Render should render component 1`] = `
           "title": "Find more plugins on Grafana.com",
         }
       }
+      onSetLayoutMode={[Function]}
       searchQuery=""
-      setLayoutMode={[Function]}
       setSearchQuery={[Function]}
     />
     <PluginList

public/app/features/users/UsersActionBar.test.tsx

@@ -11,6 +11,7 @@ const setup = (propOverrides?: object) => {
     canInvite: false,
     externalUserMngLinkUrl: '',
     externalUserMngLinkName: '',
+    showInvites: false,
   };
 
   Object.assign(props, propOverrides);

public/app/features/users/UsersActionBar.tsx

 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
+import classNames from 'classnames/bind';
 import { setUsersSearchQuery } from './state/actions';
 import { getInviteesCount, getUsersSearchQuery } from './state/selectors';
 
@@ -9,6 +10,7 @@ export interface Props {
   onShowInvites: () => void;
   pendingInvitesCount: number;
   canInvite: boolean;
+  showInvites: boolean;
   externalUserMngLinkUrl: string;
   externalUserMngLinkName: string;
 }
@@ -23,8 +25,21 @@ export class UsersActionBar extends PureComponent<Props> {
       pendingInvitesCount,
       setUsersSearchQuery,
       onShowInvites,
+      showInvites,
     } = this.props;
 
+    const pendingInvitesButtonStyle = classNames({
+      btn: true,
+      'toggle-btn': true,
+      active: showInvites,
+    });
+
+    const usersButtonStyle = classNames({
+      btn: true,
+      'toggle-btn': true,
+      active: !showInvites,
+    });
+
     return (
       <div className="page-action-bar">
         <div className="gf-form gf-form--grow">
@@ -38,13 +53,17 @@ export class UsersActionBar extends PureComponent<Props> {
             />
             <i className="gf-form-input-icon fa fa-search" />
           </label>
-
-          <div className="page-action-bar__spacer" />
           {pendingInvitesCount > 0 && (
-            <button className="btn btn-inverse" onClick={onShowInvites}>
-              Pending Invites ({pendingInvitesCount})
-            </button>
+            <div style={{ marginLeft: '1rem' }}>
+              <button className={usersButtonStyle} key="users" onClick={onShowInvites}>
+                Users
+              </button>
+              <button className={pendingInvitesButtonStyle} onClick={onShowInvites} key="pending-invites">
+                Pending Invites ({pendingInvitesCount})
+              </button>
+            </div>
           )}
+          <div className="page-action-bar__spacer" />
           {canInvite && (
             <a className="btn btn-success" href="org/users/invite">
               <i className="fa fa-plus" />

public/app/features/users/UsersListPage.tsx

@@ -82,7 +82,7 @@ export class UsersListPage extends PureComponent<Props, State> {
       <div>
         <PageHeader model={navModel} />
         <div className="page-container page-body">
-          <UsersActionBar onShowInvites={this.onShowInvites} />
+          <UsersActionBar onShowInvites={this.onShowInvites} showInvites={this.state.showInvites} />
           {externalUserMngInfo && (
             <div className="grafana-info-box">
               <span>{externalUserMngInfo}</span>

public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap

@@ -50,16 +50,32 @@ exports[`Render should render pending invites button 1`] = `
       />
     </label>
     <div
+      style={
+        Object {
+          "marginLeft": "1rem",
+        }
+      }
+    >
+      <button
+        className="btn toggle-btn active"
+        key="users"
+        onClick={[MockFunction]}
+      >
+        Users
+      </button>
+      <button
+        className="btn toggle-btn"
+        key="pending-invites"
+        onClick={[MockFunction]}
+      >
+        Pending Invites (
+        5
+        )
+      </button>
+    </div>
+    <div
       className="page-action-bar__spacer"
     />
-    <button
-      className="btn btn-inverse"
-      onClick={[MockFunction]}
-    >
-      Pending Invites (
-      5
-      )
-    </button>
   </div>
 </div>
 `;

public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap

@@ -9,7 +9,8 @@ exports[`Render should render component 1`] = `
     className="page-container page-body"
   >
     <Connect(UsersActionBar)
-      showInvites={[Function]}
+      onShowInvites={[Function]}
+      showInvites={false}
     />
     <UsersTable
       onRemoveUser={[Function]}