diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js index 2ed60a8d..3f1c7ffa 100644 --- a/app/components/Sidebar/Settings.js +++ b/app/components/Sidebar/Settings.js @@ -68,7 +68,11 @@ class SettingsSidebar extends React.Component { Security )} - }> + } + exact={false} + > People }> diff --git a/app/routes.js b/app/routes.js index 4942984e..5b21ab77 100644 --- a/app/routes.js +++ b/app/routes.js @@ -47,6 +47,7 @@ export default function Routes() { + { } 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 (

People

- Everyone that has signed in to your Outline appear here. It’s possible - that there are other people who have access but haven’t signed in yet. + Everyone that has signed into Outline appears here. It’s possible that + there are other users who have access through Single Sign-On but + haven’t signed into Outline yet. + + + Active + + + Admins + + + Everyone + + - {users.data.map(user => ( + {users.map(user => ( (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; diff --git a/app/stores/UsersStore.js b/app/stores/UsersStore.js index 5b4945dd..a6b96bcb 100644 --- a/app/stores/UsersStore.js +++ b/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 {