Merge pull request #514 from outline/jori/team-admin-frontend

Team members frontend

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 (
+    <Icon {...props}>
+      <path d="M12,11 C10,11 9,9.43299662 9,7.5 C9,5.56700338 9.5,4 12,4 C14.5,4 15,5.56700338 15,7.5 C15,9.43299662 14,11 12,11 Z M8.0085302,19 C6.8992496,19 6,18.1052949 6,17 C6,15 7,12 12,12 C17,12 18,15 18,17 C18,18.1045695 17.0980496,19 15.9914698,19 L8.0085302,19 Z" />
+    </Icon>
+  );
+}

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 {
             </Section>
             <Section>
               <Header>Team</Header>
+              <SidebarLink to="/settings/members" icon={<UserIcon />}>
+                Members
+              </SidebarLink>
               <SidebarLink
                 to="/settings/integrations/slack"
                 icon={<SettingsIcon />}

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(
                     <Route exact path="/dashboard" component={Dashboard} />
                     <Route exact path="/starred" component={Starred} />
                     <Route exact path="/settings" component={Settings} />
+                    <Route exact path="/settings/members" component={Members} />
                     <Route exact path="/settings/tokens" component={Tokens} />
                     <Route
                       exact

app/scenes/Settings/Members.js

@@ -0,0 +1,95 @@
+// @flow
+import React, { Component } from 'react';
+import { observable } from 'mobx';
+import { observer, inject } from 'mobx-react';
+import styled from 'styled-components';
+import Flex from 'shared/components/Flex';
+import Avatar from 'components/Avatar';
+import { color } from 'shared/styles/constants';
+
+import ErrorsStore from 'stores/ErrorsStore';
+import SettingsStore from 'stores/SettingsStore';
+import CenteredContent from 'components/CenteredContent';
+import LoadingPlaceholder from 'components/LoadingPlaceholder';
+import PageTitle from 'components/PageTitle';
+
+@observer
+class Members extends Component {
+  props: {
+    errors: ErrorsStore,
+    settings: SettingsStore,
+  };
+
+  @observable members;
+  @observable isLoaded: boolean = false;
+
+  @observable inviteEmails: string = '';
+  @observable isInviting: boolean = false;
+
+  componentDidMount() {
+    this.props.settings.fetchMembers();
+  }
+
+  render() {
+    return (
+      <CenteredContent>
+        <PageTitle title="Members" />
+        <h1>Members</h1>
+
+        {!this.props.settings.isFetching ? (
+          <Flex column>
+            {this.props.settings.members && (
+              <MemberList>
+                {this.props.settings.members.map(member => (
+                  <Member auto justify="space-between">
+                    <Flex>
+                      <Avatar src={member.avatarUrl} />
+                      <UserName>
+                        {member.name} {member.email && `(${member.email})`}
+                        {member.isAdmin && <AdminBadge>Admin</AdminBadge>}
+                      </UserName>
+                    </Flex>
+                  </Member>
+                ))}
+              </MemberList>
+            )}
+          </Flex>
+        ) : (
+          <LoadingPlaceholder />
+        )}
+      </CenteredContent>
+    );
+  }
+}
+
+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);

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;