Allow filtering of people in admin

app/components/Sidebar/Settings.js

@@ -68,7 +68,11 @@ class SettingsSidebar extends React.Component<Props> {
                   Security
                 </SidebarLink>
               )}
-              <SidebarLink to="/settings/people" icon={<UserIcon />}>
+              <SidebarLink
+                to="/settings/people"
+                icon={<UserIcon />}
+                exact={false}
+              >
                 People
               </SidebarLink>
               <SidebarLink to="/settings/shares" icon={<LinkIcon />}>

app/routes.js

@@ -47,6 +47,7 @@ export default function Routes() {
             <Route exact path="/settings/details" component={Details} />
             <Route exact path="/settings/security" component={Security} />
             <Route exact path="/settings/people" component={People} />
+            <Route exact path="/settings/people/:filter" component={People} />
             <Route exact path="/settings/shares" component={Shares} />
             <Route exact path="/settings/tokens" component={Tokens} />
             <Route

app/scenes/Settings/People.js

@@ -10,10 +10,13 @@ import PageTitle from 'components/PageTitle';
 import HelpText from 'components/HelpText';
 import UserListItem from './components/UserListItem';
 import List from 'components/List';
+import Tabs from 'components/Tabs';
+import Tab from 'components/Tab';
 
 type Props = {
   auth: AuthStore,
   users: UsersStore,
+  match: Object,
 };
 
 @observer
@@ -23,21 +26,41 @@ class People extends React.Component<Props> {
   }
 
   render() {
-    const { users, auth } = this.props;
+    const { auth, match } = this.props;
+    const { filter } = match.params;
     const currentUser = auth.user;
     invariant(currentUser, 'User should exist');
 
+    let users = this.props.users.active;
+    if (filter === 'all') {
+      users = this.props.users.data;
+    } else if (filter === 'admins') {
+      users = this.props.users.admins;
+    }
+
     return (
       <CenteredContent>
         <PageTitle title="People" />
         <h1>People</h1>
         <HelpText>
-          Everyone that has signed in to your Outline appear here. It’s possible
+          Everyone that has signed into Outline appears here. It’s possible that
-          that there are other people who have access but haven’t signed in yet.
+          there are other users who have access through Single Sign-On but
+          haven’t signed into Outline yet.
         </HelpText>
 
+        <Tabs>
+          <Tab to="/settings/people" exact>
+            Active
+          </Tab>
+          <Tab to="/settings/people/admins" exact>
+            Admins
+          </Tab>
+          <Tab to="/settings/people/all" exact>
+            Everyone
+          </Tab>
+        </Tabs>
         <List>
-          {users.data.map(user => (
+          {users.map(user => (
             <UserListItem
               key={user.id}
               user={user}

app/scenes/Settings/components/UserListItem.js

@@ -40,8 +40,9 @@ const Badge = styled.span`
   color: ${({ admin, theme }) => (admin ? theme.white : theme.text)};
   border-radius: 2px;
   font-size: 11px;
+  font-weight: 500;
   text-transform: uppercase;
-  font-weight: normal;
+  user-select: none;
 `;
 
 export default UserListItem;

app/stores/UsersStore.js

@@ -1,5 +1,5 @@
 // @flow
-import { observable, action, runInAction } from 'mobx';
+import { observable, computed, action, runInAction } from 'mobx';
 import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
 import type { User, PaginationParams } from 'types';
@@ -8,6 +8,16 @@ class UsersStore {
   @observable data: User[] = [];
   @observable isSaving: boolean = false;
 
+  @computed
+  get active(): User[] {
+    return this.data.filter(user => !user.isSuspended);
+  }
+
+  @computed
+  get admins(): User[] {
+    return this.data.filter(user => user.isAdmin);
+  }
+
   @action
   fetchPage = async (options: ?PaginationParams): Promise<*> => {
     try {