From ef5180bae04248a76b2876e74fc5d2a261ec05e7 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 3 Oct 2018 13:04:31 +0200
Subject: [PATCH] fixed toggle buttons

---
 .../DataSourcesListPage.test.tsx.snap         |  2 +-
 .../PluginListPage.test.tsx.snap              |  2 +-
 .../features/users/UsersActionBar.test.tsx    |  1 +
 public/app/features/users/UsersActionBar.tsx  | 29 ++++++++++++++---
 public/app/features/users/UsersListPage.tsx   |  2 +-
 .../UsersActionBar.test.tsx.snap              | 32 ++++++++++++++-----
 .../__snapshots__/UsersListPage.test.tsx.snap |  3 +-
 7 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap b/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap
index 973b38f1ff3..3f9dbab72ab 100644
--- a/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap
+++ b/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
diff --git a/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap
index 7e837d1ec7d..43d9f45883d 100644
--- a/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap
+++ b/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
diff --git a/public/app/features/users/UsersActionBar.test.tsx b/public/app/features/users/UsersActionBar.test.tsx
index 5077147912c..7326de4d247 100644
--- a/public/app/features/users/UsersActionBar.test.tsx
+++ b/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);
diff --git a/public/app/features/users/UsersActionBar.tsx b/public/app/features/users/UsersActionBar.tsx
index b2a4c6ffebb..ac781841b75 100644
--- a/public/app/features/users/UsersActionBar.tsx
+++ b/public/app/features/users/UsersActionBar.tsx
@@ -1,5 +1,6 @@
 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" />
diff --git a/public/app/features/users/UsersListPage.tsx b/public/app/features/users/UsersListPage.tsx
index ed0a9f1ea5a..f163ede77a7 100644
--- a/public/app/features/users/UsersListPage.tsx
+++ b/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>
diff --git a/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap b/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap
index cecd2bf3f49..6b57a68a234 100644
--- a/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap
+++ b/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap
@@ -49,17 +49,33 @@ exports[`Render should render pending invites button 1`] = `
         className="gf-form-input-icon fa fa-search"
       />
     </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>
 `;
diff --git a/public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap b/public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap
index da57ea05e0c..b3432491ea2 100644
--- a/public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap
+++ b/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]}