diff --git a/app/components/Icon/UserIcon.js b/app/components/Icon/UserIcon.js
new file mode 100644
index 000000000..c9341428c
--- /dev/null
+++ b/app/components/Icon/UserIcon.js
@@ -0,0 +1,12 @@
+// @flow
+import React from 'react';
+import Icon from './Icon';
+import type { Props } from './Icon';
+
+export default function UserIcon(props: Props) {
+ return (
+
+
+
+ );
+}
diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js
index 1d0767a6a..b8ab1e7c4 100644
--- a/app/components/Sidebar/Settings.js
+++ b/app/components/Sidebar/Settings.js
@@ -11,6 +11,7 @@ import Scrollable from 'components/Scrollable';
import ProfileIcon from 'components/Icon/ProfileIcon';
import SettingsIcon from 'components/Icon/SettingsIcon';
import CodeIcon from 'components/Icon/CodeIcon';
+import UserIcon from 'components/Icon/UserIcon';
import Header from './components/Header';
import SidebarLink from './components/SidebarLink';
import HeaderBlock from './components/HeaderBlock';
@@ -56,6 +57,9 @@ class Sidebar extends Component {
+ }>
+ Members
+
}
diff --git a/app/index.js b/app/index.js
index 66c04691f..d9e6b54f4 100644
--- a/app/index.js
+++ b/app/index.js
@@ -20,6 +20,7 @@ import Collection from 'scenes/Collection';
import Document from 'scenes/Document';
import Search from 'scenes/Search';
import Settings from 'scenes/Settings';
+import Members from 'scenes/Settings/Members';
import Slack from 'scenes/Settings/Slack';
import Tokens from 'scenes/Settings/Tokens';
import SlackAuth from 'scenes/SlackAuth';
@@ -65,6 +66,7 @@ render(
+
+
+ Members
+
+ {!this.props.settings.isFetching ? (
+
+ {this.props.settings.members && (
+
+ {this.props.settings.members.map(member => (
+
+
+
+
+ {member.name} {member.email && `(${member.email})`}
+ {member.isAdmin && Admin}
+
+
+
+ ))}
+
+ )}
+
+ ) : (
+
+ )}
+
+ );
+ }
+}
+
+const MemberList = styled(Flex)`
+ border: 1px solid ${color.smoke};
+ border-radius: 4px;
+
+ margin-top: 20px;
+ margin-bottom: 40px;
+`;
+
+const Member = styled(Flex)`
+ padding: 10px;
+ border-bottom: 1px solid ${color.smoke};
+ font-size: 15px;
+
+ &:last-child {
+ border-bottom: none;
+ }
+`;
+
+const UserName = styled.span`
+ padding-left: 8px;
+`;
+
+const AdminBadge = styled.span`
+ margin-left: 10px;
+ color: #777;
+ font-size: 13px;
+ text-transform: uppercase;
+ font-weight: normal;
+`;
+
+export default inject('errors', 'settings')(Members);
diff --git a/app/stores/SettingsStore.js b/app/stores/SettingsStore.js
index a59105e0d..87521d287 100644
--- a/app/stores/SettingsStore.js
+++ b/app/stores/SettingsStore.js
@@ -2,10 +2,11 @@
import { observable, action, runInAction } from 'mobx';
import invariant from 'invariant';
import { client } from 'utils/ApiClient';
-import type { ApiKey } from 'types';
+import type { ApiKey, User } from 'types';
class SettingsStore {
@observable apiKeys: ApiKey[] = [];
+ @observable members: User[] = [];
@observable isFetching: boolean = false;
@observable isSaving: boolean = false;
@@ -55,6 +56,24 @@ class SettingsStore {
console.error('Something went wrong');
}
};
+
+ @action
+ fetchMembers = async () => {
+ this.isFetching = true;
+
+ try {
+ const res = await client.post('/team.users');
+ invariant(res && res.data, 'Data should be available');
+ const { data } = res;
+
+ runInAction('fetchMembers', () => {
+ this.members = data;
+ });
+ } catch (e) {
+ console.error('Something went wrong');
+ }
+ this.isFetching = false;
+ };
}
export default SettingsStore;